From 2cbeb665025fe804c321cac83b1325f2dbff5595 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Mon, 17 Apr 2023 23:36:12 +0100
Subject: [PATCH] login error msg timeout

---
 .env                                      |  4 +++-
 src/app/modules/auth/components/Login.tsx | 18 +++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/.env b/.env
index 9cf80df..8f80f26 100644
--- a/.env
+++ b/.env
@@ -16,4 +16,6 @@ REACT_APP_PREVIEW_DOCS_URL=https://preview.keenthemes.com/metronic8/react/docs
 REACT_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api
 REACT_APP_TERMS_LINK='https://www.float.sg/terms'
 REACT_APP_CONTACT_LINK='https://www.float.sg/contact'
-REACT_APP_ABOUT_LINK='https://www.float.sg/about'
\ No newline at end of file
+REACT_APP_ABOUT_LINK='https://www.float.sg/about'
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=5000
\ No newline at end of file
diff --git a/src/app/modules/auth/components/Login.tsx b/src/app/modules/auth/components/Login.tsx
index b115fd7..a993fba 100644
--- a/src/app/modules/auth/components/Login.tsx
+++ b/src/app/modules/auth/components/Login.tsx
@@ -37,6 +37,7 @@ export function Login() {
   const navigate = useNavigate()
   const [loading, setLoading] = useState(false)
   const {saveAuth, setCurrentUser} = useAuth()
+  const statusChecker = document.getElementById('formik-status')
 
   const formik = useFormik({
     initialValues,
@@ -48,14 +49,25 @@ export function Login() {
         saveAuth(auth)
         // const {data: user} = await getUserByToken(auth.api_token)
         // setCurrentUser(user)
+        if(auth.status <= 0){
+          setStatus(auth.error_msg)
+          setSubmitting(false)
+          setLoading(false)
+          return
+        }
         setCurrentUser(auth.profile)
+        console.log(auth)
         navigate('/dashboard')
       } catch (error) {
         console.error(error)
         saveAuth(undefined)
-        setStatus('The login details are incorrect')
+        setStatus('An error occurred')
         setSubmitting(false)
         setLoading(false)
+      } finally {
+        setTimeout(() => {
+          setStatus(null)
+        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
       }
     },
   })
@@ -126,7 +138,7 @@ export function Login() {
       {/* end::Separator */}
 
       {formik.status ? (
-        <div className='mb-lg-15 alert alert-danger'>
+        <div id='formik-status' className='mb-lg-15 alert alert-danger'>
           <div className='alert-text font-weight-bold'>{formik.status}</div>
         </div>
       ) : (
@@ -163,7 +175,7 @@ export function Login() {
         <label className='form-label fw-bolder text-dark fs-6 mb-0'>Password</label>
         <input
           type='password'
-          placeHolder="●●●●●●"
+          placeholder="●●●●●●"
           autoComplete='off'
           {...formik.getFieldProps('password')}
           className={clsx(