New Password Field on Reset Password Page Should Be Empty
This commit is contained in:
parent
b934527cf5
commit
f22ddc7464
@ -93,153 +93,155 @@ const ResetPassword = () => {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
|
||||
<div className="block p-4 p-sm-5 bg-gray-60">
|
||||
<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)}
|
||||
>
|
||||
<div className="mb-3 text-start">
|
||||
<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 text-start">
|
||||
<div className="mt-2">
|
||||
<label htmlFor="email" className="form-label">
|
||||
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"
|
||||
/>
|
||||
<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.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={hidepass1 ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control"
|
||||
name="confirmPassword"
|
||||
{...register("confirmPassword")}
|
||||
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.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>
|
||||
</div>
|
||||
<button aria-label="Click me" 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="/auth/login"
|
||||
className="d-flex align-items-center justify-content-center"
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
|
||||
<div className="block p-4 p-sm-5 bg-gray-60">
|
||||
<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)}
|
||||
>
|
||||
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
|
||||
Back to login
|
||||
</Link>
|
||||
<div className="mb-3 text-start">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control border border-secondary"
|
||||
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 text-start">
|
||||
<div className="mt-2">
|
||||
<label htmlFor="email" className="form-label">
|
||||
New Password
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="input-group input-group-merge d-flex align-items-center border border-secondary rounded px-2">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control form-control-xl border-0 shadow-none"
|
||||
name="password"
|
||||
{...register("password")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link-secondary p-0 ms-2"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</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 d-flex align-items-center border border-secondary rounded px-2">
|
||||
<input
|
||||
type={hidepass1 ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control form-control-xl border-0 shadow-none"
|
||||
name="confirmPassword"
|
||||
{...register("confirmPassword")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link-secondary p-0 ms-2"
|
||||
onClick={() => setHidepass1(!hidepass1)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass1 ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
<button aria-label="Click me" 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="/auth/login"
|
||||
className="d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
|
||||
Back to login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user