verify code/otp

frontend/client-portal/src/contexts/LaravelAuthContext.tsx

@@ -132,7 +132,7 @@ function AuthProvider({ children }: AuthProviderProps) {
 
   const validateOtp = async (phoneOrEmail: string, otp: string) =>
     axios
-      .post('/verify-code', { otp })
+      .post('/verify-code', { phoneOrEmail: phoneOrEmail, otp })
       .then((response) => {
         const { user, token } = response.data.data;
         setSession(token);

frontend/client-portal/src/pages/auth/Login.tsx

@@ -42,10 +42,10 @@ export default function Login() {
   };
 
   useEffect(() => {
-    // if (state !== null) {
-    //   setFormPhone(state.formPhone);
-    // }
-    // console.log(state);
+    if (state !== null) {
+      setFormPhone(state.formPhone);
+    }
+    console.log(state);
   }, [state]);
 
   return (

frontend/client-portal/src/pages/auth/VerifyCode.tsx

@@ -1,4 +1,4 @@
-import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 // @mui
 import { styled } from '@mui/material/styles';
 import { Box, Card, Divider, IconButton, Grid, Link, Stack, Typography } from '@mui/material';
@@ -50,7 +50,7 @@ export default function VerifyCode() {
             <Grid item xs={6}>
               <Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
             </Grid>
-            <Grid item xs={6} sx={{ padding: 3 }}>
+            <Grid item xs={6} sx={{ padding: 3, textAlign: 'center' }}>
               <Stack direction="column" sx={{ mb: 5 }}>
                 <Stack direction="row" alignItems="center">
                   <IconButton
@@ -68,36 +68,35 @@ export default function VerifyCode() {
                   </Typography>
                 </Stack>
                 <Box sx={{ flexGrow: 1 }}>
-                  <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                  <Typography variant="body1" sx={{ color: 'text.secondary', textAlign: 'left' }}>
                     Masukkan kode OTP anda disini
                   </Typography>
                 </Box>
               </Stack>
 
-              <VerifyCodeForm />
+              <VerifyCodeForm phoneOrEmail={state.phoneOrEmail} />
+
+              <Typography sx={{ marginTop: 5 }}>Tidak mendapatkan kode?</Typography>
+              <Link sx={{ marginTop: 1 }}>Kirim Ulang Kode OTP</Link>
 
               <Divider sx={{ marginTop: 5 }}>Atau</Divider>
 
               <Stack sx={{ marginTop: 5 }}>
-                {state.formPhone === false ? (
+                {state.formPhone ? (
                   <Link
                     align="center"
                     underline="hover"
-                    onClick={() =>
-                      navigate('/auth/login', { state: { formPhone: state.formPhone } })
-                    }
+                    onClick={() => navigate('/auth/login', { state: { formPhone: false } })}
                   >
-                    Masuk menggunakan nomor handphone
+                    Masuk menggunakan email
                   </Link>
                 ) : (
                   <Link
                     align="center"
                     underline="hover"
-                    onClick={() =>
-                      navigate('/auth/login', { state: { formPhone: state.formPhone } })
-                    }
+                    onClick={() => navigate('/auth/login', { state: { formPhone: true } })}
                   >
-                    Masuk menggunakan email
+                    Masuk menggunakan nomor handphone
                   </Link>
                 )}
               </Stack>

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

@@ -7,7 +7,6 @@ import { useForm, Controller } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 // @mui
 import { OutlinedInput, Stack } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
 import useAuth from '../../../hooks/useAuth';
 // routes
 // import { PATH_DASHBOARD } from '../../../routes/paths';
@@ -21,9 +20,13 @@ type FormValuesProps = {
   code4: string;
 };
 
+type Props = {
+  phoneOrEmail: string;
+};
+
 type ValueNames = 'code1' | 'code2' | 'code3' | 'code4';
 
-export default function VerifyCodeForm({ phoneOrEmail }: any) {
+export default function VerifyCodeForm({ phoneOrEmail }: Props) {
   const navigate = useNavigate();
   const { validateOtp } = useAuth();