- 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

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>

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 },
+  }
 ] 

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>

GUI/src/routes/authentication/Login.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <h1>Login</h1>
+</template>
+
+<style scoped></style>