diff --git a/src/components/Context/ChangePasswordContext.jsx b/src/components/Context/ChangePasswordContext.jsx new file mode 100644 index 00000000..0854b346 --- /dev/null +++ b/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 ( + + {children} + + {isChangePasswordOpen && ( + <> + {/* This is the main Bootstrap modal container */} + {/* It provides the fixed positioning and high z-index */} +
+ {/* The ChangePasswordPage component itself contains the modal-dialog and modal-content */} + +
+ + {/* The modal backdrop */} +
+ + )} + + ); +}; + +export const useChangePassword = () => useContext(ChangePasswordContext); \ No newline at end of file diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx index 72d68965..1be86841 100644 --- a/src/components/Layout/Header.jsx +++ b/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 = () => { - navigate(`/auth/changepassword`); - }; + // const ChangePasswordPage = () => { + // navigate(`/auth/changepassword`); + // }; + + const { openChangePassword } = useChangePassword(); return ( ); }; -export default Header; +export default Header; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index f84f1009..78f351eb 100644 --- a/src/main.tsx +++ b/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( // + + // // , ) + \ No newline at end of file diff --git a/src/pages/authentication/ChangePassword.jsx b/src/pages/authentication/ChangePassword.jsx index c8a83a89..c34fc1a9 100644 --- a/src/pages/authentication/ChangePassword.jsx +++ b/src/pages/authentication/ChangePassword.jsx @@ -1,201 +1,231 @@ -import { 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 React, { useState } from "react"; 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 showToast from "../../services/toastService"; +import AuthRepository from "../../repositories/AuthRepository"; +import "./page-auth.css"; +import { useSelector } from "react-redux"; +// --- Zod Schema for validation --- const ChangePasswordSchema = z .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]/, "Password must contain at least one lowercase letter") - .regex(/\d/, "Password must contain at least one number") + .regex(/[A-Z]/, "Must contain an uppercase letter") + .regex(/[a-z]/, "Must contain a lowercase letter") + .regex(/\d/, "Must contain a number") .regex( /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, - "Password must contain at least one special character" + "Must contain a special character" ), - oldPassword: z - .string() - .min(1, "old Password is required"), + 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 = () => { +const ChangePasswordPage = ({ onClose }) => { const [loading, setLoading] = useState(false); - const [hidepass, setHidepass] = useState(true); - const [hidepass1, setHidepass1] = useState(true); - - const navigate = useNavigate(); + const [hideOldPass, setHideOldPass] = 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); - const { email, oldPassword, newPassword } = data; - let response = await AuthRepository.changepassword(data); + await AuthRepository.changepassword(formData); showToast("Your Password changed Successfully", "success"); setLoading(false); - navigate("/dashboard", { replace: true }); + reset(); + onClose(); } catch (error) { setLoading(false); + showToast("Something went wrong", "error"); } }; + return ( - -

Change Password

-

Enter your email and old password to update.

- ); };