Update Add user hospital portal

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

@@ -1,4 +1,4 @@
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
 // @mui
 import { styled } from '@mui/material/styles';
 import { Box, Button, Link, Container, Typography } from '@mui/material';
@@ -11,6 +11,9 @@ import Page from '@/components/Page';
 import Iconify from '@/components/Iconify';
 // sections
 import { VerifyCodeForm } from '@/sections/auth/verify-code';
+import { useState, useContext, useEffect } from 'react';
+import { LanguageContext } from '@/contexts/LanguageContext';
+import axios from '@/utils/axios';
 
 // ----------------------------------------------------------------------
 
@@ -21,9 +24,41 @@ const RootStyle = styled('div')(({ theme }) => ({
   padding: theme.spacing(12, 0),
 }));
 
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+  }
+
 // ----------------------------------------------------------------------
 
 export default function VerifyCode() {
+    const { localeData } = useContext(LanguageContext);
+    const query = useQuery();
+  const email = query.get('email');
+  const [timer, setTimer] = useState(60); // Initialize timer with 60 seconds
+  const [canResend, setCanResend] = useState(false); // State to control resend button visibility
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prev) => {
+        if (prev > 0) {
+          return prev - 1;
+        } else {
+          clearInterval(interval);
+          setCanResend(true); // Enable resend button when timer reaches 0
+          return 0;
+        }
+      });
+    }, 1000);
+
+    return () => clearInterval(interval); // Cleanup interval on component unmount
+  }, []);
+
+  const handleResend = () => {
+    setCanResend(false);
+    setTimer(60); // Reset timer to 60 seconds
+    // Add logic to resend the code here
+    axios.post('/verify-email', {email: email});
+  };
+
   return (
     <Page title="Verify" sx={{ height: 1 }}>
       <RootStyle>
@@ -34,30 +69,42 @@ export default function VerifyCode() {
             <Button
               size="small"
               component={RouterLink}
-              to={PATH_AUTH.login}
+              to={PATH_AUTH.resetPassword}
               startIcon={<Iconify icon={'eva:arrow-ios-back-fill'} width={20} height={20} />}
               sx={{ mb: 3 }}
             >
-              Back
+                {localeData.txtBack}
             </Button>
 
             <Typography variant="h3" paragraph>
-              Please check your email!
+              {localeData.txtCheckEmail}
             </Typography>
+            <Typography variant='subtitle1'>{email}</Typography>
             <Typography sx={{ color: 'text.secondary' }}>
-              We have emailed a 6-digit confirmation code to acb@domain, please enter the code in
-              below box to verify your email.
+            {localeData.txtEmail}
             </Typography>
 
             <Box sx={{ mt: 5, mb: 3 }}>
-              <VerifyCodeForm />
+              <VerifyCodeForm
+              onGetEmail={email}
+              />
             </Box>
 
-            <Typography variant="body2" align="center">
+            {/* <Typography variant="body2" align="center">
               Don’t have a code? &nbsp;
               <Link variant="subtitle2" underline="none" onClick={() => {}}>
                 Resend code
               </Link>
+            </Typography> */}
+            <Typography variant="body2" align="center">
+                {localeData.txtDont} &nbsp;
+              {canResend ? (
+                <Link sx={{cursor: 'pointer'}} variant="subtitle2" underline="none" onClick={handleResend}>
+                  {localeData.txtResendCode}
+                </Link>
+              ) : (
+                <span>{`${localeData.txtResendCode} ${timer} ${localeData.txtSecond}`}</span>
+              )}
             </Typography>
           </Box>
         </Container>