diff --git a/src/assets/images/shape/title_shape_3.svg b/src/assets/images/shape/title_shape_3.svg new file mode 100644 index 0000000..f1b69b7 --- /dev/null +++ b/src/assets/images/shape/title_shape_3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/components/AuthPages/SignUp/VerifySignup/Otp.jsx b/src/components/AuthPages/SignUp/VerifySignup/Otp.jsx index ea07d94..d52e62c 100644 --- a/src/components/AuthPages/SignUp/VerifySignup/Otp.jsx +++ b/src/components/AuthPages/SignUp/VerifySignup/Otp.jsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; -export default function Otp() { +export default function Otp({handleChange}) { useEffect(() => { const otp = document.querySelector("#otp-inputs"); // eslint-disable-next-line no-restricted-syntax @@ -25,6 +25,7 @@ export default function Otp() { type="text" maxLength={1} id="otp" + onChange={handleChange} />
@@ -33,6 +34,7 @@ export default function Otp() { type="text" maxLength={1} id="otp" + onChange={handleChange} />
@@ -41,6 +43,7 @@ export default function Otp() { type="text" maxLength={1} id="otp" + onChange={handleChange} />
@@ -49,6 +52,7 @@ export default function Otp() { type="text" maxLength={1} id="otp" + onChange={handleChange} />
@@ -57,6 +61,7 @@ export default function Otp() { type="text" maxLength={1} id="otp" + onChange={handleChange} />
@@ -65,6 +70,7 @@ export default function Otp() { type="text" maxLength={1} id="otp" + onChange={handleChange} />
diff --git a/src/components/AuthPages/SignUp/VerifySignup/index.jsx b/src/components/AuthPages/SignUp/VerifySignup/index.jsx index d103b3c..c6f654f 100644 --- a/src/components/AuthPages/SignUp/VerifySignup/index.jsx +++ b/src/components/AuthPages/SignUp/VerifySignup/index.jsx @@ -1,9 +1,91 @@ -import React from "react"; -import titleShape from "../../../../assets/images/shape/text-shape-three.svg"; +import React, {useState} from "react"; +// import titleShape from "../../../../assets/images/shape/text-shape-three.svg"; +import titleShape from "../../../../assets/images/shape/title_shape_3.svg"; import AuthLayout from "../../AuthLayout"; import Otp from "./Otp"; +import { useNavigate } from 'react-router-dom'; +import usersService from "../../../../services/UsersService"; export default function VerifyYou() { + + const navigate = useNavigate(); + + const verify = new usersService(); + + const [loading, setLoading] = useState(false) // For loading spinner + + const [errorMessage, setErrorMessage] = useState({ // For Displaying success or error message + success: false, + message: '' + }) + + + // state for user inputed values + const [verificationCode, setVerificationCode] = useState('') + + const handleVerificationInput = ({target:{value}}) => { // function that listens to input change + setVerificationCode(prev => { + return prev + value + }) + } + + const handleUserOTPVerify = async () => { // handles input validation and submits to api call + + setErrorMessage({ // resets the error message to empty string + success: false, + message: '' + }) + + setLoading(true) // Sets loading spinner + + let code = verificationCode + + if(!code){ // checks if code is empty + setLoading(false) + setErrorMessage({ + success: false, + message: 'Please input the code sent to you' + }) + return + } + if(code.length < 6){ // checks if verifiedCode is empty + setLoading(false) + setErrorMessage({ + success: false, + message: 'Code must be 6 characters' + }) + return + } + + try { + const res = await verify.signupOTPVerify(code); + console.log(res) + if(res.status != 200){ + setLoading(false) + setErrorMessage({ + success: false, + message: 'Could not verify code' + }) + return + } + // if status code is 200 proceed + setErrorMessage({ + success: true, + message: 'verification successfully' + }) + setTimeout(()=>{ + setLoading(false) + navigate('/update-password', { replace: true }) + }, 1000) + } catch (error) { + setLoading(false) + setErrorMessage({ + success: false, + message: 'Opps! something went wrong, Try agian later' + }) + } + } + return ( <>
-

+

SignUp Verification

-
+
shape
- + + {errorMessage.message != '' &&

{errorMessage.message}

}

diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index 55769f6..a79a9cf 100755 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -6,12 +6,101 @@ import titleShape from "../../../assets/images/shape/title-shape-two.svg"; import InputCom from "../../Helpers/Inputs/InputCom"; import { Link, useNavigate } from 'react-router-dom'; +import usersService from "../../../services/UsersService"; + export default function SignUp() { const navigate = useNavigate(); + + const userSignupAuth = new usersService(); + + const [loading, setLoading] = useState(false) // For loading spinner + + const [errorMessage, setErrorMessage] = useState({ // For Displaying success or error message + success: false, + message: '' + }) + const [checked, setValue] = useState(false); const rememberMe = () => { setValue(!checked); }; + + // state for user inputed values + const [userDetails, setUserDetails] = useState({ + // username: '', + email: '', + password: '', + confirm_password: '', + firstname: '', + lastname: '' + }) + + const handleInputChange = ({target:{name, value}}) => { // function that listens to input change + setUserDetails(prev => { + return {...prev, [name]:value} + }) + } + + const handleUserSignup = async () => { // handles input validation and submits to api call + + setErrorMessage({ // resets the error message to empty string + success: false, + message: '' + }) + + setLoading(true) // Sets loading spinner + + let userInfo = {...userDetails} // assigns userDetails to be user information + + let {email, password, confirm_password, firstname, lastname} = userInfo + + if(!email || !password || !confirm_password || !firstname || !lastname){ // checks if any field is empty + setLoading(false) + setErrorMessage({ + success: false, + message: 'Please Fill all inputs' + }) + return + } + + if(password != confirm_password){ //checks if password matches confirm password + setLoading(false) + setErrorMessage({ + success: false, + message: 'Password do not match' + }) + return + } + + delete userInfo.confirm_password // deletes confrim password before making API call + + try { + const res = await userSignupAuth.signupAuth(userInfo); + if(res.status != 200){ + setLoading(false) + setErrorMessage({ + success: false, + message: 'Could not create account try again later' + }) + return + } + // if status code is 200 proceed + setErrorMessage({ + success: true, + message: 'Account created successfully' + }) + setTimeout(()=>{ + setLoading(false) + navigate("/verify-signup", { replace: true }) + }, 1000) + } catch (error) { + setLoading(false) + setErrorMessage({ + success: false, + message: 'Opps! something went wrong, Try agian later' + }) + } + } return ( <>

@@ -49,18 +138,22 @@ export default function SignUp() {
@@ -71,6 +164,8 @@ export default function SignUp() { name="email" type="email" iconName="message" + value={userDetails.email} + inputHandler={handleInputChange} />
@@ -80,15 +175,19 @@ export default function SignUp() { name="password" type="password" iconName="password" + value={userDetails.password} + inputHandler={handleInputChange} />
@@ -129,11 +228,21 @@ export default function SignUp() {
- + {errorMessage.message != '' &&

{errorMessage.message}

} {/*