Creating a Change Password page.

src/components/Context/ChangePasswordContext.jsx

@@ -0,0 +1,42 @@
+import React, { createContext, useState, useContext } from "react";
+import ChangePasswordPage from "../../pages/authentication/ChangePassword";
+
+const ChangePasswordContext = createContext();
+
+export const ChangePasswordProvider = ({ children }) => {
+  const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
+
+  const openChangePassword = () => setIsChangePasswordOpen(true);
+  const closeChangePassword = () => setIsChangePasswordOpen(false);
+
+  return (
+    <ChangePasswordContext.Provider
+      value={{ isChangePasswordOpen, openChangePassword, closeChangePassword }}
+    >
+      {children}
+
+      {isChangePasswordOpen && (
+        <>
+          {/* This is the main Bootstrap modal container */}
+          {/* It provides the fixed positioning and high z-index */}
+          <div
+            className="modal fade show" // 'fade' for animation, 'show' to make it visible
+            style={{ display: 'block' }} // Explicitly set display: block for immediate visibility
+            tabIndex="-1" // Makes the modal focusable
+            role="dialog" // ARIA role for accessibility
+            aria-labelledby="changePasswordModalLabel" // Link to a heading for accessibility
+            aria-modal="true" // Indicate it's a modal dialog
+          >
+            {/* The ChangePasswordPage component itself contains the modal-dialog and modal-content */}
+            <ChangePasswordPage onClose={closeChangePassword} />
+          </div>
+
+          {/* The modal backdrop */}
+          <div className="modal-backdrop fade show"></div>
+        </>
+      )}
+    </ChangePasswordContext.Provider>
+  );
+};
+
+export const useChangePassword = () => useContext(ChangePasswordContext);

src/components/Layout/Header.jsx

@@ -7,6 +7,7 @@ import useMaster from "../../hooks/masterHook/useMaster";
 import { useProfile } from "../../hooks/useProfile";
 import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
