shows active resources link when env variable is set to true/1

.env

@@ -14,4 +14,9 @@ REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituse
 REACT_APP_SESSION_EXPIRE_MINUTES=15
 
 REACT_APP_TRACKING="Tracking"
-REACT_APP_RESOURCES="Resources"
+REACT_APP_RESOURCES="Resources"
+REACT_APP_HISTORY="History"
+
+REACT_APP_TRACKING_SHOW=1
+
+REACT_APP_RESOURCES_SHOW=1

.env.development

@@ -0,0 +1,22 @@
+SKIP_PREFLIGHT_CHECK=true 
+
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+
+REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+# REACT_APP_PASSWORD_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
+
+REACT_APP_SESSION_EXPIRE_MINUTES=15
+
+REACT_APP_TRACKING="Tracking"
+REACT_APP_RESOURCES="Resources"
+REACT_APP_HISTORY="History"
+
+REACT_APP_TRACKING_SHOW=1
+
+REACT_APP_RESOURCES_SHOW=1

.env.production

@@ -0,0 +1,22 @@
+SKIP_PREFLIGHT_CHECK=true 
+
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+
+REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+# REACT_APP_PASSWORD_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
+
+REACT_APP_SESSION_EXPIRE_MINUTES=15
+
+REACT_APP_TRACKING="Tracking"
+REACT_APP_RESOURCES="Resources"
+REACT_APP_HISTORY="History"
+
+REACT_APP_TRACKING_SHOW=0
+
+REACT_APP_RESOURCES_SHOW=0

src/Routers.jsx

@@ -3,6 +3,7 @@ import FourZeroFour from "./components/FourZeroFour";
 import ScrollToTop from "./components/Helpers/ScrollToTop";
 import MyCollection from "./components/MyCollection";
 import Notification from "./components/Notification";
+import ThankYou from "./components/AuthPages/ThankYou";
 import AuthRoute from "./middleware/AuthRoute";
 import AcitveBidsPage from "./views/AcitveBidsPage";
 import AuthProfilePage from "./views/AuthProfilePage";
@@ -31,6 +32,7 @@ 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 (
@@ -49,8 +51,14 @@ export default function Routers() {
           path="/update-password"
           element={<UpdatePasswordPages />}
         />
+        <Route
+          exact
+          path="/confirm-reset"
+          element={<ThankYou />}
+        />
         <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,34 +3,52 @@ 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");
+      setValidation("");
-
     } 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)
+    
+    const {raw_data, uuid} = reset.data
+    localStorage.setItem('reset_uuid', uuid)
+    localStorage.setItem('reset_raw', JSON.stringify(raw_data))
+    if (reset.status == 200){
+      setTimeout(() => {
+        navigate("/verify-you", {replace : true});
+        setLoading(false)
+      }, 2000);
+    }else{
+      setValidation('An error occurred')
+    }
+  }
+  
   useEffect(() => {
     validationChecker(email)
   }, [email])
