hide or visible password
This commit is contained in:
Pramod Mahajan
parent
8bce23d9b6
commit
a28d290feb
@ -4,68 +4,80 @@ 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 { 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 { clearAllCache } from "../../slices/apiDataManager";
|
||||
|
||||
const resetPasswordSchema = z.object( {
|
||||
email:z.string().email(),
|
||||
password: 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'),
|
||||
|
||||
confirmPassword: z.string().min(8, 'Password must be at least 8 characters'),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: 'Passwords do not match',
|
||||
path: ['confirmPassword'],
|
||||
} );
|
||||
|
||||
const ResetPasswordPage = () =>
|
||||
{
|
||||
const [ searchParams ] = useSearchParams();
|
||||
const [loading,setLoading] = useState(false)
|
||||
const resetPasswordSchema = z
|
||||
.object({
|
||||
email: z.string().email(),
|
||||
password: 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"
|
||||
),
|
||||
|
||||
const token = searchParams.get('token');
|
||||
const navigate = useNavigate()
|
||||
|
||||
const {register,handleSubmit,formState: { errors }} = useForm({
|
||||
resolver:zodResolver(resetPasswordSchema)
|
||||
confirmPassword: z
|
||||
.string()
|
||||
.min(8, "Password must be at least 8 characters"),
|
||||
})
|
||||
.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 = {
|
||||
email,
|
||||
token: token,
|
||||
newPassword: password
|
||||
}
|
||||
let response = await AuthRepository.resetPassword( reqObject );
|
||||
showToast( "Password Reseted", "success" )
|
||||
clearAllCache()
|
||||
setLoading(false)
|
||||
navigate("/auth/login",{replace:true})
|
||||
} catch ( error )
|
||||
{
|
||||
setLoading(false)
|
||||
showToast("Token is expries or Invalid ","error")
|
||||
email,
|
||||
token: token,
|
||||
newPassword: password,
|
||||
};
|
||||
let response = await AuthRepository.resetPassword(reqObject);
|
||||
showToast("Password Reseted", "success");
|
||||
clearAllCache();
|
||||
setLoading(false);
|
||||
navigate("/auth/login", { replace: true });
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
showToast("Token is expries or Invalid ", "error");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<AuthWrapper>
|
||||
<h4 className="mb-2">Reset Password? 🔒</h4>
|
||||
<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">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Email
|
||||
@ -78,48 +90,106 @@ const ResetPasswordPage = () =>
|
||||
placeholder="Enter your email"
|
||||
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 className="mb-3">
|
||||
<label htmlFor="email" className="form-label">
|
||||
New Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control"
|
||||
name="password"
|
||||
{...register('password')}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
{errors.password && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.password.message}</div>}
|
||||
</div>
|
||||
<div className=" mb-3">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Repeat New Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control"
|
||||
name="confirmPassword"
|
||||
{...register('confirmPassword')}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
{errors.confirmPassword && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.confirmPassword.message}</div>}
|
||||
|
||||
<div className="mb-2 form-password-toggle">
|
||||
<div className="mt-2">
|
||||
<label htmlFor="email" className="form-label list-group-item">
|
||||
New Password
|
||||
</label>
|
||||
</div>
|
||||
<div className=" input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control"
|
||||
name="password"
|
||||
{...register("password")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<span
|
||||
class="input-group-text lcursor-pointer"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide"></i>
|
||||
) : (
|
||||
<i className="bx bx-show"></i>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<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="············"
|
||||
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 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>
|
||||
<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" className="btn btn-primary d-grid w-100">
|
||||
{loading ? "Please Wait...":"Update Password"}
|
||||
{loading ? "Please Wait..." : "Update Password"}
|
||||
</button>
|
||||
</form>
|
||||
<div className="text-center">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user