ft<password-reset> enable password reset feature for user

atlp-rwanda · Jun 24, 2024 · 9ebd45f · 9ebd45f
2 parents 62bf410 + 3a91a4b
commit 9ebd45f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "axios": "^1.7.2",
     "lucide-react": "^0.395.0",
     "prettier": "^3.3.1",

diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
@@ -47,9 +47,6 @@ const Router = () => {
         }
       />
 
-      <Route path="/forgot-password" element={<ForgotPassword />} />
-      <Route path="/reset-password" element={<ResetPassword />} />
-
       <Route
         path="/verify-email/:token"
         element={
@@ -59,6 +56,33 @@ const Router = () => {
           </>
         }
       />
+
+      <Route
+        path="/forgot-password"
+        element={
+          <>
+            <PageTitle title="Knights Store | Forgot Password" />
+            <ForgotPassword />
+            {userToken && isAdmin && <Navigate to="/admin/dashboard" />}
+            {userToken && isVendor && <Navigate to="/vendor/dashboard" />}
+            {userToken && isBuyer && <Navigate to="/" />}
+          </>
+        }
+      />
+
+      <Route
+        path="/reset-password"
+        element={
+          <>
+            <PageTitle title="Knights Store | Reset Password" />
+            <ResetPassword />
+            {userToken && isAdmin && <Navigate to="/admin/dashboard" />}
+            {userToken && isVendor && <Navigate to="/vendor/dashboard" />}
+            {userToken && isBuyer && <Navigate to="/" />}
+          </>
+        }
+      />
+
       <Route
         path="/login"
         element={

diff --git a/src/pages/Authentication/ForgotPassword.tsx b/src/pages/Authentication/ForgotPassword.tsx
@@ -42,14 +42,16 @@ export const ForgotPassword: React.FC = () => {
   };
 
   return (
-    <div className="min-h-[100vh] h-auto w-full flex items-center justify-center py-10 px-4 bg-transparent1">
+    <div className="min-h-[100vh] h-auto w-full flex items-center justify-center py-10 md:px-4 bg-transparent1">
       <form
-        className="min-w-[90%] flex flex-col items-center justify-start gap-y-4 bg-white p-12 md:min-w-[500px] md:max-w-[500px]"
+        className="min-w-[100%] flex flex-col items-center justify-start gap-y-4 bg-white sm:p-12 px-6 py-12 md:min-w-[500px] md:max-w-[700px]"
         onSubmit={handleSubmit(onSubmit)}
       >
         <div className="w-full flex flex-col items-start justify-start gap-y-2">
-          <h1 className="text-black1 ml-10 font-Poppins font-bold text-lg">Forgot your password?</h1>
-          <p className="text-black1 ml-5 text-lg">Enter your email and we&apos;ll send you a reset link.</p>
+          <h1 className="text-black1 ml-10 font-Poppins text-xl md:text-2xl">Forgot your password?</h1>
+          <p className="text-neutrals600 ml-5 sm:text-base text-sm">
+            Enter your email and we&apos;ll send you a reset link.
+          </p>
           <div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">
             <input
               className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"
@@ -67,7 +69,7 @@ export const ForgotPassword: React.FC = () => {
         <button
           type={loading ? 'button' : 'submit'}
           disabled={!isEmailValid || loading}
-          className={`w-full min-h-[50px] flex items-center justify-center bg-primary text-white text-2xl font-medium mt-2 ${loading ? 'cursor-not-allowed' : ''}`}
+          className={`w-full min-h-[50px] flex items-center justify-center bg-primary text-white text-lg rounded-3xl font-medium mt-2 ${loading ? 'cursor-not-allowed' : ''}`}
         >
           {loading ? 'Loading...' : 'Send Reset Link'}
         </button>

diff --git a/src/pages/Authentication/Login.tsx b/src/pages/Authentication/Login.tsx
@@ -121,7 +121,7 @@ function Login() {
           {errors.password && <span className="text-orange text-xs">Password is required</span>}
         </div>
         <p className="text-small w-full text-black1 text-right">
-          <a href="/reset-password"> Forgot password? </a>
+          <a href="/forgot-password"> Forgot password? </a>
         </p>
         <button
           type="submit"

diff --git a/src/pages/Authentication/ResetPassword.tsx b/src/pages/Authentication/ResetPassword.tsx
@@ -40,6 +40,7 @@ export const ResetPassword: React.FC = () => {
       dispatch(resetState());
     }
     if (registerResponse) {
+      // console.log({registerResponse});
       toast.success(registerResponse.data.message);
       reset();
       dispatch(resetState());
@@ -75,8 +76,8 @@ export const ResetPassword: React.FC = () => {
         onSubmit={handleSubmit(onSubmit)}
       >
         <div className="w-full flex flex-col items-start justify-start gap-y-2">
-          <h1 className="text-black1 font-Poppins font-bold text-lg">Reset your password</h1>
-          <p className="text-black1 text-lg">New password</p>
+          <h1 className="text-black1 font-Poppins text-2xl">Reset your password</h1>
+          <p className="text-black1 text-sm">New password</p>
           <div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">
             <input
               className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"
@@ -114,7 +115,7 @@ export const ResetPassword: React.FC = () => {
           {password && passwordRequirements}
           {errors.newPassword && <span className="text-orange">{errors.newPassword.message}</span>}
 
-          <p className="text-black1 text-lg">Confirm password</p>
+          <p className="text-black1 text-sm">Confirm password</p>
           <div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">
             <input
               className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"
@@ -147,12 +148,12 @@ export const ResetPassword: React.FC = () => {
         <button
           type={loading ? 'button' : 'submit'}
           disabled={!isEmailValid || loading}
-          className={`w-full min-h-[50px] flex items-center justify-center bg-primary text-white text-2xl font-medium mt-2 ${loading ? 'cursor-not-allowed' : ''}`}
+          className={`w-full min-h-[50px] flex items-center rounded-3xl justify-center bg-primary text-white text-lg font-medium mt-2 ${loading ? 'cursor-not-allowed' : ''}`}
         >
           {loading ? 'Loading...' : 'Reset Password'}
         </button>
 
-        <p className="text-small text-black1 md:text-lg">
+        <p className="text-sm text-black1 md:text-base">
           Remember your credentials?{' '}
           <a href="/login" className="ml-1 text-orange">
             login here