src/components/auth/Login.tsx

@@ -48,7 +48,7 @@ export default function Login() {
 
     setRequestStatus((prev:RequestStatus) => ({...prev, loading:true}))
     employerLogin(reqData).then(res => {
-      console.log('RES', res)
+      // console.log('RES', res)
       if(!res?.data?.call_return){
         setRequestStatus({loading:false, status:false, message:'Email/Password is wrong', data:{}})
         return setTimeout(()=>{

src/components/auth/OTP.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Button } from "..";
+import { Button, CustomSpinner } from "..";
 import { useLocation, useNavigate } from "react-router-dom";
 import { RouteHandler } from "../../router/routes";
 import { updateUserDetails } from "../../store/UserDetails";
 import { useDispatch } from "react-redux";
 import { verifyOTP } from "../../core/apiRequest";
+import { RequestStatus } from "../../core/models";
 
 type FormType = {
   [index: string] : string
@@ -20,6 +21,8 @@ export default function Login() {
   const { state } = useLocation();
   const dispatch = useDispatch()
 
+  const [requestStatus, setRequestStatus] = useState<RequestStatus>({loading:false, status:null, message:'', data:{}})
+
   let [values, setValues] = useState<FormType>({
     otp1: "",
     otp2: "",
@@ -36,17 +39,31 @@ export default function Login() {
   };
 
   const handleSubmit = () => {
+    let reqData = {
+      verify_uid: state?.verify_uid,
+      otp: values.otp1+values.otp2+values.otp3+values.otp4
+    }
 
-    // verifyOTP().then(res => {
-
-    // }).catch(err =>{
-
-    // })
-    localStorage.setItem('token', state?.verify_uid)
-
-    let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'}
-    dispatch(updateUserDetails(data));
-    navigate(`/${state?.application_uid}`, {replace:true})
+    setRequestStatus((prev:RequestStatus) => ({...prev, loading:true}))
+    verifyOTP(reqData).then(res => {
+      if(!res?.data?.call_return){
+        setRequestStatus({loading:false, status:false, message:'OTP is wrong', data:{}})
+        return setTimeout(()=>{
+          setRequestStatus({loading:false, status:null, message:'', data:{}})
+        },4000)
+      }
+      setRequestStatus({loading:false, status:true, message:'OTP Verified', data:res?.data})
+      localStorage.setItem('token', state?.verify_uid)
+      let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'}
+      dispatch(updateUserDetails(data));
+      navigate(`/${state?.application_uid}`, {replace:true})
+    }).catch(err =>{
+      setRequestStatus({loading:false, status:false, message:'something went wrong', data:{}})
+      console.log(err)
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:null, message:'', data:{}})
+      },4000)
+    })
   }
 
   useEffect(() => {
@@ -127,11 +144,18 @@ export default function Login() {
                 </div>
 
                 <div className="mt-10 w-full">
+                  {requestStatus.loading ?
+                  <div className='w-full flex justify-center items-center'>
+                    <CustomSpinner />
+                  </div>
+                  :
                   <Button
                     text="Enter"
                     className="rounded-md w-full text-xl capitalize font-bold"
                     onClick={handleSubmit}
+                    disabled={!values.otp1 || !values.otp2 || !values.otp1 || !values.otp1}
                   />
+                  }
                   {/* <Link to='#' className='text-black text-sm'>Forget your password?</Link> */}
                 </div>
               </div>