victorAnumudu
289 lines
9.9 KiB
React
289 lines
9.9 KiB
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 "../AuthLayout2";
|
|
import ForgetPwdResponse from "../ForgetPwdResponse";
|
|
import PasswordValidator from "../../../lib/PasswordValidator";
|
|
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|
|
|
const VerifyPassword = () => {
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [requestStatus, setRequestStatus] = useState({
|
|
loading: true,
|
|
status: false,
|
|
data: [],
|
|
});
|
|
const [msgError, setMsgError] = useState("");
|
|
const [linkLoader, setLinkLoader] = useState(false);
|
|
const [linkSuccess, setLinkSuccess] = useState(null);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const queryParams = new URLSearchParams(location?.search);
|
|
const token = queryParams.get("passlink");
|
|
const userApi = new usersService();
|
|
|
|
// To Show and Hide Password
|
|
const togglePasswordVisibility = () => {
|
|
setShowPassword(!showPassword);
|
|
};
|
|
|
|
// Password
|
|
const handlePassword = (e) => {
|
|
let { name, value } = e?.target;
|
|
if (name == "password") setPassword(value);
|
|
if (name == "confirm_password") setConfirmPassword(value);
|
|
};
|
|
|
|
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(
|
|
"Password must contain alphanumeric, uppercase and special character: eg: Password1@"
|
|
);
|
|
return setTimeout(() => {
|
|
setMsgError(null);
|
|
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
|
|
}
|
|
try {
|
|
setLinkLoader(true);
|
|
var reqData = {
|
|
reset_link: token,
|
|
newpass: password,
|
|
m_uid: requestStatus.data?.m_uid || "",
|
|
reset_uid: requestStatus.data?.reset_uid || "",
|
|
step: 300,
|
|
};
|
|
const res = await userApi?.CompleteResetPassword(reqData);
|
|
|
|
if (res.status == 200) {
|
|
const { data } = res;
|
|
if (data?.internal_return >= 0) {
|
|
// setTimeout(() => {
|
|
// navigate("/login", { replace: true });
|
|
// setLinkLoader(false);
|
|
// }, 2000);
|
|
setLinkSuccess(true);
|
|
} else {
|
|
setLinkLoader(false);
|
|
setMsgError("An error occurred");
|
|
setLinkSuccess(false);
|
|
}
|
|
} else {
|
|
setLinkLoader(false);
|
|
setLinkSuccess(false);
|
|
}
|
|
} catch (error) {
|
|
setLinkLoader(false);
|
|
setLinkSuccess(false);
|
|
throw new Error(error);
|
|
} finally {
|
|
setTimeout(() => {
|
|
setMsgError(null);
|
|
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
|
|
}
|
|
};
|
|
|
|
const verifyResetPwd = () => {
|
|
// FUNCTION TO VERIFY RESET PASSWORD LINK
|
|
setRequestStatus({ loading: true, status: false, data: [] });
|
|
var reqData = {
|
|
reset_link: token,
|
|
step: 200,
|
|
};
|
|
userApi
|
|
.CompleteResetPassword(reqData)
|
|
.then((res) => {
|
|
if (res.status != 200 || res.data.internal_return < 0) {
|
|
return setRequestStatus({ loading: false, status: false, data: [] });
|
|
}
|
|
setRequestStatus({ loading: false, status: true, data: res.data });
|
|
})
|
|
.catch((error) => {
|
|
setRequestStatus({ loading: false, status: false, data: [] });
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
// little checker for the validity of the token
|
|
if (token == null || token?.length != 64) {
|
|
return setRequestStatus({ loading: false, status: false, data: [] });
|
|
}
|
|
verifyResetPwd();
|
|
}, []);
|
|
return (
|
|
<>
|
|
<AuthLayout slogan="Welcome to WrenchBoard">
|
|
<div className="w-full">
|
|
<div className="mb-12">
|
|
<Link to="#">
|
|
<img
|
|
src={WrenchBoard}
|
|
alt="wrenchboard"
|
|
className="h-10 mx-auto"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="flex place-content-center">
|
|
{requestStatus.loading ? (
|
|
<LoadingSpinner color="sky-blue" size="16" height="h-300px" />
|
|
) : !requestStatus.loading && requestStatus.status ? (
|
|
<div className="w-10/12">
|
|
{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>
|
|
<div>
|
|
<p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
|
|
Must include a special, numeric, uppercase and lowercase
|
|
character
|
|
</p>
|
|
</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"
|
|
: "Password Reset Error"
|
|
}
|
|
message={
|
|
linkSuccess
|
|
? "Password Reset Complete. You can login now with your new credentials"
|
|
: "Password Reset Error. Please get in touch with support for further support"
|
|
}
|
|
type={linkSuccess}
|
|
/>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="w-11/12 sm:max-w-[500px] title-area flex flex-col justify-center items-center relative text-center mb-7">
|
|
<ForgetPwdResponse
|
|
title={"Forget Password"}
|
|
message={
|
|
"We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us"
|
|
}
|
|
type={requestStatus.status}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AuthLayout>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default VerifyPassword;
|
|
|
|
const SuccessfulComponent = ({
|
|
onSubmit,
|
|
navigateHandler,
|
|
showPassword,
|
|
onClick,
|
|
password,
|
|
confirmPassword,
|
|
handlePassword,
|
|
msgErr,
|
|
loader,
|
|
}) => (
|
|
<div className="input-area">
|
|
{/* INPUT */}
|
|
<div className="mb-5">
|
|
<InputCom
|
|
fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
|
|
value={password}
|
|
inputHandler={handlePassword}
|
|
placeholder="● ● ● ● ● ●"
|
|
label="Password"
|
|
name="password"
|
|
type={showPassword ? "text" : "password"}
|
|
onClick={onClick}
|
|
passIcon={showPassword ? "show-password" : "hide-password"}
|
|
/>
|
|
</div>
|
|
<div className="mb-5">
|
|
<InputCom
|
|
fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
|
|
value={confirmPassword}
|
|
inputHandler={handlePassword}
|
|
placeholder="● ● ● ● ● ●"
|
|
label="Confirm Password"
|
|
name="confirm_password"
|
|
type="password"
|
|
/>
|
|
</div>
|
|
{msgErr && (
|
|
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
|
|
{msgErr}
|
|
</div>
|
|
)}
|
|
<div className="signin-area mb-3.5">
|
|
<button
|
|
onClick={onSubmit}
|
|
type="button"
|
|
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
|
|
>
|
|
{loader ? (
|
|
<div className="signup btn-loader"></div>
|
|
) : (
|
|
<span>Continue</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="signin-area mb-3.5">
|
|
<button
|
|
onClick={navigateHandler}
|
|
type="button"
|
|
className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
|
|
>
|
|
<span>Return Home</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|