From c8b6e4757fb90a27749e7a01adeb41490a1d908b Mon Sep 17 00:00:00 2001
From: Frank Agerholm <frank@agerholm.de>
Date: Sun, 25 Jan 2026 17:58:04 +0100
Subject: [PATCH] frontend: Login-Redirect for unauth requests

---
 frontend/app/app.vue                   | 13 ++++++
 frontend/app/middleware/auth.global.ts |  6 ++-
 frontend/app/pages/owners/index.vue    |  5 ++
 frontend/app/pages/servers/index.vue   | 65 +++++++++++++++-----------
 4 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index a156593..54b6347 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -3,3 +3,16 @@
     <NuxtPage />
     </NuxtLayout>
 </template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+
diff --git a/frontend/app/middleware/auth.global.ts b/frontend/app/middleware/auth.global.ts
index 9e713e2..2fcc50d 100644
--- a/frontend/app/middleware/auth.global.ts
+++ b/frontend/app/middleware/auth.global.ts
@@ -1,7 +1,11 @@
-export default defineNuxtRouteMiddleware((to) => {
+export default defineNuxtRouteMiddleware((to, from) => {
     if (import.meta.server) return // SSR ignorieren
     // allow login-page
 
+    if (to.meta.requiresAuth !== true) {
+        return
+    }
+
     const { token, loadToken } = useAuth()
     loadToken()
 
diff --git a/frontend/app/pages/owners/index.vue b/frontend/app/pages/owners/index.vue
index 7ee4eaa..ab1bddd 100644
--- a/frontend/app/pages/owners/index.vue
+++ b/frontend/app/pages/owners/index.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+
+definePageMeta({
+  requiresAuth: true
+})
+
 import { ref, onMounted } from "vue"
 
 const { loadToken } = useAuth()
diff --git a/frontend/app/pages/servers/index.vue b/frontend/app/pages/servers/index.vue
index 175072f..f3e9ea9 100644
--- a/frontend/app/pages/servers/index.vue
+++ b/frontend/app/pages/servers/index.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+
+definePageMeta({
+  requiresAuth: true
+})
+
 import { ref, onMounted } from "vue"
 
 const { apiFetch } = useApi()
@@ -12,7 +17,7 @@ const newServer = ref({
 
 const loading = ref(false)
 const error = ref("")
-
+const showCreateForm = ref(false)
 const editingId = ref<number | null>(null)
 
 const editServer = ref({
@@ -106,31 +111,6 @@ onMounted(() => {
     <div class="space-y-6">
         <h1 class="text-3xl font-bold">Server Verwaltung</h1>
 
-        <!-- Neues Server-Formular -->
-        <div class="p-4 bg-white shadow rounded space-y-4">
-            <h2 class="text-xl font-semibold">Neuen Server anlegen</h2>
-
-            <div class="flex flex-col gap-4">
-                <input v-model="newServer.hostname" type="text" placeholder="Server Name" class="border p-2 rounded" />
-
-                <textarea v-model="newServer.description" placeholder="Beschreibung (optional)"
-                    class="border p-2 rounded" />
-
-                <select v-model="newServer.owner_id" class="border p-2 rounded">
-                    <option :value="null">Kein Owner</option>
-                    <option v-for="owner in owners" :key="owner.id" :value="owner.id">
-                        {{ owner.name }}
-                    </option>
-                </select>
-
-
-                <button @click="createServer"
-                    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 self-start">
-                    Speichern
-                </button>
-            </div>
-        </div>
-
         <!-- Server-Liste -->
         <div class="p-4 bg-white shadow rounded">
             <h2 class="text-xl font-semibold mb-4">Server Liste</h2>
@@ -220,5 +200,38 @@ onMounted(() => {
                 </tbody>
             </table>
         </div>
+        <button
+            @click="showCreateForm = !showCreateForm"
+            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+            >
+            {{ showCreateForm ? "Formular ausblenden" : "Neuen Server anlegen" }}
+        </button>
+
+        <!-- Neues Server-Formular -->
+        <Transition name="fade">
+        <div v-if="showCreateForm" class="p-4 bg-white shadow rounded space-y-4">
+            <h2 class="text-xl font-semibold">Neuen Server anlegen</h2>
+
+            <div class="flex flex-col gap-4">
+                <input v-model="newServer.hostname" type="text" placeholder="Server Name" class="border p-2 rounded" />
+
+                <textarea v-model="newServer.description" placeholder="Beschreibung (optional)"
+                    class="border p-2 rounded" />
+
+                <select v-model="newServer.owner_id" class="border p-2 rounded">
+                    <option :value="null">Kein Owner</option>
+                    <option v-for="owner in owners" :key="owner.id" :value="owner.id">
+                        {{ owner.name }}
+                    </option>
+                </select>
+
+
+                <button @click="createServer"
+                    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 self-start">
+                    Speichern
+                </button>
+            </div>
+        </div>
+        </Transition>
     </div>
 </template>