From 9cb773d3604bba14a39f7e7c88b6bea9e5b40a2e Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 20 Feb 2023 20:45:34 +0100 Subject: [PATCH 1/2] added signup authentication and signup otp verification --- src/assets/images/shape/title_shape_3.svg | 10 ++ .../AuthPages/SignUp/VerifySignup/Otp.jsx | 8 +- .../AuthPages/SignUp/VerifySignup/index.jsx | 109 ++++++++++++++-- src/components/AuthPages/SignUp/index.jsx | 119 +++++++++++++++++- src/services/UsersService.js | 10 ++ 5 files changed, 242 insertions(+), 14 deletions(-) create mode 100644 src/assets/images/shape/title_shape_3.svg 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}

} {/* Date: Wed, 22 Feb 2023 11:35:35 +0100 Subject: [PATCH 2/2] verified that otp is six digits --- .../AuthPages/SignUp/VerifySignup/Otp.jsx | 14 ++++++++++++- .../AuthPages/SignUp/VerifySignup/index.jsx | 20 ++++++++++++++----- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/components/AuthPages/SignUp/VerifySignup/Otp.jsx b/src/components/AuthPages/SignUp/VerifySignup/Otp.jsx index d52e62c..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({handleChange}) { +export default function Otp({handleChange, value}) { useEffect(() => { const otp = document.querySelector("#otp-inputs"); // eslint-disable-next-line no-restricted-syntax @@ -25,6 +25,8 @@ export default function Otp({handleChange}) { type="text" maxLength={1} id="otp" + name='value_one' + value={value.value_one} onChange={handleChange} />
@@ -34,6 +36,8 @@ export default function Otp({handleChange}) { type="text" maxLength={1} id="otp" + name='value_two' + value={value.value_two} onChange={handleChange} />
@@ -43,6 +47,8 @@ export default function Otp({handleChange}) { type="text" maxLength={1} id="otp" + name='value_three' + value={value.value_three} onChange={handleChange} /> @@ -52,6 +58,8 @@ export default function Otp({handleChange}) { type="text" maxLength={1} id="otp" + name='value_four' + value={value.value_four} onChange={handleChange} /> @@ -61,6 +69,8 @@ export default function Otp({handleChange}) { type="text" maxLength={1} id="otp" + name='value_five' + value={value.value_five} onChange={handleChange} /> @@ -70,6 +80,8 @@ export default function Otp({handleChange}) { 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 c6f654f..dc7ef06 100644 --- a/src/components/AuthPages/SignUp/VerifySignup/index.jsx +++ b/src/components/AuthPages/SignUp/VerifySignup/index.jsx @@ -21,11 +21,18 @@ export default function VerifyYou() { // state for user inputed values - const [verificationCode, setVerificationCode] = useState('') + const [verificationCode, setVerificationCode] = useState({ + value_one: '', + value_two: '', + value_three: '', + value_four: '', + value_five: '', + value_six: '', + }) - const handleVerificationInput = ({target:{value}}) => { // function that listens to input change + const handleVerificationInput = ({target:{name, value}}) => { // function that listens to input change setVerificationCode(prev => { - return prev + value + return {...prev, [name]:value} }) } @@ -38,7 +45,10 @@ export default function VerifyYou() { setLoading(true) // Sets loading spinner - let code = verificationCode + let code = ''; + for(let values in verificationCode){ + code+=verificationCode[values] + } if(!code){ // checks if code is empty setLoading(false) @@ -102,7 +112,7 @@ export default function VerifyYou() {
- + {errorMessage.message != '' &&

{errorMessage.message}

}