login user implemented

.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

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-gray {
+	background-color: $gray-200;
+}

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

@@ -54,7 +54,7 @@ const AuthLayout = () => {
   }, [])
 
   return (
-    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto'>
+    <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 vh-100'>
         {/* begin::Form */}
@@ -64,7 +64,7 @@ const AuthLayout = () => {
           <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 */}
@@ -102,14 +102,13 @@ const AuthLayout = () => {
       {/* begin::Aside */}
       <div
         className='position-relative d-flex flex-lg-row-fluid w-lg-50 p-10 order-1 order-lg-2'
-        style={{backgroundImage: `${bgColor.backgroundImage}`}}
       >
         {/* begin::Content */}
         <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 */}
 
           {/* <img
@@ -123,7 +122,7 @@ const AuthLayout = () => {
               className='img-fluid rounded'
               src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
               alt=''
-              style={{boxShadow: '0px 0px 10px white'}}
+              // style={{boxShadow: '0px 0px 10px white'}}
               />
           </div>
           {/* end::Image */}
@@ -135,7 +134,7 @@ const AuthLayout = () => {
               {/* end::Title */}
 
               {/* begin::Text */}
-              <div className='text-dark fs-base text-center'>
+              {/* <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
@@ -146,7 +145,7 @@ const AuthLayout = () => {
                   the interviewee
                 </a>
                 and their <br /> work following this is a transcript of the interview.
-              </div>
+              </div> */}
               {/* end::Text */}
             </div>
         </div>

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

@@ -8,6 +8,8 @@ import {getUserByToken, login} from '../core/_requests'
 import {toAbsoluteUrl} from '../../../../_metronic/helpers'
 import {useAuth} from '../core/Auth'
 
+import {useNavigate} from 'react-router-dom'
+
 const loginSchema = Yup.object().shape({
   email: Yup.string()
     .email('Wrong email format')
@@ -21,10 +23,10 @@ const loginSchema = Yup.object().shape({
 })
 
 const initialValues = {
-  email: 'admin@demo.com',
+  email: 'demo@float.sg',
-  password: 'demo',
+  password: '****',
 }
-
+//email: 'admin@demo.com',
 /*
   Formik+YUP+Typescript:
   https://jaredpalmer.com/formik/docs/tutorial#getfieldprops
@@ -32,6 +34,7 @@ const initialValues = {
 */
 
 export function Login() {
+  const navigate = useNavigate()
   const [loading, setLoading] = useState(false)
   const {saveAuth, setCurrentUser} = useAuth()
 
@@ -42,9 +45,13 @@ export function Login() {
       setLoading(true)
       try {
         const {data: auth} = await login(values.email, values.password)
+        console.log('yes')
         saveAuth(auth)
-        const {data: user} = await getUserByToken(auth.api_token)
+        // const {data: user} = await getUserByToken(auth.session_token)
-        setCurrentUser(user)
+        console.log('yes2')
+        // setCurrentUser(user)
+        setCurrentUser(auth.profile)
+        navigate('/dashboard')
       } catch (error) {
         console.error(error)
         saveAuth(undefined)

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

@@ -309,7 +309,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

@@ -77,7 +77,7 @@ const AuthInit: FC<WithChildren> = ({children}) => {
       } catch (error) {
         console.error(error)
         if (!didRequest.current) {
-          logout()
+          // logout()
         }
       } finally {
         setShowSplashScreen(false)
@@ -86,8 +86,8 @@ const AuthInit: FC<WithChildren> = ({children}) => {
       return () => (didRequest.current = true)
     }
 
-    if (auth && auth.api_token) {
+    if (auth && auth.session_token) {
-      requestUser(auth.api_token)
+      requestUser(auth.session_token)
     } else {
       logout()
       setShowSplashScreen(false)

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) {
+      if (auth && auth.session_token) {
-        config.headers.Authorization = `Bearer ${auth.api_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,
+    username: email,
-    password,
+    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, {
+  return axios.get<UserModel>(GET_USER_BY_ACCESSTOKEN_URL, {
-    api_token: token,
+    session_token: token,
   })
 }