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..dcf7005 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, value}) { useEffect(() => { const otp = document.querySelector("#otp-inputs"); // eslint-disable-next-line no-restricted-syntax @@ -25,6 +25,9 @@ export default function Otp() { type="text" maxLength={1} id="otp" + name='value_one' + value={value.value_one} + onChange={handleChange} />
@@ -33,6 +36,9 @@ export default function Otp() { type="text" maxLength={1} id="otp" + name='value_two' + value={value.value_two} + onChange={handleChange} />
@@ -41,6 +47,9 @@ export default function Otp() { type="text" maxLength={1} id="otp" + name='value_three' + value={value.value_three} + onChange={handleChange} />
@@ -49,6 +58,9 @@ export default function Otp() { type="text" maxLength={1} id="otp" + name='value_four' + value={value.value_four} + onChange={handleChange} />
@@ -57,6 +69,9 @@ export default function Otp() { type="text" maxLength={1} id="otp" + name='value_five' + value={value.value_five} + onChange={handleChange} />
@@ -65,6 +80,9 @@ export default function Otp() { type="text" maxLength={1} id="otp" + name='value_six' + value={value.value_six} + onChange={handleChange} />
diff --git a/src/components/AuthPages/SignUp/VerifySignup/index.jsx b/src/components/AuthPages/SignUp/VerifySignup/index.jsx index 1463753..32341e9 100644 --- a/src/components/AuthPages/SignUp/VerifySignup/index.jsx +++ b/src/components/AuthPages/SignUp/VerifySignup/index.jsx @@ -1,9 +1,111 @@ -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 verifyOTP = 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({ + value_one: '', + value_two: '', + value_three: '', + value_four: '', + value_five: '', + value_six: '', + }) + + const handleVerificationInput = ({target:{name, value}}) => { // function that listens to input change + setVerificationCode(prev => { + return {...prev, [name]: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 otpCode = ''; + for(let values in verificationCode){ + otpCode+=verificationCode[values] + } + + if(!otpCode){ // checks if code is empty + setLoading(false) + setErrorMessage({ + success: false, + message: 'Please input the code sent to you' + }) + return + } + if(otpCode.length < 6){ // checks if verifiedCode is empty + setLoading(false) + setErrorMessage({ + success: false, + message: 'Code must be 6 characters' + }) + return + } + + let apiInput = { + username: 'anumuduchukwuebuka@gmail.com', + pend_uid: 'ec497517-ddb5-4830-a2c4-b7e2a68627de', + random_text: otpCode, + mode: 'VERIFY', + // loc: 'Desktop', + // sessionid: 'ec497517-ddb5-4830-a2c4-b7e2a68627de', + // code: otpCode, + } + + try { + const res = await verifyOTP.signupOTPVerify(apiInput); + 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('/complete-signup', { replace: true }) + }, 1000) + } catch (error) { + setLoading(false) + setErrorMessage({ + success: false, + message: 'Opps! something went wrong, Try agian later' + }) + } + } -export default function VerifySignup() { return ( <>
-

+

SignUp Verification

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

{errorMessage.message}

}

diff --git a/src/services/UsersService.js b/src/services/UsersService.js index e517681..624cf5d 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -25,6 +25,11 @@ class usersService { return this.postAuxEnd("/account", reqData); } + //SIGNUP OTP VERIFICATION AUTH + signupOTPVerify(reqData){ + return this.postAuxEnd("/signup-code", reqData); + } + getUserReminders(){ var reqData = { member_id: localStorage.getItem("member_id")