From 636651aa386b975037e08465cfef0d8374f5f09b Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Mon, 24 Apr 2023 23:39:40 +0100
Subject: [PATCH] Complete format and api call(70%)

---
 .env                                          |   2 +
 .../AuthPages/ForgotPassword/index.jsx        | 105 +++++++++++++++++-
 src/components/AuthPages/Login/index.jsx      |   2 -
 src/components/AuthPages/SignUp/index.jsx     |   2 +-
 src/middleware/AuthRoute.jsx                  |   1 -
 src/services/UsersService.js                  |  14 ++-
 6 files changed, 111 insertions(+), 15 deletions(-)

diff --git a/.env b/.env
index 426eb40..26a2207 100644
--- a/.env
+++ b/.env
@@ -21,6 +21,8 @@ REACT_APP_SESSION_EXPIRE_MINUTES=300000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
+REACT_APP_RESET_START_ERROR_TIMEOUT=5000
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
diff --git a/src/components/AuthPages/ForgotPassword/index.jsx b/src/components/AuthPages/ForgotPassword/index.jsx
index e526c4e..0eabcec 100644
--- a/src/components/AuthPages/ForgotPassword/index.jsx
+++ b/src/components/AuthPages/ForgotPassword/index.jsx
@@ -1,10 +1,67 @@
-import React from "react";
-import { Link } from 'react-router-dom';
+import React, { 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('Please fill in fields')
+    } 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('reset was not successful')
+            setResetLoading(false)
+            return
+          }
+          if (data.status > 0) {
+            setResetLoading(false)
+            console.log('Success', data)
+          }
+        }
+      } catch (error) {
+        setResetLoading(false)
+        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
@@ -18,7 +75,7 @@ export default function ForgotPassword() {
           </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">
+              <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)'
                 }}>
@@ -27,25 +84,61 @@ export default function ForgotPassword() {
                 <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
               </div>
               <div className="input-area">
-                <div className="input-item mb-5">
+                <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" />
+                            </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">
+                  <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]`}
                     >
-                      Send Code
+                      {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
diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index 697fbb8..71f8c34 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -22,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) => {
diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx
index 3cd6a12..b01e81e 100644
--- a/src/components/AuthPages/SignUp/index.jsx
+++ b/src/components/AuthPages/SignUp/index.jsx
@@ -102,7 +102,7 @@ export default function SignUp() {
     } finally {
       setTimeout(() => {
         setMsgError(null)
-      }, 7000)
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
     }
   }
 
diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx
index f7b4b9c..3c83ab8 100644
--- a/src/middleware/AuthRoute.jsx
+++ b/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");
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index cab41ac..a813893 100644
--- a/src/services/UsersService.js
+++ b/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"),