added a function to expire session after 5 mins

.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/userweb/api/v1
 REACT_APP_VERSION=v8.1.5
 REACT_APP_THEME_NAME=WrenchBoard
 REACT_APP_THEME_DEMO=dashboard
@@ -18,3 +18,4 @@ 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_SESSION_TIMEOUT=300000

public/index.html

@@ -36,7 +36,7 @@
 
   <div id="root"></div>
   <div id="splash-screen" class="splash-screen">
-    <img src="%PUBLIC_URL%/media/logos/default-small.svg" alt="WrenchBoard" />
+    <img src="%PUBLIC_URL%/media/logos/favicon.ico" alt="Float Users" />
     <span>Loading ...</span>
   </div>
   <div id="root-modals"></div>

src/_res/assets/sass/layout/_auth.scss

@@ -0,0 +1,4 @@
+
+.auth-height {
+	min-height: 100vh;
+}

src/_res/assets/sass/layout/_layout.scss

@@ -13,3 +13,4 @@
 @import "content";
 @import "toolbar";
 @import "page-title";
+@import "auth";

src/app/modules/auth/AuthLayout.tsx

@@ -60,59 +60,45 @@ const AuthLayout = () => {
 
       {/* begin::Aside */}
       <div
-        className='position-relative d-flex flex-lg-row-fluid w-lg-50 order-1 order-lg-2'
-        // style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg.png')})`}}
-        style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg-new.svg')})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'left top'}}
+        className='d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2'
+        style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg.png')})`}}
       >
-        {/* overlay div section */}
-        {/* <div className='position-absolute w-100 h-100 top-0 left-0' style={{backgroundColor: 'rgba(0, 0, 0, .4)', zIndex: '1'}}></div> */}
         {/* begin::Content */}
-        <div className='position-relative d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
+        <div className='d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
           {/* begin::Logo */}
-          {/* <Link to='/' className='mb-12'>
+          <Link to='/' className='mb-12'>
             <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-          </Link> */}
+          </Link>
           {/* end::Logo */}
 
           {/* begin::Image */}
-          {/* <img
+          <img
             className='mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20'
             src={toAbsoluteUrl('/media/misc/auth-screens.png')}
             alt=''
-          /> */}
-          {/* <img
-            className='mx-auto w-350px w-md-50 w-xl-500px mb-10 mb-lg-20 rounded'
-            src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
-            alt=''
-            style={{boxShadow: '0px 0px 10px white'}}
-          /> */}
+          />
           {/* end::Image */}
-          <div className='w-100 w-md-75 rounded p-3 p-lg-5' style={{backgroundColor: 'rgba(0, 0, 0, .8)', boxShadow: '0px 0px 10px white'}}>
-            {/* begin::Title */}
-            <h1 className='text-white fs-2qx fw-bolder text-center mb-7 py-3'>
-              Fast, Efficient and Productive
-            </h1>
-            {/* end::Title */}
 
-            {/* begin::Text */}
-            {/* <div className='text-white fs-base text-center'>
-              In this kind of post,{' '}
-              <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
-                the blogger
-              </a>
-              introduces a person they’ve interviewed <br /> and provides some background information
-              about
-              <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
-                the interviewee
-              </a>
-              and their <br /> work following this is a transcript of the interview.
-            </div> */}
-            <div className='text-white fs-base text-center py-3'>
-              <p>Improve quality of life for the world's population by <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>building</a> the future global transportation platform.</p>
-              <p>Increasing accessibility and personal choices, <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>while reducing</a> travel time traffic congestion, pollution, and loss to local GDP</p>
-            </div>
-            {/* end::Text */}
+          {/* begin::Title */}
+          <h1 className='text-white fs-2qx fw-bolder text-center mb-7'>
+            Fast, Efficient and Productive
+          </h1>
+          {/* end::Title */}
+
+          {/* begin::Text */}
+          <div className='text-white fs-base text-center'>
+            In this kind of post,{' '}
+            <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
+              the blogger
+            </a>
+            introduces a person they’ve interviewed <br /> and provides some background information
+            about
+            <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
+              the interviewee
+            </a>
+            and their <br /> work following this is a transcript of the interview.
           </div>
+          {/* end::Text */}
         </div>
         {/* end::Content */}
       </div>

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

@@ -50,12 +50,13 @@ export function ForgotPassword() {
       id='kt_login_password_reset_form'
       onSubmit={formik.handleSubmit}
     >
-      <div className='text-center mb-10'>
-        {/* begin::Title */}
-        {/* <h1 className='text-dark fw-bolder mb-3'>Forgot Password ?</h1> */}
+      {/* 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' />
-        {/* end::Title */}
-
+      </div>
+      {/* begin::Heading */}
+      <div className='text-center mb-10'>
         {/* begin::Link */}
         <div className='text-gray-500 fw-semibold fs-6'>
           Enter your email to reset your password.

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

@@ -21,10 +21,10 @@ const loginSchema = Yup.object().shape({
 })
 
 const initialValues = {
-  email: 'admin@demo.com',
-  password: 'demo',
+  email: '',
+  password: '',
 }
-
+//email: 'admin@demo.com',
 /*
   Formik+YUP+Typescript:
   https://jaredpalmer.com/formik/docs/tutorial#getfieldprops
@@ -39,12 +39,22 @@ export function Login() {
     initialValues,
     validationSchema: loginSchema,
     onSubmit: async (values, {setStatus, setSubmitting}) => {
+      setStatus('')
       setLoading(true)
       try {
         const {data: auth} = await login(values.email, values.password)
+        // const {data: user} = await getUserByToken(auth.session_token)
+        // setCurrentUser(user)
+        if(auth.status <= 0){ // checking if request is not successful
+          setStatus('The login details are incorrect')
+          setSubmitting(false)
+          setLoading(false)
+          console.log(auth)  //remove later
+          return
+        }
         saveAuth(auth)
-        const {data: user} = await getUserByToken(auth.api_token)
-        setCurrentUser(user)
+        setCurrentUser(auth.profile)
+        console.log(auth)  //remove later
       } catch (error) {
         console.error(error)
         saveAuth(undefined)
@@ -125,11 +135,6 @@ export function Login() {
           <div className='alert-text font-weight-bold'>{formik.status}</div>
         </div>
       ) : (
-        // <div className='mb-10 bg-light-info p-8 rounded'>
-        //   <div className='text-info'>
-        //     Any text before login box - please configure
-        //   </div>
-        // </div>
         null
       )}
 

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

@@ -88,15 +88,10 @@ export function Registration() {
     >
       {/* begin::Heading */}
       <div className='text-center mb-11'>
-        {/* begin::Title */}
-        {/* <h1 className='text-dark fw-bolder mb-3'>Sign Up</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' />
-        {/* end::Title */}
-
-        {/* <div className='text-gray-500 fw-semibold fs-6'>Your Social Campaigns</div> */}
       </div>
-      {/* end::Heading */}
-
+      {/* begin::Heading */}
       {/* begin::Login options */}
       <div className='row g-3 mb-9'>
         {/* begin::Col */}
@@ -319,7 +314,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,17 +62,26 @@ 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) {
-          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 +96,18 @@ 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)
     }
     // eslint-disable-next-line
-  }, [])
+
+    return ()=>{ // clears session timeout side effect
+      clearInterval(logoutSession)
+    }
+  }, [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,
   })
 }