From 77ac52820d74bbb2a90ccd6191fa3c9be5ee5378 Mon Sep 17 00:00:00 2001 From: Ebube Date: Sun, 4 Feb 2024 00:29:09 +0100 Subject: [PATCH] added the email and offed the autocomplete attr for the component --- src/components/AuthPages/SignUp/index2.jsx | 131 ++++++++++-------- src/components/AuthPages/VerifyLink/index.jsx | 114 +++++++-------- .../AuthPages/VerifyLink/index2.jsx | 20 +-- .../Helpers/Inputs/InputCom/index.jsx | 2 + 4 files changed, 146 insertions(+), 121 deletions(-) diff --git a/src/components/AuthPages/SignUp/index2.jsx b/src/components/AuthPages/SignUp/index2.jsx index 810d083..acdbbee 100644 --- a/src/components/AuthPages/SignUp/index2.jsx +++ b/src/components/AuthPages/SignUp/index2.jsx @@ -9,19 +9,21 @@ export default function SignUp() { // eslint-disable-next-line no-restricted-globals const queryParams = new URLSearchParams(location?.search); const country = queryParams.get("cnt")?.toUpperCase(); - - const {pathname} = useLocation() - const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist + + const { pathname } = useLocation(); + const currentPath = country + ? `${pathname}?cnt=${country.toLowerCase()}` + : pathname; // Determines the new pathname is country query params exist const [signUpLoading, setSignUpLoading] = useState(false); const [checked, setValue] = useState(false); // for the catch error const [msgError, setMsgError] = useState(""); const [showPassword, setShowPassword] = useState(false); - const [countries, setCountries] = useState({loading:true, data:[]}); + const [countries, setCountries] = useState({ loading: true, data: [] }); const [formData, setFormData] = useState({ - country: country? country : "", + country: country ? country : "", first_name: "", last_name: "", email: "", @@ -47,22 +49,23 @@ export default function SignUp() { // Get Country Api const getCountryList = useCallback(async () => { - try { const res = await userApi.getSignupCountryData(); if (res.status === 200 && res.data.internal_return >= 0) { const { result_list } = await res.data; - if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE - let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API - if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK - setFormData(prev => ({...prev, country: ''})) - return setCountries({loading: false, data: result_list}); + if (country) { + // IF LINK/PATHNAME HAS CNT QUERY VALUE + let cnt = result_list.filter((item) => item.code == country); // test to see country passed in query param exist from list of countries supplied by API + if (!cnt.length) { + // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK + setFormData((prev) => ({ ...prev, country: "" })); + return setCountries({ loading: false, data: result_list }); } - return setCountries({loading: false, data: cnt}); + return setCountries({ loading: false, data: cnt }); } - setCountries({loading: false, data:result_list}); + setCountries({ loading: false, data: result_list }); } else if (res.data.result !== 100) { - setCountries({loading: false, data:[]}); + setCountries({ loading: false, data: [] }); } } catch (error) { throw new Error(error); @@ -113,9 +116,7 @@ export default function SignUp() { if (res.status === 200) { const { data } = res; if (data && data.acc === "DULPICATE") { - setMsgError( - "Unable to use this username. Please try another username." - ); + setMsgError("Duplicate username. Please try another email."); setSignUpLoading(false); } if (data && data.status === "1") { @@ -124,6 +125,11 @@ export default function SignUp() { setSignUpLoading(false); }, 2000); } + + if (data && data.status === "5") { + setMsgError("Something went wrong. Please try another email."); + setSignUpLoading(false); + } } else { setSignUpLoading(false); setMsgError("An error occurred"); @@ -187,7 +193,9 @@ export default function SignUp() { name="country" value={formData.country} inputHandler={handleInputChange} - disable={country && countries?.data?.length <= 1 ? true : false} + disable={ + country && countries?.data?.length <= 1 ? true : false + } />
@@ -339,27 +347,40 @@ export default function SignUp() { {/* APP DOWNLOAD STORE */}
- - + + +
-
@@ -375,7 +396,7 @@ const SelectOption = ({ inputHandler, value, data, // passing the data from parent - disable + disable, }) => { return (
@@ -389,39 +410,33 @@ const SelectOption = ({
diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx index 0ce4a88..75646dc 100644 --- a/src/components/AuthPages/VerifyLink/index.jsx +++ b/src/components/AuthPages/VerifyLink/index.jsx @@ -51,8 +51,7 @@ export default function VerifyLink() { localStorage.setItem("member_id", `${data?.member_id}`); localStorage.setItem("session_token", `${data?.session}`); localStorage.setItem("session", `${data?.session}`); - localStorage.setItem("uid", data?.uid) - + localStorage.setItem("uid", data?.uid); navigate("/", { replace: true }); setLinkLoader(false); @@ -80,19 +79,19 @@ export default function VerifyLink() { }; // for verifying the incoming verification link and render the correct component - const verifyEmail = useCallback(async (code) => { + const verifyEmail = async (code) => { try { const verifyRes = await userApi.verifyEmail(code); if (verifyRes.status === 200) { let { data } = verifyRes; - console.log('TESTING VERIFY',data) + console.log("TESTING VERIFY", data); if ( data && - data.internal_return >= 0 && - data.status == 0 && - data.pending_id != '' && - data.pending_uid != '' && - data.username != '' && + data.internal_return >= 0 && + data.status == 0 && + data.pending_id != "" && + data.pending_uid != "" && + data.username != "" && data.status_text === "Link Verified" ) { setPageLoader(false); @@ -106,12 +105,13 @@ export default function VerifyLink() { setLinkSuccess(false); throw new Error(error); } - }, []); + }; // delay verify requests by 10000ms const debouncedEmail = debounce(verifyEmail, 1000); useEffect(() => { + setEmail("") debouncedEmail(token); }, []); @@ -171,53 +171,57 @@ const SuccessfulComponent = ({ handleEmail, msgErr, loader, -}) => ( -
- {/* INPUT */} -
- -
-
- -
- {msgErr && ( -
- {msgErr} +}) => { + return ( +
+ {/* INPUT */} +
+ +
+
+ +
+ {msgErr && ( +
+ {msgErr} +
+ )} +
+
- )} -
-
-
-); + ); +}; const ErrorComponent = ({ onClick }) => (
diff --git a/src/components/AuthPages/VerifyLink/index2.jsx b/src/components/AuthPages/VerifyLink/index2.jsx index bda6a11..d5a0a39 100644 --- a/src/components/AuthPages/VerifyLink/index2.jsx +++ b/src/components/AuthPages/VerifyLink/index2.jsx @@ -51,8 +51,7 @@ export default function VerifyLink() { localStorage.setItem("member_id", `${data?.member_id}`); localStorage.setItem("session_token", `${data?.session}`); localStorage.setItem("session", `${data?.session}`); - localStorage.setItem("uid", data?.uid) - + localStorage.setItem("uid", data?.uid); navigate("/", { replace: true }); setLinkLoader(false); @@ -85,16 +84,17 @@ export default function VerifyLink() { const verifyRes = await userApi.verifyEmail(code); if (verifyRes.status === 200) { let { data } = verifyRes; - console.log('TESTING VERIFY',data) + console.log("TESTING VERIFY", data); if ( data && - data.internal_return >= 0 && - data.status == 0 && - data.pending_id != '' && - data.pending_uid != '' && - data.username != '' && + data.internal_return >= 0 && + data.status == 0 && + data.pending_id != "" && + data.pending_uid != "" && + data.username != "" && data.status_text === "Link Verified" ) { + setEmail(data.username); setPageLoader(false); } else { setPageLoader(false); @@ -115,6 +115,8 @@ export default function VerifyLink() { debouncedEmail(token); }, []); + // ebube.ojinta+ga1@chiefsoft.com + return ( <> @@ -184,6 +186,7 @@ const SuccessfulComponent = ({ name="email" type="email" iconName="message" + autoComplete="off" />
@@ -196,6 +199,7 @@ const SuccessfulComponent = ({ name="password" type="password" iconName="password" + autoComplete="off" />
{msgErr && ( diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 260548f..bb3e4be 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -27,6 +27,7 @@ export default function InputCom({ direction, tabIndex, error, + autoComplete="on" }) { const inputRef = useRef(null); // Entry Validation @@ -107,6 +108,7 @@ export default function InputCom({ readOnly={disable} onBlur={blurHandler} dir={direction} + autoComplete={autoComplete} /> {iconName && (