fixing user forgot pass and reset pass

src/roles/guest/PublicRoutes.jsx

@@ -10,6 +10,7 @@ import LoginPage from './auth/views/Login';
 import RegisterPage from './auth/views/Register';
 import ForgotPage from './auth/views/ForgotPass';
 import ValidateEmail from './auth/views/ValidateEmail';
+import ResetPass from './auth/views/ResetPass';
 
 function PublicRoutes() {
     return(
@@ -24,6 +25,7 @@ function PublicRoutes() {
                 <Route path="signup" element={<RegisterPage />} />
                 <Route path="forgot" element={<ForgotPage />} />
                 <Route path="validate-email" element={<ValidateEmail />} />
+                <Route path="resetPassword/:token" element={<ResetPass />} />
             </Routes>
         </div>
     )

src/roles/guest/auth/hooks/useAuth.jsx

@@ -48,19 +48,6 @@ const useAuth = () => {
     }
   };
 
-  const forgotPassword = async (email) => {
-    setLoading(true);
-    setError(null);
-    try {
-      await authService.forgotPassword(email);
-      // Handle success response (e.g. navigate to success page)
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const logout = () => {
     authService.logout();
     setUser(null);
@@ -85,7 +72,6 @@ const useAuth = () => {
     error,
     login,
     register,
-    forgotPassword,
     logout,
     getUserFromToken,
   };

src/roles/guest/auth/hooks/useForgot.jsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import authService from '../services/authService';
+import { useNavigate } from 'react-router-dom';
+
+const useForgot = () => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  
+  const [pass, setPass] = useState('');
+  const [confirmPass, setConfirmPass] = useState('');
+  
+
+  const navigate = useNavigate();
+
+  const [showLoader, setShowLoader] = useState(false);
+  const [modalMessage, setModalMessage] = useState('');
+  const [modalType, setModalType] = useState('');
+
+  const forgotPassword = async () => {
+    setLoading(true);
+    setError(null);
+    const dataForgot = {
+      EMAIL : user
+    }
+    try {
+      await authService.forgotPassword(dataForgot);
+      setLoading(false);
+      setUser('');
+      setModalType("SUCCESS");
+      handleShowLoader("We've sent a link to your email to help you reset your password. Please check your inbox to continue.");
+    } catch (err) {
+      setLoading(false);
+      setModalType("ERROR")
+      handleShowLoader(err.message);
+    }
+  };
+
+  const updatePassword = async (token) => {
+    setLoading(true);
+    setError(null);
+    const dataReset = {
+      TOKEN : token,
+      NEW_PASSWORD: pass,
+      CONFIRM_NEW_PASSWORD: confirmPass
+    }
+    try {
+      await authService.resetPass(dataReset);
+      setLoading(false);
+      setUser('');
+      setModalType("SUCCESS");
+      handleShowLoader("Your password has been successfully reset. Please login with your new password.");
+    } catch (err) {
+      setLoading(false);
+      setModalType("ERROR")
+      handleShowLoader(err.message);
+    }
+  };
+
+  const handleCloseLoader = () => setShowLoader(false);
+  const handleShowLoader = (message) => {
+      setShowLoader(true);
+      setModalMessage(message);
+  };
+
+  return {
+    user,
+    setUser,
+    forgotPassword, 
+    loading, 
+    error,
+    showLoader,
+    handleShowLoader,
+    handleCloseLoader,
+    modalMessage,
+    modalType,
+
+    pass,
+    setPass,
+    confirmPass,
+    setConfirmPass,
+    updatePassword
+  };
+};
+
+export default useForgot;

src/roles/guest/auth/services/authService.jsx

@@ -44,9 +44,18 @@ const register = async (endpoint, data) => {
   }
 };
 
-const forgotPassword = async (email) => {
+const forgotPassword = async (EMAIL) => {
   try {
-    const response = await axios.post(`${API_URL}/forgot-password`, { email });
+    const response = await axios.post(`${API_URL}/forgotPassword`, EMAIL);
+    return response.data;
+  } catch (error) {
+    throw new Error(error.response?.data?.message || 'Password reset failed');
+  }
+};
+
+const resetPass = async (data) => {
+  try {
+    const response = await axios.post(`${API_URL}/resetPassword`, data);
     return response.data;
   } catch (error) {
     throw new Error(error.response?.data?.message || 'Password reset failed');
@@ -72,5 +81,6 @@ export default {
   register,
   forgotPassword,
   logout,
-  validateEmail
+  validateEmail,
+  resetPass
 };

src/roles/guest/auth/views/ForgotPass.jsx

@@ -1,10 +1,28 @@
-import React from 'react';
-import useAuth from '../hooks/useAuth';
-import { Container, Row, Col, Form, Button } from 'react-bootstrap';
+import React, { useState }from 'react';
+import useAuth from '../hooks/useForgot';
+import { Container, Row, Col, Form, Button, Modal } from 'react-bootstrap';
+
 import illustration from '../../../../assets/images/illustration/IllustrationForgot.png';
+import successIllustration from '../../../../assets/images/illustration/mail.png';
 
 const ForgotPage = () => {
-  const { username, setUsername, password, setPassword, handleLogin, error } = useLogin();
+  const { 
+    user,
+    setUser,
+    forgotPassword, 
+    loading, 
+    error,
+    showLoader,
+    handleShowLoader,
+    handleCloseLoader,
+    modalMessage,
+    modalType
+  } = useAuth();
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    await forgotPassword();
+  };
 
   return (
     <Container fluid className='h-screen bg-blue-50'>
@@ -22,24 +40,43 @@ const ForgotPage = () => {
                 Enter your email and wait for a link to reset the password.
             </p>
             <div className='bg-gd rounded w-100' style={{padding:"1px"}}>
-                <Form className='bg-white rounded p-4'>
-                <Form.Group className="mb-4" controlId="formBasicEmail">
-                    <Form.Label>Email Address <span className='text-danger'>*</span></Form.Label>
-                    <Form.Control type="email" placeholder="Email Address"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    />
-                </Form.Group>
-                <Button variant="gd" className='w-100' onClick={handleLogin}>
-                    Submit
-                </Button>
-                {error && <p>{error}</p>}
-                <p className='mt-4 text-center'>Remember the password? Just <a href="/login" className='text-blue'>Log In</a></p>
+                <Form className='bg-white rounded p-4' onSubmit={onSubmit}>
+                  <Form.Group className="mb-4" controlId="formBasicEmail">
+                      <Form.Label>Email Address <span className='text-danger'>*</span></Form.Label>
+                      <Form.Control type="email" placeholder="Email Address"
+                        value={user || ''}
+                        onChange={(e) => setUser(e.target.value)}
+                      />
+                  </Form.Group>
+                  <Button type="submit"  variant="gd" className='w-100'  disabled={loading}>
+                    {loading ? 'Loading...' : 'Submit'}
+                  </Button>
+
+                  {error && <p>{error}</p>}
+                  
+                  <p className='mt-4 text-center'>Remember the password? Just <a href="/login" className='text-blue'>Log In</a></p>
                 </Form>
             </div>
           </div>
         </Col>
       </Row>
+      <Modal show={showLoader} onHide={handleCloseLoader} centered>
+          {modalType === "ERROR"?(
+                <Modal.Body className='p-4 d-flex flex-column items-center'>
+                    <h4 className='mb-4 fw-bold text-red'>ERROR!</h4>
+                    <img src={illustration} alt="" className="w-50"/>
+                    <p className='my-3 text-muted fw-light text-center'>{modalMessage}</p>
+                    <Button variant="red" className="w-100 py-2 px-5 rounded-35" onClick={handleCloseLoader}>Close</Button>
+                </Modal.Body>
+            ):(
+                <Modal.Body className='p-4 d-flex flex-column items-center'>
+                    <h4 className='mb-4 fw-bold text-dark'>Check <span className='text-blue'> Email</span>!</h4>
+                    <img src={successIllustration} alt="" className="w-50"/>
+                    <p className='my-3 text-muted fw-light text-center'>{modalMessage}</p>
+                    <a className="btn btn-gd w-100 py-2 px-5 rounded-35" href='https://mail.google.com/mail/'>Check Email</a>
+                </Modal.Body> 
+          )}
+      </Modal>
     </Container>
   );
 };

src/roles/guest/auth/views/ResetPass.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect }from 'react';
+import useAuth from '../hooks/useForgot';
+import { Container, Row, Col, Form, Button, Modal } from 'react-bootstrap';
+import { Link, useParams } from 'react-router-dom';
+
+import illustration from '../../../../assets/images/illustration/changePass.png';
+import successIllustration from '../../../../assets/images/illustration/successModal.png';
+import ask from '../../../../assets/images/illustration/IllustrationForgot.png';
+
+const ResetPass = () => {
+    const { token } = useParams();
+    const { 
+        pass,
+        setPass,
+        confirmPass,
+        setConfirmPass,
+
+        updatePassword, 
+        loading, 
+        showLoader,
+        handleCloseLoader,
+        modalMessage,
+        modalType
+    } = useAuth();
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    await updatePassword(token);
+  };
+
+  return (
+    <Container fluid className='h-screen bg-blue-50'>
+      <Row className='h-100'>
+        <Col md={6} className="d-flex items-center">
+          <div className='w-75'>
+            <img src={illustration} alt="" className='w-75'/>
+          </div>
+        </Col>
+        <Col md={6} className="bg-white d-flex items-center rounded-5 rounded-end shadow">
+          <div className='w-75'>
+            <h1 className='text-blue fw-bold mb-3'>Forgot Password?</h1>
+            <p className='mb-5'>
+                Don’t worry, we will help you... <br />
+                Enter your email and wait for a link to reset the password.
+            </p>
+            <div className='bg-gd rounded w-100' style={{padding:"1px"}}>
+                <Form className='bg-white rounded p-4' onSubmit={onSubmit}>
+                  <Form.Group className="mb-4" controlId="formBasicPass">
+                      <Form.Label>New Password <span className='text-danger'>*</span></Form.Label>
+                      <Form.Control type="password" placeholder="New Password"
+                        value={pass}
+                        onChange={(e) => setPass(e.target.value)}
+                      />
+                  </Form.Group>
+                  <Form.Group className="mb-4" controlId="formBasicConfirm">
+                      <Form.Label>Confirm New Password <span className='text-danger'>*</span></Form.Label>
+                      <Form.Control type="password" placeholder="Confirm New Password"
+                        value={confirmPass}
+                        onChange={(e) => setConfirmPass(e.target.value)}
+                      />
+                  </Form.Group>
+                  <Button type="submit"  variant="gd" className='w-100'  disabled={loading}>
+                    {loading ? 'Loading...' : 'Reset'}
+                  </Button>
+                </Form>
+            </div>
+          </div>
+        </Col>
+      </Row>
+      <Modal show={showLoader} onHide={handleCloseLoader} centered backdrop="static">
+          {modalType === "ERROR"?(
+                <Modal.Body className='p-4 d-flex flex-column items-center'>
+                    <h4 className='mb-4 fw-bold text-red'>ERROR!</h4>
+                    <img src={ask} alt="" className="w-50"/>
+                    <p className='my-3 text-muted fw-light text-center'>{modalMessage}</p>
+                    <Button variant="red" className="w-100 py-2 px-5 rounded-35" onClick={handleCloseLoader}>Close</Button>
+                </Modal.Body>
+            ):(
+                <Modal.Body className='p-4 d-flex flex-column items-center'>
+                    <h4 className='mb-4 fw-bold text-dark'>All Set!</h4>
+                    <img src={successIllustration} alt="" className="w-50"/>
+                    <p className='my-3 text-muted fw-light text-center'>{modalMessage}</p>
+                    <Link to='/login' className="btn btn-gd w-100 py-2 px-5 rounded-35">Login</Link>
+                </Modal.Body> 
+          )}
+      </Modal>
+    </Container>
+  );
+};
+
+export default ResetPass;