@@ -61,21 +79,21 @@ export default function ForgotPassword() {
                   inputHandler={handleEmail}
                   value={email}
                 />
-                {validation && <p className="my-5 font-bold  text-red-500">{validation}</p>}
+                {validation && <p className="my-5 text-center font-light italic subpixel-antialiased tracking-wide text-red-500">{validation}</p>}
               </div>
 
               <div className="signin-area mb-3.5">
 
                 <button
-                  className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  className="w-full rounded-[50px] h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
                   disabled={buttonDisabled}
-                  onClick={() => navigate("/verify-you")}
+                  onClick={handleSubmit}
                 >
-                  Send Code
+                  {loading ? <div className="signup btn-loader"></div> : <span>Send Code</span>}
                 </button>
 
                 <Link to="/"
-                  className="my-40 font-bold flex justify-center text-red-500 items-center"
+                  className="mt-5 cursor-default font-bold flex justify-center subpixel-antialiased tracking-wide text-white items-center h-[58px] rounded-[50px] bg-[#1a3544a2]"
                 >
                   Back to Home
                 </Link>

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

@@ -1,7 +1,14 @@
 import React from "react";
+import AuthLayout from "../../AuthLayout";
 
-export default function ThankYou({ className }) {
+
+export default function CompleteSignUp({ 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 || ""
@@ -44,5 +51,7 @@ export default function ThankYou({ className }) {
         </a>
       </div>
     </div>
+    </AuthLayout>
+    </>
   );
 }

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

@@ -1,5 +1,4 @@
 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";
@@ -10,7 +9,7 @@ export default function VerifyYou() {
 
   const navigate = useNavigate();
 
-  const verify = new usersService();
+  const verifyOTP = new usersService();
 
   const [loading, setLoading] = useState(false) // For loading spinner
 
@@ -45,12 +44,12 @@ export default function VerifyYou() {
     
     setLoading(true) // Sets loading spinner
 
-    let code = '';
+    let otpCode = '';
     for(let values in verificationCode){
-      code+=verificationCode[values]
+      otpCode+=verificationCode[values]
     }
 
-    if(!code){ // checks if code is empty
+    if(!otpCode){ // checks if code is empty
       setLoading(false)
       setErrorMessage({
         success: false,
@@ -58,7 +57,7 @@ export default function VerifyYou() {
       })
       return
     }
-    if(code.length < 6){ // checks if verifiedCode is empty
+    if(otpCode.length < 6){ // checks if verifiedCode is empty
       setLoading(false)
       setErrorMessage({
         success: false,
@@ -67,9 +66,15 @@ 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 verify.signupOTPVerify(code);
+      const res = await verifyOTP.signupUser(apiInput)
-      console.log(res)
       if(res.status != 200){
         setLoading(false)
         setErrorMessage({
@@ -78,15 +83,33 @@ export default function VerifyYou() {
         })
         return
       }
-      // if status code is 200 proceed
+
-      setErrorMessage({
+      if(res.status == 200){
-        success: true,
+        if(res.data.status < 0) { // when resquest is successful but status is not 100
-        message: 'verification successfully'
+          setLoading(false)
-      })
+          setErrorMessage({
-      setTimeout(()=>{
+            success: false,
-        setLoading(false)
+            message: res.data.error_msg
-        navigate('/update-password', { replace: true })
+          })
-      }, 1000)
+          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)
+      }
+      
     } 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";
+import usersService from "../../../services/UsersService"; // site api services
 
 export default function SignUp() {
   const navigate = useNavigate();
 
-  const userSignupAuth = new usersService();
+  const userSignup = new usersService();
 
   const [loading, setLoading] = useState(false) // For loading spinner
 
@@ -62,6 +62,16 @@ 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)
@@ -72,10 +82,24 @@ 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 userSignupAuth.signupAuth(userInfo);
+      const res = await userSignup.signupUser(userInfo);
       if(res.status != 200){
         setLoading(false)
         setErrorMessage({
@@ -84,15 +108,31 @@ export default function SignUp() {
         })
         return
       }
-      // if status code is 200 proceed
+
-      setErrorMessage({
+      if(res.status == 200){
-        success: true,
+        if(res.data.status < 0) { // when resquest is successful but status is not 1
-        message: 'Account created successfully'
+          setLoading(false)
-      })
+          setErrorMessage({
-      setTimeout(()=>{
+            success: false,
-        setLoading(false)
+            message: 'unable to create account'
-        navigate("/verify-signup", { replace: true })
+          })
-      }, 1000)
+          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)
+      }
     } catch (error) {
       setLoading(false)
       setErrorMessage({
@@ -101,6 +141,7 @@ export default function SignUp() {
       })
     }
   }
+
   return (
     <>
       <div className="layout-wrapper">
@@ -141,7 +182,7 @@ export default function SignUp() {
                           name="firstname"
                           type="text"
                           iconName="people"
-                          value={userDetails.firstname}
+                          value={userDetails.first_name}
                           inputHandler={handleInputChange}
                         />
                       </div>
@@ -152,7 +193,7 @@ export default function SignUp() {
                           name="lastname"
                           type="text"
                           iconName="people"
-                          value={userDetails.lastname}
+                          value={userDetails.Last_name}
                           inputHandler={handleInputChange}
                         />
                       </div>
@@ -228,7 +269,9 @@ 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/AuthPages/ThankYou/index.jsx

@@ -1,8 +1,11 @@
 import React from "react";
+import AuthLayout from "../../AuthPages/AuthLayout";
 
 export default function ThankYou({ className }) {
   return (
-    <div
+    <>
+      <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 || ""
       }`}
@@ -44,5 +47,7 @@ export default function ThankYou({ className }) {
         </a>
       </div>
     </div>
+      </AuthLayout>
+    </>
   );
 }

src/components/AuthPages/UpdatePassword/index.jsx

@@ -1,17 +1,87 @@
 import React, { useState } from "react";
+import { 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 ThankYou from "../ThankYou";
+import usersService from "../../../services/UsersService";
 
 export default function UpdatePassword() {
-  const [updated, setValue] = useState(false);
+  const [values, setValues] = useState({
+    password: '',
+    confirmPassword: '',
+  })
   const [message, setMessage] = useState(false);
-  const updatePassword = () => {
+  const [validation, setValidation] = useState("");
-    setValue(!updated);
+  const [loading, setLoading] = useState(false);
-    setTimeout(() => {
+  const updatePass = new usersService()
-      setMessage(!message);
+  const navigate = useNavigate()
-    }, 100);
+  
+  const onChange = (e) => {
+    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const updatePassword = async (e) => {
+    const {username} = JSON.parse(localStorage.getItem('reset_raw'))
+    const otpCode = localStorage.getItem('otp')
+
+    setLoading(true)
+
+    if(!values.password || !values.confirmPassword){
+      setLoading(false)
+      setValidation("Please Fill empty inputs")
+      return
+    }
+
+    const regex = /^[A-Za-z]\w{7,14}$/
+    if(regex.test(values.password) == false) {
+      setLoading(false)
+      setValidation("it must be a least 7 alphanumeric characters")
+      return
+    }
+
+    if (values.password != values.confirmPassword){
+      setLoading(false)
+      setValidation("Password does not match")
+      return
+    }
+
+    const newPassword = {
+      username: username,
+      reset_uuid: localStorage.getItem('reset_uuid'),
+      random_text: otpCode,
+      member_uid: localStorage.getItem('member_uid'),
+      new_password: values.password,
+      stage: 300
+    }
+
+    delete values.confirmPassword
+
+    try {
+      const confirm = await updatePass.resetPassword(newPassword)
+      console.log(confirm)
+
+      if(confirm.status != 200){
+      setLoading(false)  
+      setValidation("Sorry, could not verify code")
+      return
+      }
+      
+      localStorage.removeItem('reset_uuid')
+      localStorage.removeItem('reset_raw')
+      localStorage.removeItem('otp')
+
+      if(confirm.status == 200){
+        setValidation("Password updated")
+        setTimeout(() => {
+          setLoading(false)
+          navigate("/confirm-reset", {replace : true});
+      }, 2000);
+      }
+    } catch (error) {
+      setLoading(false)
+      setValidation("An error occurred")
+    }
   };
 
   return (
@@ -19,7 +89,6 @@ export default function UpdatePassword() {
       <AuthLayout
         slogan="Welcome to  myFit"
       >
-        {updated === false ? (
           <div className="content-wrapper update-password-section xl:bg-white dark:bg-dark-white   w-full 2xl:h-[818px] xl:h-[600px] sm:w-auto sm:px-[70px] px-5 2xl:px-[100px] rounded-xl flex flex-col justify-center">
             <div>
               <div className="title-area relative flex flex-col justify-center items-center mb-7">
@@ -32,7 +101,7 @@ export default function UpdatePassword() {
                 </div>
               </div>
               <div className="input-area">
-                <div className="input-item mb-5">
+                {/* <div className="input-item mb-5">
                   <InputCom
                     placeholder="*********"
                     label="Old Password"
@@ -40,7 +109,7 @@ export default function UpdatePassword() {
                     type="password"
                     iconName="password"
                   />
-                </div>
+                </div> */}
                 <div className="input-item mb-5">
                   <InputCom
                     placeholder="*********"
@@ -48,32 +117,35 @@ export default function UpdatePassword() {
                     name="password"
                     type="password"
                     iconName="password"
+                    inputHandler={onChange}
                   />
                 </div>
                 <div className="input-item mb-5">
                   <InputCom
                     placeholder="*********"
                     label="Re-enter Password"
-                    name="password"
+                    name="confirmPassword"
                     type="password"
                     iconName="password"
+                    inputHandler={onChange}
                   />
                 </div>
+                {validation && <p className={`my-5 text-center font-light italic text-sm subpixel-antialiased tracking-wide ${validation == 'Password updated' ? 'text-green-600' : 'text-red-500'} `}>{validation}</p>}
                 <div className="signin-area mb-3.5">
                   <button
                     onClick={updatePassword}
                     type="button"
                     className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
                   >
-                    Continue
+                    {loading ? <div className="signup btn-loader"></div> : <span>Continue</span>}
                   </button>
                 </div>
               </div>
             </div>
-          </div>
+          </div> 
-        ) : (
+        {/* // : (
-          <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
+        //   <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
-        )}
+        // )} */}
       </AuthLayout>
     </>
   );

src/components/AuthPages/VerifyYou/Otp.jsx

@@ -1,18 +1,26 @@
 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
     for (const pin of otp.children) {
       // eslint-disable-next-line no-loop-func
-      pin.onkeyup = () => {
+      pin.onkeyup = (value) => {
-        if (pin.nextSibling) {
+        if(pin.children){
-          pin.nextSibling.children.otp.focus();
+          if(value.key === '' || value.key === ' ' || value.key === 'ArrowRight' || value.key === 'ArrowLeft' || value.key === 'ArrowUp' || value.key === 'ArrowDown' || value.key === 'Tab') return;
+          if(value.key === 'Backspace'){
+            if(pin.previousSibling){
+              pin.previousSibling.children.otp.focus();
+            } else {return;}
+          } else {
+            pin.nextSibling.children.otp.focus();
+          }
         }
-      };
+      };  
-    }
+    }    
-  });
+  }, []);
+  
   return (
     <>
       <div
@@ -25,6 +33,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_one'
+            value={value.value_one}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
@@ -33,6 +44,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_two'
+            value={value.value_two}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
@@ -41,6 +55,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_three'
+            value={value.value_three}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
@@ -49,6 +66,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_four'
+            value={value.value_four}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
@@ -57,6 +77,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_five'
+            value={value.value_five}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
@@ -65,6 +88,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_six'
+            value={value.value_six}
+            onChange={handleChange}
           />
         </div>
       </div>

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,9 +1,90 @@
-import React from "react";
+import React,{useState} from "react";
+import {useNavigate} from "react-router-dom"
 import titleShape from "../../../assets/images/shape/text-shape-three.svg";
 import AuthLayout from "../AuthLayout";
 import Otp from "./Otp";
+import usersService from "../../../services/UsersService";
 
 export default function VerifyYou() {
+  const [loading, setLoading] = useState(false);
+  const [validation, setValidation] = useState("");
+  const verifyOTP = new usersService()
+  const navigate = useNavigate()
+
+  const [verificationCode, setVerificationCode] = useState({
+    value_one: '',
+    value_two: ''
+  })
+
+  const handleVerificationInput = ({target:{name, value}}) => { 
+    setVerificationCode(prev => {
+      return {...prev, [name]:value}
+    })
+  }
+
+  const handleSubmit = async() => {
+    setValidation("")
+    setLoading(true)
+    
+    let otpCode = '';
+    for(let values in verificationCode){
+      otpCode+=verificationCode[values]
+    }
+    
+    // Validating otp code
+    if(!otpCode) {
+      setLoading(false)
+      setValidation("Please enter your otp code")
+      return
+    }
+    if(otpCode.length < 6) {
+      setLoading(false)
+      setValidation("OTP code incomplete")
+      return
+    }
+    
+    const {username} = JSON.parse(localStorage.getItem('reset_raw'))
+    const verifyEmail = {
+      username: username,
+      stage: 200,
+      reset_uuid: localStorage.getItem('reset_uuid'),
+      random_text: otpCode
+    }
+
+    localStorage.setItem('otp', otpCode)
+
+    try {
+    const verify = await verifyOTP.resetPassword(verifyEmail);
+    console.log(verify)
+    localStorage.setItem('member_uid', verify.data.member_uid);
+    if (verify.status != 200){
+      setValidation("Sorry, could not verify code")
+      setLoading(false)
+      return
+    }
+      
+    if (verify.status == 200){
+
+      if(verify?.data.error_msg == "Unable to continue"){
+        setLoading(false)
+        setValidation("Incorrect otp code")
+        return
+      }
+
+      setValidation("verified successfully")
+
+      setTimeout(() => {
+        setLoading(false)
+        navigate("/update-password", {replace : true});
+    }, 2000);
+        return
+      }
+    } catch (error) {
+      setLoading(false)
+      setValidation('An error occurred')
+    }
+  }
+  
   return (
     <>
       <AuthLayout
@@ -20,20 +101,22 @@ export default function VerifyYou() {
               </div>
             </div>
             <div className="input-area">
-              <Otp />
+              <Otp handleChange={handleVerificationInput} value={verificationCode} />
+              {validation && <p className={`my-5 text-center font-light italic text-sm subpixel-antialiased tracking-wide ${validation == 'verified successfully' ? 'text-green-600' : 'text-red-500'} `}>{validation}</p>}
               <div className="signin-area mb-3.5">
                 <a
-                  href="/update-password"
+                  // 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"
+                  onClick={handleSubmit}
                 >
-                  Continue
+                  {loading ? <div className="signup btn-loader"></div> : <span>Continue</span>}
                 </a>
               </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">
+                  <a href="/signup" className="ml-2 text-dark-gray dark:text-white font-bold">
-                    Please resend
+                    Sign Up
                   </a>
                 </p>
               </div>

src/components/Cards/TrackItemCard.jsx

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

src/components/Partials/Sidebar.jsx

@@ -191,11 +191,14 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
+
+              {process.env.REACT_APP_RESOURCES_SHOW == 1 ? 
               <li className="item group">
                 <NavLink
                   to="/resources"
                   className={`nav-item flex items-center ${
-                    ((navData) => (navData.isActive ? "active" : ""),
+                    (
+                      (navData) => (navData.isActive ? "active" : ""),
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
@@ -211,6 +214,9 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
+              :
+              null
+              }
           
               <li className="item group">
                 <NavLink

src/components/Reminders/AddEditReminder.jsx

@@ -76,7 +76,7 @@ export default function AddEditReminder({ className }) {
     setMessage({status: true, message: ''})
     let {description, notes, category, mode} = infoDetail
     //CHECKING IF AN EMPTY FIELD WAS PASSED
-    if(!description || !notes || !category || !mode){
+    if(!description || !category || !mode){
       setSuccess(false)
       setMessage({status: false, message: 'All fields must be filled'})
       return

src/components/Reminders/ReminderTable.jsx

@@ -82,127 +82,138 @@ export default function ReminderTable({ className }) {
         <div className="relative w-full overflow-x-auto sm:rounded-lg">
         <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
           <tbody>
-            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
+            <>
-              <td className="py-4">Item</td>
+              <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom">
-              <td className="py-4 text-center">Start</td>
+                <td className="py-4">Item</td>
-              <td className="py-4 text-center">End</td>
+                <td className="py-4 text-center">Start</td>
-              <td className="py-4 text-center">Reminder</td>
+                <td className="py-4 text-center">End</td>
-              <td className="py-4 text-right">.</td>
+                <td className="py-4 text-center">Reminder</td>
-            </tr>
+                <td className="py-4 text-right">.</td>
+              </tr>
+              <tr class="spacer"></tr>
+            </>
           
                 {
                   userReminders[0].reminders.length > 0 && (
                     selectedCategory == "All category" ? (
                       userReminders[0].reminders.map((reminder, index) => (
-                      <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                      <>
-                    <td className=" py-4">
+                        {/* <tr key={index} className="bg-white dark:bg-dark-white border border-light-purple dark:border-[#5356fb29]  hover:bg-gray-50"> */}
-                      <div className="flex space-x-2 items-center">
+                        <tr key={index} className="even:bg-slate-100 odd:bg-gray-50 dark:bg-dark-white dark:odd:bg-black hover:bg-light-purple transition-all duration-500">
-                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                            <td className="py-4 px-2 rounded-l-full">
-                          <img
+                              <div className="flex space-x-2 items-center">
-                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
+                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                            alt="data"
+                                  <img
-                            className="w-full h-full"
+                                    src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
-                          />
+                                    alt="data"
-                        </div>
+                                    className="w-full h-full"
-                        <div className="flex flex-col">
+                                  />
-                          <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                </div>
-                          {reminder.description.substring(0, 30)+ ' ...'}
+                                <div className="flex flex-col">
-                          </h1>
+                                  <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                          <span className="text-sm text-thin-light-gray">
+                                  {reminder.description.substring(0, 30)+ ' ...'}
-                          
+                                  </h1>
-                            Added <span className="text-purple">
+                                  <span className="text-sm text-thin-light-gray dark:text-white"> 
-                              {/* {new Date(reminder.added).toLocaleString().replace(/-/g, '/')} */}
+                                  
-                              {reminder.added.split(' ')[0]}
+                                    Added <span className="text-purple dark:text-white">
+                                      {/* {new Date(reminder.added).toLocaleString().replace(/-/g, '/')} */}
+                                      {reminder.added.split(' ')[0]}
+                                      </span>
+                                  </span>
+                                </div>
+                              </div>
+                            </td>
+                            <td className="text-center py-4 px-2">
+                              <div className="flex space-x-1 items-center justify-center">
+                    
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                                {/* {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')} */}
+                                {reminder.start_date.split(' ')[0]}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="text-center py-4 px-2">
+                              <div className="flex space-x-1 items-center justify-center">
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                                {/* {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')} */}
+                                {reminder.end_date.split(' ')[0]}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="text-right py-4 px-2">
+                              <span className="text-base text-thin-light-gray whitespace-nowrap">
+                              {reminder.reminder}
                               </span>
-                          </span>
+                            </td>
-                        </div>
+                            <td className="text-right py-4 px-2 rounded-r-full">
-                      </div>
+                            <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
-                    </td>
+                            </td>
-                    <td className="text-center py-4 px-2">
+                        </tr>
-                      <div className="flex space-x-1 items-center justify-center">
+                        {/* <tr class="spacer"></tr> */}
-             
+                      </>
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {/* {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')} */}
-                        {reminder.start_date.split(' ')[0]}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="text-center py-4 px-2">
-                      <div className="flex space-x-1 items-center justify-center">
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {/* {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')} */}
-                        {reminder.end_date.split(' ')[0]}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="text-right py-4 px-2">
-                      <span className="text-base text-thin-light-gray whitespace-nowrap">
-                       {reminder.reminder}
-                      </span>
-                    </td>
-                    <td className="text-right py-4 px-2">
-                    <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
-                    </td>
-                      </tr>
                       ))
                     )
                     :
                     userReminders[0].reminders.map((reminder, index) => {
                       if(reminder.category == selectedCategory){
                         return (
-                          <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                          <>
-                    <td className=" py-4">
+                          {/* <tr key={index} className="bg-white dark:bg-dark-white border border-light-purple dark:border-[#5356fb29]  hover:bg-gray-50"> */}
-                      <div className="flex space-x-2 items-center">
+                          <tr key={index} className="even:bg-slate-100 odd:bg-gray-50 dark:bg-dark-white dark:odd:bg-black hover:bg-light-purple transition-all duration-500">
-                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                            <td className="py-4 px-2 rounded-l-full">
-                        <img
+                              <div className="flex space-x-2 items-center">
-                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
+                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                            alt="data"
+                                <img
-                            className="w-full h-full"
+                                    src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
-                          />
+                                    alt="data"
-                        </div>
+                                    className="w-full h-full"
-                        <div className="flex flex-col">
+                                  />
-                          <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                </div>
-                          {reminder.description.substring(0, 30)+ ' ...'}
+                                <div className="flex flex-col">
-                          </h1>
+                                  <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                          <span className="text-sm text-thin-light-gray">
+                                  {reminder.description.substring(0, 30)+ ' ...'}
-                          
+                                  </h1>
-                            Added <span className="text-purple">
+                                  <span className="text-sm text-thin-light-gray dark:text-white">
-                            {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
+                                  
+                                    Added <span className="text-purple dark:text-white">
+                                    {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
+                                      </span>
+                                  </span>
+                                </div>
+                              </div>
+                            </td>
+                            <td className="text-center py-4 px-2">
+                              <div className="flex space-x-1 items-center justify-center">
+                    
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                                {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="text-center py-4 px-2">
+                              <div className="flex space-x-1 items-center justify-center">
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                                {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="text-right py-4 px-2">
+                              <span className="text-base text-thin-light-gray whitespace-nowrap">
+                              {reminder.reminder}
                               </span>
-                          </span>
+                            </td>
-                        </div>
+                            <td className="text-right py-4 px-2 rounded-r-full">
-                      </div>
+                              {/* <button
-                    </td>
+                                type="button"
-                    <td className="text-center py-4 px-2">
+                                className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                      <div className="flex space-x-1 items-center justify-center">
+                              >
-             
+                                Edit
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                              </button> */}
-                        {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
+                              <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
-                        </span>
+                            </td>
-                      </div>
-                    </td>
-                    <td className="text-center py-4 px-2">
-                      <div className="flex space-x-1 items-center justify-center">
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="text-right py-4 px-2">
-                      <span className="text-base text-thin-light-gray whitespace-nowrap">
-                       {reminder.reminder}
-                      </span>
-                    </td>
-                    <td className="text-right py-4 px-2">
-                      {/* <button
-                        type="button"
-                        className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                      >
-                        Edit
-                      </button> */}
-                      <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
-                    </td>
                           </tr>
+                          {/* <tr class="spacer"></tr> */}
+                          </>
                         )
                       }
                     })

src/index.css

@@ -365,9 +365,15 @@ input[type="number"] {
 .trending-products .slick-list {
   margin: 0 -16px;
 }
-.update-table table tr:last-child {
+
+/* .update-table table tr:last-child {
   border-bottom: none;
+} */
+
+.update-table table tr.spacer {
+  height: 10px;
 }
+
 /* TODO: =================================HomePage end================================ */
 /* TODO: =================================my wallet end================================ */
 .circle-count {
@@ -669,6 +675,7 @@ TODO: Responsive ===========================
   .nft-userprofile-wrapper .content-wrapper-profile-only .auth {
     margin-top: -70px;
   }
+  .react-date-picker__calendar {width: 290px;}
 }
 @media (max-width: 376px) {
   .notification-page .content-item .notifications {
@@ -677,6 +684,7 @@ TODO: Responsive ===========================
   .notification-page .content-item .notifications .icon {
     @apply mb-2;
   }
+
 }
 
 /* Calendar */
@@ -766,6 +774,11 @@ TODO: Responsive ===========================
 }
 
 /* Date Picker */
+.react-date-picker{
+  display: flex !important;
+  flex: 1;
+}
+
 .react-date-picker__wrapper{
   border: 0.5px solid #E3E4FE;
   padding: 1.25rem;
@@ -783,6 +796,7 @@ TODO: Responsive ===========================
 
 .dark .react-date-picker__button svg{stroke: #7B818D;}
 
+.react-date-picker__calendar {inset: 100% 25px auto auto !important;}
 .react-date-picker__calendar .react-calendar{
   min-height: 18.4rem;
 }

src/services/UsersService.js

@@ -5,6 +5,11 @@ 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);
@@ -16,15 +21,10 @@ class usersService {
     }
 
     //SIGNUP AUTH
-    signupAuth(reqData){
+    signupUser(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")
@@ -32,6 +32,13 @@ class usersService {
         return this.getAuxEnd("/reminders", reqData);
     }
 
+    getUserHomeStats(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id")
+        };
+        return this.getAuxEnd("/home-stats", reqData);
+    }
+
     getUserLoginHistory(){
         var reqData = {
             member_id: localStorage.getItem("member_id")
@@ -133,7 +140,7 @@ class usersService {
                 if (error.response) {
                     //response status is an error code
                     console.log("ERROR-------------------------------------------------------");
-                    console.log(error.response.status);
+                    console.log(error.response.status, 'err');
                     console.log("ERROR-------------------------------------------------------");
                 } else if (error.request) {
                     //response not received though the request was sent

src/views/VerifySignupCompletePage.jsx

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