Changes in Change Password Popup improve its layout and functionality.

src/pages/authentication/ChangePassword.jsx

@@ -5,9 +5,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import showToast from "../../services/toastService";
 import AuthRepository from "../../repositories/AuthRepository";
 import "./page-auth.css";
+import { useSelector } from "react-redux";
 
-const ChangePasswordSchema = z.object({
+// --- Zod Schema for validation ---
-  email: z.string().email(),
+const ChangePasswordSchema = z
+  .object({
     newPassword: z
       .string()
       .min(8, "Password must be at least 8 characters")
@@ -15,27 +17,41 @@ const ChangePasswordSchema = z.object({
       .regex(/[a-z]/, "Must contain a lowercase letter")
       .regex(/\d/, "Must contain a number")
       .regex(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, "Must contain a special character"),
+    confirmPassword: z.string().min(1, "Confirm Password is required"),
     oldPassword: z.string().min(1, "Old Password is required"),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "New password and Confirm password do not match",
+    path: ["confirmPassword"],
   });
 
 const ChangePasswordPage = ({ onClose }) => {
   const [loading, setLoading] = useState(false);
-  const [hidepass, setHidepass] = useState(true);
+  const [hideOldPass, setHideOldPass] = useState(true);
-  const [hidepass1, setHidepass1] = useState(true);
+  const [hideNewPass, setHideNewPass] = useState(true);
+  const [hideConfirmPass, setHideConfirmPass] = useState(true);
+  const loggedUser = useSelector((store) => store.globalVariables.loginUser);
 
   const {
     register,
     handleSubmit,
     formState: { errors },
     reset,
+    setError,
   } = useForm({
     resolver: zodResolver(ChangePasswordSchema),
   });
 
   const onChangePassword = async (data) => {
     try {
+      let formData = {
+        email: loggedUser?.employeeInfo?.email,
+        oldPassword: data.oldPassword,
+        newPassword: data.newPassword,
+      };
+      console.log(formData);
       setLoading(true);
-      await AuthRepository.changepassword(data);
+      await AuthRepository.changepassword(formData);
       showToast("Your Password changed Successfully", "success");
       setLoading(false);
       reset();
@@ -57,7 +73,7 @@ const ChangePasswordPage = ({ onClose }) => {
         className="modal-dialog"
         role="document"
         style={{
-          maxWidth: "400px",
+          maxWidth: "600px",
           width: "100%",
         }}
       >
@@ -73,123 +89,55 @@ const ChangePasswordPage = ({ onClose }) => {
 
           <h5 className="mb-2">Change Password</h5>
           <p className="mb-4" style={{ fontSize: "14px" }}>
-            Enter your email and old password to update.
+            Enter old and new password to update.
           </p>
 
           <form onSubmit={handleSubmit(onChangePassword)}>
+            {/* Old Password */}
             <div className="mb-3">
-              <label htmlFor="email" className="form-label">
-                Email
-              </label>
-              <input
-                type="text"
-                className="form-control"
-                id="email"
-                {...register("email")}
-                placeholder="Enter your email"
-              />
-              {errors.email && (
-                <div className="danger-text" style={{ fontSize: "12px" }}>
-                  {errors.email.message}
-                </div>
-              )}
-            </div>
-
-            {/* <div className="mb-3">
               <label className="form-label">Old Password</label>
-              <div className="input-group">
+              <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                 <input
-                  type={hidepass ? "password" : "text"}
+                  type={hideOldPass ? "password" : "text"}
-                  className="form-control"
+                  className="form-control form-control-sm border-0 shadow-none"
                   {...register("oldPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                  style={{ flex: 1 }}
                 />
                 <button
                   type="button"
-                  className="btn btn-outline-secondary"
+                  className="btn btn-link p-0 ms-2"
-                  onClick={() => setHidepass(!hidepass)}
+                  style={{ fontSize: "18px", color: "#6c757d" }}
+                  onClick={() => setHideOldPass(!hideOldPass)}
                 >
-                  <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
+                  <i className={`bx ${hideOldPass ? "bx-hide" : "bx-show"}`} />
                 </button>
               </div>
               {errors.oldPassword && (
-                <p className="danger-text small-text text-start">{errors.oldPassword.message}</p>
+                <p className="danger-text small-text text-start">
+                  {errors.oldPassword.message}
+                </p>
               )}
             </div>
 
-            <div className="mb-3">
+            <div className="row">
+              <div className="mb-3 col-md-6">
                 <label className="form-label">New Password</label>
-              <div className="input-group">
+                <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                   <input
-                  type={hidepass1 ? "password" : "text"}
+                    type={hideNewPass ? "password" : "text"}
-                  className="form-control"
+                    className="form-control form-control-sm border-0 shadow-none"
                     {...register("newPassword")}
                     placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                    style={{ flex: 1 }}
                   />
                   <button
                     type="button"
-                  className="btn btn-outline-secondary"
+                    className="btn btn-link p-0 ms-2"
-                  onClick={() => setHidepass1(!hidepass1)}
+                    style={{ fontSize: "18px", color: "#6c757d" }}
+                    onClick={() => setHideNewPass(!hideNewPass)}
                   >
-                  <i className={`bx ${hidepass1 ? "bx-hide" : "bx-show"}`} />
+                    <i className={`bx ${hideNewPass ? "bx-hide" : "bx-show"}`} />
-                </button>
-              </div>
-              {errors.newPassword && (
-                <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                  {errors.newPassword.message}
-                </div>
-              )}
-            </div> */}
-
-            <div className="mb-3">
-              <label className="form-label">Old Password</label>
-              <div className="input-group" style={{ border: "1px solid #ced4da", borderRadius: "0.375rem", overflow: "hidden" }}>
-                <input
-                  type={hidepass ? "password" : "text"}
-                  className="form-control border-0"
-                  {...register("oldPassword")}
-                  placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-                  style={{ boxShadow: "none" }}
-                />
-                <button
-                  type="button"
-                  className="btn btn-outline-light"
-                  style={{
-                    border: "none",
-                    backgroundColor: "#fff",
-                    borderLeft: "1px solid #ced4da",
-                  }}
-                  onClick={() => setHidepass(!hidepass)}
-                >
-                  <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
-                </button>
-              </div>
-              {errors.oldPassword && (
-                <p className="danger-text small-text text-start">{errors.oldPassword.message}</p>
-              )}
-            </div>
-
-            <div className="mb-3">
-              <label className="form-label">New Password</label>
-              <div className="input-group" style={{ border: "1px solid #ced4da", borderRadius: "0.375rem", overflow: "hidden" }}>
-                <input
-                  type={hidepass1 ? "password" : "text"}
-                  className="form-control border-0"
-                  {...register("newPassword")}
-                  placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-                  style={{ boxShadow: "none" }}
-                />
-                <button
-                  type="button"
-                  className="btn btn-outline-light"
-                  style={{
-                    border: "none",
-                    backgroundColor: "#fff",
-                    borderLeft: "1px solid #ced4da",
-                  }}
-                  onClick={() => setHidepass1(!hidepass1)}
-                >
-                  <i className={`bx ${hidepass1 ? "bx-hide" : "bx-show"}`} />
                   </button>
                 </div>
                 {errors.newPassword && (
@@ -199,33 +147,67 @@ const ChangePasswordPage = ({ onClose }) => {
                 )}
               </div>
 
-
+              {/* Confirm Password */}
-            <div className="mb-3 text-start ">
+              <div className="mb-3 col-md-6">
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                <label className="form-label">Confirm New Password</label>
-                Password must be at least 8 characters
+                <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
-              </p>
+                  <input
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                    type={hideConfirmPass ? "password" : "text"}
-                Password must contain at least one uppercase letter
+                    className="form-control form-control-sm border-0 shadow-none"
-              </p>
+                    {...register("confirmPassword")}
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-                Password must contain at least one number
+                    style={{ flex: 1 }}
-              </p>
+                  />
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                  <button
-                Password must contain at least one special character
+                    type="button"
-              </p>
+                    className="btn btn-link p-0 ms-2"
+                    style={{ fontSize: "18px", color: "#6c757d" }}
+                    onClick={() => setHideConfirmPass(!hideConfirmPass)}
+                  >
+                    <i className={`bx ${hideConfirmPass ? "bx-hide" : "bx-show"}`} />
+                  </button>
+                </div>
+                {errors.confirmPassword && (
+                  <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                    {errors.confirmPassword.message}
+                  </div>
+                )}
+              </div>
             </div>
 
-            <div className="d-flex justify-content-between">
+            {/* Action Buttons */}
+            <div className="d-flex justify-content-end">
+              <button type="submit" className="btn btn-primary btn-sm me-2" disabled={loading}>
+                {loading ? "Please Wait..." : "Change Password"}
+              </button>
               <button
                 type="button"
                 className="btn btn-outline-secondary btn-sm"
                 onClick={onClose}
+                disabled={loading}
               >
                 Cancel
               </button>
-              <button type="submit" className="btn btn-primary btn-sm">
+            </div>
-                {loading ? "Please Wait..." : "Update Password"}
+            <div className="mb-3 text-start ">
-              </button>
+              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                Password must :
+              </p>
+              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                - be at least 8 characters
+              </p>
+              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                - must contain at least one uppercase letter
+              </p>
+              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                - must contain at least one lowercase letter
+              </p>
+              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                - must contain at least one number
+              </p>
+              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+                - must contain at least one special character
+              </p>
             </div>
           </form>
         </div>