+import { useChangePassword } from "../Context/ChangePasswordContext";
 const Header = () => {
   const { profile } = useProfile();
   const dispatch = useDispatch(changeMaster("Job Role"));
@@ -56,9 +57,11 @@ const Header = () => {
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
-  const ChangePasswordPage = () => {
+  // const ChangePasswordPage = () => {
-    navigate(`/auth/changepassword`);
+  //   navigate(`/auth/changepassword`);
-  };
+  // };
+
+  const { openChangePassword } = useChangePassword();
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -624,12 +627,12 @@ const Header = () => {
                   </span>
                 </a>
               </li>
-               <li onClick={ChangePasswordPage}>
+              <li onClick={openChangePassword}> {/* Use the function from the context */}
                 <a
                   aria-label="go to profile"
                   className="dropdown-item cusor-pointer"
                 >
-                  <i className="bx bx-user me-2"></i>
+                  <i className="bx bx-lock-alt me-2"></i>
                   <span className="align-middle">Change Password</span>
                 </a>
               </li>

src/main.tsx

@@ -7,7 +7,7 @@ import App from './App.tsx'
 import { Provider } from 'react-redux';
 import { store } from './store/store';
 import { ModalProvider } from './ModalContext.jsx';
-
+import { ChangePasswordProvider } from './components/Context/ChangePasswordContext.jsx';
 
 
 createRoot(document.getElementById('root')!).render(
@@ -15,10 +15,13 @@ createRoot(document.getElementById('root')!).render(
     // <MasterDataProvider>
   <Provider store={ store }>
     <ModalProvider>
+      <ChangePasswordProvider >
      <App />
+     </ChangePasswordProvider>
     </ModalProvider>
     </Provider>
     // </MasterDataProvider>
 
  // </StrictMode>,
 )
+ 

src/pages/authentication/ChangePassword.jsx

@@ -1,44 +1,33 @@
-import { useState } from "react";
+import React, { useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
-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 { useNavigate } from "react-router-dom";
+import showToast from "../../services/toastService";
-import { clearAllCache } from "../../slices/apiDataManager";
+import AuthRepository from "../../repositories/AuthRepository";
+import "./page-auth.css";
 
-const ChangePasswordSchema = z
+const ChangePasswordSchema = z.object({
-  .object({
   email: z.string().email(),
   newPassword: 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]/, "Must contain an uppercase letter")
-      .regex(/[a-z]/, "Password must contain at least one lowercase letter")
+    .regex(/[a-z]/, "Must contain a lowercase letter")
-      .regex(/\d/, "Password must contain at least one number")
+    .regex(/\d/, "Must contain a number")
-      .regex(
+    .regex(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, "Must contain a special character"),
-        /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/,
+  oldPassword: z.string().min(1, "Old Password is required"),
-        "Password must contain at least one special character"
+});
-      ),
-    oldPassword: z
-      .string()
-      .min(1, "old Password is required"),
-  })
 
-const ChangePasswordPage = () => {
+const ChangePasswordPage = ({ onClose }) => {
   const [loading, setLoading] = useState(false);
   const [hidepass, setHidepass] = useState(true);
   const [hidepass1, setHidepass1] = useState(true);
 
-  const navigate = useNavigate();
-
   const {
     register,
     handleSubmit,
     formState: { errors },
+    reset,
   } = useForm({
     resolver: zodResolver(ChangePasswordSchema),
   });
@@ -46,24 +35,48 @@ const ChangePasswordPage = () => {
   const onChangePassword = async (data) => {
     try {
       setLoading(true);
-      const { email, oldPassword, newPassword } = data;
+      await AuthRepository.changepassword(data);
-      let response = await AuthRepository.changepassword(data);
       showToast("Your Password changed Successfully", "success");
       setLoading(false);
-      navigate("/dashboard", { replace: true });
+      reset();
+      onClose();
     } catch (error) {
       setLoading(false);
+      showToast("Something went wrong", "error");
     }
   };
+
   return (
-    <AuthWrapper>
+    <div
-      <h4 className="mb-2">Change Password</h4>
+      className="modal d-flex align-items-center justify-content-center show"
-      <p className="mb-4">Enter your email and old password to update.</p>
+      tabIndex="-1"
-      <form
+      role="dialog"
-        id="formAuthentication"
+      style={{ display: "flex", backgroundColor: "rgba(0,0,0,0.5)" }}
-        className="mb-3"
-        onSubmit={handleSubmit(onChangePassword)}
     >
+      <div
+        className="modal-dialog"
+        role="document"
+        style={{
+          maxWidth: "400px",
+          width: "100%",
+        }}
+      >
+        <div className="modal-content p-4 rounded shadow bg-white position-relative">
+          {/* Close Button */}
+          <button
+            type="button"
+            className="btn-close position-absolute"
+            style={{ top: "30px", right: "25px" }}
+            aria-label="Close"
+            onClick={onClose}
+          ></button>
+
+          <h5 className="mb-2">Change Password</h5>
+          <p className="mb-4" style={{ fontSize: "14px" }}>
+            Enter your email and old password to update.
+          </p>
+
+          <form onSubmit={handleSubmit(onChangePassword)}>
             <div className="mb-3">
               <label htmlFor="email" className="form-label">
                 Email
@@ -74,99 +87,119 @@ const ChangePasswordPage = () => {
                 id="email"
                 {...register("email")}
                 placeholder="Enter your email"
-            autoFocus
               />
               {errors.email && (
-            <div
+                <div className="danger-text" style={{ fontSize: "12px" }}>
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
                   {errors.email.message}
                 </div>
               )}
             </div>
 
-        <div className="mb-2 form-password-toggle">
+            {/* <div className="mb-3">
-          <div className="mt-2">
+              <label className="form-label">Old Password</label>
-            <label htmlFor="email" className="form-label list-group-item">
+              <div className="input-group">
-              Old Password
-            </label>
-          </div>
-          <div className=" input-group input-group-merge">
                 <input
                   type={hidepass ? "password" : "text"}
-              autoComplete="true"
-              id="password"
                   className="form-control"
-
                   {...register("oldPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                 />
-
                 <button
                   type="button"
-              className="btn btn-outline-secondy border-top border-end border-bottom "
+                  className="btn btn-outline-secondary"
                   onClick={() => setHidepass(!hidepass)}
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: 0,
-
-              }}
                 >
-              {hidepass ? (
+                  <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
-                <i className="bx bx-hide" />
-              ) : (
-                <i className="bx bx-show" />
-              )}
                 </button>
               </div>
-          {errors.oldPassword && <p className="small-text danger-text">{errors.oldPassword.message}</p>}
+              {errors.oldPassword && (
-
+                <p className="danger-text small-text text-start">{errors.oldPassword.message}</p>
-          <div className="mt-2">
+              )}
-            {" "}
-            <label htmlFor="email" className="form-label">
-              New Password
-            </label>{" "}
             </div>
-          <div className=" input-group input-group-merge">
+
+            <div className="mb-3">
+              <label className="form-label">New Password</label>
+              <div className="input-group">
                 <input
                   type={hidepass1 ? "password" : "text"}
-              autoComplete="true"
-              id="password"
                   className="form-control"
                   {...register("newPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-              aria-describedby="password"
                 />
                 <button
                   type="button"
-              className="btn border-top border-end border-bottom "
+                  className="btn btn-outline-secondary"
                   onClick={() => setHidepass1(!hidepass1)}
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: 0,
-
-              }}
                 >
-              {hidepass1 ? (
+                  <i className={`bx ${hidepass1 ? "bx-hide" : "bx-show"}`} />
-                <i className="bx bx-hide" />
-              ) : (
-                <i className="bx bx-show" />
-              )}
                 </button>
               </div>
               {errors.newPassword && (
-            <div
+                <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-              className="danger-text text-start"
+                  {errors.newPassword.message}
-              style={{ fontSize: "12px" }}
+                </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 && (
+                <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                   {errors.newPassword.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
@@ -181,21 +214,23 @@ const ChangePasswordPage = () => {
                 Password must contain at least one special character
               </p>
             </div>
-        <button aria-label="Click me" type="submit" className="btn btn-primary d-grid w-100">
+
+            <div className="d-flex justify-content-between">
+              <button
+                type="button"
+                className="btn btn-outline-secondary btn-sm"
+                onClick={onClose}
+              >
+                Cancel
+              </button>
+              <button type="submit" className="btn btn-primary btn-sm">
                 {loading ? "Please Wait..." : "Update Password"}
               </button>
-      </form>
-      <div className="text-center">
-        <Link
-          aria-label="Go to Login Page"
-          to="/dashboard"
-          className="d-flex align-items-center justify-content-center"
-        >
-          <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
-          Back to home
-        </Link>
             </div>
-    </AuthWrapper>
+          </form>
+        </div>
+      </div>
+    </div>
   );
 };