WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Added intervals for the requests for the verification

Browse Source
This commit was merged in pull request #28.
This commit is contained in:
Ebube
2023-04-28 02:08:04 +01:00
parent d23408d0ab
commit 7c2be04fac
3 changed files with 238 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/VerifyLink/index.jsx
+122 -85
View File
@@ -3,20 +3,21 @@ import { useLocation, Link, useNavigate } from "react-router-dom";
import AuthLayout from "../AuthLayout";
import InputCom from "../../Helpers/Inputs/InputCom";
import usersService from "../../../services/UsersService";
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import debounce from "../../../hooks/debounce";
export default function VerifyLink() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [msgError, setMsgError] = useState('');
const [pageLoader, setPageLoader] = useState(true)
const [linkSuccess, setLinkSuccess] = useState(false)
const [linkError, setLinkError] = useState(false)
const navigate = useNavigate()
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [msgError, setMsgError] = useState("");
const [linkLoader, setLinkLoader] = useState(false);
const [pageLoader, setPageLoader] = useState(true);
const [linkSuccess, setLinkSuccess] = useState(true);
const navigate = useNavigate();
const location = useLocation();
const queryParams = new URLSearchParams(location?.search)
const token = queryParams.get('vlnk')
const userApi = new usersService()
const queryParams = new URLSearchParams(location?.search);
const token = queryParams.get("vlnk");
const userApi = new usersService();
// email
const handleEmail = (e) => {
@@ -27,107 +28,127 @@ export default function VerifyLink() {
setPassword(e.target.value);
};
// for verifying the incoming verification link and render the correct component
const verifyEmail = useCallback(
async (code) => {
try {
const verifyRes = await userApi.verifyEmail(code)
if (verifyRes.status === 200) {
let { data } = verifyRes
// for verifying the incoming verification link and render the correct component
const verifyEmail = useCallback(async (code) => {
try {
const verifyRes = await userApi.verifyEmail(code);
if (verifyRes.status === 200) {
let { data } = verifyRes;
if (data && data.internal_return >= 0 && data.status_text === 'Link Verfied') {
setPageLoader(false)
setLinkSuccess(true)
} else {
setPageLoader(false)
setLinkError(true)
}
if (
data &&
data.internal_return >= 0 &&
data.status_text === "Link Verfied"
) {
setPageLoader(false);
} else {
setPageLoader(false);
setLinkSuccess(false);
}
} catch (error) {
setPageLoader(false)
setLinkError(true)
throw new Error(error)
}
}, []
)
} catch (error) {
setPageLoader(false);
setLinkSuccess(false);
throw new Error(error);
}
}, []);
// if verification is okay. set a complete signup form
// delay verify requests by 10000ms
const debouncedEmail = debounce(verifyEmail, 1000);
// if verification is okay. set a complete signup form
const completeSignup = async () => {
if (email === '' && password === '') {
setMsgError('Please fill in fields')
if (email === "" && password === "") {
setMsgError("Please fill in fields");
}
try {
if (email !== "" && password !== "") {
setLinkLoader(true);
var postData = {
username: email,
password: password,
sessionid: 'STARTER-NOTREAL',
login_mode: 100,
sessionid: "STARTER-NOTREAL",
verify_link: token,
action: 11012
}
const res = await userApi.CompleteSignUp(postData)
console.log(res)
action: 11012,
};
const res = await userApi.CompleteSignUp(postData);
if (res.status === 200) {
const { data } = res
// Invalid Link & Password Combination
if (data.internal_return == -1 && data.acc == 'Invalid Link & Password Combination') {
setMsgError('Invalid Link & Password Combination')
// setSignUpLoading(false)
const { data } = res;
if (
data?.status > 0 &&
data?.internal_return == 100 &&
data?.session != ""
) {
localStorage.setItem("email", `${data?.email}`);
localStorage.setItem("member_id", `${data?.member_id}`);
localStorage.setItem("session_token", `${data?.session}`);
localStorage.setItem("added", `${data?.added}`);
localStorage.setItem("city", `${data?.city}`);
localStorage.setItem("country", `${data?.country}`);
localStorage.setItem("firstname", `${data?.firstname}`);
localStorage.setItem("last_login", `${data?.last_login}`);
localStorage.setItem("lastname", `${data?.lastname}`);
localStorage.setItem("state", `${data?.state}`);
localStorage.setItem("zip_code", `${data?.zip_code}`);
localStorage.setItem("session", `${data?.session}`);
navigate("/", { replace: true });
setLinkLoader(false);
} else {
setLinkLoader(false);
setMsgError("Invalid Link or Password Combination");
}
if (data && data.status === '1') {
setTimeout(() => {
// setSignUpLoading(false)
navigate("/", { replace: true });
}, 2000)
}
} else {
// setSignUpLoading(false)
setMsgError('An error occurred')
setLinkLoader(false);
setLinkSuccess(false)
setMsgError("An error occurred");
}
}
} catch (error) {
throw new Error(error)
setLinkLoader(false);
setLinkSuccess(false)
throw new Error(error);
} finally {
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
setMsgError(null);
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
}
}
};
useLayoutEffect(() => {
verifyEmail(token)
})
// console.log(token)
debouncedEmail(token);
});
return (
<>
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<AuthLayout slogan="Welcome to WrenchBoard">
{pageLoader ? (
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
) : (
<div className="w-full">
<div className='mb-12'>
<Link to='#'>
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
<div className="mb-12">
<Link to="#">
<img
src={WrenchBoard}
alt="wrenchboard"
className="h-10 mx-auto"
/>
</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">
<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]">
{linkError && 'Invalid verification link'}
{linkSuccess && 'Sign In to WrenchBoard'}
{linkSuccess
? "Sign In to WrenchBoard"
: "Invalid verification link"}
</h1>
</div>
{/* If the verification was a success */}
{
linkSuccess
&&
{linkSuccess ? (
<SuccessfulComponent
email={email}
password={password}
@@ -135,22 +156,29 @@ export default function VerifyLink() {
handlePassword={handlePassword}
onSubmit={completeSignup}
msgErr={msgError}
loader={linkLoader}
/>
}
{/* If the verification was unsuccessful */}
{linkError && <ErrorComponent onClick={() => navigate('/login')} />}
) : (
<ErrorComponent onClick={() => navigate("/login")} />
)}
</div>
</div>
</div>
)}
</AuthLayout>
</>
)
);
}
const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handleEmail, msgErr }) => (
const SuccessfulComponent = ({
onSubmit,
password,
handlePassword,
email,
handleEmail,
msgErr,
loader,
}) => (
<div className="input-area">
{/* INPUT */}
<div className="mb-5">
@@ -175,36 +203,45 @@ const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handle
iconName="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>}
{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]`}
>
<span>Continue</span>
{loader ? (
<div className="signup btn-loader"></div>
) : (
<span>Continue</span>
)}
</button>
</div>
</div>
)
);
const ErrorComponent = ({ onClick }) => (
<div className="input-area">
<div className="my-5">
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
This error occurs because you have already verified this link or the link has expired. Try login or reset password. If none worked, try to create the account from the start.
This error occurs because you have already verified this link or the
link has expired. Try login or reset password. If none worked, try to
create the account from the start.
</p>
</div>
<div className="signin-area flex justify-center mb-3.5">
<button
onClick={onClick}
type="button"
className={`rounded-[0.475rem] mb-6 text-[1.15rem] 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]`}
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]`}
>
<span>Return Home</span>
</button>
</div>
</div>
)
);