password reset first phase done
This commit was merged in pull request #378.
This commit is contained in:
victorAnumudu
@@ -1,16 +1,18 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import AuthLayout from "../AuthLayout";
|
||||
import ForgetPwdResponse from "../ForgetPwdResponse";
|
||||
import PasswordValidator from "../../../lib/PasswordValidator";
|
||||
|
||||
const VerifyPassword = () => {
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [msgError, setMsgError] = useState("");
|
||||
const [linkLoader, setLinkLoader] = useState(false);
|
||||
const [linkSuccess, setLinkSuccess] = useState(true);
|
||||
const [linkSuccess, setLinkSuccess] = useState(null);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
@@ -23,11 +25,6 @@ const VerifyPassword = () => {
|
||||
setShowPassword(!showPassword);
|
||||
};
|
||||
|
||||
// little checker for the validity of the token
|
||||
if (token?.length != 64) {
|
||||
setLinkSuccess(false);
|
||||
}
|
||||
|
||||
// Password
|
||||
const handlePassword = (e) => {
|
||||
let { name, value } = e?.target;
|
||||
@@ -36,9 +33,31 @@ const VerifyPassword = () => {
|
||||
};
|
||||
|
||||
const completeReset = async () => {
|
||||
if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
|
||||
setMsgError("Please fill in fields");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
|
||||
setMsgError("Passwords does not match");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
|
||||
setMsgError("Password must be upto six characters");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
|
||||
setMsgError("Invalid Password: eg: Password1@");
|
||||
return setTimeout(() => {
|
||||
setMsgError(null);
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
||||
}
|
||||
try {
|
||||
if (password !== "" && confirmPassword !== "") {
|
||||
if (password === confirmPassword) {
|
||||
setLinkLoader(true);
|
||||
var reqData = {
|
||||
sessionid: "DUMMY-CANNOT_BE_EMPTY",
|
||||
@@ -47,35 +66,30 @@ const VerifyPassword = () => {
|
||||
step: 300,
|
||||
action: 730,
|
||||
};
|
||||
|
||||
const res = await userApi?.CompleteResetPassword(reqData);
|
||||
|
||||
if (res.status === 200) {
|
||||
const { data } = res;
|
||||
console.log('RESPONSE', res)
|
||||
|
||||
if (data?.status > 0 && data?.email) {
|
||||
setTimeout(() => {
|
||||
navigate("/login", { replace: true });
|
||||
setLinkLoader(false);
|
||||
}, 2000);
|
||||
// setTimeout(() => {
|
||||
// navigate("/login", { replace: true });
|
||||
// setLinkLoader(false);
|
||||
// }, 2000);
|
||||
setLinkSuccess(true);
|
||||
} else if (data && data?.status == "Invalid Request") {
|
||||
setLinkLoader(false);
|
||||
setLinkSuccess(false);
|
||||
} else {
|
||||
setLinkLoader(false);
|
||||
setMsgError("An error occurred");
|
||||
setLinkSuccess(false);
|
||||
}
|
||||
} else {
|
||||
setLinkLoader(false);
|
||||
setLinkSuccess(false);
|
||||
}
|
||||
} else {
|
||||
setLinkLoader(false);
|
||||
setMsgError("Passwords does not match");
|
||||
}
|
||||
} else {
|
||||
setMsgError("Please fill in fields");
|
||||
}
|
||||
} catch (error) {
|
||||
setLinkLoader(false);
|
||||
setLinkSuccess(false);
|
||||
@@ -87,6 +101,12 @@ const VerifyPassword = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
// little checker for the validity of the token
|
||||
if (token==null || token?.length != 64) {
|
||||
setLinkSuccess(false);
|
||||
}
|
||||
},[])
|
||||
return (
|
||||
<>
|
||||
<AuthLayout slogan="Welcome to WrenchBoard">
|
||||
@@ -102,37 +122,42 @@ const VerifyPassword = () => {
|
||||
</div>
|
||||
<div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
|
||||
<div className="w-full">
|
||||
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
||||
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
|
||||
{linkSuccess ? "Password Reset" : "Invalid verification link"}
|
||||
</h1>
|
||||
{linkSuccess && (
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
Enter a new password to reset
|
||||
</span>
|
||||
)}
|
||||
{linkSuccess && (
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
We'll send an email to confirm reset
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* If the verification was a success */}
|
||||
{linkSuccess ? (
|
||||
<SuccessfulComponent
|
||||
password={password}
|
||||
confirmPassword={confirmPassword}
|
||||
handlePassword={handlePassword}
|
||||
onSubmit={completeReset}
|
||||
msgErr={msgError}
|
||||
loader={linkLoader}
|
||||
showPassword={showPassword}
|
||||
onClick={togglePasswordVisibility}
|
||||
navigateHandler={() => navigate("/login")}
|
||||
/>
|
||||
) : (
|
||||
<ErrorComponent onClick={() => navigate("/login")} />
|
||||
)}
|
||||
{linkSuccess == null ?
|
||||
<>
|
||||
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
||||
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
|
||||
Password Reset
|
||||
</h1>
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
Enter a new password to reset
|
||||
</span>
|
||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||
We'll send an email to confirm reset
|
||||
</span>
|
||||
</div>
|
||||
<SuccessfulComponent
|
||||
password={password}
|
||||
confirmPassword={confirmPassword}
|
||||
handlePassword={handlePassword}
|
||||
onSubmit={completeReset}
|
||||
msgErr={msgError}
|
||||
loader={linkLoader}
|
||||
showPassword={showPassword}
|
||||
onClick={togglePasswordVisibility}
|
||||
navigateHandler={() => navigate("/login")}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
<ForgetPwdResponse
|
||||
title={linkSuccess? 'Password Reset Complete' : (linkSuccess==false && token==null) ? 'Forget Password' : 'Password Reset Error'}
|
||||
message={linkSuccess?
|
||||
'Password Reset Complete. You can login now with your new credentials' :
|
||||
(linkSuccess==false && token==null) ? 'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us' :
|
||||
'Password Reset Error. Please get in touch with support for further support'
|
||||
}
|
||||
type={linkSuccess}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,7 +184,7 @@ const SuccessfulComponent = ({
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
|
||||
value={password?.replace(/./g, "●")}
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
@@ -172,7 +197,7 @@ const SuccessfulComponent = ({
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
|
||||
value={confirmPassword?.replace(/./g, "●")}
|
||||
value={confirmPassword}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Confirm Password"
|
||||
|
||||
Reference in New Issue
Block a user