Added login and authentication

src/lib/Auth.svelte.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+import { env } from "$env/dynamic/public";
+import UserSvelte from "./User.svelte";
+import { goto } from "$app/navigation";
+
+export async function isAuthenticated() {
+    if (location.pathname.startsWith("/login")) {
+        return true;
+    }
+    return axios
+        .get(`http://${env.PUBLIC_JEOPARDY_SERVER}/user/username`, { withCredentials: true })
+        .then((res) => {
+            if (res.status === 200) {
+                UserSvelte.username = res.data;
+                return true;
+            } else {
+                goto("/login");
+            }
+        })
+        .catch(() => {
+            goto("/login");
+        });
+}

src/lib/User.svelte.ts

@@ -0,0 +1,10 @@
+let username: string = "";
+
+export default {
+    get username(): string {
+        return username;
+    },
+    set username(uname: string) {
+        username = uname;
+    }
+};

src/lib/websocket.svelte.ts

@@ -14,7 +14,7 @@ let socket: WebSocket | undefined;
 const connectAsHost = () => {
     if (socket !== undefined) return;
     socket = new WebSocket(
-        `${location.protocol === "https:" ? "wss" : "ws"}://${env.PUBLIC_JEOPARDY_SERVER ?? "127.0.0.1:12345"}`
+        `${location.protocol === "https:" ? "wss" : "ws"}://${env.PUBLIC_JEOPARDY_SERVER ?? "127.0.0.1:12345"}/websocket`
     );
     socket.addEventListener("open", onOpen(SocketConnectionType.HOST));
     socket.addEventListener("message", onFirstMessage);
@@ -25,7 +25,7 @@ const connectAsHost = () => {
 const connectAsDisplay = () => {
     if (socket !== undefined) return;
     socket = new WebSocket(
-        `${location.protocol === "https:" ? "wss" : "ws"}://${env.PUBLIC_JEOPARDY_SERVER ?? "127.0.0.1:12345"}`
+        `${location.protocol === "https:" ? "wss" : "ws"}://${env.PUBLIC_JEOPARDY_SERVER ?? "127.0.0.1:12345"}/websocket`
     );
     socket.addEventListener("open", onOpen(SocketConnectionType.DISPLAY));
     socket.addEventListener("message", onFirstMessage);
@@ -43,10 +43,12 @@ const sendMessage = (obj: unknown) => {
 };
 
 function onOpen(type: SocketConnectionType) {
-    return (event: Event) => {
+    return async (event: Event) => {
         console.log("Connection established");
         console.log(event);
         if (socket === undefined) return;
+        // somehow beeing to fast so have to wait some time
+        await new Promise((r) => setTimeout(r, 100));
         socket.send(type.toString());
     };
 }

src/routes/+layout.svelte

@@ -1,12 +1,28 @@
 <script lang="ts">
     import "../app.css";
     import favicon from "$lib/assets/favicon.svg";
+    import { afterNavigate } from "$app/navigation";
+    import { isAuthenticated } from "$lib/Auth.svelte";
 
     let { children } = $props();
+
+    let renderit = $state(false);
+
+    afterNavigate(() => {
+        isAuthenticated()
+            .then(() => {
+                renderit = true;
+            })
+            .catch(() => {
+                renderit = true;
+            });
+    });
 </script>
 
 <svelte:head>
     <link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children?.()}
+{#if renderit}
+    {@render children?.()}
+{/if}

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
+    import { afterNavigate, goto } from "$app/navigation";
+    import { isAuthenticated } from "$lib/Auth.svelte";
     import websocket, { SocketConnectionType } from "$lib/websocket.svelte";
 
     $effect(() => {

src/routes/login/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import { env } from "$env/dynamic/public";
+    import UserState from "$lib/User.svelte";
+    import axios from "axios";
+
+    let username = $state("");
+    let password = $state("");
+    let error = $state("");
+
+    async function login() {
+        axios
+            .post(
+                `http://${env.PUBLIC_JEOPARDY_SERVER}/auth/login`,
+                {
+                    username: username,
+                    password: password
+                },
+                { withCredentials: true }
+            )
+            .then((response) => {
+                if (response.status === 200) {
+                    UserState.username = response.data;
+                    goto("/");
+                }
+            })
+            .catch((e) => {
+                error = "Login fehlgeschlagen";
+            });
+    }
+</script>
+
+<div class="flex h-full w-full items-center justify-center">
+    <div class="borders flex-col items-center justify-center">
+        <div>
+            <label for="username" class="ms-4">Name</label>
+            <input
+                type="text"
+                name="username"
+                id="username"
+                class="borders ms-4 me-4 mt-2 mb-4"
+                bind:value={username}
+            />
+            <label for="password" class="ms-4">Passwort</label>
+            <input
+                type="password"
+                name="password"
+                id="password"
+                class="borders ms-4 me-4 mt-2 mb-4"
+                bind:value={password}
+            />
+        </div>
+        <button type="button" class="btn mb-2 w-fit ps-4 pe-4" onclick={login}>Login</button>
+        {#if error.length > 0}
+            <div class="text-red-700">{error}</div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .borders {
+        border: 1px solid black;
+        border-radius: 5px;
+        display: flex;
+        font-size: larger;
+        padding: 2px;
+    }
+</style>