Add UserInterface

app/assets/components/Auth/AuthCheck.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useAuthStore } from '../../stores/auth.js'
+import { useAuthStore } from '../../stores/auth'
 import { useCheckApi } from '../../composables/authCheckApi'
 
 const auth = useAuthStore()
@@ -15,11 +15,11 @@ check()
             <p style="font-size: 100px">
                 <font-awesome-icon
                     class="uk-text-success"
-                    v-if="auth.auth"
+                    v-if="auth.isAuth"
                     :icon="['fas', 'circle-check']" />
                 <font-awesome-icon class="uk-text-danger" v-else :icon="['fas', 'circle-xmark']" />
             </p>
-            <p v-if="auth.auth">
+            <p v-if="auth.isAuth">
                 <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 }}

app/assets/components/Auth/AuthLogin.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useLoginApi } from '../../composables/loginApi'
-import { useAuthStore } from '../../stores/auth.js'
+import { useAuthStore } from '../../stores/auth'
 
 // Form variables
 let form = {

app/assets/components/Auth/AuthLogout.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useLogoutApi } from '../../composables/logoutApi'
-import { useAuthStore } from '../../stores/auth.js'
+import { useAuthStore } from '../../stores/auth'
 
 // Logout API variables
 const auth = useAuthStore()

app/assets/components/NavBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useAuthStore } from '../stores/auth.js'
+import { useAuthStore } from '../stores/auth'
 import { useLogoutApi } from '../composables/logoutApi'
 
 const auth = useAuthStore()
@@ -13,7 +13,7 @@ const { logout } = useLogoutApi(auth)
         <UFNavBarItem to="/resources" label="Api Test" />
         <UFNavBarItem to="/auth" label="Login Test" />
         <UFNavBarUserCard
-            v-if="auth.auth"
+            v-if="auth.isAuth"
             :username="auth.user.full_name"
             :avatar="auth.user.avatar"
             :meta="auth.user.user_name">

app/assets/composables/authCheckApi.ts

@@ -1,11 +1,15 @@
 import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
+// import { useAuthStore } from '../stores/auth'
+// const authStore = useAuthStore()
 
 /**
- * API to communicate with the authentication API.
+ * Composable used to communicate with the `/auth/check` api. Calling "check"
+ * will fetch the user info from the server and set the frontend object.
  */
