Add FontAwesome

app/assets/components/Auth/Check.vue

@@ -7,12 +7,13 @@ auth.check()
 <template>
     <h2>Auth Check</h2>
     <div class="uk-container uk-text-center">
-        <p>
-            <span v-if="auth.auth" uk-icon="icon: check; ratio: 4"></span>
-            <span v-else='auth.auth' uk-icon="icon: close; ratio: 4"></span>
+        <p style="font-size: 100px;">
+            <font-awesome-icon class="uk-text-success" v-if="auth.auth" :icon="['fas', 'circle-check']" />
+            <font-awesome-icon class="uk-text-danger" v-else="auth.auth" :icon="['fas', 'circle-xmark']" />
         </p>
         <p v-if="auth.auth">
-            <strong>Username:</strong> {{ auth.user.user_name }}
+            <img :src="auth.user.avatar" class="uk-margin-right" width="50" height="50">
+            <span class="uk-text-middle"><strong>Username:</strong> {{ auth.user.user_name }}</span>
         </p>
         <p>
             <button class="uk-button uk-button-primary" @click="auth.check()" :disabled='auth.loading'>

app/assets/components/Auth/Login.vue

@@ -13,21 +13,21 @@ let form = {
 
 <template>
     <h2>Login</h2>
-    <form class="uk-form-horizontal">
+    <form class="uk-form-horizontal" uk-margin>
         <Alert :alert="auth.error" />
-        <div class="uk-margin">
+        <div>
             <label class="uk-form-label" for="form-horizontal-username">Username</label>
             <div class="uk-form-controls">
                 <input class="uk-input" id="form-horizontal-username" type="text" v-model="form.user_name">
             </div>
         </div>
-        <div class="uk-margin">
+        <div>
             <label class="uk-form-label" for="form-horizontal-password">Password</label>
             <div class="uk-form-controls">
                 <input class="uk-input" id="form-horizontal-password" type="password" v-model="form.password">
             </div>
         </div>
-        <div class="uk-margin uk-text-center">
+        <div class="uk-text-center">
             <button class="uk-button uk-button-primary" @click="auth.login(form)" :disabled='auth.loading'>Login</button>
         </div>
     </form>

app/assets/main.js

@@ -1,15 +1,27 @@
+/** Create App */
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from '@/App.vue'
-import router from '@/router'
-
-const pinia = createPinia()
 const app = createApp(App)
 
-// Pinia plugin to persist state in localStorage
+/** Setup Pinia */
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
+app.use(pinia)
+
+/** Setup FontAwesome */
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+library.add(fas, fab, far);
+app.component('font-awesome-icon', FontAwesomeIcon)
 
+/** Setup Router */
+import router from '@/router'
 app.use(router)
-app.use(pinia)
+
+// Done
 app.mount('#app')

app/src/Routes.php

@@ -24,7 +24,7 @@ public function register(App $app): void
         $app->get('/api', [AppController::class, 'api'])->setName('api');
         $app->get('/auth/check', [AppController::class, 'authCheck'])->setName('authCheck');
         $app->post('/auth/login', LoginAction::class)->setName('account.login');
-        $app->get('/auth/logout', LogoutAction::class)->setName('account.logout'); //->add(AuthGuard::class);
+        $app->get('/auth/logout', LogoutAction::class)->setName('account.logout');
         $app->get('/[{path:.*}]', [AppController::class, 'pageIndex'])->setName('index');
     }
 }