diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index 2b2069e..8224c6c 100644 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -6,10 +6,10 @@ import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; export default function SignUp() { - const [signUpLoading, setSignUpLoading] = useState(false) + const [signUpLoading, setSignUpLoading] = useState(false); const [checked, setValue] = useState(false); // for the catch error - const [msgError, setMsgError] = useState(''); + const [msgError, setMsgError] = useState(""); const [showPassword, setShowPassword] = useState(false); const [countries, setCountries] = useState([]); @@ -18,7 +18,7 @@ export default function SignUp() { first_name: "", last_name: "", email: "", - password: "" + password: "", }); const handleInputChange = (event) => { @@ -39,33 +39,36 @@ export default function SignUp() { const userApi = new usersService(); // Get Country Api - const getCountryList = useCallback( - async () => { - const res = await userApi.getSignupCountryData() - - try { - if (res.status === 200) { - const { signup_country } = await res.data - setCountries(signup_country) - } else if (res.data.result !== 100) { - setCountries('Nothing see here!') - } - } catch (error) { - throw new Error(error) + const getCountryList = useCallback(async () => { + const res = await userApi.getSignupCountryData(); + + try { + if (res.status === 200) { + const { signup_country } = await res.data; + setCountries(signup_country); + } else if (res.data.result !== 100) { + setCountries("Nothing see here!"); } - }, [] - ) + } catch (error) { + throw new Error(error); + } + }, []); const handleSignUp = async () => { - let { country, first_name, last_name, email, password } = formData + let { country, first_name, last_name, email, password } = formData; - if (email === '' && password === '' && first_name === '') { - setMsgError('Please fill in fields') + if (email === "" && password === "" && first_name === "") { + setMsgError("Please fill in fields"); } try { - if (email !== '' && password !== '' && first_name !== '' && last_name !== '') { - setSignUpLoading(true) + if ( + email !== "" && + password !== "" && + first_name !== "" && + last_name !== "" + ) { + setSignUpLoading(true); const reqData = { country: country, firstname: first_name, @@ -74,51 +77,40 @@ export default function SignUp() { username: email, password: password, terms: 1, - news: 1 - } + news: 1, + }; - const res = await userApi.CreateUser(reqData) + const res = await userApi.CreateUser(reqData); if (res.status === 200) { - const { data } = res - if (data.status === -1 && data.acc === 'DULPICATE') { - setMsgError('This account has been already created') - setSignUpLoading(false) + const { data } = res; + if (data.status === -1 && data.acc === "DULPICATE") { + setMsgError("This account has been already created"); + setSignUpLoading(false); } - if (data && data.status === '1') { + if (data && data.status === "1") { setTimeout(() => { - setSignUpLoading(false) navigate("/outmessage", { replace: true }); - }, 2000) - } - // else { - // setSignUpLoading(false) - // setMsgError('This account does not exist') - // } + setSignUpLoading(false); + }, 2000); + } } else { - setSignUpLoading(false) - setMsgError('An error occurred') + setSignUpLoading(false); + setMsgError("An error occurred"); } } } catch (error) { - throw new Error(error) + throw new Error(error); } finally { setTimeout(() => { - setMsgError(null) - }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT) - setFormData({ - first_name: '', - last_name: '', - email: '', - country: '', - password: '' - }) + setMsgError(null); + }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT); } - } + }; useEffect(() => { - getCountryList() - }) + getCountryList(); + }); return ( <> @@ -127,9 +119,13 @@ export default function SignUp() {
-
- - wrenchboard +
+ + wrenchboard
@@ -138,23 +134,37 @@ export default function SignUp() {

Create Account

- Already have an account? Sign in here + + Already have an account?{" "} + + Sign in here + +
- OR + + OR +
- {msgError &&
{msgError}
} + {msgError && ( +
+ {msgError} +
+ )}
- ) -} + ); +}; diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx index 02b7ebd..8d5d8cb 100644 --- a/src/components/AuthPages/VerifyLink/index.jsx +++ b/src/components/AuthPages/VerifyLink/index.jsx @@ -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 ( <> - + {pageLoader ? ( wrenchboard ) : (
-
- - wrenchboard +
+ + wrenchboard

- {linkError && 'Invalid verification link'} - {linkSuccess && 'Sign In to WrenchBoard'} + {linkSuccess + ? "Sign In to WrenchBoard" + : "Invalid verification link"}

{/* If the verification was a success */} - { - linkSuccess - && + {linkSuccess ? ( - } - - {/* If the verification was unsuccessful */} - {linkError && navigate('/login')} />} + ) : ( + navigate("/login")} /> + )}
)} - ) + ); } - -const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handleEmail, msgErr }) => ( +const SuccessfulComponent = ({ + onSubmit, + password, + handlePassword, + email, + handleEmail, + msgErr, + loader, +}) => (
{/* INPUT */}
@@ -175,36 +203,45 @@ const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handle iconName="password" />
- {msgErr &&
{msgErr}
} + {msgErr && ( +
+ {msgErr} +
+ )}
-) +); 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. + 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/hooks/debounce.js b/src/hooks/debounce.js new file mode 100644 index 0000000..9af499d --- /dev/null +++ b/src/hooks/debounce.js @@ -0,0 +1,21 @@ +/** + +Returns a debounced version of a given function, which means that it delays the execution of the function until a certain amount of time has passed without the function being called again. This can be useful for performance optimization, especially when dealing with expensive or resource-intensive functions that are called frequently. +@param {Function} func - The function to debounce. +@param {number} delay - The number of milliseconds to wait before executing the debounced function. +@returns {Function} - The debounced version of the original function. +*/ + +export default function debounce(func, delay) { + let timeoutId; + + return function (...args) { + const context = this; + + clearTimeout(timeoutId); + + timeoutId = setTimeout(() => { + func.apply(context, args); + }, delay); + }; +}