diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index 58a8052..90c6539 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -81,7 +81,6 @@ export default function Login() { } } } catch (error) { - console.log(error) setMsgError('An error occurred') } finally { setTimeout(() => { diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index 8fbc6b8..f902d38 100644 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -1,144 +1,254 @@ -import React, { useState } from "react"; -import loginThumb from "../../../assets/images/auth-thumb.svg"; -import googleLogo from "../../../assets/images/google-logo.svg"; -import logo from "../../../assets/images/light-logo.png"; //logo-1.svg"; -import titleShape from "../../../assets/images/shape/title-shape-two.svg"; +import React, { useEffect, useState } from "react"; +import { useNavigate, Link } from "react-router-dom"; +import facebookLogo from "../../../assets/images/facebook-4.svg"; +import WrenchBoard from "../../../assets/images/wrenchboard.png"; +import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; export default function SignUp() { + 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([]); + + const [formData, setFormData] = useState({ + 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); + // return console.log('showPassword') + }; const rememberMe = () => { setValue(!checked); }; + + const navigate = useNavigate(); + const userApi = new usersService(); + // Get Country Api + const getCountryList = 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 + + if (email == '' && password == '' && first_name == '') { + setMsgError('Please fill in fields') + } + + try { + if (email !== '' && password !== '' && first_name !== '' && last_name !== '') { + 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.status == -1 && data.acc == 'DULPICATE') { + setMsgError('This account has been already created') + } + 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}`); + setSignUpLoading(true) + + setTimeout(() => { + navigate("/", { replace: true }); + setSignUpLoading(false) + }, 2000) + console.log('Success') + } else { + setMsgError(data.status) + } + } + } + } catch (error) { + throw new Error(error) + setMsgError('An error occurred') + } finally { + setTimeout(() => { + setMsgError(null) + }, 7000) + } + } + + useEffect(() => { + getCountryList() + }, []) + return ( <> -
-
-
+
+
+
-
-
-
-

- Create Account -

-
- shape +
+
+ + wrenchboard + +
+
+
+
+

+ Create Account +

+ Already have an account? Sign in here
-
-
-
-
+ +
+
+ OR +
+
+
+ +
+
+ +
+
+ +
+
+
-
+
-
-
- -
-
- -
-
- -
-
-
- - - I agree all - {msgError}
} +
+
+ + + I agree with all + + terms and condition + + +
+
+
+
+ +
-
- -
-

- Already have account? - - Log In - -

@@ -150,3 +260,32 @@ export default function SignUp() { ); } + +const SelectOption = ({ + label, + name, + inputHandler, + value, + data // passing the data from parent +}) => { + return ( +
+
+ +
+
+ +
+
+ ) +} diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 8fe4ade..3e14056 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -8,9 +8,11 @@ export default function InputCom({ name, placeholder, iconName, + passIcon, inputHandler, value, - forgotPassword + forgotPassword, + onClick }) { return (
@@ -25,7 +27,7 @@ export default function InputCom({ )} {forgotPassword && Forgot Password?}
-
+
{iconName && ( -
+
)} + {passIcon && ( +
+ +
+ )}
); diff --git a/src/index.css b/src/index.css index b2004bf..313642e 100644 --- a/src/index.css +++ b/src/index.css @@ -712,4 +712,18 @@ TODO: Responsive =========================== .content-wrapper.login{ --bg-color: 255,255,255; background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%); +} + +.content-wrapper select { + /* for Firefox */ + -moz-appearance: none; + /* for Chrome */ + -webkit-appearance: none; + appearance: none; + padding-inline: 1rem; +} + +/* For IE10 */ +.content-wrapper select::-ms-expand { + display: none; } \ No newline at end of file diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 51f60e5..0eccada 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -48,9 +48,9 @@ class usersService { return this.postAuxEnd("/apigate", null); } - CreateUser(){ - // localStorage.setItem("session_token", ``); - return this.postAuxEnd("/createuser", null); + CreateUser(reqData){ + localStorage.setItem("session_token", ``); + return this.postAuxEnd("/createuser", reqData); } getLoadProfile(){ @@ -180,6 +180,11 @@ class usersService { return this.postAuxEnd("/couponredeem", postData); } + // Country Data {GET} + getSignupCountryData() { + return this.postAuxEnd("/signupcountry", null); + } + /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)