Added settings for changing password

src/lib/Auth.svelte.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { env } from "$env/dynamic/public";
-import UserSvelte from "./User.svelte";
+import UserSvelte, { type UserObj } from "./User.svelte";
 import { goto } from "$app/navigation";
 
 export async function isAuthenticated() {
@@ -8,13 +8,13 @@ export async function isAuthenticated() {
         return true;
     }
     return axios
-        .get(
-            `${env.PUBLIC_JEOPARDY_SERVER_PROTOCOL}://${env.PUBLIC_JEOPARDY_SERVER}/user/username`,
-            { withCredentials: true }
-        )
+        .get(`${env.PUBLIC_JEOPARDY_SERVER_PROTOCOL}://${env.PUBLIC_JEOPARDY_SERVER}/auth`, {
+            withCredentials: true
+        })
         .then((res) => {
             if (res.status === 200) {
-                UserSvelte.username = res.data;
+                UserSvelte.user = res.data as UserObj;
+                console.log(UserSvelte.id, UserSvelte.username, UserSvelte.role);
                 return true;
             } else {
                 goto("/login");

src/lib/User.svelte.ts

@@ -1,4 +1,12 @@
-let username: string = "";
+let username: string = $state("");
+let role: string = $state("");
+let id: string = $state("");
+
+export type UserObj = {
+    username: string;
+    role: string;
+    _id: string;
+};
 
 export default {
     get username(): string {
@@ -6,5 +14,22 @@ export default {
     },
     set username(uname: string) {
         username = uname;
+    },
+    get role(): string {
+        return role;
+    },
+    set role(newrole: string) {
+        role = newrole;
+    },
+    get id(): string {
+        return id;
+    },
+    set id(newid: string) {
+        id = newid;
+    },
+    set user(userobj: UserObj) {
+        username = userobj.username;
+        role = userobj.role;
+        id = userobj._id;
     }
 };

src/routes/+page.svelte

@@ -16,14 +16,20 @@
 </script>
 
 <div class="flex h-full flex-col">
+    <div class="flex items-center">
         <h1 class="m-4 mb-8 text-7xl font-bold">Jeopardy</h1>
+        <div class="grow"></div>
+        <button type="button" class="btn me-4" onclick={() => goto("/settings")}
+            >Einstellungen</button
+        >
+    </div>
 
     <div class="flex h-full grow items-center justify-around p-4">
         <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsHost}
-            >Connect as Host</button
+            >Spiel hosten</button
         >
         <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsDisplay}
-            >Connect as Display</button
+            >Spiel darstellen</button
         >
     </div>
 </div>

src/routes/login/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import { env } from "$env/dynamic/public";
-    import UserState from "$lib/User.svelte";
+    import UserState, { type UserObj } from "$lib/User.svelte";
     import axios from "axios";
 
     let username = $state("");
@@ -20,7 +20,8 @@
             )
             .then((response) => {
                 if (response.status === 200) {
-                    UserState.username = response.data;
+                    UserState.user = response.data as UserObj;
+                    console.log(UserState.id, UserState.username, UserState.role);
                     goto("/");
                 }
             })

src/routes/settings/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import { env } from "$env/dynamic/public";
+    import UserState, { type UserObj } from "$lib/User.svelte";
+    import axios from "axios";
+
+    let oldpassword = $state("");
+    let newpassword = $state("");
+    let reppassword = $state("");
+    let error = $state("");
+
+    async function changePassword() {
+        if (newpassword !== reppassword) {
+            error = "Passwörter stimmen nicht überein.";
+        } else {
+            error = "";
+        }
+
+        axios
+            .post(
+                `${env.PUBLIC_JEOPARDY_SERVER_PROTOCOL}://${env.PUBLIC_JEOPARDY_SERVER}/user/changepw`,
+                {
+                    old: oldpassword,
+                    new: newpassword
+                },
+                { withCredentials: true }
+            )
+            .then((response) => {
+                if (response.status === 200) {
+                    goto("/login");
+                } else {
+                    error = "Passwort ändern fehlgeschlagen";
+                }
+            })
+            .catch((e) => {
+                error = "Passwort ändern fehlgeschlagen";
+            });
+    }
+</script>
+
+<div class="m-4 flex flex-col gap-4">
+    <div class="flex items-center">
+        <h2 class="text-4xl font-bold">Einstellungen</h2>
+        <div class="grow"></div>
+        <button type="button" class="btn" onclick={() => goto("/")}>Zurück</button>
+    </div>
+    <div class="rounded-md border-1 p-4">
+        <h4 class="font-bold">Passwort ändern</h4>
+        <div>
+            <label for="oldpassword" class="">Altes Passwort</label>
+            <input
+                type="password"
+                name="oldpassword"
+                id="oldpassword"
+                class="borders me-4 mt-2 mb-4"
+                bind:value={oldpassword}
+            />
+            <label for="newpassword" class="">Neues Passwort</label>
+            <input
+                type="password"
+                name="newpassword"
+                id="newpassword"
+                class="borders me-4 mt-2 mb-4"
+                bind:value={newpassword}
+            />
+            <label for="reppassword" class="">Neues Passwort wiederholen</label>
+            <input
+                type="password"
+                name="reppassword"
+                id="reppassword"
+                class="borders me-4 mt-2 mb-4"
+                bind:value={reppassword}
+            />
+        </div>
+        <button type="button" class="btn mb-2 w-fit ps-4 pe-4" onclick={changePassword}
+            >Passwort ändern</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>

vite.config.ts

@@ -1,7 +1,7 @@
-import tailwindcss from '@tailwindcss/vite';
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import tailwindcss from "@tailwindcss/vite";
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
+    plugins: [sveltekit(), tailwindcss()]
 });