feat: verify account

Author: hi02102002

client/src/apis/auth.ts

@@ -1,7 +1,7 @@
 import { ENDPOINTS } from '@/constants'
 import http_client from '@/lib/http-client'
-import { TForgotPass } from '@/lib/schema/forgot-pass'
 import { TLogin } from '@/lib/schema/login'
+import { TForgotPass } from '@/lib/schema/mail'
 import { TRegister } from '@/lib/schema/register'
 import { TSetPass } from '@/lib/schema/set-pass'
 import { TBaseResponse, TToken } from '@/types/share'
@@ -45,6 +45,13 @@ class Auth {
   logout(): Promise<TBaseResponse<null>> {
     return http_client.post(ENDPOINTS.AUTH.LOGOUT)
   }
+
+  requestVerifyAccount(email: string): Promise<TBaseResponse<null>> {
+    return http_client.post(ENDPOINTS.AUTH.REQUEST_VERIFY_ACCOUNT, { email })
+  }
+  verifyAccount(token: string): Promise<TBaseResponse<null>> {
+    return http_client.post(ENDPOINTS.AUTH.VERIFY_ACCOUNT, { token })
+  }
 }
 
 export const auth = new Auth()

client/src/components/forms/index.tsx

@@ -1,8 +1,8 @@
 export * from './card'
 export * from './change-pass'
-export * from './forgot-pass'
 export * from './general-setting'
 export * from './login'
+export * from './mail'
 export * from './register'
 export * from './set-pass'
 export * from './setting-mail'

client/src/components/forms/forgot-pass.tsx renamed to client/src/components/forms/mail.tsx

@@ -1,10 +1,9 @@
 import { useErrorsLngChange } from '@/hooks/use-errors-lng-change'
