diff --git a/src/Routers.jsx b/src/Routers.jsx index a19959c..061a28d 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -30,6 +30,7 @@ import ResourcePage from "./views/ResourcePage"; import MyTaskPage from "./views/MyTaskPage"; import MyJobsPage from "./views/MyJobsPage"; import ReferralPage from "./views/ReferralPage"; +import VerifyLinkPages from "./views/VerifyLinkPages"; export default function Routers() { return ( @@ -48,6 +49,7 @@ export default function Routers() { path="/update-password" element={} /> + } /> } /> {/* private route */} diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index 71f8c34..f06a758 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -67,7 +67,6 @@ export default function Login() { setLoginLoading(true); // userApi.getUserReminders(); //testing setTimeout(() => { - toast.success("Login Successfully"); navigate("/", { replace: true }); setLoginLoading(false); }, 2000); @@ -119,6 +118,8 @@ export default function Login() { iconName="message" /> + +
{ const res = await userApi.getSignupCountryData() @@ -46,7 +46,7 @@ export default function SignUp() { if (res.status === 200) { const { signup_country } = await res.data setCountries(signup_country) - } else if (res.data.result != 100) { + } else if (res.data.result !== 100) { setCountries('Nothing see here!') } } catch (error) { @@ -57,12 +57,13 @@ export default function SignUp() { const handleSignUp = async () => { let { country, first_name, last_name, email, password } = formData - if (email == '' && password == '' && first_name == '') { + if (email === '' && password === '' && first_name === '') { setMsgError('Please fill in fields') } try { if (email !== '' && password !== '' && first_name !== '' && last_name !== '') { + setSignUpLoading(true) const reqData = { country: country, firstname: first_name, @@ -75,46 +76,46 @@ export default function SignUp() { } const res = await userApi.CreateUser(reqData) - setSignUpLoading(true) if (res.status === 200) { const { data } = res - if (data.status == -1 && data.acc == 'DULPICATE') { + if (data.status === -1 && data.acc === 'DULPICATE') { setMsgError('This account has been already created') setSignUpLoading(false) } - if (data.status > 0 && data.internal_return == 100 && data.session != '') { - localStorage.setItem("email", `${data.email}`); - localStorage.setItem("country", `${data.country}`); - localStorage.setItem("firstname", `${data.firstname}`); - localStorage.setItem("lastname", `${data.lastname}`); - + if (data && data.status === '1') { setTimeout(() => { - navigate("/", { replace: true }); + navigate("/verify-you", { replace: true }); setSignUpLoading(false) }, 2000) } else { - setMsgError(data.status) setSignUpLoading(false) + setMsgError('This account does not exist') } + } else { + setSignUpLoading(false) + setMsgError('An error occurred') } - } else { - setMsgError('This account does not exist') - setSignUpLoading(false) } } catch (error) { throw new Error(error) - setMsgError('An error occurred') } finally { setTimeout(() => { setMsgError(null) }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT) + setFormData({ + first_name: '', + last_name: '', + email: '', + country: '', + password: '' + }) } } useEffect(() => { getCountryList() - }, []) + }) return ( <> diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx new file mode 100644 index 0000000..70b6f5a --- /dev/null +++ b/src/components/AuthPages/VerifyLink/index.jsx @@ -0,0 +1,143 @@ +import { useState, useLayoutEffect, useCallback } from "react"; +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" + +export default function VerifyLink() { + const [pageLoader, setPageLoader] = useState(true) + const [linkSuccess, setLinkSuccess] = useState(false) + const [linkError, setLinkError] = useState(false) + const navigate = useNavigate() + const location = useLocation(); + const queryParams = new URLSearchParams(location?.search) + const token = queryParams.get('vlink') + + const verifyEmail = useCallback( + async (code) => { + const userApi = new usersService() + + 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) + } + console.log(data) + } + } catch (error) { + setPageLoader(false) + setLinkError(true) + throw new Error(error) + } + }, [] + ) + + useLayoutEffect(() => { + verifyEmail(token) + }) + + console.log(token) + + return ( + <> + + {pageLoader ? ( + wrenchboard + ) : ( +
+
+ + wrenchboard + +
+
+
+
+

+ {linkError && 'Invalid verification link'} + {linkSuccess && 'Sign In to WrenchBoard'} +

+
+ {/* If the verification was a success */} + {linkSuccess && } + + {/* If the verification was unsuccessful */} + {linkError && navigate('/login')} />} +
+
+
+ )} + + + ) +} + +const SuccessfulComponent = ({ onClick }) => ( +
+ {/* INPUT */} +
+ +
+
+ +
+
+ +
+
+) + +const ErrorComponent = ({ onClick }) => ( +
+
+

+ 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. +

+
+ + +
+ +
+
+) \ No newline at end of file diff --git a/src/components/AuthPages/VerifyYou/index.jsx b/src/components/AuthPages/VerifyYou/index.jsx index 66607f0..5cf2fee 100644 --- a/src/components/AuthPages/VerifyYou/index.jsx +++ b/src/components/AuthPages/VerifyYou/index.jsx @@ -1,7 +1,4 @@ -import React from "react"; -import titleShape from "../../../assets/images/shape/text-shape-three.svg"; import AuthLayout from "../AuthLayout"; -import Otp from "./Otp"; export default function VerifyYou() { return ( @@ -9,32 +6,24 @@ export default function VerifyYou() { -
-
-
-

- Verification Code +
+
+
+

+ Verification Sent

-
- shape -
- -
- - Continue - +
+

+ To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided. +

-
-

- Dont’t have an aceount ? - - Please resend - +

+

+ If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.

diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 9dd8efc..707d0cc 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useRef } from "react"; import Icons from "../../Icons"; import { Link } from "react-router-dom"; @@ -16,6 +16,53 @@ export default function InputCom({ disable, blurHandler, }) { + const inputRef = useRef(null) + // Entry Validation + // for Min Length: + const minLengthValidation = () => { + if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') { + return 7 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') { + return 5 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') { + return 8 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') { + return 3 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') { + return 1 + } + } + + // for MaxLength + const maxLengthValidation = () => { + if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') { + return 35 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') { + return 49 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') { + return 15 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') { + return 25 + } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') { + return 9 + } + } return (
@@ -38,6 +85,9 @@ export default function InputCom({ type={type} id={name} name={name} + minLength={minLengthValidation()} + maxLength={maxLengthValidation()} + ref={inputRef} readOnly={disable} onBlur={blurHandler} /> diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 944a584..b9acb87 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -298,6 +298,14 @@ class usersService { return this.postAuxEnd("/accounttypes", postData); } + verifyEmail(code) { + const reqData = { + verify_link: code, + action: 11015 + } + return this.postAuxEnd("/verifysignuplink", reqData); + } + /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password) diff --git a/src/views/VerifyLinkPages.jsx b/src/views/VerifyLinkPages.jsx new file mode 100644 index 0000000..0d25ece --- /dev/null +++ b/src/views/VerifyLinkPages.jsx @@ -0,0 +1,5 @@ +import VerifyLink from "../components/AuthPages/VerifyLink"; + +export default function VerifyLinkPages() { + return ; +} diff --git a/yarn.lock b/yarn.lock index ba2acfa..b8fcbb0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4810,11 +4810,6 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fsevents@^2.3.2, fsevents@~2.3.2: - version "2.3.2" - resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" - integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== - function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"