basic user menu and admin page

src/app/components/ui/UserMenu.vue

@@ -0,0 +1,90 @@
+<template>
+  <button
+    class="flex items-center pe-1 font-medium text-sm text-gray-400 rounded-full hover:text-red-800 dark:hover:text-red-800 md:me-0 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-neutral-400"
+    type="button"
+    @click.prevent="toggleMenu"
+  >
+    <IconsAvatar class="w-8 h-8 me-2 rounded-full" />
+    {{ authStore.userData?.name }}
+    <svg
+      class="w-2.5 h-2.5 ms-3"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 10 6"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="m1 1 4 4 4-4"
+      />
+    </svg>
+  </button>
+
+  <!-- Dropdown menu -->
+  <div
+    v-show="menuOpen"
+    class="z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-neutral-700 dark:divide-neutral-800"
+  >
+    <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
+      <div class="truncate">{{ authStore.userData?.name }}</div>
+      <div class="truncate">@{{ authStore.userData?.username }}</div>
+    </div>
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      <li>
+        <NuxtLink
+          to="/"
+          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          @click="closeMenu"
+        >
+          Clients
+        </NuxtLink>
+      </li>
+      <li v-if="authStore.userData?.role === 'ADMIN'">
+        <NuxtLink
+          to="/admin"
+          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          @click="closeMenu"
+        >
+          Admin Panel
+        </NuxtLink>
+      </li>
+    </ul>
+    <div class="py-2">
+      <button
+        class="flex items-center gap-2 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+        @click.prevent="logout"
+      >
+        <IconsLogout class="h-5" />
+        {{ $t('logout') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const authStore = useAuthStore();
+const menuOpen = ref(false);
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value;
+}
+
+function closeMenu() {
+  menuOpen.value = false;
+}
+
+async function logout() {
+  try {
+    await authStore.logout();
+    navigateTo('/login');
+  } catch (err) {
+    if (err instanceof Error) {
+      // TODO: better ui
+      alert(err.message || err.toString());
+    }
+  }
+}
+</script>

src/app/layouts/Header.vue

@@ -51,14 +51,7 @@
             class="w-5 h-5 peer fill-gray-400 peer-checked:fill-gray-600 dark:fill-neutral-600 peer-checked:dark:fill-neutral-400 group-hover:dark:fill-neutral-500 transition"
           />
         </label>
-        <span
+        <UiUserMenu v-if="!isLoginPage" />
-          v-if="!isLoginPage"
-          class="text-sm text-gray-400 dark:text-neutral-400 cursor-pointer hover:underline"
-          @click="logout"
-        >
-          {{ $t('logout') }}
-          <IconsLogout class="h-3 inline" />
-        </span>
       </div>
     </div>
     <div class="text-sm text-gray-400 dark:text-neutral-400 mb-5" />
@@ -86,7 +79,6 @@
 </template>
 
 <script setup lang="ts">
-const authStore = useAuthStore();
 const globalStore = useGlobalStore();
 const route = useRoute();
 
@@ -108,17 +100,4 @@ function toggleTheme() {
 function toggleCharts() {
   setItem('uiShowCharts', uiShowCharts.value ? '1' : '0');
 }
-
-async function logout(e: Event) {
-  e.preventDefault();
-  try {
-    await authStore.logout();
-    navigateTo('/login');
-  } catch (err) {
-    if (err instanceof Error) {
-      // TODO: better ui
-      alert(err.message || err.toString());
-    }
-  }
-}
 </script>

src/app/pages/admin/index.vue

@@ -2,4 +2,7 @@
   <div>Admin Area</div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const authStore = useAuthStore();
+authStore.update();
+</script>

src/app/pages/index.vue

@@ -54,6 +54,8 @@ const intervalId = ref<NodeJS.Timeout | null>(null);
 clientsStore.refresh();
 
 onMounted(() => {
+  // to avoid console spam
+  return;
   // TODO?: replace with websocket or similar
   intervalId.value = setInterval(() => {
     clientsStore

src/app/stores/auth.ts

@@ -1,4 +1,10 @@
 export const useAuthStore = defineStore('Auth', () => {
+  const userData = ref<null | {
+    name: string;
+    username: string;
+    role: string;
+  }>();
+
   /**
    * @throws if unsuccessful
    */
@@ -25,8 +31,9 @@ export const useAuthStore = defineStore('Auth', () => {
 
   async function update() {
     // store role etc
-    await api.getSession();
+    const { data: response } = await api.getSession();
+    userData.value = response.value;
   }
 
-  return { login, logout, update, signup };
+  return { userData, login, logout, update, signup };
 });

src/server/api/session.get.ts

@@ -18,5 +18,6 @@ export default defineEventHandler(async (event) => {
   return {
     role: user.role,
     username: user.username,
+    name: user.name,
   };
 });

src/server/middleware/session.ts

@@ -12,8 +12,8 @@ export default defineEventHandler(async (event) => {
   }
   const system = await Database.system.get();
 
-  const session = await getSession(event, system.sessionConfig);
+  const session = await getSession<WGSession>(event, system.sessionConfig);
-  if (session.id && session.data.authenticated) {
+  if (session.id && session.data.userId) {
     return;
   }