WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Added intervals for the requests for the verification

Browse Source
This commit was merged in pull request #28.
This commit is contained in:
Ebube
2023-04-28 02:08:04 +01:00
parent d23408d0ab
commit 7c2be04fac
3 changed files with 238 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/SignUp/index.jsx
+95 -70
View File
@@ -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() {
<div className=" h-full">
<div className="flex-1 flex justify-center items-center">
<div className="w-full">
<div className='mb-12'>
<Link to='#'>
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
<div className="mb-12">
<Link to="#">
<img
src={WrenchBoard}
alt="wrenchboard"
className="h-10 mx-auto"
/>
</Link>
</div>
<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">
@@ -138,23 +134,37 @@ export default function SignUp() {
<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-[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>
<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-[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)" />
<img
className="mr-3 h-6"
src={facebookLogo}
alt="logo-icon(s)"
/>
Sign in with Facebook
</button>
<div className="w-full flex items-center gap-2">
<div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
<span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">OR</span>
<span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
OR
</span>
<div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
</div>
<div className="input-area">
<SelectOption
label='Country'
label="Country"
data={countries}
name="country"
value={formData.country}
@@ -197,14 +207,20 @@ export default function SignUp() {
placeholder="● ● ● ● ● ●"
label="Password"
name="password"
type={showPassword ? 'text' : 'password'}
type={showPassword ? "text" : "password"}
onClick={togglePasswordVisibility}
passIcon={showPassword ? "show-password" : "hide-password"}
passIcon={
showPassword ? "show-password" : "hide-password"
}
value={formData.password}
inputHandler={handleInputChange}
/>
</div>
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
{msgError && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
{msgError}
</div>
)}
<div className="forgot-password-area flex justify-between items-center mb-6">
<div className="remember-checkbox flex items-center space-x-2.5">
<button
@@ -273,7 +289,7 @@ const SelectOption = ({
name,
inputHandler,
value,
data // passing the data from parent
data, // passing the data from parent
}) => {
return (
<div className="input-com mb-7">
@@ -286,13 +302,22 @@ const SelectOption = ({
</label>
</div>
<div>
<select name={name} id={name} className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent " onChange={inputHandler} value={value}>
<select
name={name}
id={name}
className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
onChange={inputHandler}
value={value}
>
<option value={""}>Select your Country</option>
{data?.length > 0 && data?.map((item, idx) => (
<option value={item[0]} key={idx}>{item[1]}</option>
))}
{data?.length > 0 &&
data?.map((item, idx) => (
<option value={item[0]} key={idx}>
{item[1]}
</option>
))}
</select>
</div>
</div>
)
}
);
};