Update auth integration

app/assets/components/Auth/AuthCheck.vue

@@ -1,12 +1,9 @@
 <script setup>
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
-import { useCheckApi } from '@userfrosting/sprinkle-account/api'
-
 const auth = useAuthStore()
 
 // Login API variables
-const { loading, check } = useCheckApi(auth)
-check()
+auth.check()
 </script>
 
 <template>
@@ -26,7 +23,7 @@ check()
                 </span>
             </p>
             <p>
-                <button class="uk-button uk-button-primary" @click="check()" :disabled="loading">
+                <button class="uk-button uk-button-primary" @click="auth.check()" :disabled="auth.loading">
                     Check Authentication
                 </button>
             </p>

app/assets/components/Auth/AuthLogout.vue

@@ -1,15 +1,11 @@
 <script setup>
-import { useLogoutApi } from '@userfrosting/sprinkle-account/api'
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
-
-// Logout API variables
 const auth = useAuthStore()
-const { loading, logout } = useLogoutApi(auth)
 </script>
 
 <template>
     <div class="uk-margin uk-text-center">
-        <button class="uk-button uk-button-default" @click="logout()" :disabled="loading">
+        <button class="uk-button uk-button-default" @click="auth.logout()" :disabled="auth.loading">
             Logout
         </button>
     </div>

app/assets/components/NavBar.vue

@@ -1,23 +1,24 @@
 <script setup>
-import { useLogoutApi } from '@userfrosting/sprinkle-account/api'
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
 
 // Logout API variables
 const auth = useAuthStore()
-const { logout } = useLogoutApi(auth)
+auth.check() // TODO : Move to main.ts ?
 </script>
 
 <template>
     <UFNavBar title="Userfrosting">
         <UFNavBarItem :to="{ name: 'home' }" label="Home" />
         <UFNavBarItem :to="{ name: 'about' }" label="About" />
         <UFNavBarItem :to="{ name: 'auth' }" label="Auth" />
+        <UFNavBarItem :to="{ name: 'login' }" label="Login" />
+        <UFNavBarLogin v-if="!auth.isAuthenticated" />
         <UFNavBarUserCard
             v-if="auth.isAuthenticated"
             :username="auth.user.full_name"
             :avatar="auth.user.avatar"
             :meta="auth.user.user_name">
-            <UFNavBarUserCardButton label="Logout" @click="logout()" />
+            <UFNavBarUserCardButton label="Logout" @click="auth.logout()" />
         </UFNavBarUserCard>
     </UFNavBar>
 </template>

app/assets/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
 
 const router = createRouter({
     history: createWebHistory(),
@@ -22,6 +23,17 @@ const router = createRouter({
                     path: '/auth',
                     name: 'auth',
                     component: () => import('../views/AuthView.vue')
+                },
+                {
+                    path: '/login',
+                    name: 'login',
+                    component: () => import('../views/LoginView.vue'),
+                    beforeEnter: () => {
+                        const auth = useAuthStore()
+                        if (auth.isAuthenticated) {
+                            return { name: 'home' }
+                        }
+                    }
                 }
             ]
         }

app/assets/views/AuthView.vue

@@ -1,6 +1,5 @@
 <script setup>
 import AuthCheck from '../components/Auth/AuthCheck.vue'
-import Login from '../components/Auth/AuthLogin.vue'
 import Logout from '../components/Auth/AuthLogout.vue'
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
 const auth = useAuthStore()
@@ -13,7 +12,7 @@ const auth = useAuthStore()
             <Logout />
         </div>
         <div v-else>
-            <Login />
+            <UFFormLogin />
         </div>
         <div>
             <AuthCheck />

app/assets/views/LoginView.vue

@@ -0,0 +1,3 @@
+<template>
+    <UFPageLogin />
+</template>