initial commit

.env

@@ -18,6 +18,3 @@ 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_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/logo.png')}
+            src={toAbsoluteUrl('/media/logos/default-dark.svg')}
             className='h-25px app-sidebar-logo-default'
           />
         ) : (
           <>
             <img
               alt='Logo'
-              src={toAbsoluteUrl('/media/logos/logo.png')}
+              src={toAbsoluteUrl('/media/logos/default.svg')}
               className='h-25px app-sidebar-logo-default theme-light-show'
             />
             <img
               alt='Logo'
-              src={toAbsoluteUrl('/media/logos/logo.png')}
+              src={toAbsoluteUrl('/media/logos/default-dark.svg')}
               className='h-25px app-sidebar-logo-default theme-dark-show'
             />
           </>

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

@@ -1,4 +1,4 @@
 
-.auth-height {
-	min-height: 100vh;
+.auth-gray {
+	background-color: $gray-200;
 }

src/app/modules/auth/AuthLayout.tsx

@@ -1,10 +1,47 @@
 /* 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 background color
+  let [bgColor, setBgColor] = useState({
+    backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
+  })
+
+  // function to determine background color
+  let changeBgColor = () => {
+    // let randomNum = Math.round(Math.random() * 3)
+    let randomNum = Number(localStorage.getItem('bg-num'))
+    if(randomNum){
+      if(randomNum <= 1){
+        setBgColor({
+          backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
+        })
+        localStorage.setItem('bg-num', '2')
+      }else if(randomNum <= 2){
+        setBgColor({
+          backgroundImage: 'linear-gradient(70deg, #eee, #fff)'
+        })
+        localStorage.setItem('bg-num', '3')
+      }else{
+        setBgColor({
+          backgroundImage: 'linear-gradient(70deg, #d5e1f5, #75a5f0)'
+        })
+        localStorage.setItem('bg-num', '1')
+      }
+    }else{
+      setBgColor({
+        backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
+      })
+      localStorage.setItem('bg-num', '1')
+    }
+  }
+
   useEffect(() => {
+
+    changeBgColor() // calls the change color function after page loads
+
     const root = document.getElementById('root')
     if (root) {
       root.style.height = '100%'
@@ -17,13 +54,17 @@ const AuthLayout = () => {
   }, [])
 
   return (
-    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto' style={{minHeight: '100vh'}}>
+    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto' style={{backgroundImage: `${bgColor.backgroundImage}`}}>
       {/* begin::Body */}
-      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
+      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1 vh-100'>
         {/* begin::Form */}
         <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
+          <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::Wrapper */}
-          <div className='w-lg-500px p-10'>
+          <div className='auth-gray w-lg-500px p-10 shadow-lg rounded-sm'>
             <Outlet />
           </div>
           {/* end::Wrapper */}
@@ -60,45 +101,53 @@ const AuthLayout = () => {
 
       {/* begin::Aside */}
       <div
-        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')})`}}
+        className='position-relative d-flex flex-lg-row-fluid w-lg-50 p-10 order-1 order-lg-2'
       >
         {/* begin::Content */}
-        <div className='d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
+        <div className='position-relative d-flex flex-column flex-center 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
-            className='mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20'
-            src={toAbsoluteUrl('/media/misc/auth-screens.png')}
+          {/* <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=''
-          />
-          {/* end::Image */}
-
-          {/* 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.
+            style={{boxShadow: '0px 0px 10px white'}}
+          /> */}
+           <div className='mx-auto w-75 w-xl-500px mb-10 mb-lg-20 rounded'>
+            <img
+              className='img-fluid rounded'
+              src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
+              alt=''
+              // style={{boxShadow: '0px 0px 10px white'}}
+              />
           </div>
-          {/* end::Text */}
+          {/* end::Image */}
+            <div className='w-100 w-md-75'>
+              {/* begin::Title */}
+              <h1 className='text-dark fs-2qx fw-bolder text-center mb-7'>
+                Fast, Efficient and Productive
+              </h1>
+              {/* end::Title */}
+
+              {/* begin::Text */}
+              {/* <div className='text-dark 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>
         </div>
         {/* end::Content */}
       </div>

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

@@ -21,8 +21,8 @@ const loginSchema = Yup.object().shape({
 })
 
 const initialValues = {
-  email: '',
-  password: '',
+  email: 'demo@float.sg',
+  password: '****',
 }
 //email: 'admin@demo.com',
 /*
@@ -39,30 +39,18 @@ 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)
-          return
-        }
         saveAuth(auth)
-        setCurrentUser(auth.profile)
+        const {data: user} = await getUserByToken(auth.api_token)
+        setCurrentUser(user)
       } 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))
       }
     },
   })
@@ -75,11 +63,6 @@ export function Login() {
       id='kt_login_signin_form'
     >
       {/* 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'>
@@ -132,6 +115,14 @@ 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>
@@ -215,16 +206,6 @@ 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,6 +86,7 @@ export function Registration() {
       id='kt_login_signup_form'
       onSubmit={formik.handleSubmit}
     >
+
       {/* begin::Login options */}
       <div className='row g-3 mb-9'>
         {/* begin::Col */}

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

@@ -8,7 +8,6 @@ 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'
@@ -62,26 +61,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) {
-          // const {data} = await getUserByToken(apiToken)
-          // if (data) {
-          //   setCurrentUser(data)
-          // }
-          if (localStorage.getItem('kt-auth-react-v')) {
-            setCurrentUser(auth.profile)
+          const {data} = await getUserByToken(apiToken)
+          if (data) {
+            setCurrentUser(data)
           }
         }
       } catch (error) {
@@ -96,18 +86,14 @@ const AuthInit: FC<WithChildren> = ({children}) => {
       return () => (didRequest.current = true)
     }
 
-    if (auth && auth.session_token) {
-      requestUser(auth.session_token)
+    if (auth && auth.api_token) {
+      requestUser(auth.api_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.session_token) {
-        config.headers.Authorization = `Bearer ${auth.session_token}`
+      if (auth && auth.api_token) {
+        config.headers.Authorization = `Bearer ${auth.api_token}`
       }
 
       return config

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

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

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

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import {AuthModel, UserModel} from './_models'
 
-const API_URL = process.env.REACT_APP_API_URL
+const API_URL = process?.env.REACT_APP_API_URL
 
 export const GET_USER_BY_ACCESSTOKEN_URL = `${API_URL}/verify_token`
 export const LOGIN_URL = `${API_URL}/login`
@@ -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, {
-    username: email,
-    password: password,
+    email,
+    password,
   })
 }
 
@@ -41,7 +41,7 @@ export function requestPassword(email: string) {
 }
 
 export function getUserByToken(token: string) {
-  return axios.get<UserModel>(GET_USER_BY_ACCESSTOKEN_URL, {
-    session_token: token,
+  return axios.post<UserModel>(GET_USER_BY_ACCESSTOKEN_URL, {
+    api_token: token,
   })
 }