Startseite angelegt. Login Fertiggestellt

src/lib/cookies.ts

@@ -0,0 +1,13 @@
+import { browser } from '$app/environment';
+
+export function setCookie(name: string, value: string, days = 7) {
+  if (browser) {
+    document.cookie = `${name}=${value}; path=/; max-age=${days * 86400}`;
+  }
+}
+
+export function deleteCookie(name: string) {
+  if (browser) {
+    document.cookie = `${name}=; path=/; max-age=0`;
+  }
+}

src/routes/+layout.svelte

@@ -1,37 +1,72 @@
 <script lang="ts">
-	import '../app.css';
-	let { children } = $props();
-	
-    let username = $state('klaas');
-    let editMode = $state(false);
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import type { PageData } from './$types';
+  import { setCookie, deleteCookie } from '$lib/cookies';
+
+  let { children } = $props();
+
+  let username = $state('');
+  let password = $state('');
+
+  async function login() {
+    console.log("Login");
+    const res = await fetch('http://localhost:2001/1/user/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    });
+    const data = await res.json();
+
+    if (res.ok) {
+      // Token & Rollen speichern (Cookie)
+      setCookie('token', data.token);
+      setCookie('roles', JSON.stringify(data.roles));
+      setCookie('username', username);
+    location.reload(); // <---- wichtig!
+    } else {
+      alert('Login fehlgeschlagen');
+    }
+  }
+
+  function logout() {
+    deleteCookie('token');
+    deleteCookie('roles');
+    deleteCookie('username');
+    goto('/');
+  }
 </script>
 
-{#snippet userInput(exampleString:string)}
-    <h1> Your Username</h1>
-    {#if editMode}
-        <input type="text" bind:value={username} />
+<header class="flex justify-between p-4 bg-gray-800 text-white">
+  <div>
+    <a href="/" class="mr-4">Home</a>
+    {#if token}
+      <a href="/training" class="mr-4">Spiele</a>  
+      <a href="/spiele" class="mr-4">Spiele</a>
     {:else}
-    <p>{username}</p>
+      <a href="/spiele" class="mr-4">Spiele</a>
+      <a href="/registrieren" class="mr-4">Registrieren</a>
     {/if}
+  </div>
 
-{/snippet}
+  <div>
+    {#if !token}
+      <form onsubmit={login}>
+        <input bind:value={username} placeholder="Benutzername" class="mr-2" />
+        <input type="password" bind:value={password} placeholder="Passwort" class="mr-2" />
+        <button>Login</button>
+      </form>
+    {:else}
+      <button onclick={logout}>Logout</button>
+    {/if}
+  </div>
+</header>
 
-{@render userInput("Klaas")}
-<br />
-<button onclick={()=>{
-    editMode = !editMode;
-}}>
-{editMode ? "save Changes" : "Edit username"}</button>
+<main class="p-4">
+  {@render children()}
+</main>
 
-<br />
-<a href="/training/2025/24">click</a>
-
-<h1>Root</h1>
-{@render children()}
-
-
-<style>
-	h1{
-		color:blue;
-	}
-</style>
+<footer class="p-4 bg-gray-800 text-white text-center">
+  © 2025 Dein Verein
+</footer>

src/routes/+page.server.ts

@@ -0,0 +1,10 @@
+export function load ({ cookies }) {
+    const token = cookies.get('token');
+    const username = cookies.get('username');
+    const roles = cookies.get('rols');
+  return {
+    token, 
+    username, 
+    roles
+  };
+}

src/routes/+page.svelte

@@ -1,31 +1,7 @@
 <script lang="ts">
-    let username = $state('klaas');
-    let editMode = $state(false);
-    let data = $props();
+
 </script>
 
-{#snippet userInput(exampleString:string)}
-    <h1> Your Username</h1>
-    {#if editMode}
-        <input type="text" bind:value={username} />
-    {:else}
-    <p>{username}</p>
-    {/if}
-
-{/snippet}
-
-{@render userInput("Klaas")}
-<br />
-<button onclick={()=>{
-    editMode = !editMode;
-}}>
-{editMode ? "save Changes" : "Edit username"}</button>
-
-<br />
-<a href="/training/2025/24">click</a>
-
-
-
 <style>
 
 </style>

src/routes/training/[jahr]/+layout.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	let { children } = $props();
-	
-</script>
-
-<h1>layer 2</h1>
-    
-{@render children()}
-<style>
-h1{
-    color:green;
-}
-</style>