From 1407cb976922e8573af1a97ec03e61a5b071dbc3 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 26 Apr 2023 23:55:17 +0100 Subject: [PATCH] little fixes to auth pages --- src/components/AuthPages/SignUp/index.jsx | 24 +-- src/components/AuthPages/VerifyLink/index.jsx | 178 +++++++++++------- src/components/AuthPages/VerifyYou/index.jsx | 50 +---- .../Helpers/Inputs/InputCom/index.jsx | 72 ++++++- 4 files changed, 189 insertions(+), 135 deletions(-) diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index ee8732d..5ac6a88 100644 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -37,7 +37,7 @@ export default function SignUp() { const navigate = useNavigate(); const userApi = new usersService(); - + // Get Country Api const getCountryList = async () => { const res = await userApi.getSignupCountryData() @@ -63,6 +63,7 @@ export default function SignUp() { try { if (email !== '' && password !== '' && first_name !== '' && last_name !== '') { + setSignUpLoading(true) const reqData = { country: country, firstname: first_name, @@ -75,7 +76,6 @@ export default function SignUp() { } const res = await userApi.CreateUser(reqData) - setSignUpLoading(true) if (res.status === 200) { const { data } = res @@ -83,24 +83,19 @@ export default function SignUp() { 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) + } + } else { + setMsgError('This account does not exist') + setSignUpLoading(false) } - } else { - setMsgError('This account does not exist') - setSignUpLoading(false) } } catch (error) { throw new Error(error) @@ -244,8 +239,7 @@ export default function SignUp() { - {/* - Continue - */} +
+
+
+

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

+
+ {/* If the verification was a success */} + {linkSuccess && } + + {/* If the verification was unsuccessful */} + {linkError && navigate('/login')} />}
- + )} ) -} \ No newline at end of file +} + +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 37b7878..1edb40e 100644 --- a/src/components/AuthPages/VerifyYou/index.jsx +++ b/src/components/AuthPages/VerifyYou/index.jsx @@ -1,7 +1,5 @@ -import React from "react"; -import titleShape from "../../../assets/images/shape/text-shape-three.svg"; import AuthLayout from "../AuthLayout"; -import Otp from "./Otp"; +import InputCom from "../../Helpers/Inputs/InputCom"; export default function VerifyYou() { return ( @@ -15,51 +13,19 @@ export default function VerifyYou() {

- Sign In to WrenchBoard + Verification Sent

- {/* INPUT */}
- +

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

- -
-
- - {/* - Continue - */} +

+ 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 4dfcc4f..9b191c0 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"; @@ -15,18 +15,67 @@ export default function InputCom({ onClick, disable }) { + 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 + } + } + + console.log(inputRef.current?.name, inputRef.current?.minLength) return (
- {label && ( - - )} - {forgotPassword && Forgot Password?} + {label && ( + + )} + {forgotPassword && Forgot Password?}
{iconName && (