From f3b16a9fc0de6b414d80fc6ddbaf71a138595476 Mon Sep 17 00:00:00 2001 From: Umesh Desai Date: Thu, 5 Jun 2025 17:57:53 +0530 Subject: [PATCH 1/2] Creating a Change Password Page and adding Change Password field in Dialog box. --- src/pages/authentication/ChangePassword.jsx | 202 ++++++++++++++++++++ src/repositories/AuthRepository.jsx | 1 + src/router/AppRoutes.jsx | 4 +- 3 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 src/pages/authentication/ChangePassword.jsx diff --git a/src/pages/authentication/ChangePassword.jsx b/src/pages/authentication/ChangePassword.jsx new file mode 100644 index 00000000..c8a83a89 --- /dev/null +++ b/src/pages/authentication/ChangePassword.jsx @@ -0,0 +1,202 @@ +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 { 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"; + +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 ChangePasswordPage = () => { + const [loading, setLoading] = useState(false); + const [hidepass, setHidepass] = useState(true); + const [hidepass1, setHidepass1] = useState(true); + + const navigate = useNavigate(); + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(ChangePasswordSchema), + }); + + const onChangePassword = async (data) => { + try { + setLoading(true); + const { email, oldPassword, newPassword } = data; + let response = await AuthRepository.changepassword(data); + showToast("Your Password changed Successfully", "success"); + setLoading(false); + navigate("/dashboard", { replace: true }); + } catch (error) { + setLoading(false); + } + }; + return ( + +

Change Password

+

Enter your email and old password to update.

+
+
+ + + {errors.email && ( +
+ {errors.email.message} +
+ )} +
+ +
+
+ +
+
+ + + +
+ {errors.oldPassword &&

{errors.oldPassword.message}

} + +
+ {" "} + {" "} +
+
+ + +
+ {errors.newPassword && ( +
+ {errors.newPassword.message} +
+ )} +
+ +
+

+ Password must be at least 8 characters +

+

+ Password must contain at least one uppercase letter +

+

+ Password must contain at least one number +

+

+ Password must contain at least one special character +

+
+ + +
+ + + Back to home + +
+
+ ); +}; + +export default ChangePasswordPage; diff --git a/src/repositories/AuthRepository.jsx b/src/repositories/AuthRepository.jsx index 231d8dea..0ce0e973 100644 --- a/src/repositories/AuthRepository.jsx +++ b/src/repositories/AuthRepository.jsx @@ -10,6 +10,7 @@ const AuthRepository = { resetPassword: (data) => api.post("/api/auth/reset-password", data), forgotPassword: (data) => api.post("/api/auth/forgot-password", data), sendMail: (data) => api.post("/api/auth/sendmail", data), + changepassword: (data) => api.post("/api/auth/change-password", data), }; export default AuthRepository; diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx index 6fbeefa0..6d355867 100644 --- a/src/router/AppRoutes.jsx +++ b/src/router/AppRoutes.jsx @@ -11,6 +11,7 @@ import LoginPage from "../pages/authentication/LoginPage"; import RegisterPage from "../pages/authentication/RegisterPage"; import ForgotPasswordPage from "../pages/authentication/ForgotPasswordPage"; import ResetPasswordPage from "../pages/authentication/ResetPasswordPage"; +import ChangePasswordPage from "../pages/authentication/ChangePassword"; // Home & Protected Pages import Dashboard from "../components/Dashboard/Dashboard"; @@ -46,7 +47,8 @@ const router = createBrowserRouter( { path: "/auth/reqest/demo", element: }, { path: "/auth/forgot-password", element: }, { path: "/reset-password", element: }, - { path: "/legal-info", element: }, + { path: "/legal-info", element: }, + { path: "/auth/changepassword", element: }, ], }, { From 0053dbaf568ab00a1d6169314821b2a32d4490f1 Mon Sep 17 00:00:00 2001 From: Umesh Desai Date: Thu, 5 Jun 2025 18:06:58 +0530 Subject: [PATCH 2/2] Changes in Reset Password Page and adding field in Dialog box is " Change Password" --- src/components/Layout/Header.jsx | 12 ++++++++ .../authentication/ResetPasswordPage.jsx | 28 +++++++++++++++---- 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx index a0568c1c..72d68965 100644 --- a/src/components/Layout/Header.jsx +++ b/src/components/Layout/Header.jsx @@ -56,6 +56,9 @@ const Header = () => { const handleProfilePage = () => { navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`); }; + const ChangePasswordPage = () => { + navigate(`/auth/changepassword`); + }; return (