From b4b64c4c91c3daf5ee3b3586e139ff13946f02a0 Mon Sep 17 00:00:00 2001 From: Umesh Desai Date: Sat, 7 Jun 2025 16:55:08 +0530 Subject: [PATCH] Creating a Change Password page. --- .../Context/ChangePasswordContext.jsx | 42 ++ src/components/Layout/Header.jsx | 15 +- src/main.tsx | 5 +- src/pages/authentication/ChangePassword.jsx | 363 ++++++++++-------- 4 files changed, 254 insertions(+), 171 deletions(-) create mode 100644 src/components/Context/ChangePasswordContext.jsx 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..f149a30e 100644 --- a/src/pages/authentication/ChangePassword.jsx +++ b/src/pages/authentication/ChangePassword.jsx @@ -1,44 +1,33 @@ -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"; -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( - /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, - "Password must contain at least one special character" - ), - oldPassword: z - .string() - .min(1, "old Password is required"), - }) +const ChangePasswordSchema = z.object({ + email: z.string().email(), + newPassword: z + .string() + .min(8, "Password must be at least 8 characters") + .regex(/[A-Z]/, "Must contain an uppercase letter") + .regex(/[a-z]/, "Must contain a lowercase letter") + .regex(/\d/, "Must contain a number") + .regex(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, "Must contain a 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,157 +35,203 @@ const ChangePasswordPage = () => { const onChangePassword = async (data) => { try { setLoading(true); - const { email, oldPassword, newPassword } = data; - let response = await AuthRepository.changepassword(data); + 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 ( - -

Change Password

-

Enter your email and old password to update.

-