Made time lesser

.env

@@ -21,6 +21,10 @@ REACT_APP_SESSION_EXPIRE_MINUTES=300000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
+
+# Had to change the error time to 3sec cause it took too long
+REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

src/components/AuthPages/ForgotPassword/index.jsx

@@ -1,49 +1,153 @@
-import React from "react";
-import { Link } from 'react-router-dom';
-import titleShape from "../../../assets/images/shape/title-shape-two.svg";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from 'react-router-dom';
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import usersService from "../../../services/UsersService";
 
 export default function ForgotPassword() {
+  const [checked, setValue] = useState(false);
+  const [resetLoading, setResetLoading] = useState(false)
+  // email
+  const [email, setMail] = useState("");
+  const [msgError, setMsgError] = useState('');
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  const handleEmail = (e) => {
+    setMail(e?.target.value);
+  };
+
+  const humanChecker = () => {
+    setValue(!checked);
+  };
+
+  const resetHandler = async () => {
+    if (email == '') {
+      setMsgError('An email is required')
+    } else if (!checked) {
+      setMsgError('Check if you are human')
+    }
+
+    if (email != '' && checked) {
+      const reqData = { email }
+      setResetLoading(true)
+      try {
+        const res = await userApi.StartResetPassword(reqData)
+        if (res.status === 200) {
+          const { data } = res
+          if (data.status == -1) {
+            setMsgError('This is an incorrect or duplicate email')
+            setResetLoading(false)
+          } else if (data.status > 0) {
+            setResetLoading(false)
+            navigate("/verify-you", { replace: true })
+          } else{
+            setMsgError("reset was not successful")
+            setResetLoading(false)
+          }
+          setMail("")
+        }
+      } catch (error) {
+        setResetLoading(false)
+        setMail("")
+        setMsgError('An error occurred')
+        throw new Error(error)
+      } finally {
+        setTimeout(() => {
+          setMsgError(null)
+        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
+      }
+    }
+    setTimeout(() => {
+      setMsgError(null)
+    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
+  }
+
   return (
     <>
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="content-wrapper xl:bg-white dark:bg-dark-white   xl:px-[70px] w-full sm:w-auto   2xl:px-[100px] h-[818px] rounded-xl ">
-          <div className="flex flex-col justify-center w-full h-full px-5">
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <h1 className="sm:text-5xl text-4xl font-bold sm:leading-[74px]   text-dark-gray dark:text-white">
-                Forget Password
-              </h1>
-              <div className="shape sm:w-[377px] w-[270px] -mt-1 ml-0">
-                <img src={titleShape} alt="shape" />
+        <div className="w-full">
+          <div className='mb-12'>
+            <Link to='#'>
+              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+            </Link>
+          </div>
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
+            <div className="flex flex-col justify-center w-full h-full px-5">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                  fontSize: 'calc(1rem + .6vw)'
+                }}>
+                  Forget Password
+                </h1>
+                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
               </div>
-            </div>
-            <div className="input-area">
-              <div className="input-item mb-5">
-                <InputCom
-                  placeholder="example@quomodosoft.com"
-                  label="Email Address"
-                  name="email"
-                  type="email"
-                  iconName="message"
-                />
-              </div>
-              <div className="signin-area mb-3.5">
-                <a
-                  href="/verify-you"
-                  className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
-                >
-                  Send Code
-                </a>
-
-
-                <Link to="/"
-                  className=" my-40 font-bold flex justify-center text-red-500 items-center"
-                >
-                  Back to Home
-                </Link>
+              <div className="input-area">
+                <div className="input-item mb-10">
+                  <InputCom
+                    placeholder="Your Username/Email"
+                    label="Email"
+                    name="email"
+                    type="email"
+                    value={email}
+                    inputHandler={handleEmail}
+                    iconName="message"
+                  />
+                </div>
+                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
+                {/* hCaptha clone for the time being */}
+                <div className="mb-10">
+                  <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
+                    <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
+                      {/* Checkbox */}
+                      <div className="h-full relative inline-block">
+                        <div className="relative table top-0 h-full">
+                          <div className="table-cell align-middle">
+                            <div className="relative w-[30px] h-[30px] mx-[15px]">
+                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="h-full relative inline-block w-[170px]">
+                        <label className="relative table top-0 h-full">
+                          <label className="table-cell align-middle">
+                            <label className="text-800 text-sm" htmlFor="human-checkbox">
+                              I am human
+                            </label>
+                          </label>
+                        </label>
+                      </div>
+                      <div className="h-full relative inline-block w-16"></div>
+                    </div>
+                  </div>
+                </div>
+                <div className="signin-area mb-3.5">
+                  <div className="flex justify-center items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={resetHandler}
+                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                    >
+                      {resetLoading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <span>Send Code</span>
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => navigate("/login")}
+                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>

src/components/AuthPages/Login/index.jsx

@@ -4,8 +4,6 @@ import { toast } from "react-toastify";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
-// import titleShape from "../../../assets/images/shape/title-shape.svg";
-import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png"
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -24,8 +22,6 @@ export default function Login() {
     setValue(!checked);
   };
 
-  console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
-
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -168,7 +164,7 @@ export default function Login() {
                   Forgot Password
                 </a>
               </div> */}
-                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
                 {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center">

src/components/AuthPages/SignUp/index.jsx

@@ -29,14 +29,15 @@ export default function SignUp() {
   // To Show and Hide Password
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
-    // return console.log('showPassword')
   };
+
   const rememberMe = () => {
     setValue(!checked);
   };
 
   const navigate = useNavigate();
   const userApi = new usersService();
+  
   // Get Country Api
   const getCountryList = async () => {
     const res = await userApi.getSignupCountryData()
@@ -74,27 +75,32 @@ export default function SignUp() {
         }
 
         const res = await userApi.CreateUser(reqData)
+        setSignUpLoading(true)
+
         if (res.status === 200) {
           const { data } = res
           if (data.status == -1 && data.acc == 'DULPICATE') {
             setMsgError('This account has been already created')
+            setSignUpLoading(false)
           }
           if (data.status > 0 && data.internal_return == 100 && data.session != '') {
             localStorage.setItem("email", `${data.email}`);
             localStorage.setItem("country", `${data.country}`);
             localStorage.setItem("firstname", `${data.firstname}`);
             localStorage.setItem("lastname", `${data.lastname}`);
-            setSignUpLoading(true)
 
             setTimeout(() => {
               navigate("/", { replace: true });
               setSignUpLoading(false)
             }, 2000)
-            console.log('Success')
           } else {
             setMsgError(data.status)
+            setSignUpLoading(false)
           }
         }
+      } else {
+        setMsgError('This account does not exist')
+        setSignUpLoading(false)
       }
     } catch (error) {
       throw new Error(error)
@@ -102,7 +108,7 @@ export default function SignUp() {
     } finally {
       setTimeout(() => {
         setMsgError(null)
-      }, 7000)
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
     }
   }
 

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -25,7 +25,7 @@ export default function InputCom({
           {label}
         </label>
       )}
-      {forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
       </div>
       <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
         <input

src/middleware/AuthRoute.jsx

@@ -8,7 +8,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
-
   //Removing Data stored at localStorage after session expires
   const expireSession = () => {
     localStorage.removeItem("email");

src/services/UsersService.js

@@ -6,6 +6,11 @@ class usersService {
         console.log("WRB Service Entry");
     }
 
+    CreateUser(reqData){
+        localStorage.setItem("session_token", ``);
+        return this.postAuxEnd("/createuser", reqData);
+    }
+
     getHomeDate(){
         var postData = {
             uuid: localStorage.getItem("uuid"),
@@ -48,11 +53,6 @@ class usersService {
         return this.postAuxEnd("/apigate", null);
     }
 
-    CreateUser(reqData){
-        localStorage.setItem("session_token", ``);
-        return this.postAuxEnd("/createuser", reqData);
-    }
-
     getLoadProfile(){
         var postData = {
             uuid: localStorage.getItem("uid"),
@@ -221,6 +221,10 @@ class usersService {
         return this.postAuxEnd("/sendreferral", postData);
     }
 
+    StartResetPassword(reqData){
+        return this.postAuxEnd("/startresetpasword", reqData)
+    }
+
     getCouponRedeem(){
     var postData = {
         uuid: localStorage.getItem("uid"),