Merge pull request #16 from ccwukong/forgot-password

feat. customer account Forgot password

Author: Mhlpereira

README.md

@@ -200,6 +200,7 @@ DB_USER=root
 DB_PASS=<database user password>
 DB_NAME=<database name>
 JWT_TOKEN_SECRET=<a long random string that is used to sign JWT auth token>
+PASSWORD_LINK_JWT_TOKEN_SECRET=<a long random string that is used to sign JWT token for password reset>
 SESSION_COOKIE_SECRET=<a long random string that is used to sign cookie message>
 ```
 

app/contexts/tests/customerContext.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { useContext } from 'react'
-import { DatabaseRecordStatus } from '~/types'
+import { DatabaseRecordStatus, Role } from '~/types'
 import CustomerContext from '../customerContext'
 
 describe('CustomerContext', () => {
@@ -32,6 +32,7 @@ describe('CustomerContext', () => {
             avatar: 'https//',
             createdOn: 1,
             updatedOn: null,
+            role: Role.Customer,
             status: DatabaseRecordStatus.Active,
           },
           storeSettings: {

app/models.ts

@@ -134,9 +134,6 @@ export class Installer {
       phone: '',
       avatar: '',
       role: Role.Admin,
-      createdOn,
-      updatedOn: null,
-      status: DatabaseRecordStatus.Active,
     }
   }
 }
@@ -174,9 +171,6 @@ export class AdminAuthtication {
       lastName: userData.lastName,
       avatar: userData.avatar,
       role: userData.role,
-      createdOn: userData.createdOn,
-      updatedOn: userData.updatedOn,
-      status: userData.status,
     }
   }
 
@@ -303,9 +297,7 @@ export class CustomerAuthentication {
       firstName: userData.firstName,
       lastName: userData.lastName,
       avatar: userData.avatar,
-      createdOn: userData.createdOn,
-      updatedOn: userData.updatedOn,
-      status: userData.status,
+      role: Role.Customer,
     }
   }
 
@@ -350,6 +342,49 @@ export class CustomerAuthentication {
         ),
       )
   }
+
+  public static async resetPassword({
+    email,
+    newPwd,
+  }: {
+    email: string
+    newPwd: string
+  }): Promise<void> {
+    const newSalt = makeStr(8)
+
+    await db
+      .update(customer)
+      .set({ password: md5(newPwd + newSalt), salt: newSalt })
+      .where(
+        and(
+          eq(customer.email, email),
+          eq(customer.status, DatabaseRecordStatus.Active),
+        ),
+      )
+  }
+
+  public static async getCustommerNameByEmailIfRegistered(
+    email: string,
+  ): Promise<{ [key: string]: string } | null> {
+    const res = await db
+      .select()
+      .from(customer)
+      .where(
+        and(
+          eq(customer.email, email),
+          eq(customer.status, DatabaseRecordStatus.Active),
+        ),
+      )
+
+    if (res.length) {
+      return {
+        firstName: res[0].firstName,
+        lastName: res[0].lastName,
+      }
+    } else {
+      return null
+    }
+  }
 }
 
 export class UserModel implements CRUDModel<UserPublicInfo> {
@@ -395,7 +430,7 @@ export class UserModel implements CRUDModel<UserPublicInfo> {
       .where(
         and(
           eq(user.id, id as string),
-          ne(user.status, DatabaseRecordStatus.Deleted),
+          ne(user.status, DatabaseRecordStatus.Deleted), // customer account could be disabled temporarily
         ),
       )
 
@@ -528,6 +563,7 @@ export class CustomerModel implements CRUDModel<UserPublicInfo> {
       firstName: res[0].firstName,
       lastName: res[0].lastName,
       avatar: res[0].avatar,
+      role: Role.Customer,
       createdOn: res[0].createdOn,
       updatedOn: res[0].updatedOn,
       status: res[0].status,
@@ -553,6 +589,7 @@ export class CustomerModel implements CRUDModel<UserPublicInfo> {
         firstName: item.firstName,
         lastName: item.lastName,
         avatar: item.avatar,
+        role: Role.Customer,
         createdOn: item.createdOn,
         updatedOn: item.updatedOn,
         status: item.status,
@@ -1039,6 +1076,7 @@ export class StoreConfig {
     const data = await db
       .select({
         name: emailTemplate.name,
+        subject: emailTemplate.subject,
         content: emailTemplate.content,
       })
       .from(emailTemplate)
@@ -1053,6 +1091,7 @@ export class StoreConfig {
     const data = await db
       .select({
         name: emailTemplate.name,
+        subject: emailTemplate.subject,
         content: emailTemplate.content,
       })
       .from(emailTemplate)
@@ -1067,10 +1106,12 @@ export class StoreConfig {
 
   public static async createEmailTemplate(data: {
     name: string
+    subject: string
     content: string
   }): Promise<string> {
     const result = await db.insert(emailTemplate).values({
       name: data.name,
+      subject: data.subject,
       content: data.content,
       status: DatabaseRecordStatus.Active,
     })
@@ -1084,11 +1125,13 @@ export class StoreConfig {
 
   public static async updateEmailTemplateByName(data: {
     name: string
+    subject: string
     content: string
   }): Promise<void> {
     await db
       .update(emailTemplate)
       .set({
+        subject: data.subject,
         content: data.content,
       })
       .where(eq(emailTemplate.name, data.name))
@@ -1271,6 +1314,7 @@ export class OrderModel implements CRUDModel<OrderItem> {
   }
 
   async findMany(page: number, size: number): Promise<OrderItem[]> {
+    console.log(page, size)
     return []
   }
 

app/routes/account._index.tsx

@@ -17,10 +17,16 @@ import {
 import { decode, encode, isValid } from '~/utils/jwt'
 import * as mocks from '~/utils/mocks'
 
-export const meta: MetaFunction = () => {
+export const meta: MetaFunction = ({ data }) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useTranslation()
-  return [{ title: t('system.account_dashboard') }]
+  return [
+    {
+      title: `${data?.data?.storeSettings.name} - ${t(
+        'system.account_dashboard',
+      )}`,
+    },
+  ]
 }
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {

app/routes/account.settings.tsx

@@ -26,10 +26,16 @@ import {
 } from '~/utils/exception'
 import { decode, isValid } from '~/utils/jwt'
 
-export const meta: MetaFunction = () => {
+export const meta: MetaFunction = ({ data }) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useTranslation()
-  return [{ title: t('system.account_dashboard_settings') }]
+  return [
+    {
+      title: `${data?.data?.storeSettings.name} - ${t(
+        'system.account_dashboard_settings',
+      )}`,
+    },
+  ]
 }
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {

app/routes/admin.settings.tsx

@@ -301,11 +301,13 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       } else if (body.get('intent') === 'create-email-template') {
         await StoreConfig.createEmailTemplate({
           name: String(body.get('name')),
+          subject: String(body.get('subject')),
           content: String(body.get('content')),
         })
       } else if (body.get('intent') === 'update-email-template') {
         await StoreConfig.updateEmailTemplateByName({
           name: String(body.get('name')),
+          subject: String(body.get('subject')),
           content: String(body.get('content')),
         })
         return json({ error: null, data: {} }) //for modal dismissal

app/routes/cart.tsx

@@ -21,10 +21,10 @@ import {
 import { decode, isValid } from '~/utils/jwt'
 import * as mocks from '~/utils/mocks'
 
-export const meta: MetaFunction = () => {
+export const meta: MetaFunction = ({ data }) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useTranslation()
-  return [{ title: t('system.cart') }]
+  return [{ title: `${data?.data?.storeSettings.name} - ${t('system.cart')}` }]
 }
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {

app/routes/categories.$slug.tsx

@@ -7,7 +7,7 @@ import {
 import { useLoaderData } from '@remix-run/react'
 import { Suspense } from 'react'
 import StoreContext from '~/contexts/storeContext'
-import { Installer, ProductModel, StoreConfig } from '~/models'
+import { Installer, StoreConfig } from '~/models'
 import Skeleton from '~/themes/default/components/ui/storefront/Skeleton'
 import CategoryProductList from '~/themes/default/pages/storefront/CategoryProductList'
 import { CategoryItem, FatalErrorTypes, ProductPublicInfo } from '~/types'
@@ -34,7 +34,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     if (!(await Installer.isInstalled())) {
       throw new StoreNotInstalledError()
     }
-    const model = new ProductModel()
+
     return json({
       error: null,
       data: {

app/routes/forgot-password.tsx

@@ -0,0 +1,111 @@
+import type { ActionFunctionArgs, MetaFunction } from '@remix-run/node'
+import { json, redirect } from '@remix-run/node'
+import { Suspense } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CustomerAuthentication, Installer, StoreConfig } from '~/models'
+import Skeleton from '~/themes/default/components/ui/storefront/Skeleton'
+import ForgotPassword from '~/themes/default/pages/account/ForgotPassword'
+import { EmailTemplate, ExternalApiType, FatalErrorTypes } from '~/types'
+import sendEmail from '~/utils/email'
+import {
+  JWTTokenSecretNotFoundException,
+  StoreNotInstalledError,
+} from '~/utils/exception'
+import { encode } from '~/utils/jwt'
+
+export const meta: MetaFunction = ({ data }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { t } = useTranslation()
+  return [
+    {
+      title: `${data?.data?.storeSettings.name} - ${t(
+        'system.forgot_password',
+      )}`,
+    },
+  ]
+}
+
+export const loader = async () => {
+  try {
+    if (!(await Installer.isInstalled())) {
+      throw new StoreNotInstalledError()
+    }
+
+    if (!process.env.JWT_TOKEN_SECRET) {
+      throw new JWTTokenSecretNotFoundException()
+    }
+
+    return json({
+      error: null,
+      data: { storeSettings: await StoreConfig.getStoreInfo() },
+    })
+  } catch (e) {
+    if (e instanceof StoreNotInstalledError) {
+      return redirect('/install')
+    } else if (e instanceof JWTTokenSecretNotFoundException) {
+      // TODO: handle this seperately
+    } else if (e?.code === FatalErrorTypes.DatabaseConnection) {
+      return redirect('/error')
+    }
+
+    return json({ error: e, data: null })
+  }
+}
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  try {
+    const body = await request.formData()
+    const result =
+      await CustomerAuthentication.getCustommerNameByEmailIfRegistered(
+        String(body.get('email')),
+      )
+
+    if (result) {
+      const token = await encode(
+        '1h',
+        { email: String(body.get('email')) },
+        process.env.PASSWORD_LINK_JWT_TOKEN_SECRET!,
+      )
+
+      //TODO: when installing store, insert this email template by default and make the template name uneditable
+      const emailTemplate = await StoreConfig.getEmailTemplateByName(
+        EmailTemplate.ForgotPassword,
+      )
+      const storeInfo = await StoreConfig.getStoreInfo()
+      const emailApi = storeInfo.other?.apis[ExternalApiType.Email]
+
+      sendEmail({
+        endpoint: emailApi!.endpoint as string,
+        apiToken: emailApi!.token as string,
+        subject: emailTemplate.subject,
+        body: emailTemplate.content
+          .replace('{{name}}', `${result.firstName} ${result.lastName}`)
+          .replace(
+            '{{link}}',
+            `<a href="${
+              request.url.replace('forgot-', 'reset-') + '?t=' + token
+            }">${request.url.replace('forgot-', 'reset-') + '?t=' + token}</a>`,
+          ),
+        from: storeInfo.email,
+        sender: storeInfo.name,
+        to: String(body.get('email')),
+      })
+    }
+
+    return json({ error: null, data: {} })
+  } catch (e) {
+    console.error(e) // TODO: replace this with a proper logger
+    if (e?.code === FatalErrorTypes.DatabaseConnection) {
+      return redirect('/error')
+    }
+    return json({ error: e, data: null })
+  }
+}
+
+export default function Index() {
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <ForgotPassword />
+    </Suspense>
+  )
+}