Merge branch 'mhmfajar-dev' into mhmfajar

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

@@ -16,9 +16,16 @@ import { FormProvider, RHFTextField } from '../../../components/hook-form';
 
 type FormValuesProps = {
   email: string;
+  afterSubmit?: string;
 };
 
-export default function LoginForm() {
+interface Props {
+  formPhone: boolean;
+}
+
+// ----------------------------------------------------------------------
+
+export default function LoginForm({ formPhone }: Props) {
   const { login } = useAuth();
   const navigate = useNavigate();
 
@@ -28,8 +35,13 @@ export default function LoginForm() {
     email: Yup.string().email('Email must be a valid email address').required('Email is required'),
   });
 
+  const defaultValues = {
+    email: '',
+  };
+
   const methods = useForm<FormValuesProps>({
     resolver: yupResolver(LoginSchema),
+    defaultValues,
   });
 
   const {
@@ -43,10 +55,8 @@ export default function LoginForm() {
     try {
       await login(data.email);
 
-      navigate('/dashboard');
-    } catch (error) {
-      console.error(error);
-
+      navigate('/auth/verify-code', { state: { phoneOrEmail: data.email, formPhone } });
+    } catch (error: any) {
       reset();
 
       if (isMountedRef.current) {

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

@@ -1,7 +1,5 @@
 import * as Yup from 'yup';
-import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from '../../../utils/axios';
 // form
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -10,6 +8,7 @@ import { Stack, Alert, InputAdornment } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // components
 import { FormProvider, RHFTextField } from '../../../components/hook-form';
+import useAuth from '../../../hooks/useAuth';
 
 // ----------------------------------------------------------------------
 
@@ -18,7 +17,12 @@ type FormValuesProps = {
   afterSubmit?: string;
 };
 
-export default function LoginPhoneForm() {
+interface Props {
+  formPhone: boolean;
+}
+
+export default function LoginPhoneForm({ formPhone }: Props) {
+  const { login } = useAuth();
   const navigate = useNavigate();
 
   const LoginSchema = Yup.object().shape({
@@ -43,8 +47,8 @@ export default function LoginPhoneForm() {
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
-      await axios.post('/otp-request', { phone_or_email: 0 + data.phone });
-      navigate('/auth/otp-validation', { state: { phone_or_email: 0 + data.phone } });
+      await login(0 + data.phone);
+      navigate('/auth/verify-code', { state: { phoneOrEmail: 0 + data.phone, formPhone } });
     } catch (error: any) {
       reset();
       setError('afterSubmit', { ...error, message: error.response.data.message });

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

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

frontend/client-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx

@@ -7,6 +7,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 // @mui
 import { OutlinedInput, Stack } from '@mui/material';
+import useAuth from '../../../hooks/useAuth';
 // routes
 // import { PATH_DASHBOARD } from '../../../routes/paths';
 
@@ -19,13 +20,17 @@ type FormValuesProps = {
   code4: string;
 };
 
+type Props = {
+  phoneOrEmail: string;
+};
+
 type ValueNames = 'code1' | 'code2' | 'code3' | 'code4';
 
-export default function VerifyCodeForm() {
+export default function VerifyCodeForm({ phoneOrEmail }: Props) {
   const navigate = useNavigate();
   const location = useLocation();
+  const { validateOtp } = useAuth();
   const { enqueueSnackbar } = useSnackbar();
-
   const { phone_or_email } = location.state;
 
   const VerifyCodeSchema = Yup.object().shape({
@@ -64,12 +69,10 @@ export default function VerifyCodeForm() {
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      console.log('code:', Object.values(data).join(''));
-
-      enqueueSnackbar('Verify success!');
-
-      // navigate('/dashboard', { replace: true });
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      await validateOtp(phoneOrEmail, Object.values(data).join(''));
+      navigate('/dashboard');
+      enqueueSnackbar('Verify success!', { variant: 'success' });
     } catch (error) {
       console.error(error);
     }
@@ -111,7 +114,7 @@ export default function VerifyCodeForm() {
 
   return (
     <form onChange={handleSubmit(onSubmit)}>
-      <Stack direction="row" spacing={2} justifyContent="center">
+      <Stack direction="row" spacing={2} justifyContent="space-evenly">
         {Object.keys(values).map((name, index) => (
           <Controller
             key={name}
@@ -122,7 +125,7 @@ export default function VerifyCodeForm() {
                 {...field}
                 id="field-code"
                 autoFocus={index === 0}
-                placeholder="-"
+                placeholder=""
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                   handleChangeWithNextField(event, field.onChange)
                 }