feat/page-cleaning: adjust role var naming

app/stores/user.ts

@@ -7,14 +7,15 @@ export const useUserStore = defineStore(
 
     const isAuthenticated = computed(() => !!user.value)
 
-    const userRole = computed(() => {
+    const userRoles = computed(() => {
       return user.value?.roles || []
-      // return roles.map((input: string) => {
-      //   const parts = input.split('|')
-      //   return parts.length > 1 ? parts[1]: parts[0]
-      // })
     })
 
+    const userActiveRole = ref('') // watched user failed, so create a ref here
+    // computed(() => {
+    //   // return user.value?.activeRole || ''
+    // })
+
     const login = async (userData: any) => {
       user.value = userData
     }
@@ -26,10 +27,11 @@ export const useUserStore = defineStore(
     const setActiveRole = (role: string) => {
       if (user.value && user.value.roles.includes(role)) {
         user.value.activeRole = role
+        userActiveRole.value = role
       }
     }
 
-    const getActiveRole = (): string | null => {
+    const getActiveRole = (): string | undefined => {
       if (user.value?.activeRole) {
         return user.value.activeRole
       }
@@ -37,13 +39,14 @@ export const useUserStore = defineStore(
         user.value.activeRole = user.value.roles[0]
         return user.value.activeRole
       }
-      return null
+      return undefined
     }
 
     return {
       user,
       isAuthenticated,
-      userRole,
+      userRoles,
+      userActiveRole,
       login,
       logout,
       setActiveRole,