fix login & verify code

frontend/client-portal/src/sections/auth/login/LoginEmailForm.tsx

@@ -1,34 +1,33 @@
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
-import { useNavigate } from 'react-router-dom';
-// form
+/* ---------------------------------- form ---------------------------------- */
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { Stack, Alert } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-// hooks
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
 import useIsMountedRef from '../../../hooks/useIsMountedRef';
-// components
+/* ------------------------------- components ------------------------------- */
 import { FormProvider, RHFTextField } from '../../../components/hook-form';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type LoginFormProps = {
+  setEmailOrPhone: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   email: string;
   afterSubmit?: string;
 };
 
-interface Props {
-  formPhone: boolean;
-}
+/* -------------------------------------------------------------------------- */
 
-// ----------------------------------------------------------------------
-
-export default function LoginForm({ formPhone }: Props) {
+export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
   const { login } = useAuth();
-  const navigate = useNavigate();
-
   const isMountedRef = useIsMountedRef();
 
   const LoginSchema = Yup.object().shape({
@@ -54,8 +53,9 @@ export default function LoginForm({ formPhone }: Props) {
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await login(data.email);
-
-      navigate('/auth/verify-code', { state: { phoneOrEmail: data.email, formPhone } });
+      setEmailOrPhone(data.email);
+      setLoginOrVerifyCode(true);
+      reset();
     } catch (error: any) {
       reset();
 

frontend/client-portal/src/sections/auth/login/LoginPhoneForm.tsx

@@ -1,29 +1,34 @@
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
-import { useNavigate } from 'react-router-dom';
-// form
+/* ---------------------------------- form ---------------------------------- */
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { Stack, Alert, InputAdornment } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-// components
+/* ------------------------------- components ------------------------------- */
 import { FormProvider, RHFTextField } from '../../../components/hook-form';
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
+import useIsMountedRef from '../../../hooks/useIsMountedRef';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type LoginFormProps = {
+  setEmailOrPhone: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   phone: string;
   afterSubmit?: string;
 };
 
-interface Props {
-  formPhone: boolean;
-}
+/* -------------------------------------------------------------------------- */
 
-export default function LoginPhoneForm({ formPhone }: Props) {
+export default function LoginPhoneForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
   const { login } = useAuth();
-  const navigate = useNavigate();
+  const isMountedRef = useIsMountedRef();
 
   const LoginSchema = Yup.object().shape({
     phone: Yup.string().required('Phone is required'),
@@ -48,10 +53,15 @@ export default function LoginPhoneForm({ formPhone }: Props) {
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await login(0 + data.phone);
-      navigate('/auth/verify-code', { state: { phoneOrEmail: 0 + data.phone, formPhone } });
+      setEmailOrPhone(0 + data.phone);
+      setLoginOrVerifyCode(true);
+      reset();
     } catch (error: any) {
       reset();
-      setError('afterSubmit', { ...error, message: error.response.data.message });
+
+      if (isMountedRef.current) {
+        setError('afterSubmit', { ...error, message: error.data.message });
+      }
     }
   };
 

frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx

@@ -1,17 +1,25 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import { OutlinedInput, Stack } from '@mui/material';
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
+/* -------------------------------- snackbar -------------------------------- */
 import { useSnackbar } from 'notistack';
-import { useNavigate, useLocation } from 'react-router-dom';
+/* ---------------------------------- react --------------------------------- */
+import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
-// form
+/* ---------------------------------- form ---------------------------------- */
 import { useForm, Controller } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
-import { OutlinedInput, Stack } from '@mui/material';
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
-// routes
-// import { PATH_DASHBOARD } from '../../../routes/paths';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type VerifyCodeFormProps = {
+  emailOrPhone: string;
+  setEmailOrPhoneForm: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   code1: string;
@@ -20,18 +28,25 @@ type FormValuesProps = {
   code4: string;
 };
 
-type Props = {
-  phoneOrEmail: string;
-};
-
 type ValueNames = 'code1' | 'code2' | 'code3' | 'code4';
 
-export default function VerifyCodeForm({ phoneOrEmail }: Props) {
+type responseProps = {
+  status: string;
+  statusCode: number;
+  data: [];
+  message: string;
+};
+
+/* -------------------------------------------------------------------------- */
+
+export default function VerifyCodeForm({
+  emailOrPhone,
+  setEmailOrPhoneForm,
+  setLoginOrVerifyCode,
+}: VerifyCodeFormProps) {
   const navigate = useNavigate();
-  const location = useLocation();
   const { validateOtp } = useAuth();
   const { enqueueSnackbar } = useSnackbar();
-  const { phone_or_email } = location.state;
 
   const VerifyCodeSchema = Yup.object().shape({
     code1: Yup.string().required('Code is required'),
@@ -47,13 +62,7 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
     code4: '',
   };
 
-  const {
-    watch,
-    control,
-    setValue,
-    handleSubmit,
-    formState: { isSubmitting, isValid },
-  } = useForm({
+  const { watch, control, setValue, handleSubmit } = useForm({
     mode: 'onBlur',
     resolver: yupResolver(VerifyCodeSchema),
     defaultValues,
@@ -62,15 +71,35 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
   const values = watch();
 
   useEffect(() => {
-    console.log('phone number : ' + phone_or_email);
+    const handlePasteClipboard = (event: ClipboardEvent) => {
+      let data: string | string[] = event?.clipboardData?.getData('Text') || '';
+
+      data = data.split('');
+
+      [].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
+        node.value = data[index];
+        const fieldIndex = `code${index + 1}`;
+        setValue(fieldIndex as ValueNames, data[index]);
+      });
+    };
+
     document.addEventListener('paste', handlePasteClipboard);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [setValue]);
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await new Promise((resolve) => setTimeout(resolve, 1000));
-      await validateOtp(phoneOrEmail, Object.values(data).join(''));
+      // @ts-ignore
+      const response: responseProps = await validateOtp(emailOrPhone, Object.values(data).join(''));
+
+      if (response.data.length === 0) {
+        return enqueueSnackbar(response.message, {
+          variant: 'error',
+          autoHideDuration: 4000,
+          preventDuplicate: true,
+        });
+      }
+
       navigate('/dashboard');
       enqueueSnackbar('Verify success!', { variant: 'success' });
     } catch (error) {
@@ -78,18 +107,6 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
     }
   };
 
-  const handlePasteClipboard = (event: ClipboardEvent) => {
-    let data: string | string[] = event?.clipboardData?.getData('Text') || '';
-
-    data = data.split('');
-
-    [].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
-      node.value = data[index];
-      const fieldIndex = `code${index + 1}`;
-      setValue(fieldIndex as ValueNames, data[index]);
-    });
-  };
-
   const handleChangeWithNextField = (
     event: React.ChangeEvent<HTMLInputElement>,
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void

frontend/client-portal/src/sections/auth/login/index.ts

@@ -1,2 +1,3 @@
 export { default as LoginEmailForm } from './LoginEmailForm';
-export { default as LoginPhoneForm } from './LoginPhoneForm';
+export { default as LoginPhoneForm } from './LoginPhoneForm';
+export { default as VerifyCodeForm } from './VerifyCodeForm';

frontend/client-portal/src/sections/auth/verify-code/index.ts

@@ -1 +0,0 @@
-export { default as VerifyCodeForm } from './VerifyCodeForm';