password reset first phase done

src/components/AuthPages/ForgetPwdResponse.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+const ForgetPwdResponse = ({title, message, type}) => {
+  return (
+    <>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <h1 className={`${type ? 'text-black' : 'text-red-500'}text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]`}>
+            {title}
+            </h1>
+        </div>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            {/* <img src='' /> */}
+            <p className='rounded-full border w-[50px] h-[50px] flex items-center justify-center'>Icon</p>
+        </div>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <p className={`${type ? 'text-sky-blue' : 'text-red-500'} font-semibold dark:text-white mb-3 leading-[27.3px] text-[18px]`}>
+            {message}
+            </p>
+        </div>
+        <div className="signin-area mb-3.5">
+            <div className="flex justify-center items-center gap-2">
+                <button
+                type="button"
+                onClick={() => navigate("/login")}
+                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                >
+                    <span>Home</span>
+                </button>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default ForgetPwdResponse

src/components/AuthPages/ForgotPassword/index.jsx

@@ -4,6 +4,8 @@ import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import EmailValidator from "../../../lib/EmailValidator";
+import ForgetPwdResponse from "../ForgetPwdResponse";
 
 export default function ForgotPassword() {
   const [checked, setValue] = useState(false);
@@ -11,7 +13,7 @@ export default function ForgotPassword() {
   // email
   const [email, setMail] = useState("");
   const [msgError, setMsgError] = useState("");
-  const [msgSuccess, setMsgSuccess] = useState(false);
+  const [msgSuccess, setMsgSuccess] = useState(null);
 
   const navigate = useNavigate();
   const userApi = new usersService();
@@ -27,8 +29,22 @@ export default function ForgotPassword() {
   const resetHandler = async () => {
     if (email == "") {
       setMsgError("An email is required");
-    } else if (!checked) {
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    } 
+    if (!checked) {
       setMsgError("Check if you are human");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
+      setMsgError("Invalid Email");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
 
     if (email !== "" && checked) {
@@ -41,8 +57,11 @@ export default function ForgotPassword() {
           setMail("");
           setValue(false);
           setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
         }
       } catch (error) {
+        setMsgSuccess(false);
         setResetLoading(false);
         setMail("");
         setMsgError("An error occurred");
@@ -53,9 +72,6 @@ export default function ForgotPassword() {
         }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
       }
     }
-    setTimeout(() => {
-      setMsgError(null);
-    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
   };
 
   return (
@@ -73,6 +89,8 @@ export default function ForgotPassword() {
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="flex flex-col justify-center w-full h-full px-5">
+            {msgSuccess == null ?
+              <>
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                   <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                     Forget Password
@@ -136,7 +154,7 @@ export default function ForgotPassword() {
                       {msgError}
                     </div>
                   )}
-                {msgSuccess && (
+                  {/* {msgSuccess && (
                     <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
                       If we find your email, you will receive a link to reset your
                       password. Please use or{" "}
@@ -148,7 +166,7 @@ export default function ForgotPassword() {
                       </Link>{" "}
                       if you did not get our message after few minutes.
                     </div>
-                )}
+                  )} */}
 
                   <div className="signin-area mb-3.5">
                     <div className="flex justify-center items-center gap-2">
@@ -173,6 +191,14 @@ export default function ForgotPassword() {
                     </div>
                   </div>
                 </div>
+              </>
+            :
+            <ForgetPwdResponse 
+              title={msgSuccess? 'Password Reset Complete' : 'Password Reset Error'}
+              message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
+              type={msgSuccess}
+            />
+            }
             </div>
           </div>
         </div>

src/components/AuthPages/VerifyPassword/index.jsx

@@ -1,16 +1,18 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+import PasswordValidator from "../../../lib/PasswordValidator";
 
 const VerifyPassword = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [msgError, setMsgError] = useState("");
   const [linkLoader, setLinkLoader] = useState(false);
-  const [linkSuccess, setLinkSuccess] = useState(true);
+  const [linkSuccess, setLinkSuccess] = useState(null);
   const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
@@ -23,11 +25,6 @@ const VerifyPassword = () => {
     setShowPassword(!showPassword);
   };
 
-  // little checker for the validity of the token
-  if (token?.length != 64) {
-    setLinkSuccess(false);
-  }
-
   // Password
   const handlePassword = (e) => {
     let { name, value } = e?.target;
@@ -36,9 +33,31 @@ const VerifyPassword = () => {
   };
 
   const completeReset = async () => {
+    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+      setMsgError("Please fill in fields");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+      setMsgError("Passwords does not match");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+      setMsgError("Password must be upto six characters");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
+      setMsgError("Invalid Password: eg: Password1@");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
     try {
-      if (password !== "" && confirmPassword !== "") {
-        if (password === confirmPassword) {
           setLinkLoader(true);
           var reqData = {
             sessionid: "DUMMY-CANNOT_BE_EMPTY",
@@ -47,34 +66,29 @@ const VerifyPassword = () => {
             step: 300,
             action: 730,
           };
-
           const res = await userApi?.CompleteResetPassword(reqData);
 
           if (res.status === 200) {
             const { data } = res;
+            console.log('RESPONSE', res)
 
             if (data?.status > 0 && data?.email) {
-              setTimeout(() => {
+              // setTimeout(() => {
-                navigate("/login", { replace: true });
+              //   navigate("/login", { replace: true });
-                setLinkLoader(false);
+              //   setLinkLoader(false);
-              }, 2000);
+              // }, 2000);
+              setLinkSuccess(true);
             } else if (data && data?.status == "Invalid Request") {
               setLinkLoader(false);
               setLinkSuccess(false);
             } else {
               setLinkLoader(false);
               setMsgError("An error occurred");
-            }
-          } else {
-            setLinkLoader(false);
               setLinkSuccess(false);
             }
           } else {
             setLinkLoader(false);
-          setMsgError("Passwords does not match");
+            setLinkSuccess(false);
-        }
-      } else {
-        setMsgError("Please fill in fields");
           }
     } catch (error) {
       setLinkLoader(false);
@@ -87,6 +101,12 @@ const VerifyPassword = () => {
     }
   };
 
+  useEffect(()=>{
+    // little checker for the validity of the token
+  if (token==null || token?.length != 64) {
+    setLinkSuccess(false);
+  }
+  },[])
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -102,23 +122,19 @@ const VerifyPassword = () => {
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
+              {linkSuccess == null ?
+              <>
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                   <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                  {linkSuccess ? "Password Reset" : "Invalid verification link"}
+                    Password Reset
                   </h1>
-                {linkSuccess && (
                     <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                       Enter a new password to reset
                     </span>
-                )}
-                {linkSuccess && (
                     <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                       We'll send an email to confirm reset
                     </span>
-                )}
                 </div>
-              {/* If the verification was a success */}
-              {linkSuccess ? (
                   <SuccessfulComponent
                     password={password}
                     confirmPassword={confirmPassword}
@@ -130,9 +146,18 @@ const VerifyPassword = () => {
                     onClick={togglePasswordVisibility}
                     navigateHandler={() => navigate("/login")}
                   />
-              ) : (
+                </>
-                <ErrorComponent onClick={() => navigate("/login")} />
+                :
-              )}
+                <ForgetPwdResponse 
+                title={linkSuccess? 'Password Reset Complete' : (linkSuccess==false && token==null) ? 'Forget Password' : 'Password Reset Error'}
+                message={linkSuccess? 
+                  'Password Reset Complete. You can login now with your new credentials' : 
+                  (linkSuccess==false && token==null) ? 'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us' : 
+                  'Password Reset Error. Please get in touch with support for further support'
+                }
+                type={linkSuccess}
+              />
+              }
             </div>
           </div>
         </div>
@@ -159,7 +184,7 @@ const SuccessfulComponent = ({
     <div className="mb-5">
       <InputCom
         fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={password?.replace(/./g, "●")}
+        value={password}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
@@ -172,7 +197,7 @@ const SuccessfulComponent = ({
     <div className="mb-5">
       <InputCom
         fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={confirmPassword?.replace(/./g, "●")}
+        value={confirmPassword}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Confirm Password"

src/lib/EmailValidator.js

@@ -0,0 +1,9 @@
+export default function EmailValidator(email) {
+    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (regEx.test(email) == false) {
+      return false
+    }else{
+      return true
+    }
+}
+  

src/lib/PasswordValidator.js

@@ -0,0 +1,9 @@
+export default function PasswordValidator(password) {
+    const regEx = /^[a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?~\\/\-='"`|]+$/;
+    if (/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/\-='"`|]/.test(password) == false || /[0-9]/.test(password)==false || /[A-Z]/.test(password)==false || /[a-z]/.test(password)==false) {
+      return false
+    }else{
+      return true
+    }
+}
+