added complete signup handler

This commit is contained in:
Ebube
2023-04-27 22:54:27 +01:00
parent 63f2ee3e6c
commit d23408d0ab
8 changed files with 183 additions and 103 deletions
+30 -30
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, 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";
@@ -39,20 +39,22 @@ export default function SignUp() {
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!')
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)
}
} catch (error) {
throw new Error(error)
}
}
}, []
)
const handleSignUp = async () => {
let { country, first_name, last_name, email, password } = formData
@@ -85,13 +87,14 @@ export default function SignUp() {
}
if (data && data.status === '1') {
setTimeout(() => {
navigate("/verify-you", { replace: true });
setSignUpLoading(false)
navigate("/outmessage", { replace: true });
}, 2000)
} else {
setSignUpLoading(false)
setMsgError('This account does not exist')
}
}
// else {
// setSignUpLoading(false)
// setMsgError('This account does not exist')
// }
} else {
setSignUpLoading(false)
setMsgError('An error occurred')
@@ -132,16 +135,14 @@ export default function SignUp() {
<div className="content-wrapper login shadow-md w-full lg:max-w-[600px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5 mb-7">
<div>
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
fontSize: 'calc(1rem + .6vw)'
}}>
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
Create Account
</h1>
<span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
</div>
<button
type="button"
className={`rounded-[0.475rem] w-full mb-6 text-[1.15rem] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
className={`rounded-[0.475rem] w-full mb-6 text-[15px] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
>
<img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
Sign in with Facebook
@@ -228,15 +229,15 @@ export default function SignUp() {
</button>
<span
onClick={rememberMe}
className="text-base cursor-default text-dark-gray dark:text-white"
className="cursor-default text-dark-gray dark:text-white text-[15px]"
>
I agree with all
<a
<Link
href="#"
className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
>
terms and condition
</a>
</Link>
</span>
</div>
</div>
@@ -245,8 +246,7 @@ export default function SignUp() {
<button
type="button"
onClick={handleSignUp}
className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
}`}
className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px]`}
>
{signUpLoading ? (
<div className="signup btn-loader"></div>
@@ -279,7 +279,7 @@ const SelectOption = ({
<div className="input-com mb-7">
<div className="flex items-center justify-between">
<label
className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
htmlFor={name}
>
{label}