Update Add user hospital portal

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

@@ -12,6 +12,8 @@ import Iconify from '@/components/Iconify';
 // sections
 import { ForgetPasswordForm } from '@/sections/auth/forget-password';
 import { useSearchParams } from 'react-router-dom';
+import { useState, useContext, useEffect } from 'react';
+import { LanguageContext } from '@/contexts/LanguageContext';
 
 // ----------------------------------------------------------------------
 
@@ -25,6 +27,8 @@ const RootStyle = styled('div')(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export default function ForgetPassword() {
+
+    const { localeData } = useContext(LanguageContext);
   const [searchParams, setSearchParams] = useSearchParams();
   const token = searchParams.get('token');
 
@@ -42,12 +46,12 @@ export default function ForgetPassword() {
               startIcon={<Iconify icon={'eva:arrow-ios-back-fill'} width={20} height={20} />}
               sx={{ mb: 3 }}
             >
-              Back
+                {localeData.txtBack}
             </Button>
 
             <Typography variant="h3" paragraph></Typography>
             <Typography sx={{ color: 'text.secondary' }}>
-              Please enter your new password.
+              {localeData.txtPleaseInput}
             </Typography>
 
             <Box sx={{ mt: 5, mb: 3 }}>

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 // @mui
 import { styled } from '@mui/material/styles';
@@ -13,6 +13,9 @@ import Page from '@/components/Page';
 import { ResetPasswordForm } from '@/sections/auth/reset-password';
 // assets
 import { SentIcon } from '@/assets';
+import { LanguageContext } from '@/contexts/LanguageContext';
+
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
 
 // ----------------------------------------------------------------------
 
@@ -27,10 +30,17 @@ const RootStyle = styled('div')(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export default function ResetPassword() {
+    const { localeData } = useContext(LanguageContext);
   const [email, setEmail] = useState('');
 
   const [sent, setSent] = useState(false);
 
+  const navigate = useNavigate();
+
+  const handleSent = () => {
+    setSent(true);
+  };
+
   return (
     <Page title="Reset Password" sx={{ height: 1 }}>
       <RootStyle>
@@ -41,16 +51,15 @@ export default function ResetPassword() {
             {!sent ? (
               <>
                 <Typography variant="h3" paragraph>
-                  Forgot your password?
+                  {localeData.txtForgotYourPassword}
                 </Typography>
 
                 <Typography sx={{ color: 'text.secondary', mb: 5 }}>
-                  Please enter the email address associated with your account and We will email you
-                  a link to reset your password.
+                  {localeData.txtPleaseEnterPassword}
                 </Typography>
 
                 <ResetPasswordForm
-                  onSent={() => setSent(true)}
+                  onSent={handleSent}
                   onGetEmail={(value) => setEmail(value)}
                 />
 
@@ -61,7 +70,7 @@ export default function ResetPassword() {
                   to={PATH_AUTH.login}
                   sx={{ mt: 3 }}
                 >
-                  Back
+                  {localeData.txtBack}
                 </Button>
               </>
             ) : (
@@ -69,24 +78,24 @@ export default function ResetPassword() {
                 <SentIcon sx={{ mb: 5, mx: 'auto', height: 160 }} />
 
                 <Typography variant="h3" gutterBottom>
-                  Request sent successfully
+                  {localeData.txtSuccessSend}
                 </Typography>
 
                 <Typography>
-                  We have sent a confirmation email to &nbsp;
+                  {localeData.txtCodeConfirm} &nbsp;
                   <strong>{email}</strong>
                   <br />
-                  Please check your email.
+                  {localeData.txtPleasCheck}
                 </Typography>
 
                 <Button
                   size="large"
                   variant="contained"
                   component={RouterLink}
-                  to={PATH_AUTH.login}
+                  to={PATH_AUTH.verify}
                   sx={{ mt: 5 }}
                 >
-                  Back
+                  Next
                 </Button>
               </Box>
             )}

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>