Users should be presented with a reset password link

src/components/layout/Header.tsx

@@ -96,7 +96,7 @@ function Header() {
           <div className="cart__container">
             <IoCartOutline className="cart__icon" />
             <span className="cart__text">Cart</span>
-            <span className="cart__description">$ 100</span>
+            <span className="cart__description">$ 0</span>
           </div>
           <div
             className="cart__container user__container"

src/pages/ResetPassword.tsx

@@ -4,14 +4,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate , useLocation} from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../store/store';
-import { CircleLoader, PuffLoader } from 'react-spinners';
+import { PulseLoader } from 'react-spinners';
 import { resetPassword } from '../store/features/auth/authSlice';
 import { useFormik } from 'formik';
+import passwordChanged from "../../public/assets/images/resetPassword.png"
 import '../styles/reset-password.scss';
 import { toast } from 'react-toastify';
-import Button from '../components/buttons/Button';
-import Header from '../components/layout/Header';
-import * as Yup from 'yup';
 
 const ResetPassword: React.FC = () => {
   const [showNewPassword, setShowNewPassword] = useState(false);
@@ -27,39 +25,49 @@ const ResetPassword: React.FC = () => {
   const location = useLocation();
   const dispatch = useAppDispatch();
   const { user, isError, isSuccess, isLoading, message } = useAppSelector((state) => state?.auth);
+  const [isFormVisible, setIsFormVisible] = useState(true);
+  const [successMessage, setSuccessVisible] = useState(false);
+  // const [errorMessage, setErrorMessage] = useState('');
+
   const formik = useFormik({
     initialValues: {
       password: '',
       confirmPassword: '',
     },
     onSubmit: (values) => {
       if (values.password !== values.confirmPassword) {
-        toast.error("Passwords do not match");
+        formik.setStatus("Passwords do not match");
       } 
       else{
         const pathParts = location.pathname.split('/');
         const token = pathParts[pathParts.length - 1];
         dispatch(resetPassword({ token, password: values.password }));
+
       }  
     },
   })
   useEffect(() => {
     if (isError) {
-      toast.error(message);
+        formik.setStatus(message);
     }
     if (isSuccess) {
       toast.success(message)
-      navigate('/login');
+      setIsFormVisible(false);
+      setSuccessVisible(true);
+
     }
   }, [user, isError, isSuccess, isLoading, message])
 
   return (
     <>
+
     <hr />
+
       <main>
+      {isFormVisible ? (
         <form className="resetPasswordForm" onSubmit={formik.handleSubmit}>
-          <h1>Reset password</h1>
-          <div className="input-containers">
+        <h1>Reset password</h1>
+        <div className="input-containers">
             <div className="input-container1">
               <input
                 type={showNewPassword ? 'text' : 'password'}
@@ -80,7 +88,7 @@ const ResetPassword: React.FC = () => {
               >
                 <FontAwesomeIcon icon={showNewPassword ? faEyeSlash : faEye} />
               </button>
-            </div>
+            </div><br/>
             <div className="input-container2">
               <input
                 type={showConfirmPassword ? 'text' : 'password'}
@@ -102,17 +110,26 @@ const ResetPassword: React.FC = () => {
                 <FontAwesomeIcon icon={showConfirmPassword ? faEyeSlash : faEye} />
               </button>
             </div>
-            {isLoading ? (
-                <div className='btn-loading'>
-                    <PuffLoader size={60} color='#FF6D18' loading={isLoading} />
-                  </div>
-                ) : (
-                  <div className="reset-Button">
-                    <Button title="Reset Password" type="submit" />
-                 </div>
-                )}
-            </div>
+            <p className='error'>{formik.status}</p><br />
+            <button
+            className={`reset-Button${isLoading ? " loading" : ""}`}
+             disabled={isLoading}
+              >
+            <span>{isLoading ? "Loading" : "Reset Password"}</span>
+            <PulseLoader size={6} color="#ffe2d1" loading={isLoading} />
+           </button>
+          </div>
         </form>
+        ) : (
+        <div className='redirect-page'>
+        <div className='success-page'>
+        <div className="isSuccess">
+            <img src={passwordChanged} alt="" />
+            <p><h2>Password is changed</h2><span onClick={() => navigate("/login")}>Continue to login</span></p>
+          </div>
+        </div>  
+        </div>  
+      )}      
       </main><br/><br/><br/><br/><br/><br/>
     </>
   );

src/pages/SendResetPasswordLink.tsx

@@ -8,7 +8,7 @@ import { sendResetLink } from '../store/features/auth/authSlice';
 import '../styles/reset-password.scss';
 import { toast } from 'react-toastify';
 import * as Yup from 'yup';
-import { CircleLoader, PuffLoader } from 'react-spinners';
+import {  PulseLoader } from 'react-spinners';
 
 const ResetPasswordSchema = Yup.object().shape({
   email: Yup.string().email('Email must be valid').required('Email is required'),
@@ -21,19 +21,26 @@ const SendResetPasswordLink: React.FC = () => {
       email: '',
     },
     validationSchema: ResetPasswordSchema,
-    onSubmit: (values) => {
-        dispatch(sendResetLink(values.email));
+    onSubmit: (values, { setStatus }) => {
+      dispatch(sendResetLink(values.email))
+        .then(() => {
+          if (isError) {
+            setStatus(message);
+          }
+       });
     },
-  })
+  });
+
   useEffect(() => {
     if (isError) {
-      toast.error(message)
-     }
+      formik.setStatus(message);
+    }
     if (isSuccess) {
       toast.success(message)
-      formik.resetForm();
+      formik.resetForm()
     }
-  }, [user, isError, isSuccess, isLoading, message])
+  }, [isError, isSuccess, message]);
+
   return (
     <>
     <hr />
@@ -57,16 +64,14 @@ const SendResetPasswordLink: React.FC = () => {
               />
               <label className="input-label" id="email" htmlFor="email">Email Address</label>
             </div>
-             {isLoading ? (
-                <div className='btn-loading'>
-                    <PuffLoader size={60} color='#FF6D18' loading={isLoading} />
-                  </div>
-                ) : (
-                  <div className="reset-Button">
-                    <Button title="Get Reset Link" type="submit" />
-                 </div>
-                )}
-
+            <p className='error'>{formik.status}</p><br /><br />
+            <button
+            className={`reset-Button${isLoading ? " loading" : ""}`}
+             disabled={isLoading}
+              >
+            <span>{isLoading ? "Loading " : "Get Reset Link"}</span>
+            <PulseLoader size={6} color="#ffe2d1" loading={isLoading} />
+           </button>          
           </form>
         </div><br/>
       </main><br/><br/><br/><br/><br/><br/>

src/styles/Colors.scss

@@ -24,4 +24,4 @@ $text2-color: #666666;
 $text-family: 'Averia Serif Libre';
 $white-color: #FFFFFF;
 $border-color: #D9D9D9;
-$red-color:red;
+$red-color:red;

src/styles/colors.scss

@@ -24,4 +24,4 @@ $text2-color: #666666;
 $text-family: 'Averia Serif Libre';
 $white-color: #FFFFFF;
 $border-color: #D9D9D9;
-$red-color:red;
+$red-color:red;

src/styles/reset-password.scss

@@ -30,12 +30,6 @@ hr{
     font-size: 2rem;
     font-family: $text-family;
   }
-  .success {
-    color: $primary-color;
-    padding-left: 1.2rem;
-    font-size: 2rem;
-    font-family: $text-family;
-  }
   .input-container {
     position: relative;
     margin: 1rem 0;
@@ -74,7 +68,7 @@ hr{
     }
   }
 
-  .reset-Button button {
+  .reset-Button  {
     background-color: $primary-color;
     color: $button-text-color;
     font-size: $button-font-size;
@@ -91,6 +85,9 @@ hr{
     &:hover {
     background-color: $button-hover-bg-color;
     }
+    .loading {
+      cursor: not-allowed; 
+      } 
  }
 }
 
@@ -106,12 +103,11 @@ hr{
     font-family: $text-family;
     font-size: 4rem;
   }
-
   .input-containers {
-    margin-top: 30px;
+    margin-top: 90px;
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 9px;
 
     .input-container1, .input-container2 {
       position: relative;
@@ -135,7 +131,7 @@ hr{
         width: 25vw;
         height: 7vh;
         border: 2px solid #f5a773;
-        border-radius: 0.25rem;
+        border-radius: 0.27rem;
         font-size: 1.5rem;
         outline: none;
         font-family: inherit;
@@ -153,14 +149,13 @@ hr{
       }
     }
     .error {
-      color: $red-color;
-      padding-left: 1.2rem;
+      color: $red-color;    
       font-size: 2rem;
+      width: 25vw;
       font-family: $text-family;
     }
   }
-
-  .reset-Button button {
+  .reset-Button {
     background-color: $primary-color;
     color: $button-text-color;
     font-size: $button-font-size;
@@ -174,19 +169,21 @@ hr{
     display: inline-block;
     font-weight: $button-font-weight;
     font-family: $button-font-family;
-
     &:hover {
-      background-color: $button-hover-bg-color;
+    background-color: $button-hover-bg-color;
     }
-  }
+    .loading {
+      cursor: not-allowed; 
+      } 
+  } 
 }
 
 .resetPasswordForm {
   .input-containers {
     .input-container1,
     .input-container2 {
-      position: relative;
 
+      position: relative;
       .toggle-password {
         position: absolute;
         color: #777777;
@@ -199,5 +196,46 @@ hr{
         outline: none;
       }
     }
-  }
+  }  
+}
+.redirect-page{
+  display: flex;
+  justify-content: center;
+.success-page{
+  width: 50vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: $white-color;
+  border-radius: 10px;
+  padding: 2rem;
+  border: none;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+  transition: all 0.3s ease-in-out;
+  .isSuccess {
+    p {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 5px;
+        span {
+            color: $primary-color;
+            font-weight: 700;
+            font-size: 1.9rem;
+            line-height: 2.4rem;
+            letter-spacing: 0.05rem;
+            // margin-left: 4vw;
+            text-decoration: none;
+            transition: all 0.3s ease-in-out;
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: underline;
+                transition: all 0.3s ease-in-out;
+            }
+        }
+    }
+}
+}
 }