From a28d290febafbac413d181f961daf0df91a00ad1 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Mon, 7 Apr 2025 17:17:21 +0530
Subject: [PATCH] hide or visible password

---
 .../authentication/ResetPasswordPage.jsx      | 244 +++++++++++-------
 1 file changed, 157 insertions(+), 87 deletions(-)

diff --git a/src/pages/authentication/ResetPasswordPage.jsx b/src/pages/authentication/ResetPasswordPage.jsx
index c933cd7c..fbcc0fef 100644
--- a/src/pages/authentication/ResetPasswordPage.jsx
+++ b/src/pages/authentication/ResetPasswordPage.jsx
@@ -4,68 +4,80 @@ import "./page-auth.css";
 import { AuthWrapper } from "./AuthWrapper";
 import showToast from "../../services/toastService";
 import AuthRepository from "../../repositories/AuthRepository";
-import { z } from 'zod';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useNavigate } from "react-router-dom";
-import {clearAllCache} from "../../slices/apiDataManager";
+import { clearAllCache } from "../../slices/apiDataManager";
 
-const resetPasswordSchema = z.object( {
-  email:z.string().email(),
-  password: z
-    .string()
-    .min(8, 'Password must be at least 8 characters')
-    .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
-    .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
-    .regex(/\d/, 'Password must contain at least one number')
-    .regex(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, 'Password must contain at least one special character'),
-  
-  confirmPassword: z.string().min(8, 'Password must be at least 8 characters'),
-})
-  .refine((data) => data.password === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword'],
-  } );
-  
-const ResetPasswordPage = () =>
-{
-  const [ searchParams ] = useSearchParams();
-  const [loading,setLoading] = useState(false)
+const resetPasswordSchema = z
+  .object({
+    email: z.string().email(),
+    password: z
+      .string()
+      .min(8, "Password must be at least 8 characters")
+      .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
+      .regex(/[a-z]/, "Password must contain at least one lowercase letter")
+      .regex(/\d/, "Password must contain at least one number")
+      .regex(
+        /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/,
+        "Password must contain at least one special character"
+      ),
 
-  const token = searchParams.get('token'); 
-  const navigate = useNavigate()
-  
-  const {register,handleSubmit,formState: { errors }}  = useForm({
-    resolver:zodResolver(resetPasswordSchema)
+    confirmPassword: z
+      .string()
+      .min(8, "Password must be at least 8 characters"),
   })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
+
+const ResetPasswordPage = () => {
+  const [searchParams] = useSearchParams();
+  const [loading, setLoading] = useState(false);
+  const [hidepass, setHidepass] = useState(true);
+
+  const token = searchParams.get("token");
+  const navigate = useNavigate();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(resetPasswordSchema),
+  });
+
+  const onSubmitResetPassword = async (data) => {
+    try {
+      setLoading(true);
+      const { email, password, confirmPassword } = data;
 
-  const onSubmitResetPassword = async(data) => {
-    try
-    {
-      setLoading(true)
-      const {email, password, confirmPassword} = data;
-   
       let reqObject = {
-         email,
-         token: token,
-        newPassword: password 
-      }
-      let response = await AuthRepository.resetPassword( reqObject );
-      showToast( "Password Reseted", "success" )
-      clearAllCache()
-      setLoading(false)
-      navigate("/auth/login",{replace:true})
-    } catch ( error )
-    {
-      setLoading(false)
-      showToast("Token is expries or Invalid ","error")
+        email,
+        token: token,
+        newPassword: password,
+      };
+      let response = await AuthRepository.resetPassword(reqObject);
+      showToast("Password Reseted", "success");
+      clearAllCache();
+      setLoading(false);
+      navigate("/auth/login", { replace: true });
+    } catch (error) {
+      setLoading(false);
+      showToast("Token is expries or Invalid ", "error");
     }
   };
   return (
     <AuthWrapper>
       <h4 className="mb-2">Reset Password? 🔒</h4>
       <p className="mb-4">Enter your email and new password to update.</p>
-      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmitResetPassword)}>
+      <form
+        id="formAuthentication"
+        className="mb-3"
+        onSubmit={handleSubmit(onSubmitResetPassword)}
+      >
         <div className="mb-3">
           <label htmlFor="email" className="form-label">
             Email
@@ -78,48 +90,106 @@ const ResetPasswordPage = () =>
             placeholder="Enter your email"
             autoFocus
           />
-          {errors.email && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.email.message}</div>}
+          {errors.email && (
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
+              {errors.email.message}
+            </div>
+          )}
         </div>
-        <div className="mb-3">
-          <label htmlFor="email" className="form-label">
-            New Password
-          </label>
-          <input
-            type="password"
-            autoComplete="true"
-            id="password"
-            className="form-control"
-            name="password"
-            {...register('password')}
-            placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-            aria-describedby="password"
-          />
-          {errors.password && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.password.message}</div>}
-        </div>
-        <div className=" mb-3">
-          <label htmlFor="email" className="form-label">
-            Repeat New Password
-          </label>
-          <input
-            type="password"
-            autoComplete="true"
-            id="password"
-            className="form-control"
-            name="confirmPassword"
-            {...register('confirmPassword')}
-            placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-            aria-describedby="password"
-          />
-          {errors.confirmPassword && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.confirmPassword.message}</div>}
+
+        <div className="mb-2 form-password-toggle">
+          <div className="mt-2">
+            <label htmlFor="email" className="form-label list-group-item">
+              New Password
+            </label>
+          </div>
+          <div className=" input-group input-group-merge">
+            <input
+              type={hidepass ? "password" : "text"}
+              autoComplete="true"
+              id="password"
+              className="form-control"
+              name="password"
+              {...register("password")}
+              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+              aria-describedby="password"
+            />
+            <span
+              class="input-group-text lcursor-pointer"
+              onClick={() => setHidepass(!hidepass)}
+            >
+              {hidepass ? (
+                <i className="bx bx-hide"></i>
+              ) : (
+                <i className="bx bx-show"></i>
+              )}
+            </span>
+          </div>
+          {errors.password && (
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
+                {errors.password.message}
+              </div>
+            )}
+          <div className="mt-2">
+            {" "}
+            <label htmlFor="email" className="form-label">
+              Repeat New Password
+            </label>{" "}
+          </div>
+          <div className=" input-group input-group-merge">
+            <input
+               type={hidepass ? "password" : "text"}
+              autoComplete="true"
+              id="password"
+              className="form-control"
+              name="confirmPassword"
+              {...register("confirmPassword")}
+              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+              aria-describedby="password"
+            />
+            <span
+              class="input-group-text cursor-pointer"
+              onClick={() => setHidepass(!hidepass)}
+            >
+              {hidepass ? (
+                <i className="bx bx-hide"></i>
+              ) : (
+                <i className="bx bx-show"></i>
+              )}
+            </span>
+          </div>
+          {errors.confirmPassword && (
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
+                {errors.confirmPassword.message}
+              </div>
+            )}
         </div>
+
         <div className="mb-3 text-start ">
-          <p className="p-0 m-0"style={{fontSize:'9px'}}>Password must be at least 8 characters</p>
-          <p  className="p-0 m-0" style={{fontSize:'9px'}}>Password must contain at least one uppercase letter</p>
-         <p  className="p-0 m-0" style={{fontSize:'9px'}}>Password must contain at least one number</p>
-         <p  className="p-0 m-0" style={{fontSize:'9px'}}>Password must contain at least one special character</p>   
+          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+            Password must be at least 8 characters
+          </p>
+          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+            Password must contain at least one uppercase letter
+          </p>
+          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+            Password must contain at least one number
+          </p>
+          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+            Password must contain at least one special character
+          </p>
         </div>
         <button aria-label="Click me" className="btn btn-primary d-grid w-100">
-          {loading ? "Please Wait...":"Update Password"}
+          {loading ? "Please Wait..." : "Update Password"}
         </button>
       </form>
       <div className="text-center">