More auth / role checks for navlinks

src/components/LeftDrawer.vue

@@ -4,37 +4,50 @@
     show-if-above
     :width="200"
     :breakpoint="1024"
-    @update:model-value="$emit('drawer-toggle')"
-  >
+    @update:model-value="$emit('drawer-toggle')">
     <q-scroll-area class="fit">
-      <q-list padding class="menu-list">
-        <template v-for="link in enabledLinks" :key="link.name">
-          <!-- TODO: Template this to be DRY --><q-item
+      <q-list
+        padding
+        class="menu-list">
+        <template
+          v-for="link in enabledLinks"
+          :key="link.name">
+          <!-- TODO: Template this to be DRY -->
+          <q-item
             clickable
             v-ripple
-            :to="link.to"
-          >
+            :to="link.to">
             <q-item-section avatar>
               <q-icon :name="link.icon" />
             </q-item-section>
 
-            <q-item-section> {{ link.name }} </q-item-section>
+            <q-item-section>{{ link.name }}</q-item-section>
           </q-item>
           <q-list v-if="link.sublinks">
-            <div v-for="sublink in link.sublinks" :key="sublink.name">
-              <q-item clickable v-ripple :to="sublink.to" class="q-ml-md">
+            <div
+              v-for="sublink in link.sublinks"
+              :key="sublink.name">
+              <q-item
+                clickable
+                v-ripple
+                :to="sublink.to"
+                class="q-ml-md"
+                v-if="hasRole(sublink.requiredRoles)">
                 <q-item-section avatar>
                   <q-icon :name="sublink.icon" />
                 </q-item-section>
 
-                <q-item-section> {{ sublink.name }} </q-item-section>
+                <q-item-section>{{ sublink.name }}</q-item-section>
               </q-item>
-            </div></q-list
-          >
+            </div>
+          </q-list>
         </template>
-        <q-item clickable v-ripple @click="logout()">
-          <q-item-section avatar><q-icon name="logout" /></q-item-section
-          ><q-item-section>Logout</q-item-section>
+        <q-item
+          clickable
+          v-ripple
+          @click="logout()">
+          <q-item-section avatar><q-icon name="logout" /></q-item-section>
+          <q-item-section>Logout</q-item-section>
         </q-item>
       </q-list>
     </q-scroll-area>
@@ -44,8 +57,17 @@
 <script lang="ts" setup>
 import { defineComponent } from 'vue';
 import { enabledLinks } from 'src/router/navlinks.js';
+import { useAuthStore } from 'src/stores/auth';
 import { logout } from 'boot/appwrite';
 
+const authStore = useAuthStore();
+
+function hasRole(roles: string[] | undefined) {
+  if (roles === undefined) return true;
+  const hasRole = authStore.hasRequiredRole(roles);
+  return hasRole;
+}
+
 defineProps(['drawer']);
 defineEmits(['drawer-toggle']);
 

src/router/index.ts

@@ -55,7 +55,7 @@ export default route(function (/* { store, ssrContext } */) {
       }
 
       try {
-        const hasRole = await authStore.hasRequiredRole(requiredRoles);
+        const hasRole = authStore.hasRequiredRole(requiredRoles);
         if (!hasRole) {
           return next(from);
         }

src/router/navlinks.ts

@@ -47,6 +47,7 @@ export const links = [
         icon: 'edit_calendar',
         front_links: false,
         enabled: true,
+        requiredRoles: ['Schedule Admins'],
       },
     ],
   },

src/stores/auth.ts

@@ -1,25 +1,35 @@
 import { defineStore } from 'pinia';
 import { ID, account, functions, teams } from 'boot/appwrite';
 import { ExecutionMethod, OAuthProvider, type Models } from 'appwrite';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 export const useAuthStore = defineStore('auth', () => {
   const currentUser = ref<Models.User<Models.Preferences> | null>(null);
+  const currentUserTeams = ref<Models.TeamList<Models.Preferences> | null>(
+    null
+  );
   const userNames = ref<Record<string, string>>({});
 
   async function init() {
     try {
       currentUser.value = await account.get();
+      currentUserTeams.value = await teams.list();
     } catch {
       currentUser.value = null;
+      currentUserTeams.value = null;
     }
   }
 
-  const hasRequiredRole = async (requiredRoles: string[]): Promise<boolean> => {
-    const userTeams = await teams.list();
-    const userTeamNames = userTeams.teams.map((team) => team.name);
-    console.log(requiredRoles.some((role) => userTeamNames.includes(role)));
-    return requiredRoles.some((role) => userTeamNames.includes(role));
+  const currentUserTeamNames = computed(() =>
+    currentUserTeams.value
+      ? currentUserTeams.value.teams.map((team) => team.name)
+      : []
+  );
+
+  const hasRequiredRole = (requiredRoles: string[]): boolean => {
+    return requiredRoles.some((role) =>
+      currentUserTeamNames.value.includes(role)
+    );
   };
 
   async function register(email: string, password: string) {
@@ -28,8 +38,9 @@ export const useAuthStore = defineStore('auth', () => {
   }
   async function login(email: string, password: string) {
     await account.createEmailPasswordSession(email, password);
-    currentUser.value = await account.get();
+    init();
   }
+
   async function googleLogin() {
     account.createOAuth2Session(
       OAuthProvider.Google,