add admin panel

src/app/layouts/Header.vue

@@ -52,7 +52,7 @@
           />
         </label>
         <span
-          v-if="authStore.requiresPassword && !isLoginPage"
+          v-if="!isLoginPage"
           class="text-sm text-gray-400 dark:text-neutral-400 cursor-pointer hover:underline"
           @click="logout"
         >

src/app/pages/admin/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>Admin Area</div>
+</template>
+
+<script setup lang="ts"></script>

src/app/stores/auth.ts

@@ -1,6 +1,4 @@
 export const useAuthStore = defineStore('Auth', () => {
-  const requiresPassword = ref<boolean>(true);
-
   /**
    * @throws if unsuccessful
    */
@@ -13,8 +11,7 @@ export const useAuthStore = defineStore('Auth', () => {
    * @throws if unsuccessful
    */
   async function login(username: string, password: string, remember: boolean) {
-    const response = await api.createSession({ username, password, remember });
-    requiresPassword.value = response.requiresPassword;
+    await api.createSession({ username, password, remember });
     return true as const;
   }
 
@@ -26,13 +23,10 @@ export const useAuthStore = defineStore('Auth', () => {
     return response.success;
   }
 
-  /**
-   * @throws if unsuccessful
-   */
   async function update() {
-    const session = await api.getSession();
-    requiresPassword.value = session.requiresPassword;
+    // store role etc
+    await api.getSession();
   }
 
-  return { requiresPassword, login, logout, update, signup };
+  return { login, logout, update, signup };
 });

src/app/utils/api.ts

@@ -12,8 +12,7 @@ class API {
   }
 
   async getSession() {
-    // TODO?: use useFetch
-    return $fetch('/api/session', {
+    return useFetch('/api/session', {
       method: 'get',
     });
   }

src/server/api/session.get.ts

@@ -1,9 +1,22 @@
 export default defineEventHandler(async (event) => {
   const session = await useWGSession(event);
-  const authenticated = session.data.authenticated;
+
+  if (!session.data.userId) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: 'Not logged in',
+    });
+  }
+  const user = await Database.user.findById(session.data.userId);
+  if (!user) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Not found in Database',
+    });
+  }
 
   return {
-    requiresPassword: true,
-    authenticated,
+    role: user.role,
+    username: user.username,
   };
 });

src/server/api/session.post.ts

@@ -34,12 +34,11 @@ export default defineEventHandler(async (event) => {
     };
   }
 
-  const session = await useSession(event, {
+  const session = await useSession<WGSession>(event, {
     ...system.sessionConfig,
   });
 
   const data = await session.update({
-    authenticated: true,
     userId: user.id,
   });
 

src/server/middleware/auth.ts

@@ -1,14 +1,32 @@
 export default defineEventHandler(async (event) => {
   const url = getRequestURL(event);
   const session = await useWGSession(event);
+
   if (url.pathname === '/login') {
-    if (session.data.authenticated) {
+    if (session.data.userId) {
       return sendRedirect(event, '/', 302);
     }
   }
+
   if (url.pathname === '/') {
-    if (!session.data.authenticated) {
+    if (!session.data.userId) {
       return sendRedirect(event, '/login', 302);
     }
   }
+
+  if (url.pathname === '/admin') {
+    if (!session.data.userId) {
+      return sendRedirect(event, '/login', 302);
+    }
+    const user = await Database.user.findById(session.data.userId);
+    if (!user) {
+      return sendRedirect(event, '/login', 302);
+    }
+    if (!user.enabled || user.role !== 'ADMIN') {
+      throw createError({
+        statusCode: 403,
+        statusMessage: 'Not allowed to access Admin Panel',
+      });
+    }
+  }
 });

src/server/utils/session.ts

@@ -1,7 +1,7 @@
 import type { H3Event } from 'h3';
 
 export type WGSession = {
-  authenticated: boolean;
+  userId: string;
 };
 
 export async function useWGSession(event: H3Event) {