-import { TForgotPass, useForgotPassSchema } from '@/lib/schema/forgot-pass'
+import { TEmail, useMailSchema } from '@/lib/schema/mail'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import {
-  Button,
   Form,
   FormControl,
   FormField,
@@ -15,29 +14,39 @@ import {
 } from '../ui'
 
 type Props = {
-  loading?: boolean
-  onSubmit?: (data: TForgotPass) => void
+  onSubmit?: (data: TEmail) => void
+  id?: string
+  defaultValues?: TEmail
 }
 
-export const ForgotPassForm = ({ loading, onSubmit }: Props) => {
+export const MailForm = ({
+  onSubmit,
+  id = 'mail-form',
+  defaultValues,
+}: Props) => {
   const { t } = useTranslation(['set_pass', 'forms'])
 
-  const schema = useForgotPassSchema()
+  const schema = useMailSchema()
 
-  const form = useForm<TForgotPass>({
+  const form = useForm<TEmail>({
     resolver: zodResolver(schema),
     mode: 'onChange',
+    defaultValues,
   })
 
-  const handleSubmit = (data: TForgotPass) => {
+  const handleSubmit = (data: TEmail) => {
     onSubmit?.(data)
   }
 
   useErrorsLngChange(form)
 
   return (
     <Form {...form}>
-      <form className='space-y-3' onSubmit={form.handleSubmit(handleSubmit)}>
+      <form
+        className='space-y-3'
+        onSubmit={form.handleSubmit(handleSubmit)}
+        id={id}
+      >
         <FormField
           control={form.control}
           name='email'
@@ -62,14 +71,9 @@ export const ForgotPassForm = ({ loading, onSubmit }: Props) => {
             )
           }}
         />
-        <Button className='w-full' type='submit' loading={loading}>
-          {t('btn_submit', {
-            ns: 'set_pass',
-          })}
-        </Button>
       </form>
     </Form>
   )
 }
 
-export default ForgotPassForm
+export default MailForm

client/src/constants/index.ts

@@ -12,6 +12,8 @@ export const ENDPOINTS = {
     RESET_PASSWORD: '/auth/reset-password',
     WITH_ID_TOKEN: '/auth/with-id-token',
     LOGOUT: '/auth/logout',
+    VERIFY_ACCOUNT: '/auth/verify-account',
+    REQUEST_VERIFY_ACCOUNT: '/auth/request-verify-account',
   },
   UPLOAD: {
     SINGLE: '/upload/single',
@@ -53,6 +55,8 @@ export const ROUTES = {
     REGISTER: '/register',
     FORGOT_PASS: '/forgot-password',
     RESET_PASS: '/set-password',
+    REQUEST_VERIFY_ACCOUNT: '/request-verify-account',
+    VERIFY_ACCOUNT: '/verify-account',
   },
   PUBLIC: {
     LANDING_PAGE: '/',

client/src/hooks/auth/index.ts

@@ -4,4 +4,5 @@ export * from './use-login-with-id-token'
 export * from './use-login-with-provider'
 export * from './use-logout'
 export * from './use-register'
+export * from './use-req-verify-account'
 export * from './use-set-pass'

client/src/hooks/auth/use-forgot-pass.ts

@@ -1,13 +1,13 @@
 import { auth } from '@/apis/auth'
-import { TForgotPass } from '@/lib/schema/forgot-pass'
+import { TEmail } from '@/lib/schema/mail'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 
 export const useForgotPass = () => {
   const { t } = useTranslation('common')
   return useMutation({
-    mutationFn: (data: TForgotPass) => {
+    mutationFn: (data: TEmail) => {
       return auth.forgotPassword(data)
     },
     onSuccess(data) {

client/src/hooks/auth/use-login.ts

@@ -2,12 +2,13 @@ import { auth } from '@/apis/auth'
 import { TLogin } from '@/lib/schema/login'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { toast } from 'sonner'
 
 export const useLogin = () => {
   const { t } = useTranslation('common')
   const [search] = useSearchParams()
+  const navigate = useNavigate()
   return useMutation({
     mutationFn: (data: TLogin) => {
       return auth.login(data)
@@ -18,6 +19,10 @@ export const useLogin = () => {
     onError(err: any) {
       console.log(err)
       toast.error(err?.response?.data?.message || t('api_error'))
+
+      if (err?.response?.data?.errorKey === 'EMAIL_NOT_VERIFIED') {
+        navigate('/request-verify-account')
+      }
     },
   })
 }

client/src/hooks/auth/use-register.ts

@@ -1,4 +1,5 @@
 import { auth } from '@/apis/auth'
+import { ROUTES } from '@/constants'
 import { TRegister } from '@/lib/schema/register'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -12,9 +13,11 @@ export const useRegister = () => {
     mutationFn: (data: TRegister) => {
       return auth.register(data)
     },
-    onSuccess(data) {
+    onSuccess(data, variables) {
       toast.success(data.message)
-      navigate('/login')
+      navigate(
+        `${ROUTES.AUTH.REQUEST_VERIFY_ACCOUNT}?send=true&email=${variables.email}`,
+      )
     },
     onError(err: any) {
       toast.error(err?.response?.data?.message || t('api_error'))

client/src/hooks/auth/use-req-verify-account.ts

@@ -0,0 +1,20 @@
+import { auth } from '@/apis/auth'
+import { TEmail } from '@/lib/schema/mail'
+import { useMutation } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+
+export const useRequestVerifyAccount = () => {
+  const { t } = useTranslation('common')
+  return useMutation({
+    mutationFn: (data: TEmail) => {
+      return auth.requestVerifyAccount(data.email)
+    },
+    onSuccess(data) {
+      toast.success(data.message)
+    },
+    onError(err: any) {
+      toast.error(err?.response?.data?.message || t('api_error'))
+    },
+  })
+}

client/src/hooks/auth/use-verify-account.ts

@@ -0,0 +1,17 @@
+import { auth } from '@/apis/auth'
+import { useQuery } from '@tanstack/react-query'
+import { useSearchParams } from 'react-router-dom'
+
+export const useVerifyAccount = () => {
+  const [searchParams] = useSearchParams()
+  return useQuery({
+    queryKey: [
+      'verify-account',
+      searchParams.get('token'),
+      new Date().getTime(),
+    ],
+    queryFn: () => {
+      return auth.verifyAccount(searchParams.get('token') || '')
+    },
+  })
+}