Merge branch 'loginpage_logo_removal' of FloatSystems/float-users into master

.env

@@ -17,4 +17,7 @@ REACT_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api
 
 REACT_APP_SITE_CONTACT_US=https://www.float.sg/contact
 REACT_APP_SITE_TERMS=https://www.float.sg/terms
-REACT_APP_SITE_ABOUT_US=https://www.float.sg/about
+REACT_APP_SITE_ABOUT_US=https://www.float.sg/about
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=5000
+REACT_APP_SESSION_TIMEOUT=300000

src/_metronic/layout/components/sidebar/SidebarLogo.tsx

@@ -22,19 +22,19 @@ const SidebarLogo = () => {
         {config.layoutType === 'dark-sidebar' ? (
           <img
             alt='Logo'
-            src={toAbsoluteUrl('/media/logos/default-dark.svg')}
+            src={toAbsoluteUrl('/media/logos/logo.png')}
             className='h-25px app-sidebar-logo-default'
           />
         ) : (
           <>
             <img
               alt='Logo'
-              src={toAbsoluteUrl('/media/logos/default.svg')}
+              src={toAbsoluteUrl('/media/logos/logo.png')}
               className='h-25px app-sidebar-logo-default theme-light-show'
             />
             <img
               alt='Logo'
-              src={toAbsoluteUrl('/media/logos/default-dark.svg')}
+              src={toAbsoluteUrl('/media/logos/logo.png')}
               className='h-25px app-sidebar-logo-default theme-dark-show'
             />
           </>

src/app/modules/auth/AuthLayout.tsx

@@ -17,7 +17,7 @@ const AuthLayout = () => {
   }, [])
 
   return (
-    <div className='d-flex flex-column flex-lg-row flex-column-fluid h-100'>
+    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto' style={{minHeight: '100vh'}}>
       {/* begin::Body */}
       <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
         {/* begin::Form */}

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

@@ -50,12 +50,6 @@ export function ForgotPassword() {
       id='kt_login_password_reset_form'
       onSubmit={formik.handleSubmit}
     >
-      {/* begin::Heading */}
-      <div className='text-center mb-11'>
-        {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
-        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-      </div>
-      {/* begin::Heading */}
       <div className='text-center mb-10'>
         {/* begin::Link */}
         <div className='text-gray-500 fw-semibold fs-6'>

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

@@ -49,18 +49,20 @@ export function Login() {
           setStatus('The login details are incorrect')
           setSubmitting(false)
           setLoading(false)
-          console.log(auth)  //remove later
           return
         }
         saveAuth(auth)
         setCurrentUser(auth.profile)
-        console.log(auth)  //remove later
       } catch (error) {
         console.error(error)
         saveAuth(undefined)
         setStatus('The login details are incorrect')
         setSubmitting(false)
         setLoading(false)
+      } finally {
+        setTimeout(()=>{
+          setStatus('')
+        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
       }
     },
   })
@@ -73,10 +75,10 @@ export function Login() {
       id='kt_login_signin_form'
     >
       {/* begin::Heading */}
-      <div className='text-center mb-11'>
+      {/* <div className='text-center mb-11'>
-        {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
+        <h1 className='text-dark fw-bolder mb-3'>Sign In</h1>
         <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-      </div>
+      </div> */}
       {/* begin::Heading */}
 
       {/* begin::Login options */}
@@ -130,14 +132,6 @@ export function Login() {
       </div>
       {/* end::Separator */}
 
-      {formik.status ? (
-        <div 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>
@@ -221,6 +215,16 @@ export function Login() {
       </div>
       {/* end::Action */}
 
+      {/* error message */}
+      {formik.status ? (
+        <div className='mb-lg-15 alert alert-danger'>
+          <div className='alert-text font-weight-bold'>{formik.status}</div>
+        </div>
+      ) : (
+        null
+      )}
+      {/* end of error message */}
+
       <div className='text-gray-500 text-center fw-semibold fs-6'>
         Not a Member yet?{' '}
         <Link to='/auth/registration' className='link-primary'>

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

@@ -86,12 +86,6 @@ export function Registration() {
       id='kt_login_signup_form'
       onSubmit={formik.handleSubmit}
     >
-      {/* begin::Heading */}
-      <div className='text-center mb-11'>
-        {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
-        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-      </div>
-      {/* begin::Heading */}
       {/* begin::Login options */}
       <div className='row g-3 mb-9'>
         {/* begin::Col */}

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,11 +62,17 @@ const AuthProvider: FC<WithChildren> = ({children}) => {
 }
 
 const AuthInit: FC<WithChildren> = ({children}) => {
+  const pathname = useLocation().pathname
   const {auth, logout, setCurrentUser} = useAuth()
   const didRequest = useRef(false)
   const [showSplashScreen, setShowSplashScreen] = useState(true)
   // We should request user by authToken (IN OUR EXAMPLE IT'S API_TOKEN) before rendering the application
   useEffect(() => {
+    // function to expire session after 5 mins
+    let logoutSession = setTimeout(()=>{ //expire session after 5 mins
+      logout()
+    }, Number(process.env.REACT_APP_SESSION_TIMEOUT))
+
     const requestUser = async (apiToken: string) => {
       try {
         if (!didRequest.current) {
@@ -96,7 +103,11 @@ const AuthInit: FC<WithChildren> = ({children}) => {
       setShowSplashScreen(false)
     }
     // eslint-disable-next-line
-  }, [])
+
+    return ()=>{ // clears session timeout side effect
+      clearInterval(logoutSession)
+    }
+  }, [pathname])
 
   return showSplashScreen ? <LayoutSplashScreen /> : <>{children}</>
 }