From aa957d6c5053c3b5658941058c573bfc836ebd44 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Sun, 31 May 2026 20:37:46 +0200
Subject: [PATCH] feat(02-06): auth layout switching + admin role guard (GAPs
 2, 3, 4)

- App.vue: conditionally renders AuthLayout for auth routes, app shell otherwise
- router/index.js: meta.layout='auth' on all four auth routes
- router/index.js: meta.requiresAdmin=true on /admin route
- router/index.js: beforeEach role check redirects non-admin to /
- router/index.js: /account redirects to /settings
---
 frontend/src/App.vue         | 10 +++++++---
 frontend/src/router/index.js | 16 ++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 925d77d..389a2e6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="flex h-screen overflow-hidden">
+  <AuthLayout v-if="route.meta.layout === 'auth'" />
+  <div v-else class="flex h-screen overflow-hidden">
     <AppSidebar />
     <main class="flex-1 overflow-y-auto">
       <router-view />
@@ -8,10 +9,13 @@
 </template>
 
 <script setup>
-import AppSidebar from './components/layout/AppSidebar.vue'
-import { useTopicsStore } from './stores/topics.js'
 import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import AppSidebar from './components/layout/AppSidebar.vue'
+import AuthLayout from './layouts/AuthLayout.vue'
+import { useTopicsStore } from './stores/topics.js'
 
+const route = useRoute()
 const topicsStore = useTopicsStore()
 onMounted(() => topicsStore.fetchTopics())
 </script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 0987df4..4f7226e 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -19,27 +19,27 @@ const routes = [
   {
     path: '/login',
     component: () => import('../views/auth/LoginView.vue'),
-    meta: { public: true },
+    meta: { public: true, layout: 'auth' },
   },
   {
     path: '/register',
     component: () => import('../views/auth/RegisterView.vue'),
-    meta: { public: true },
+    meta: { public: true, layout: 'auth' },
   },
   {
     path: '/password-reset',
     component: () => import('../views/auth/PasswordResetView.vue'),
-    meta: { public: true },
+    meta: { public: true, layout: 'auth' },
   },
   {
     path: '/password-reset/confirm',
     component: () => import('../views/auth/NewPasswordView.vue'),
-    meta: { public: true },
+    meta: { public: true, layout: 'auth' },
   },
 
   // Phase 2 — authenticated routes
-  { path: '/account', component: () => import('../views/AccountView.vue') },
-  { path: '/admin', component: () => import('../views/AdminView.vue') },
+  { path: '/account', redirect: '/settings' },
+  { path: '/admin', component: () => import('../views/AdminView.vue'), meta: { requiresAdmin: true } },
 
   // Cloud storage overview and folder browser
   {
@@ -87,6 +87,10 @@ router.beforeEach(async (to) => {
       return { path: '/login', query: { redirect: to.fullPath } }
     }
   }
+
+  if (to.meta.requiresAdmin && authStore.user?.role !== 'admin') {
+    return { path: '/' }
+  }
 })
 
 export default router