From e4862f1878769dab7698320aee6bf8750826a827 Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Fri, 23 Jan 2026 22:59:32 +0100
Subject: [PATCH] - Enhance 404 page design and add link to home - Update
 routes to include "Login" page - Add dynamic website title updates based on
 current route - Add "Login" button to layout linking to Login page

---
 API/app.db                              | Bin 114688 -> 114688 bytes
 GUI/src/Layout.vue                      |  23 ++++++++++-
 GUI/src/plugins/routesLayout.ts         |  51 +++++++++++++++---------
 GUI/src/routes/404NotFound.vue          |  15 ++++++-
 GUI/src/routes/authentication/Login.vue |   9 +++++
 5 files changed, 76 insertions(+), 22 deletions(-)
 create mode 100644 GUI/src/routes/authentication/Login.vue

diff --git a/API/app.db b/API/app.db
index 2eb27a279617ff7a6b828ba996bdd3b9f03bcbf7..6fecaf75e3e6131c499caca7fa3b29e04320ede3 100644
GIT binary patch
delta 31
mcmZo@U~gz(-|$YJ$I{BkSkKbH!qU*#viX<%_FwXhYzqLTCkki)

delta 31
mcmZo@U~gz(-|$YJ$H2<eK+nX)z{J$jr1_Wp_FwXhYzqLR=n7T<

diff --git a/GUI/src/Layout.vue b/GUI/src/Layout.vue
index f07f14d..401c0aa 100644
--- a/GUI/src/Layout.vue
+++ b/GUI/src/Layout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useTheme } from 'vuetify';
 import { Visibility, routes } from './plugins/routesLayout';
 import { useRoute } from 'vue-router';
@@ -25,6 +25,25 @@ onMounted(() => {
   );
   showDrawer.value = localStorage.getItem('drawer')?.startsWith('Y') || false;
 });
+
+function changeWebsiteTitle(path: string) {
+  // Pfad als Parameter
+  let currentPageInfo = routes.find((x) => x.path === path);
+  if (currentPageInfo) {
+    document.title = 'Judoteam - Stadtlohn | ' + currentPageInfo.name;
+  } else {
+    document.title = 'Judoteam - Stadtlohn';
+  }
+}
+
+// Beobachte die Route auf Änderungen
+watch(
+  () => route.path,
+  (newPath) => {
+    changeWebsiteTitle(newPath);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -49,7 +68,7 @@ onMounted(() => {
 
       <v-tooltip v-if="!$vuetify.display.mobile">
         <template #activator="{ props }">
-          <v-btn icon v-bind="props">
+          <v-btn icon v-bind="props" to="/login">
             <v-icon>mdi-account</v-icon>
           </v-btn>
         </template>
diff --git a/GUI/src/plugins/routesLayout.ts b/GUI/src/plugins/routesLayout.ts
index 66c1483..bee1bb4 100644
--- a/GUI/src/plugins/routesLayout.ts
+++ b/GUI/src/plugins/routesLayout.ts
@@ -1,6 +1,7 @@
 import Home from '@/routes/Home.vue'
 import NotFound from '@/routes/404NotFound.vue'
 import type { RouteRecordRaw } from 'vue-router'
+import Login from '@/routes/authentication/Login.vue';
 
 export enum Visibility {
     Hidden,
@@ -19,24 +20,36 @@ export interface LayoutRoute {
 }
 
 export const routes: LayoutRoute[] = [
-    {
-        path: "/",
-        name: "Startseite",
-        description: "Übersicht der Anwendung",
-        icon: "mdi-home",
-        visible: Visibility.Public,
-        meta: {
-            name: 'Home',
-            path: '/',
-            component: Home
-        }
-    },
-    {
-        path: "/notFound",
-        name: "Nicht Verfügbar",
-        description: "Diese Seite wurde nicht gefunden",
-        icon: "mdi-information-outline",
-        visible: Visibility.Hidden,
-        meta: { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+  {
+    path: "/",
+    name: "Startseite",
+    description: "Übersicht der Anwendung",
+    icon: "mdi-home",
+    visible: Visibility.Public,
+    meta: {
+      name: 'Home',
+      path: '/',
+      component: Home
     }
+  },
+  {
+    path: "/login",
+    name: "Login",
+    description: "Logge dich ein",
+    icon: "mdi-login",
+    visible: Visibility.Hidden,
+    meta: {
+      path: "/login",
+      name: 'Login',
+      component: Login
+    }
+  },
+  {
+    path: "/notFound",
+    name: "Nicht Gefunden",
+    description: "Diese Seite wurde nicht gefunden",
+    icon: "mdi-information-outline",
+    visible: Visibility.Hidden,
+    meta: { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+  }
 ] 
\ No newline at end of file
diff --git a/GUI/src/routes/404NotFound.vue b/GUI/src/routes/404NotFound.vue
index 7b62b86..85bad57 100644
--- a/GUI/src/routes/404NotFound.vue
+++ b/GUI/src/routes/404NotFound.vue
@@ -1,7 +1,17 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1>404</h1>
+  <v-container fluid class="fill-height d-flex flex-column justify-center align-center">
+    <h1 class="error-title text-h1 font-weight-bold">404</h1>
+    <p class="error-message text-h5">Page not found</p>
+
+    <router-link
+      to="/"
+      class="text-blue text-decoration-none font-weight-medium mt-5"
+    >
+      Zurück zur Startseite
+    </router-link>
+  </v-container>
 </template>
 
 <style scoped>
@@ -18,4 +28,7 @@
   opacity: 0.85;
   color: #fff;
 }
+a:hover {
+  text-decoration: underline !important;
+}
 </style>
diff --git a/GUI/src/routes/authentication/Login.vue b/GUI/src/routes/authentication/Login.vue
new file mode 100644
index 0000000..64f29c7
--- /dev/null
+++ b/GUI/src/routes/authentication/Login.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <h1>Login</h1>
+</template>
+
+<style scoped></style>