Update

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

@@ -9,7 +9,10 @@ import Iconify from '../../components/Iconify';
 import useLocalStorage from '../../hooks/useLocalStorage';
 /* -------------------------------- sections -------------------------------- */
 import { LoginEmailForm, LoginPhoneForm, VerifyCodeForm } from '../../sections/auth/login';
+import React, { useState, useEffect } from 'react';
+import axios from '../../utils/axios';
 
+import { enqueueSnackbar } from 'notistack';
 /* --------------------------------- styled --------------------------------- */
 
 const RootStyle = styled('div')(({ theme }) => ({
@@ -36,6 +39,46 @@ export default function Login() {
   const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
   const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
 
+  const [lastSentTime, setLastSentTime] = useState(null);
+  const [canSendOTP, setCanSendOTP] = useState(true);
+
+  useEffect(() => {
+    let timer;
+    if (lastSentTime) {
+      timer = setInterval(() => {
+        const timeDiff = Math.floor((new Date() - lastSentTime) / 1000);
+        if (timeDiff >= 60) {
+          setCanSendOTP(true);
+          clearInterval(timer);
+        }
+      }, 1000);
+    }
+
+    return () => clearInterval(timer);
+  }, [lastSentTime]);
+
+    const sendOTP = (phoneOrEmail: string) => {
+        if (canSendOTP) {
+            // Logic untuk mengirim OTP
+            axios
+            .post('/login', { phoneOrEmail })
+            .then(() => {
+                enqueueSnackbar('Kode OTP telah dikirim, silahkan cek email dan spam folder', {
+                    variant: 'success',
+                    autoHideDuration: 5000,
+                  });
+            })
+            .catch((error) => {
+                if (error.response.status !== 404) throw error.response;
+                if (error.response.status !== 422) throw error.response;
+            });
+
+            setLastSentTime(new Date());
+            setCanSendOTP(false);
+          } else {
+            alert('You can only send OTP once every minute.');
+          }
+    }
   return (
     <Page title="Login">
       <RootStyle>
@@ -87,7 +130,12 @@ export default function Login() {
 
                   <Stack sx={{ marginTop: 5 }} spacing={1} alignItems="center">
                     <Typography>Tidak mendapatkan kode?</Typography>
-                    <Link sx={{ cursor: 'pointer' }}>Kirim Ulang Kode OTP</Link>
+                    <Link
+                        sx={{ cursor: 'pointer' }}
+                        onClick={() => {
+                            sendOTP(emailOrPhone);
+                        }}
+                    >Kirim Ulang Kode OTP</Link>
                   </Stack>
                 </>
               ) : (
@@ -118,7 +166,7 @@ export default function Login() {
                 </>
               )}
 
-              <Divider sx={{ marginTop: 5 }}>Atau</Divider>
+              {/* <Divider sx={{ marginTop: 5 }}>Atau</Divider>
 
               <Stack sx={{ marginTop: 5 }}>
                 {emailOrPhoneForm ? (
@@ -148,7 +196,7 @@ export default function Login() {
                     Masuk menggunakan nomor handphone
                   </Link>
                 )}
-              </Stack>
+              </Stack> */}
             </Grid>
           </Grid>
         </ContentStyle>

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

@@ -57,9 +57,9 @@ export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: Log
       setEmailOrPhone(data.email);
       setLoginOrVerifyCode(true);
       reset();
-      enqueueSnackbar('Kode OTP telah dikirim, silahkan cek email yang login', {
+      enqueueSnackbar('Kode OTP telah dikirim, silahkan cek email dan spam folder', {
         variant: 'success',
-        autoHideDuration: 2000,
+        autoHideDuration: 5000,
       });
     } catch (error: any) {
       reset();