diff --git a/src/components/AuthPages/SignUp/index2.jsx b/src/components/AuthPages/SignUp/index2.jsx new file mode 100644 index 0000000..59b984b --- /dev/null +++ b/src/components/AuthPages/SignUp/index2.jsx @@ -0,0 +1,404 @@ +import React, { useCallback, useEffect, useState } from "react"; +import { Link, useLocation, useNavigate } from "react-router-dom"; +import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png"; +import usersService from "../../../services/UsersService"; +import InputCom from "../../Helpers/Inputs/InputCom"; +import AuthLayout from "../AuthLayout"; + +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 [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 [formData, setFormData] = useState({ + country: country? country : "", + first_name: "", + last_name: "", + email: "", + password: "", + }); + + const handleInputChange = (event) => { + const { name, value } = event?.target; + setFormData({ ...formData, [name]: value }); + }; + + // To Show and Hide Password + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + + const rememberMe = () => { + setValue(!checked); + }; + + const navigate = useNavigate(); + const userApi = new usersService(); + + // 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}); + } + return setCountries({loading: false, data: cnt}); + } + setCountries({loading: false, data:result_list}); + } else if (res.data.result !== 100) { + setCountries({loading: false, data:[]}); + } + } catch (error) { + throw new Error(error); + } + }, []); + + const handleSignUp = async () => { + let { country, first_name, last_name, email, password } = formData; + try { + if ( + email !== "" && + password !== "" && + first_name !== "" && + last_name !== "" && + country !== "" + ) { + //checks if email is a valid email address + let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/; + if (regEx.test(email) == false) { + setMsgError("Invalid Email"); + return setTimeout(() => { + setMsgError(""); + }, 3000); + } + + //checks if terms and condition is checked + if (!checked) { + setMsgError("Terms and condition required"); + return setTimeout(() => { + setMsgError(""); + }, 3000); + } + + setSignUpLoading(true); + const reqData = { + country: country, + firstname: first_name, + lastname: last_name, + email: email, + username: email, + password: password, + terms: 1, + news: 1, + }; + + const res = await userApi.CreateUser(reqData); + + if (res.status === 200) { + const { data } = res; + if (data && data.acc === "DULPICATE") { + setMsgError( + "Unable to use this username. Please try another username." + ); + setSignUpLoading(false); + } + if (data && data.status === "1") { + setTimeout(() => { + navigate("/outmessage", { replace: true }); + setSignUpLoading(false); + }, 2000); + } + } else { + setSignUpLoading(false); + setMsgError("An error occurred"); + } + } else { + setMsgError("Please fill in fields"); + } + } catch (error) { + throw new Error(error); + } finally { + setTimeout(() => { + setMsgError(null); + }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT); + } + }; + + useEffect(() => { + getCountryList(); + }, []); + + return ( + <> + +
+
+ + wrenchboard + +
+
+
+
+

+ Create Account +

+ + Already have an account?{" "} + + Sign in here + + +
+
+
+ + OR + +
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+ {msgError && ( +
+ {msgError} +
+ )} + +
+
+ + + I agree with all + + terms and condition + + +
+
+ + {/* Forgot Password */} + {/*
+
+ + + I agree with all + + terms and condition + + +
+
*/} +
+
+ +
+
+
+
+
+
+ + + ); +} + +const SelectOption = ({ + label, + name, + inputHandler, + value, + data, // passing the data from parent + disable +}) => { + return ( +
+
+ +
+
+ +
+
+ ); +};