Change to PW

src/components/Login.svelte

@@ -20,38 +20,34 @@
 <script lang="ts">
     import {l} from "../util/util.ts";
     import {t} from "astro-i18n";
+    import {get} from "svelte/store";
 
     let username = "";
-    let token = "";
+    let pw = "";
 
     let error = "";
 
     async function login() {
-        let {tokenStore} = await import("./repo/repo.ts");
-        if (username === "" || token === "") {
-            token = "";
+        let {tokenStore, authRepo} = await import("./repo/repo.ts");
+        if (username === "" || pw === "") {
+            pw = "";
             error = t("login.error");
             return;
         }
-        try {
-            let res = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/me", {
-                headers: {
-                    "Authorization": "Bearer " + token
-                }
-            }).then(res => res.json());
 
-            if (res.name !== username) {
+        try {
+            let auth = await get(authRepo).login(username, pw);
+            if (auth == undefined) {
+                pw = "";
                 error = t("login.error");
-                token = "";
                 return;
             }
 
-            tokenStore.set(token);
+            tokenStore.set(auth);
             window.location.href = l("/dashboard");
-        } catch (e) {
+        } catch (e: any) {
+            pw = "";
             error = t("login.error");
-            token = "";
-            return;
         }
     }
 </script>
@@ -61,11 +57,11 @@
     <div class="ml-2 flex flex-col">
         <label for="username">{t("login.label.username")}</label>
         <input type="text" id="username" name="username" placeholder={t("login.placeholder.username")} bind:value={username} />
-        <label for="token">{t("login.label.token")}</label>
-        <input type="password" id="token" name="token" placeholder={t("login.placeholder.token")} bind:value={token} />
+        <label for="password">{t("login.label.password")}</label>
+        <input type="password" id="password" name="password" placeholder={t("login.placeholder.password")} bind:value={pw} />
     </div>
     <p class="mt-2">
-        <a class="text-neutral-500 hover:underline" href={l("/token-erstellen")}>{t("login.generateToken")}</a></p>
+        <a class="text-neutral-500 hover:underline" href={l("/token-erstellen")}>{t("login.setPassword")}</a></p>
 
     {#if error}
         <p class="mt-2 text-red-500">{error}</p>

src/components/dashboard/SchematicListTile.svelte

@@ -75,8 +75,8 @@
 
 <style lang="scss">
     tr {
-        @apply transition-colors cursor-pointer border-b
-            dark:hover:bg-gray-800 hover:bg-gray-300;
+        @apply transition-colors cursor-pointer border-b border-gray-300
+            dark:hover:bg-gray-800 hover:bg-gray-300 dark:border-neutral-700;
     }
 
     th {

src/components/dashboard/UserInfo.svelte

@@ -20,13 +20,14 @@
 <script lang="ts">
     import {t} from "astro-i18n";
     import type {Player} from "../types/data.ts";
-    import {tokenStore} from "../repo/repo.ts";
+    import {authRepo, tokenStore} from "../repo/repo.ts";
     import {l} from "../../util/util.ts";
     import Statistics from "./Statistics.svelte";
 
     export let user: Player;
 
-    function logout() {
+    async function logout() {
+        await $authRepo.logout()
         tokenStore.set("")
         window.location.href = l("/login")
     }

src/components/repo/auth.ts

@@ -0,0 +1,41 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2023 SteamWar.de-Serverteam
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *   GNU Affero General Public License for more details.
+ *
+ *   You should have received a copy of the GNU Affero General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {fetchWithToken} from "./repo.ts";
+
+export class AuthRepo {
+    constructor(private token: string) {
+    }
+
+    public async login(username: string, password: string): Promise<string> {
+        return await fetchWithToken(this.token, "/auth/login", {
+            body: JSON.stringify({
+                username,
+                password
+            }),
+            method: "POST",
+        }).then(value => value.json()).then(value => value.token)
+    }
+
+    public async logout(): Promise<void> {
+        await fetchWithToken(this.token, "/auth/tokens/logout", {
+            method: "POST"
+        });
+    }
+}

src/components/repo/repo.ts

@@ -27,6 +27,7 @@ import {DataRepo} from "./data.ts";
 import { AES, enc, format } from "crypto-js";
 import {SchematicRepo} from "./schem.ts";
 import {StatsRepo} from "./stats.ts";
+import {AuthRepo} from "./auth.ts";
 
 export { EventRepo } from "./event.js"
 
@@ -52,3 +53,4 @@ export const pageRepo = derived(tokenStore, ($token) => new PageRepo($token))
 export const dataRepo = derived(tokenStore, ($token) => new DataRepo($token))
 export const schemRepo = derived(tokenStore, ($token) => new SchematicRepo($token))
 export const statsRepo = derived(tokenStore, ($token) => new StatsRepo($token))
+export const authRepo = derived(tokenStore, ($token) => new AuthRepo($token))