added complete signup handler
This commit is contained in:
Ebube
@@ -6,6 +6,9 @@ import usersService from "../../../services/UsersService";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard.png"
|
||||
|
||||
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)
|
||||
@@ -13,24 +16,32 @@ export default function VerifyLink() {
|
||||
const location = useLocation();
|
||||
const queryParams = new URLSearchParams(location?.search)
|
||||
const token = queryParams.get('vlnk')
|
||||
const userApi = new usersService()
|
||||
|
||||
// email
|
||||
const handleEmail = (e) => {
|
||||
setEmail(e.target.value);
|
||||
};
|
||||
// password
|
||||
const handlePassword = (e) => {
|
||||
setPassword(e.target.value);
|
||||
};
|
||||
|
||||
// for verifying the incoming verification link and render the correct component
|
||||
const verifyEmail = useCallback(
|
||||
async (code) => {
|
||||
const userApi = new usersService()
|
||||
|
||||
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') {
|
||||
|
||||
if (data && data.internal_return >= 0 && data.status_text === 'Link Verfied') {
|
||||
setPageLoader(false)
|
||||
setLinkSuccess(true)
|
||||
} else {
|
||||
setPageLoader(false)
|
||||
setLinkError(true)
|
||||
}
|
||||
console.log(data)
|
||||
}
|
||||
} catch (error) {
|
||||
setPageLoader(false)
|
||||
@@ -40,11 +51,56 @@ export default function VerifyLink() {
|
||||
}, []
|
||||
)
|
||||
|
||||
// if verification is okay. set a complete signup form
|
||||
const completeSignup = async () => {
|
||||
if (email === '' && password === '') {
|
||||
setMsgError('Please fill in fields')
|
||||
}
|
||||
|
||||
try {
|
||||
if (email !== "" && password !== "") {
|
||||
var postData = {
|
||||
username: email,
|
||||
password: password,
|
||||
sessionid: 'STARTER-NOTREAL',
|
||||
verify_link: token,
|
||||
action: 11012
|
||||
}
|
||||
const res = await userApi.CompleteSignUp(postData)
|
||||
console.log(res)
|
||||
|
||||
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)
|
||||
}
|
||||
if (data && data.status === '1') {
|
||||
setTimeout(() => {
|
||||
// setSignUpLoading(false)
|
||||
navigate("/", { replace: true });
|
||||
}, 2000)
|
||||
}
|
||||
} else {
|
||||
// setSignUpLoading(false)
|
||||
setMsgError('An error occurred')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error)
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMsgError(null)
|
||||
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
|
||||
}
|
||||
}
|
||||
|
||||
useLayoutEffect(() => {
|
||||
verifyEmail(token)
|
||||
})
|
||||
|
||||
console.log(token)
|
||||
// console.log(token)
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -63,15 +119,24 @@ export default function VerifyLink() {
|
||||
<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" style={{
|
||||
fontSize: 'calc(1rem + .6vw)'
|
||||
}}>
|
||||
<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'}
|
||||
</h1>
|
||||
</div>
|
||||
{/* If the verification was a success */}
|
||||
{linkSuccess && <SuccessfulComponent />}
|
||||
{
|
||||
linkSuccess
|
||||
&&
|
||||
<SuccessfulComponent
|
||||
email={email}
|
||||
password={password}
|
||||
handleEmail={handleEmail}
|
||||
handlePassword={handlePassword}
|
||||
onSubmit={completeSignup}
|
||||
msgErr={msgError}
|
||||
/>
|
||||
}
|
||||
|
||||
{/* If the verification was unsuccessful */}
|
||||
{linkError && <ErrorComponent onClick={() => navigate('/login')} />}
|
||||
@@ -84,13 +149,14 @@ export default function VerifyLink() {
|
||||
)
|
||||
}
|
||||
|
||||
const SuccessfulComponent = ({ onClick }) => (
|
||||
|
||||
const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handleEmail, msgErr }) => (
|
||||
<div className="input-area">
|
||||
{/* INPUT */}
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
// value={password}
|
||||
// inputHandler={handlePassword}
|
||||
value={email}
|
||||
inputHandler={handleEmail}
|
||||
placeholder="support@mermsemr.com"
|
||||
label="Email"
|
||||
name="email"
|
||||
@@ -100,8 +166,8 @@ const SuccessfulComponent = ({ onClick }) => (
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<InputCom
|
||||
// value={password}
|
||||
// inputHandler={handlePassword}
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
name="password"
|
||||
@@ -109,11 +175,12 @@ const SuccessfulComponent = ({ onClick }) => (
|
||||
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>}
|
||||
<div className="signin-area mb-3.5">
|
||||
<button
|
||||
onClick={onClick}
|
||||
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 $`}
|
||||
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>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user