verified that otp is six digits

src/Routers.jsx

@@ -31,7 +31,6 @@ import CalendarPage from "./views/CalendarPage";
 import ResourcePage from "./views/ResourcePage";
 import TrackActionPage from "./views/TrackActionPage";
 import SubscriptionPage from "./views/SubscriptionPage";
-import VerifySignupCompletePage from "./views/VerifySignupCompletePage";
 
 export default function Routers() {
   return (
@@ -52,7 +51,6 @@ export default function Routers() {
         />
         <Route exact path="/verify-you" element={<VerifyYouPages />} />
         <Route exact path="/verify-signup" element={<VerifySignupPage />} />
-        <Route exact path="/complete-signup" element={<VerifySignupCompletePage />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -3,49 +3,34 @@ import { Link, useNavigate } from 'react-router-dom';
 import titleShape from "../../../assets/images/shape/title-shape-two.svg";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-import usersService from "../../../services/UsersService";
 
 export default function ForgotPassword() {
+
   const navigate = useNavigate();
   const [validation, setValidation] = useState("")
   const [buttonDisabled, setButtonDisabled] = useState(true)
-  const [loading, setLoading] = useState(false);
-  const user = new usersService()
 
+  // email
   const [email, setEmail] = useState("");
   const handleEmail = (e) => {
     setEmail(e.target.value);
   };
 
+
   function validationChecker(email) {
     const emailCheck = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
     if (email === "") {
       setValidation("email is required");
+
     } else if (!email.match(emailCheck)) {
       setValidation('Please input a valid email address');
+
     } else {
       setValidation("");
       setButtonDisabled(false)
     }
   }
 
-  const handleSubmit = async() => {
-    const resetEmail = {
-      username: email,
-      stage: 100
-    }
-    const reset = await user.resetPassword(resetEmail);
-    setLoading(true)
-    if (reset.status == 200){
-      setTimeout(() => {
-        navigate("/verify-you", {replace : true});
-        setLoading(false)
-      }, 2000);
-    }else{
-      setValidation('An error occurred')
-    }
-  }
-  
   useEffect(() => {
     validationChecker(email)
   }, [email])
@@ -76,21 +61,21 @@ export default function ForgotPassword() {
                   inputHandler={handleEmail}
                   value={email}
                 />
-                {validation && <p className="my-5 text-center font-light italic subpixel-antialiased tracking-wide text-red-500">{validation}</p>}
+                {validation && <p className="my-5 font-bold  text-red-500">{validation}</p>}
               </div>
 
               <div className="signin-area mb-3.5">
 
                 <button
-                  className="w-full rounded-[50px] h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
                   disabled={buttonDisabled}
-                  onClick={handleSubmit}
+                  onClick={() => navigate("/verify-you")}
                 >
-                  {loading ? <div className="signup btn-loader"></div> : <span>Send Code</span>}
+                  Send Code
                 </button>
 
                 <Link to="/"
-                  className="mt-5 cursor-default font-bold flex justify-center subpixel-antialiased tracking-wide text-white items-center h-[58px] rounded-[50px] bg-[#1a3544a2]"
+                  className="my-40 font-bold flex justify-center text-red-500 items-center"
                 >
                   Back to Home
                 </Link>

src/components/AuthPages/SignUp/CompleteSignUp/index.jsx

@@ -1,14 +1,7 @@
 import React from "react";
-import AuthLayout from "../../AuthLayout";
 
-
-export default function CompleteSignUp({ className }) {
+export default function ThankYou({ className }) {
   return (
-    <>
-    <AuthLayout
-      slogan="Welcome to myFit"
-    >
-
     <div
       className={`content-wrapper xl:bg-white dark:xl:bg-dark-white   sm:px-[70px] px-5 2xl:px-[100px] 2xl:h-[818px] xl:h-[650px] rounded-xl flex flex-col justify-center ${
         className || ""
@@ -51,7 +44,5 @@ export default function CompleteSignUp({ className }) {
         </a>
       </div>
     </div>
-    </AuthLayout>
-    </>
   );
 }

src/components/AuthPages/SignUp/VerifySignup/index.jsx

@@ -1,4 +1,5 @@
 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";
@@ -9,7 +10,7 @@ export default function VerifyYou() {
 
   const navigate = useNavigate();
 
-  const verifyOTP = new usersService();
+  const verify = new usersService();
 
   const [loading, setLoading] = useState(false) // For loading spinner
 
@@ -44,12 +45,12 @@ export default function VerifyYou() {
     
     setLoading(true) // Sets loading spinner
 
-    let otpCode = '';
+    let code = '';
     for(let values in verificationCode){
-      otpCode+=verificationCode[values]
+      code+=verificationCode[values]
     }
 
-    if(!otpCode){ // checks if code is empty
+    if(!code){ // checks if code is empty
       setLoading(false)
       setErrorMessage({
         success: false,
@@ -57,7 +58,7 @@ export default function VerifyYou() {
       })
       return
     }
-    if(otpCode.length < 6){ // checks if verifiedCode is empty
+    if(code.length < 6){ // checks if verifiedCode is empty
       setLoading(false)
       setErrorMessage({
         success: false,
@@ -66,15 +67,9 @@ export default function VerifyYou() {
       return
     }
 
-    let apiInput = {
-      username: localStorage.getItem('username'),
-      pend_uid: localStorage.getItem('uuid'),
-      random_text: otpCode,
-      mode: 'VERIFY',
-    }
-
     try {
-      const res = await verifyOTP.signupUser(apiInput)
+      const res = await verify.signupOTPVerify(code);
+      console.log(res)
       if(res.status != 200){
         setLoading(false)
         setErrorMessage({
@@ -83,33 +78,15 @@ export default function VerifyYou() {
         })
         return
       }
-
-      if(res.status == 200){
-        if(res.data.status < 0) { // when resquest is successful but status is not 100
-          setLoading(false)
-          setErrorMessage({
-            success: false,
-            message: res.data.error_msg
-          })
-          return
-        }
-
-        // if request is successful and status is 100 proceed
-        setErrorMessage({
-          success: true,
-          message: 'verification successfully'
-        })
-
-        //clears the temporary uuid and email in tge local storage
-        localStorage.removeItem('uuid')
-        localStorage.removeItem('username')
-
-        setTimeout(()=>{
-          setLoading(false)
-          navigate('/complete-signup', { replace: true })
-        }, 1000)
-      }
-      
+      // 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({

src/components/AuthPages/SignUp/index.jsx

@@ -6,12 +6,12 @@ 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"; // site api services
+import usersService from "../../../services/UsersService";
 
 export default function SignUp() {
   const navigate = useNavigate();
 
-  const userSignup = new usersService();
+  const userSignupAuth = new usersService();
 
   const [loading, setLoading] = useState(false) // For loading spinner
 
@@ -63,18 +63,6 @@ export default function SignUp() {
       return
     }
 
-
-    //checks if email is a valid email address
-    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-    if (regEx.test(email) == false) {
-      setLoading(false)
-      setErrorMessage({
-        success: false,
-        message: 'Please Input a valid email; e.g: text@gmail.com'
-      })
-      return
-    }
-
     if(password != confirm_password){ //checks if password matches confirm password
       setLoading(false)
       setErrorMessage({
@@ -84,24 +72,10 @@ export default function SignUp() {
       return
     }
 
-    //checks if password is matches alphanumeric with at least one uppercase letter
-    // let PwdRegEx = /[A-Z]/;
-    if (/[A-Z]/.test(password) == false) {
-      setLoading(false)
-      setErrorMessage({
-        success: false,
-        message: 'Password must contain at least one uppercase character; e.g: Text123'
-      })
-      return
-    }
-
-    userInfo.username = email // assigns email as username also
-    userInfo.mode = 'START' // assigns mode as START
-
     delete userInfo.confirm_password // deletes confrim password before making API call
 
     try {
-      const res = await userSignup.signupUser(userInfo);
+      const res = await userSignupAuth.signupAuth(userInfo);
       if(res.status != 200){
         setLoading(false)
         setErrorMessage({
@@ -110,31 +84,15 @@ export default function SignUp() {
         })
         return
       }
-
-      if(res.status == 200){
-        if(res.data.status < 0) { // when resquest is successful but status is not 1
-          setLoading(false)
-          setErrorMessage({
-            success: false,
-            message: 'unable to create account'
-          })
-          return
-        }
-
-        // if request is successful and status is 1 proceed
-        setErrorMessage({
-          success: true,
-          message: 'Account created successfully'
-        })
-  
-        localStorage.setItem('uuid', res.data.uuid) // Stores the user UUID to localstorage
-        localStorage.setItem('username', email) // Stores the user UUID to localstorage
-  
-        setTimeout(()=>{
-          setLoading(false)
-          navigate("/verify-signup", { replace: true })
-        }, 1000)
-      }
+      // 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({
@@ -143,7 +101,6 @@ export default function SignUp() {
       })
     }
   }
-
   return (
     <>
       <div className="layout-wrapper">
@@ -184,7 +141,7 @@ export default function SignUp() {
                           name="firstname"
                           type="text"
                           iconName="people"
-                          value={userDetails.first_name}
+                          value={userDetails.firstname}
                           inputHandler={handleInputChange}
                         />
                       </div>
@@ -195,7 +152,7 @@ export default function SignUp() {
                           name="lastname"
                           type="text"
                           iconName="people"
-                          value={userDetails.Last_name}
+                          value={userDetails.lastname}
                           inputHandler={handleInputChange}
                         />
                       </div>
@@ -271,9 +228,7 @@ export default function SignUp() {
                       </div>
                     </div>
                     <div className="signin-area mb-1">
-
-                    {errorMessage.message != '' &&  <p className={`text-center p-3 ${errorMessage.success ? 'text-green-600' : 'text-red-600'}`}>{errorMessage.message}</p>}
-
+                   {errorMessage.message != '' &&  <p className={`text-center p-3 ${errorMessage.success ? 'text-green-600' : 'text-red-600'}`}>{errorMessage.message}</p>}
                       <button
                   className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
                   // onClick={() => navigate("/verify-signup")}

src/components/Cards/TrackItemCard.jsx

@@ -76,7 +76,8 @@ export default function TrackItemCard({ datas, hidden = false }) {
           </div>
         </div>
         {/* user */}
-        <div className="user w-full text-center mt-[14px]">
+        <div className="user w-full text-center">
+
           <p className="text-sm text-thin-light-gray dark:text-white">
             <Link
             to={`/track-action/${datas.widget}`}

src/services/UsersService.js

@@ -5,11 +5,6 @@ class usersService {
         console.log("Er are here anyway");
     }
 
-    // Reset Password
-    resetPassword(reqData) {
-        return this.postAuxEnd('/resetpass', reqData);
-    }
-
     logInUser(reqData) {
         localStorage.setItem("session_token", ``);
         return this.postAuxEnd("/login", reqData);
@@ -21,10 +16,15 @@ class usersService {
     }
 
     //SIGNUP AUTH
-    signupUser(reqData){
+    signupAuth(reqData){
         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")
@@ -133,7 +133,7 @@ class usersService {
                 if (error.response) {
                     //response status is an error code
                     console.log("ERROR-------------------------------------------------------");
-                    console.log(error.response.status, 'err');
+                    console.log(error.response.status);
                     console.log("ERROR-------------------------------------------------------");
                 } else if (error.request) {
                     //response not received though the request was sent

src/views/VerifySignupCompletePage.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import CompleteSignUp from "../components/AuthPages/SignUp/CompleteSignUp";
-
-export default function VerifySignupCompletePage() {
-  return <CompleteSignUp />;
-}