Merge branch 'login-error-msg-timeout' of FloatSystems/float-fleet into master

.env

@@ -2,7 +2,7 @@ PUBLIC_URL=http://localhost:3000/
 PORT=3000
 PRIMARY_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
 REACT_APP_BASE_LAYOUT_CONFIG_KEY='metronic-react-demo1-8150'
-REACT_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
+REACT_APP_API_URL=https://float-gat.dev.chiefsoft.net/en/fleetweb/api/v1/
 REACT_APP_VERSION=v8.1.5
 REACT_APP_THEME_NAME=WrenchBoard
 REACT_APP_THEME_DEMO=dashboard
@@ -16,4 +16,7 @@ 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'
+REACT_APP_ABOUT_LINK='https://www.float.sg/about'
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=5000
+REACT_APP_LOGOUT_SESSION_TIMEOUT=300000

src/app/modules/auth/AuthLayout.tsx

@@ -1,10 +1,44 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import {Outlet, Link} from 'react-router-dom'
 import {toAbsoluteUrl} from '../../../_res/helpers'
 
 const AuthLayout = () => {
+
+  // INITIAL STATE FOR BACKGROUND IMAGE
+  let [bgImage, setBgImage] = useState({
+    filter: 'grayscale(0%)'
+  })
+
+  // FUNCTION TO CHANGE BACKGROUND IMAGE
+  let changeBg = () => {
+    // let randomNum = Math.round(Math.random() * 3)
+    let randomNum = Number(localStorage.getItem('bg-num'))
+    if(randomNum){
+      if(randomNum <= 1){
+        setBgImage({
+          filter: 'grayscale(0%)'
+        })
+        localStorage.setItem('bg-num', '2')
+      }else if(randomNum <= 2){
+        setBgImage({
+          // filter: 'hue-rotate(90deg)'
+          filter: 'grayscale(100%)'
+        })
+        localStorage.setItem('bg-num', '3')
+      }else{
+        setBgImage({
+          filter: 'sepia(50%)'
+        })
+        localStorage.setItem('bg-num', '1')
+      }
+    }else{
+      localStorage.setItem('bg-num', '2')
+    }
+  }
+
   useEffect(() => {
+    changeBg() // FUNCTION TO CHANGE BACKGROUND IMAGE
     const root = document.getElementById('root')
     if (root) {
       root.style.height = '100%'
@@ -16,10 +50,11 @@ const AuthLayout = () => {
     }
   }, [])
 
-  return (
-    <div className='d-flex flex-column flex-lg-row flex-column-fluid vh-100 overflow-auto' style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/float-sample.jpg')})`, backgroundSize: 'cover', backgroundPosition: 'center'}}>
+  return (    
+    <div className='position-relative d-flex flex-column flex-lg-row flex-column-fluid overflow-hidden' style={{minHeight: '100vh'}}>
+      <img src={toAbsoluteUrl('/media/misc/float-sample.jpg')} alt="" className='position-absolute top-0 left-0 w-auto h-100' style={{filter: bgImage.filter}}/>
       {/* begin::Body */}
-      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
+      <div className='position-relative d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
         {/* begin::Form */}
         <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
           {/* begin::Wrapper */}

src/app/modules/auth/components/Login.tsx

@@ -8,6 +8,7 @@ import {getUserByToken, login} from '../core/_requests'
 import {toAbsoluteUrl} from '../../../../_metronic/helpers'
 import {useAuth} from '../core/Auth'
 // import Logo from '../../../../../public/media/logos/favicon.ico'
+import {useNavigate} from 'react-router-dom'
 
 const loginSchema = Yup.object().shape({
   email: Yup.string()
@@ -22,8 +23,8 @@ const loginSchema = Yup.object().shape({
 })
 
 const initialValues = {
-  email: 'johndoe@email.com',
-  password: '****',
+  email: '',
+  password: '',
 }
 
 /*
@@ -33,8 +34,10 @@ const initialValues = {
 */
 
 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,
@@ -44,14 +47,27 @@ export function Login() {
       try {
         const {data: auth} = await login(values.email, values.password)
         saveAuth(auth)
-        const {data: user} = await getUserByToken(auth.api_token)
-        setCurrentUser(user)
+        // 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))
       }
     },
   })
@@ -121,11 +137,19 @@ export function Login() {
       </div>
       {/* end::Separator */}
 
+      {formik.status ? (
+        <div id='formik-status' className='mb-lg-15 alert alert-danger'>
+          <div className='alert-text font-weight-bold'>{formik.status}</div>
+        </div>
+      ) : (
+        null
+      )}
+
       {/* begin::Form group */}
       <div className='fv-row mb-8'>
         <label className='form-label fs-6 fw-bolder text-dark'>Email</label>
         <input
-          placeholder='Email'
+          placeholder='floatuser@email.com'
           {...formik.getFieldProps('email')}
           className={clsx(
             'form-control bg-transparent',
@@ -151,6 +175,7 @@ export function Login() {
         <label className='form-label fw-bolder text-dark fs-6 mb-0'>Password</label>
         <input
           type='password'
+          placeholder="●●●●●●"
           autoComplete='off'
           {...formik.getFieldProps('password')}
           className={clsx(

src/app/modules/auth/components/Registration.tsx

@@ -318,7 +318,7 @@ export function Registration() {
           <span>
             I Accept the{' '}
             <a
-              href='https://keenthemes.com/metronic/?page=faq'
+              href='#'
               target='_blank'
               className='ms-1 link-primary'
             >

src/app/modules/auth/core/Auth.tsx

@@ -8,6 +8,7 @@ import {
   Dispatch,
   SetStateAction,
 } from 'react'
+import {useLocation} from 'react-router-dom'
 import {LayoutSplashScreen} from '../../../../_res/layout/core'
 import {AuthModel, UserModel} from './_models'
 import * as authHelper from './AuthHelpers'
@@ -61,6 +62,7 @@ const AuthProvider: FC<WithChildren> = ({children}) => {
 }
 
 const AuthInit: FC<WithChildren> = ({children}) => {
+  const {pathname} = useLocation()
   const {auth, logout, setCurrentUser} = useAuth()
   const didRequest = useRef(false)
   const [showSplashScreen, setShowSplashScreen] = useState(true)
@@ -69,9 +71,12 @@ const AuthInit: FC<WithChildren> = ({children}) => {
     const requestUser = async (apiToken: string) => {
       try {
         if (!didRequest.current) {
-          const {data} = await getUserByToken(apiToken)
-          if (data) {
-            setCurrentUser(data)
+          // const {data} = await getUserByToken(apiToken)
+          // if (data) {
+          //   setCurrentUser(data)
+          // }
+          if(localStorage.getItem('kt-auth-react-v')){
+            setCurrentUser(auth?.profile)
           }
         }
       } catch (error) {
@@ -86,14 +91,23 @@ const AuthInit: FC<WithChildren> = ({children}) => {
       return () => (didRequest.current = true)
     }
 
-    if (auth && auth.api_token) {
-      requestUser(auth.api_token)
+    if (auth && auth.session_token) {
+      requestUser(auth.session_token)
     } else {
       logout()
       setShowSplashScreen(false)
     }
+
+    // adding a timeout for 5mins 
+    const logOutSession = setTimeout(() => {
+      logout()
+    }, Number(process.env.REACT_APP_LOGOUT_SESSION_TIMEOUT))
+    
+    return (() => {
+      clearInterval(logOutSession)
+    })
     // eslint-disable-next-line
-  }, [])
+  }, [pathname])
 
   return showSplashScreen ? <LayoutSplashScreen /> : <>{children}</>
 }

src/app/modules/auth/core/AuthHelpers.ts

@@ -52,8 +52,8 @@ export function setupAxios(axios: any) {
   axios.interceptors.request.use(
     (config: {headers: {Authorization: string}}) => {
       const auth = getAuth()
-      if (auth && auth.api_token) {
-        config.headers.Authorization = `Bearer ${auth.api_token}`
+      if (auth && auth.session_token) {
+        config.headers.Authorization = `Bearer ${auth.session_token}`
       }
 
       return config

src/app/modules/auth/core/_models.ts

@@ -1,5 +1,5 @@
 export interface AuthModel {
-  api_token: string
+  session_token: string
   refreshToken?: string
 }
 

src/app/modules/auth/core/_requests.ts

@@ -11,8 +11,8 @@ export const REQUEST_PASSWORD_URL = `${API_URL}/forgot_password`
 // Server should return AuthModel
 export function login(email: string, password: string) {
   return axios.post<AuthModel>(LOGIN_URL, {
-    email,
-    password,
+    username: email,
+    password: password,
   })
 }
 
@@ -41,7 +41,7 @@ export function requestPassword(email: string) {
 }
 
 export function getUserByToken(token: string) {
-  return axios.post<UserModel>(GET_USER_BY_ACCESSTOKEN_URL, {
-    api_token: token,
+  return axios.get<UserModel>(GET_USER_BY_ACCESSTOKEN_URL, {
+    session_token: token,
   })
 }