From 20dae2dbc32cb0b3002125bb048f9f6687c2d7ad Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Fri, 5 May 2023 01:42:47 +0100
Subject: [PATCH] Added visibility toggle

---
 .../AuthPages/VerifyPassword/index.jsx        | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/AuthPages/VerifyPassword/index.jsx b/src/components/AuthPages/VerifyPassword/index.jsx
index 2e7e1d8..4376f65 100644
--- a/src/components/AuthPages/VerifyPassword/index.jsx
+++ b/src/components/AuthPages/VerifyPassword/index.jsx
@@ -11,12 +11,18 @@ const VerifyPassword = () => {
   const [msgError, setMsgError] = useState("");
   const [linkLoader, setLinkLoader] = useState(false);
   const [linkSuccess, setLinkSuccess] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
   const queryParams = new URLSearchParams(location?.search);
   const token = queryParams.get("passlink");
   const userApi = new usersService();
 
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   // little checker for the validity of the token
   if (token?.length != 64) {
     setLinkSuccess(false);
@@ -52,15 +58,13 @@ const VerifyPassword = () => {
                 navigate("/login", { replace: true });
                 setLinkLoader(false);
               }, 2000);
+            } else if (data && data?.status == "Invalid Request") {
+              setLinkLoader(false);
+              setLinkSuccess(false);
             } else {
               setLinkLoader(false);
               setMsgError("An error occurred");
             }
-
-            if (data && data?.status == "Invalid Request") {
-              setLinkLoader(false);
-              setLinkSuccess(false);
-            }
           } else {
             setLinkLoader(false);
             setLinkSuccess(false);
@@ -122,7 +126,9 @@ const VerifyPassword = () => {
                   onSubmit={completeReset}
                   msgErr={msgError}
                   loader={linkLoader}
-                  onClick={() => navigate("/login")}
+                  showPassword={showPassword}
+                  onClick={togglePasswordVisibility}
+                  navigateHandler={() => navigate("/login")}
                 />
               ) : (
                 <ErrorComponent onClick={() => navigate("/login")} />
@@ -139,6 +145,8 @@ export default VerifyPassword;
 
 const SuccessfulComponent = ({
   onSubmit,
+  navigateHandler,
+  showPassword,
   onClick,
   password,
   confirmPassword,
@@ -155,8 +163,11 @@ const SuccessfulComponent = ({
         placeholder="● ● ● ● ● ●"
         label="Password"
         name="password"
-        type="password"
-        iconName="password"
+        type={showPassword ? "text" : "password"}
+        onClick={onClick}
+        passIcon={
+          showPassword ? "show-password" : "hide-password"
+        }
       />
     </div>
     <div className="mb-5">
@@ -167,7 +178,6 @@ const SuccessfulComponent = ({
         label="Confirm Password"
         name="confirm_password"
         type="password"
-        iconName="password"
       />
     </div>
     {msgErr && (
@@ -190,7 +200,7 @@ const SuccessfulComponent = ({
     </div>
     <div className="signin-area mb-3.5">
       <button
-        onClick={onClick}
+        onClick={navigateHandler}
         type="button"
         className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
       >