Creating a Change Password Page and adding Change Password field in Dialog box.
This commit is contained in:
parent
655db6ac74
commit
f3b16a9fc0
202
src/pages/authentication/ChangePassword.jsx
Normal file
202
src/pages/authentication/ChangePassword.jsx
Normal file
@ -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 (
|
||||
<AuthWrapper>
|
||||
<h4 className="mb-2">Change Password</h4>
|
||||
<p className="mb-4">Enter your email and old password to update.</p>
|
||||
<form
|
||||
id="formAuthentication"
|
||||
className="mb-3"
|
||||
onSubmit={handleSubmit(onChangePassword)}
|
||||
>
|
||||
<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"
|
||||
autoFocus
|
||||
/>
|
||||
{errors.email && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.email.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-2 form-password-toggle">
|
||||
<div className="mt-2">
|
||||
<label htmlFor="email" className="form-label list-group-item">
|
||||
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="············"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondy border-top border-end border-bottom "
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.oldPassword && <p className="small-text danger-text">{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">
|
||||
<input
|
||||
type={hidepass1 ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control"
|
||||
{...register("newPassword")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn border-top border-end border-bottom "
|
||||
onClick={() => setHidepass1(!hidepass1)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
|
||||
}}
|
||||
>
|
||||
{hidepass1 ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx 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
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one uppercase letter
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one number
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
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">
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangePasswordPage;
|
||||
@ -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;
|
||||
|
||||
@ -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: <RegisterPage /> },
|
||||
{ path: "/auth/forgot-password", element: <ForgotPasswordPage /> },
|
||||
{ path: "/reset-password", element: <ResetPasswordPage /> },
|
||||
{ path: "/legal-info", element: <LegalInfoCard /> },
|
||||
{ path: "/legal-info", element: <LegalInfoCard /> },
|
||||
{ path: "/auth/changepassword", element: <ChangePasswordPage /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user