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

merged master to branch

Browse Source
This commit was merged in pull request #26.
This commit is contained in:
victorAnumudu
2023-04-27 13:52:21 +01:00
parent e26330af9a ccc43bb55d
commit 39b3218545
9 changed files with 244 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Routers.jsx
+2
View File
@@ -30,6 +30,7 @@ import ResourcePage from "./views/ResourcePage";
import MyTaskPage from "./views/MyTaskPage";
import MyJobsPage from "./views/MyJobsPage";
import ReferralPage from "./views/ReferralPage";
import VerifyLinkPages from "./views/VerifyLinkPages";
export default function Routers() {
return (
@@ -48,6 +49,7 @@ export default function Routers() {
path="/update-password"
element={<UpdatePasswordPages />}
/>
<Route path="/vemail" element={<VerifyLinkPages />} />
<Route exact path="/verify-you" element={<VerifyYouPages />} />
{/* private route */}
src/components/AuthPages/Login/index.jsx
+2 -1
View File
@@ -67,7 +67,6 @@ export default function Login() {
setLoginLoading(true);
// userApi.getUserReminders(); //testing
setTimeout(() => {
toast.success("Login Successfully");
navigate("/", { replace: true });
setLoginLoading(false);
}, 2000);
@@ -119,6 +118,8 @@ export default function Login() {
iconName="message"
/>
</div>
<input type="text" placeholder="boyce" />
<div className="input-item mb-5">
<InputCom
value={password}
src/components/AuthPages/SignUp/index.jsx
+19 -18
View File
@@ -37,7 +37,7 @@ export default function SignUp() {
const navigate = useNavigate();
const userApi = new usersService();
// Get Country Api
const getCountryList = async () => {
const res = await userApi.getSignupCountryData()
@@ -46,7 +46,7 @@ export default function SignUp() {
if (res.status === 200) {
const { signup_country } = await res.data
setCountries(signup_country)
} else if (res.data.result != 100) {
} else if (res.data.result !== 100) {
setCountries('Nothing see here!')
}
} catch (error) {
@@ -57,12 +57,13 @@ export default function SignUp() {
const handleSignUp = async () => {
let { country, first_name, last_name, email, password } = formData
if (email == '' && password == '' && first_name == '') {
if (email === '' && password === '' && first_name === '') {
setMsgError('Please fill in fields')
}
try {
if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
setSignUpLoading(true)
const reqData = {
country: country,
firstname: first_name,
@@ -75,46 +76,46 @@ export default function SignUp() {
}
const res = await userApi.CreateUser(reqData)
setSignUpLoading(true)
if (res.status === 200) {
const { data } = res
if (data.status == -1 && data.acc == 'DULPICATE') {
if (data.status === -1 && data.acc === 'DULPICATE') {
setMsgError('This account has been already created')
setSignUpLoading(false)
}
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}`);
if (data && data.status === '1') {
setTimeout(() => {
navigate("/", { replace: true });
navigate("/verify-you", { replace: true });
setSignUpLoading(false)
}, 2000)
} else {
setMsgError(data.status)
setSignUpLoading(false)
setMsgError('This account does not exist')
}
} else {
setSignUpLoading(false)
setMsgError('An error occurred')
}
} else {
setMsgError('This account does not exist')
setSignUpLoading(false)
}
} catch (error) {
throw new Error(error)
setMsgError('An error occurred')
} finally {
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
setFormData({
first_name: '',
last_name: '',
email: '',
country: '',
password: ''
})
}
}
useEffect(() => {
getCountryList()
}, [])
})
return (
<>
src/components/AuthPages/VerifyLink/index.jsx
+143
View File
@@ -0,0 +1,143 @@
import { useState, useLayoutEffect, useCallback } from "react";
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"
export default function VerifyLink() {
const [pageLoader, setPageLoader] = useState(true)
const [linkSuccess, setLinkSuccess] = useState(false)
const [linkError, setLinkError] = useState(false)
const navigate = useNavigate()
const location = useLocation();
const queryParams = new URLSearchParams(location?.search)
const token = queryParams.get('vlink')
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') {
setPageLoader(false)
setLinkSuccess(true)
} else {
setPageLoader(false)
setLinkError(true)
}
console.log(data)
}
} catch (error) {
setPageLoader(false)
setLinkError(true)
throw new Error(error)
}
}, []
)
useLayoutEffect(() => {
verifyEmail(token)
})
console.log(token)
return (
<>
<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" />
</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" style={{
fontSize: 'calc(1rem + .6vw)'
}}>
{linkError && 'Invalid verification link'}
{linkSuccess && 'Sign In to WrenchBoard'}
</h1>
</div>
{/* If the verification was a success */}
{linkSuccess && <SuccessfulComponent />}
{/* If the verification was unsuccessful */}
{linkError && <ErrorComponent onClick={() => navigate('/login')} />}
</div>
</div>
</div>
)}
</AuthLayout>
</>
)
}
const SuccessfulComponent = ({ onClick }) => (
<div className="input-area">
{/* INPUT */}
<div className="mb-5">
<InputCom
// value={password}
// inputHandler={handlePassword}
placeholder="support@mermsemr.com"
label="Email"
name="email"
type="email"
iconName="message"
/>
</div>
<div className="mb-5">
<InputCom
// value={password}
// inputHandler={handlePassword}
placeholder="● ● ● ● ● ●"
label="Password"
name="password"
type="password"
iconName="password"
/>
</div>
<div className="signin-area mb-3.5">
<button
onClick={onClick}
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 $`}
>
<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.
</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]`}
>
<span>Return Home</span>
</button>
</div>
</div>
)
src/components/AuthPages/VerifyYou/index.jsx
+14 -25
View File
@@ -1,7 +1,4 @@
import React from "react";
import titleShape from "../../../assets/images/shape/text-shape-three.svg";
import AuthLayout from "../AuthLayout";
import Otp from "./Otp";
export default function VerifyYou() {
return (
@@ -9,32 +6,24 @@ export default function VerifyYou() {
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<div className="content-wrapper xl:bg-white dark:bg-dark-white w-full sm:w-auto px-5 xl:px-[70px] 2xl:px-[100px] h-[818px] rounded-xl flex flex-col justify-center">
<div>
<div className="title-area flex flex-col justify-center items-center relative text-center mb-8">
<h1 className="sm:text-5xl text-4xl font-bold leading-[74px] text-dark-gray dark:text-white">
Verification Code
<div className="content-wrapper login dark:bg-dark-white w-full lg:max-w-[500px] 2xl:w-[828px] rounded-xl flex flex-col justify-center 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)'
}}>
Verification Sent
</h1>
<div className="shape sm:w-[377px] w-[270px] -mt-5 ml-5">
<img src={titleShape} alt="shape" />
</div>
</div>
<div className="input-area">
<Otp />
<div className="signin-area mb-3.5">
<a
href="/update-password"
className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
>
Continue
</a>
<div className="mb-5">
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided.
</p>
</div>
<div className="resend-code flex justify-center">
<p className="text-lg text-thin-light-gray font-normal">
Dont’t have an aceount ?
<a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
Please resend
</a>
<div className="mb-5">
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.
</p>
</div>
</div>
src/components/Helpers/Inputs/InputCom/index.jsx
+51 -1
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { useRef } from "react";
import Icons from "../../Icons";
import { Link } from "react-router-dom";
@@ -18,6 +18,53 @@ export default function InputCom({
onMouseEnter,
onMouseLeave
}) {
const inputRef = useRef(null)
// Entry Validation
// for Min Length:
const minLengthValidation = () => {
if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
return 7
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
return 3
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
return 3
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
return 5
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
return 8
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
return 3
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
return 3
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
return 3
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
return 1
}
}
// for MaxLength
const maxLengthValidation = () => {
if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
return 35
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
return 25
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
return 25
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
return 49
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
return 15
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
return 25
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
return 25
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
return 25
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
return 9
}
}
return (
<div className="input-com">
<div className="flex items-center justify-between">
@@ -40,6 +87,9 @@ export default function InputCom({
type={type}
id={name}
name={name}
minLength={minLengthValidation()}
maxLength={maxLengthValidation()}
ref={inputRef}
readOnly={disable}
onBlur={blurHandler}
onMouseEnter={onMouseEnter}
src/services/UsersService.js
+8
View File
@@ -309,6 +309,14 @@ class usersService {
return this.postAuxEnd("/accounttypes", postData);
}
verifyEmail(code) {
const reqData = {
verify_link: code,
action: 11015
}
return this.postAuxEnd("/verifysignuplink", reqData);
}
/*
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)
src/views/VerifyLinkPages.jsx
+5
View File
@@ -0,0 +1,5 @@
import VerifyLink from "../components/AuthPages/VerifyLink";
export default function VerifyLinkPages() {
return <VerifyLink />;
}
yarn.lock
-5
View File
@@ -4810,11 +4810,6 @@ fs.realpath@^1.0.0:
resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
fsevents@^2.3.2, fsevents@~2.3.2:
version "2.3.2"
resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"