admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

hide or visible password

Browse Source
This commit is contained in:
Pramod Mahajan 2025-04-07 17:17:21 +05:30
parent 8bce23d9b6
commit a28d290feb
1 changed files with 157 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
src/pages/authentication/ResetPasswordPage.jsx
View File

@ -4,68 +4,80 @@ import "./page-auth.css";
import { AuthWrapper } from "./AuthWrapper"; import { AuthWrapper } from "./AuthWrapper";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import AuthRepository from "../../repositories/AuthRepository"; import AuthRepository from "../../repositories/AuthRepository";
import { z } from 'zod'; import { z } from "zod";
import { useForm } from 'react-hook-form'; import { useForm } from "react-hook-form";
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import {clearAllCache} from "../../slices/apiDataManager"; import { clearAllCache } from "../../slices/apiDataManager";
const resetPasswordSchema = z.object( { const resetPasswordSchema = z
email:z.string().email(), .object({
password: z email: z.string().email(),
.string() password: z
.min(8, 'Password must be at least 8 characters') .string()
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter') .min(8, "Password must be at least 8 characters")
.regex(/[a-z]/, 'Password must contain at least one lowercase letter') .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
.regex(/\d/, 'Password must contain at least one number') .regex(/[a-z]/, "Password must contain at least one lowercase letter")
.regex(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, 'Password must contain at least one special character'), .regex(/\d/, "Password must contain at least one number")
.regex(
confirmPassword: z.string().min(8, 'Password must be at least 8 characters'), /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/,
}) "Password must contain at least one special character"
.refine((data) => data.password === data.confirmPassword, { ),
message: 'Passwords do not match',
path: ['confirmPassword'],
} );
const ResetPasswordPage = () =>
{
const [ searchParams ] = useSearchParams();
const [loading,setLoading] = useState(false)
const token = searchParams.get('token'); confirmPassword: z
const navigate = useNavigate() .string()
.min(8, "Password must be at least 8 characters"),
const {register,handleSubmit,formState: { errors }} = useForm({
resolver:zodResolver(resetPasswordSchema)
}) })
.refine((data) => data.password === data.confirmPassword, {
message: "Passwords do not match",
path: ["confirmPassword"],
});
const ResetPasswordPage = () => {
const [searchParams] = useSearchParams();
const [loading, setLoading] = useState(false);
const [hidepass, setHidepass] = useState(true);
const token = searchParams.get("token");
const navigate = useNavigate();
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(resetPasswordSchema),
});
const onSubmitResetPassword = async (data) => {
try {
setLoading(true);
const { email, password, confirmPassword } = data;
const onSubmitResetPassword = async(data) => {
try
{
setLoading(true)
const {email, password, confirmPassword} = data;
let reqObject = { let reqObject = {
email, email,
token: token, token: token,
newPassword: password newPassword: password,
} };
let response = await AuthRepository.resetPassword( reqObject ); let response = await AuthRepository.resetPassword(reqObject);
showToast( "Password Reseted", "success" ) showToast("Password Reseted", "success");
clearAllCache() clearAllCache();
setLoading(false) setLoading(false);
navigate("/auth/login",{replace:true}) navigate("/auth/login", { replace: true });
} catch ( error ) } catch (error) {
{ setLoading(false);
setLoading(false) showToast("Token is expries or Invalid ", "error");
showToast("Token is expries or Invalid ","error")
} }
}; };
return ( return (
<AuthWrapper> <AuthWrapper>
<h4 className="mb-2">Reset Password? 🔒</h4> <h4 className="mb-2">Reset Password? 🔒</h4>
<p className="mb-4">Enter your email and new password to update.</p> <p className="mb-4">Enter your email and new password to update.</p>
<form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmitResetPassword)}> <form
id="formAuthentication"
className="mb-3"
onSubmit={handleSubmit(onSubmitResetPassword)}
>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="email" className="form-label"> <label htmlFor="email" className="form-label">
Email Email
@ -78,48 +90,106 @@ const ResetPasswordPage = () =>
placeholder="Enter your email" placeholder="Enter your email"
autoFocus autoFocus
/> />
{errors.email && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.email.message}</div>} {errors.email && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.email.message}
</div>
)}
</div> </div>
<div className="mb-3">
<label htmlFor="email" className="form-label"> <div className="mb-2 form-password-toggle">
New Password <div className="mt-2">
</label> <label htmlFor="email" className="form-label list-group-item">
<input New Password
type="password" </label>
autoComplete="true" </div>
id="password" <div className=" input-group input-group-merge">
className="form-control" <input
name="password" type={hidepass ? "password" : "text"}
{...register('password')} autoComplete="true"
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" id="password"
aria-describedby="password" className="form-control"
/> name="password"
{errors.password && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.password.message}</div>} {...register("password")}
</div> placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
<div className=" mb-3"> aria-describedby="password"
<label htmlFor="email" className="form-label"> />
Repeat New Password <span
</label> class="input-group-text lcursor-pointer"
<input onClick={() => setHidepass(!hidepass)}
type="password" >
autoComplete="true" {hidepass ? (
id="password" <i className="bx bx-hide"></i>
className="form-control" ) : (
name="confirmPassword" <i className="bx bx-show"></i>
{...register('confirmPassword')} )}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" </span>
aria-describedby="password" </div>
/> {errors.password && (
{errors.confirmPassword && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.confirmPassword.message}</div>} <div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.password.message}
</div>
)}
<div className="mt-2">
{" "}
<label htmlFor="email" className="form-label">
Repeat New Password
</label>{" "}
</div>
<div className=" input-group input-group-merge">
<input
type={hidepass ? "password" : "text"}
autoComplete="true"
id="password"
className="form-control"
name="confirmPassword"
{...register("confirmPassword")}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
aria-describedby="password"
/>
<span
class="input-group-text cursor-pointer"
onClick={() => setHidepass(!hidepass)}
>
{hidepass ? (
<i className="bx bx-hide"></i>
) : (
<i className="bx bx-show"></i>
)}
</span>
</div>
{errors.confirmPassword && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.confirmPassword.message}
</div>
)}
</div> </div>
<div className="mb-3 text-start "> <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" }}>
<p className="p-0 m-0" style={{fontSize:'9px'}}>Password must contain at least one uppercase letter</p> Password must be at least 8 characters
<p className="p-0 m-0" style={{fontSize:'9px'}}>Password must contain at least one number</p> </p>
<p className="p-0 m-0" style={{fontSize:'9px'}}>Password must contain at least one special character</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> </div>
<button aria-label="Click me" className="btn btn-primary d-grid w-100"> <button aria-label="Click me" className="btn btn-primary d-grid w-100">
{loading ? "Please Wait...":"Update Password"} {loading ? "Please Wait..." : "Update Password"}
</button> </button>
</form> </form>
<div className="text-center"> <div className="text-center">