-// TODO : Change auth type
+// TODO : Fix error "getActivePinia()" was called but there was no active Pinia
+// export function useCheckApi(auth: typeof authStore) {
 export function useCheckApi(auth: any) {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
@@ -16,7 +20,7 @@ export function useCheckApi(auth: any) {
         axios
             .get('/auth/check')
             .then((response) => {
-                auth.user = response.data.user
+                auth.setUser(response.data.user)
             })
             .catch((err) => {
                 error.value = {

app/assets/composables/loginApi.ts

@@ -1,25 +1,30 @@
 import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
+// import { useAuthStore } from '../stores/auth'
+// const authStore = useAuthStore()
 
 /**
- * API to communicate with the authentication API.
+ * Composable used to communicate with the `/auth/login` api. Calling "login"
+ * with the user login data will validate the data with the server. If login is
+ * successful, the user will be set on the frontend object. Otherwise, an error
+ * will be defined.
  */
-// TODO : Change auth type
+// TODO : Fix error "getActivePinia()" was called but there was no active Pinia
+// export function useLoginApi(auth: typeof authStore) {
 export function useLoginApi(auth: any) {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
 
     // TODO : Error if user is not null
-
     // TODO : Change form type
     const login = (form: any) => {
         loading.value = true
         error.value = undefined
         axios
             .post('/auth/login', form)
             .then((response) => {
-                auth.user = response.data
+                auth.setUser(response.data)
             })
             .catch((err) => {
                 error.value = {

app/assets/composables/logoutApi.ts

@@ -1,11 +1,16 @@
 import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
+// import { useAuthStore } from '../stores/auth'
+// const authStore = useAuthStore()
 
 /**
- * API to communicate with the authentication API.
+ * Composable used to communicate with the `/auth/logout` api. Calling "logout"
+ * will send the request to logout the user server side and delete the frontend
+ * user object.
  */
-// TODO : Change auth type
+// TODO : Fix error "getActivePinia()" was called but there was no active Pinia
+// export function useLogoutApi(auth: typeof authStore) {
 export function useLogoutApi(auth: any) {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()

app/assets/interfaces/userInterface.ts

@@ -0,0 +1,36 @@
+/**
+ * By default, the frontend user will have the same interface as the PHP user.
+ * Note that any Sprinkle can (and should!) extend this interface.
+ *
+ * Example:
+ * - id: 1
+ * - user_name: "admin"
+ * - first_name: "Admin"
+ * - last_name: "Istrator"
+ * - full_name: "Admin Istrator"
+ * - email: "charette.louis@gmail.com"
+ * - avatar: "https://www.gravatar.com/avatar/e309fbab15a5420dbd7cb41e9273cf29?d=mm"
+ * - flag_enabled: true
+ * - flag_verified: true
+ * - group_id: null
+ * - locale: "en_US"
+ * - created_at: "2023-09-16T19:23:59.000000Z"
+ * - updated_at: "2023-09-16T19:23:59.000000Z"
+ * - deleted_at: null
+ */
+export interface UserInterface {
+    id: number
+    user_name: string
+    first_name: string
+    last_name: string
+    full_name: string
+    email: string
+    avatar: string
+    flag_enabled: boolean
+    flag_verified: boolean
+    group_id: number | null
+    locale: string
+    created_at: Date | string
+    updated_at: Date | string
+    deleted_at: Date | string | null
+}

app/assets/stores/auth.js → app/assets/stores/auth.ts

@@ -1,20 +1,21 @@
 import { defineStore } from 'pinia'
+import type { UserInterface } from '../interfaces/userInterface'
 
 export const useAuthStore = defineStore('auth', {
     persist: true,
     state: () => {
         return {
-            user: null
+            user: null as UserInterface | null
         }
     },
     getters: {
-        auth: (state) => state.user !== null
+        isAuth: (state): boolean => state.user !== null
     },
     actions: {
-        setUser(user) {
+        setUser(user: UserInterface): void {
             this.user = user
         },
-        unsetUser() {
+        unsetUser(): void {
             this.user = null
         }
     }

app/assets/views/AuthView.vue

@@ -2,14 +2,14 @@
 import AuthCheck from '../components/Auth/AuthCheck.vue'
 import Login from '../components/Auth/AuthLogin.vue'
 import Logout from '../components/Auth/AuthLogout.vue'
-import { useAuthStore } from '../stores/auth.js'
+import { useAuthStore } from '../stores/auth'
 const auth = useAuthStore()
 </script>
 
 <template>
     <h1 class="uk-heading-divider">Authentication Test</h1>
     <div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
-        <div v-if="auth.auth">
+        <div v-if="auth.isAuth">
             <Logout />
         </div>
         <div v-else>

app/assets/views/HomeView.vue

@@ -6,19 +6,22 @@ interface User {
 }
 
 const user: User = {
-    firstName: "Angela",
-    lastName: "Davis",
-    role: "Professor",
+    firstName: 'Angela',
+    lastName: 'Davis',
+    role: 'Professor'
 }
 
 const helloMsg: string = 'Hello ' + user.firstName + ' ' + user.lastName + '!'
 </script>
 
 <template>
     <article class="uk-article">
-        <h1 class="uk-article-title"><a class="uk-link-reset" href="#">{{ helloMsg }}</a></h1>
+        <h1 class="uk-article-title">
+            <a class="uk-link-reset" href="#">{{ helloMsg }}</a>
+        </h1>
         <p class="uk-article-meta">
-            Written by <a href="#">{{user.firstName}} {{ user.lastName }}</a>, {{ user.role }} on 29 September 2018.
+            Written by <a href="#">{{ user.firstName }} {{ user.lastName }}</a
+            >, {{ user.role }} on 29 September 2018.
         </p>
         <p class="uk-text-lead">
             This is a demo of UserFrosting using a custom UiKit based template built using Vue 3.0