added second batch

This commit is contained in:
2024-01-23 09:00:30 +01:00
parent 14c894da6c
commit 926837c656
9 changed files with 352 additions and 304 deletions
+124 -105
View File
@@ -11,7 +11,11 @@ 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 [requestStatus, setRequestStatus] = useState({
loading: true,
status: false,
data: [],
});
const [msgError, setMsgError] = useState("");
const [linkLoader, setLinkLoader] = useState(false);
const [linkSuccess, setLinkSuccess] = useState(null);
@@ -35,60 +39,64 @@ const VerifyPassword = () => {
};
const completeReset = async () => {
if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
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
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
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@");
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 = {
sessionid: "DUMMY-CANNOT_BE_EMPTY",
reset_link: token,
newpass: password,
m_uid: requestStatus.data?.m_uid || '',
reset_uid: requestStatus.data?.reset_uid || '',
step: 300,
action: 730,
};
const res = await userApi?.CompleteResetPassword(reqData);
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);
}
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);
@@ -100,31 +108,33 @@ const VerifyPassword = () => {
}
};
const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
setRequestStatus({loading: true, status:false, data: []})
const verifyResetPwd = () => {
// FUNCTION TO VERIFY RESET PASSWORD LINK
setRequestStatus({ loading: true, status: false, data: [] });
var reqData = {
sessionid: "DUMMY-CANNOT_BE_EMPTY",
reset_link: token,
step: 200,
action: 730,
};
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: []})
})
}
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(()=>{
useEffect(() => {
// little checker for the validity of the token
if (token==null || token?.length != 64) {
return setRequestStatus({loading: false, status:false, data: []});
}
verifyResetPwd()
},[])
if (token == null || token?.length != 64) {
return setRequestStatus({ loading: false, status: false, data: [] });
}
verifyResetPwd();
}, []);
return (
<>
<AuthLayout slogan="Welcome to WrenchBoard">
@@ -139,59 +149,68 @@ const VerifyPassword = () => {
</Link>
</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">
{requestStatus.loading ?
<LoadingSpinner color='sky-blue' size='16' height='h-300px' />
:
!requestStatus.loading && requestStatus.status ?
<div className="w-full">
{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")}
{requestStatus.loading ? (
<LoadingSpinner color="sky-blue" size="16" height="h-300px" />
) : !requestStatus.loading && requestStatus.status ? (
<div className="w-full">
{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}
/>
</>
:
<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="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 className="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>
+124 -105
View File
@@ -11,7 +11,11 @@ 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 [requestStatus, setRequestStatus] = useState({
loading: true,
status: false,
data: [],
});
const [msgError, setMsgError] = useState("");
const [linkLoader, setLinkLoader] = useState(false);
const [linkSuccess, setLinkSuccess] = useState(null);
@@ -35,60 +39,64 @@ const VerifyPassword = () => {
};
const completeReset = async () => {
if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
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
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
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@");
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 = {
sessionid: "DUMMY-CANNOT_BE_EMPTY",
reset_link: token,
newpass: password,
m_uid: requestStatus.data?.m_uid || '',
reset_uid: requestStatus.data?.reset_uid || '',
step: 300,
action: 730,
};
const res = await userApi?.CompleteResetPassword(reqData);
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);
}
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);
@@ -100,31 +108,33 @@ const VerifyPassword = () => {
}
};
const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
setRequestStatus({loading: true, status:false, data: []})
const verifyResetPwd = () => {
// FUNCTION TO VERIFY RESET PASSWORD LINK
setRequestStatus({ loading: true, status: false, data: [] });
var reqData = {
sessionid: "DUMMY-CANNOT_BE_EMPTY",
reset_link: token,
step: 200,
action: 730,
};
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: []})
})
}
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(()=>{
useEffect(() => {
// little checker for the validity of the token
if (token==null || token?.length != 64) {
return setRequestStatus({loading: false, status:false, data: []});
}
verifyResetPwd()
},[])
if (token == null || token?.length != 64) {
return setRequestStatus({ loading: false, status: false, data: [] });
}
verifyResetPwd();
}, []);
return (
<>
<AuthLayout slogan="Welcome to WrenchBoard">
@@ -139,59 +149,68 @@ const VerifyPassword = () => {
</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-11/12 sm:max-w-[500px]">
{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")}
{requestStatus.loading ? (
<LoadingSpinner color="sky-blue" size="16" height="h-300px" />
) : !requestStatus.loading && requestStatus.status ? (
<div className="w-11/12 sm:max-w-[500px]">
{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}
/>
</>
:
<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 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>