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>
)
}
);
};
src/components/AuthPages/VerifyLink/index.jsx
+122 -85
View File
@@ -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 (
<>
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<AuthLayout slogan="Welcome to WrenchBoard">
{pageLoader ? (
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
) : (
<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-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
<div className="w-full">
<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 leading-[27.3px] text-[22.75px]">
{linkError && 'Invalid verification link'}
{linkSuccess && 'Sign In to WrenchBoard'}
{linkSuccess
? "Sign In to WrenchBoard"
: "Invalid verification link"}
</h1>
</div>
{/* If the verification was a success */}
{
linkSuccess
&&
{linkSuccess ? (
<SuccessfulComponent
email={email}
password={password}
@@ -135,22 +156,29 @@ export default function VerifyLink() {
handlePassword={handlePassword}
onSubmit={completeSignup}
msgErr={msgError}
loader={linkLoader}
/>
}
{/* If the verification was unsuccessful */}
{linkError && <ErrorComponent onClick={() => navigate('/login')} />}
) : (
<ErrorComponent onClick={() => navigate("/login")} />
)}
</div>
</div>
</div>
)}
</AuthLayout>
</>
)
);
}
const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handleEmail, msgErr }) => (
const SuccessfulComponent = ({
onSubmit,
password,
handlePassword,
email,
handleEmail,
msgErr,
loader,
}) => (
<div className="input-area">
{/* INPUT */}
<div className="mb-5">
@@ -175,36 +203,45 @@ const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handle
iconName="password"
/>
</div>
{msgErr && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">{msgErr}</div>}
{msgErr && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
{msgErr}
</div>
)}
<div className="signin-area mb-3.5">
<button
onClick={onSubmit}
type="button"
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
>
<span>Continue</span>
{loader ? (
<div className="signup btn-loader"></div>
) : (
<span>Continue</span>
)}
</button>
</div>
</div>
)
);
const ErrorComponent = ({ onClick }) => (
<div className="input-area">
<div className="my-5">
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
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.
</p>
</div>
<div className="signin-area flex justify-center mb-3.5">
<button
onClick={onClick}
type="button"
className={`rounded-[0.475rem] mb-6 text-[1.15rem] 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.81rem]`}
className={`rounded-[0.475rem] mb-6 text-[15px] 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.81rem]`}
>
<span>Return Home</span>
</button>
</div>
</div>
)
);
src/hooks/debounce.js
+21
View File
@@ -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);
};
}