frontend: Login-Redirect for unauth requests

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>
+

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()
 

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()

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>