Merge pull request 'Refactor authentication and implement password reset.' (#3) from develop/authv2 into master

Reviewed-on: #3
Reviewed-by: Lixfel <lixfel@noreply.localhost>

src/components/Login.svelte

@@ -31,8 +31,7 @@
     let error: string = $state("");
 
     async function login() {
-        let {tokenStore} = await import("./repo/repo.ts");
-        let {authRepo} = await import("./repo/auth.ts");
+        let {authV2Repo} = await import("./repo/authv2.ts");
         if (username === "" || pw === "") {
             pw = "";
             error = t("login.error");
@@ -40,15 +39,14 @@
         }
 
         try {
-            let auth = await get(authRepo).login(username, pw);
-            if (auth == undefined) {
+            let auth = await get(authV2Repo).login(username, pw);
+            if (!auth) {
                 pw = "";
                 error = t("login.error");
                 return;
             }
 
-            tokenStore.set(auth);
-            navigate(l("/dashboard"));
+            await navigate(l("/dashboard"));
         } catch (e: any) {
             pw = "";
             error = t("login.error");

src/components/Navbar.svelte

@@ -23,24 +23,35 @@
     import {t} from "astro-i18n";
     import {l} from "../util/util";
     import {onMount} from "svelte";
+    import {loggedIn} from "@repo/authv2.ts";
   interface Props {
     logo?: import('svelte').Snippet;
   }
 
   let { logo }: Props = $props();
 
-    let navbar: HTMLDivElement = $state();
+    let navbar = $state<HTMLDivElement>();
     let searchOpen = $state(false);
 
+    let accountBtn = $state<HTMLAnchorElement>();
+
+    $effect(() => {
+        if ($loggedIn) {
+            accountBtn!.href = l("/dashboard");
+        } else {
+            accountBtn!.href = l("/login");
+        }
+    })
+
     onMount(() => {
         handleScroll();
     })
 
     function handleScroll() {
         if (window.scrollY > 0) {
-            navbar.classList.add("before:scale-y-100");
+            navbar!.classList.add("before:scale-y-100");
         } else {
-            navbar.classList.remove("before:scale-y-100");
+            navbar!.classList.remove("before:scale-y-100");
         }
     }
 </script>
@@ -106,7 +117,7 @@
                 </div>
             </div>
             -->
-            <a class="btn" href={l("/login")}>
+            <a class="btn" href={l("/login")} bind:this={accountBtn}>
                 <span class="btn__text">{t("navbar.links.account")}</span>
             </a>
             <!--

src/components/PostComponent.astro

@@ -1,5 +1,5 @@
 ---
-import {CollectionEntry} from "astro:content";
+import type {CollectionEntry} from "astro:content";
 import {l} from "../util/util";
 import {astroI18n} from "astro-i18n";
 import {Image} from "astro:assets";

src/components/admin/App.svelte

@@ -22,38 +22,40 @@
     import wrap from "svelte-spa-router/wrap";
     import Router, {replace} from "svelte-spa-router";
     import {get} from "svelte/store";
-    import {tokenStore} from "@repo/repo";
+    import {loggedIn} from "@repo/authv2.ts";
 
     const routes: RouteDefinition = {
-        "/": wrap({asyncComponent: () => import("./pages/Home.svelte"), conditions: detail => get(tokenStore) != ""}),
+        "/": wrap({asyncComponent: () => import("./pages/Home.svelte"), conditions: detail => get(loggedIn)}),
         "/perms": wrap({
             asyncComponent: () => import("./pages/Perms.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/login": wrap({
             asyncComponent: () => import("./pages/Login.svelte"),
-            conditions: detail => get(tokenStore) == ""
+            conditions: detail => !get(loggedIn)
         }),
         "/event/:id": wrap({
             asyncComponent: () => import("./pages/Event.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/event/:id/generate": wrap({
             asyncComponent: () => import("./pages/Generate.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/edit": wrap({
             asyncComponent: () => import("./pages/Edit.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/display/:event": wrap({
             asyncComponent: () => import("./pages/Display.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "*": wrap({asyncComponent: () => import("./pages/NotFound.svelte")})
     };
 
     function conditionsFailed(event: ConditionsFailedEvent) {
+        console.log(event)
+
         if (event.detail.location === "/login") {
             replace("/");
         } else {

src/components/dashboard/UserInfo.svelte

@@ -22,9 +22,9 @@
     import type {Player} from "@type/data.ts";
     import {l} from "@utils/util.ts";
     import Statistics from "./Statistics.svelte";
-    import {authRepo} from "@repo/auth.ts";
-    import {tokenStore} from "@repo/repo.ts";
+    import {authV2Repo} from "@repo/authv2.ts";
     import Card from "@components/Card.svelte";
+    import {navigate} from "astro:transitions/client";
 
   interface Props {
     user: Player;
@@ -33,9 +33,8 @@
   let { user }: Props = $props();
 
     async function logout() {
-        await $authRepo.logout()
-        tokenStore.set("")
-        window.location.href = l("/login")
+        await $authV2Repo.logout();
+        await navigate(l("/login"));
     }
 </script>
 

src/components/repo/auth.ts

@@ -1,44 +0,0 @@
-/*
- *   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, tokenStore} from "./repo.ts";
-import {derived} from "svelte/store";
-
-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",
-        });
-    }
-}
-
-export const authRepo = derived(tokenStore, ($token) => new AuthRepo($token));

src/components/repo/authv2.ts

@@ -0,0 +1,173 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2025 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 {readable, writable} from "svelte/store";
+import {tokenStore} from "@repo/repo.ts";
+import dayjs, {type Dayjs} from "dayjs";
+import {type AuthToken, AuthTokenSchema} from "@type/auth.ts";
+
+export class AuthV2Repo {
+    private accessToken: string | undefined;
+    private accessTokenExpires: Dayjs | undefined;
+    private refreshToken: string | undefined;
+    private refreshTokenExpires: Dayjs | undefined;
+
+    constructor() {
+        if (typeof localStorage === "undefined") {
+            return;
+        }
+
+        this.accessToken = localStorage.getItem("sw-access-token") ?? undefined;
+        if (this.accessToken) {
+            this.accessTokenExpires = dayjs(localStorage.getItem("sw-access-token-expires") ?? "");
+        }
+
+        this.refreshToken = localStorage.getItem("sw-refresh-token") ?? undefined;
+        if (this.refreshToken) {
+            loggedIn.set(true);
+            this.refreshTokenExpires = dayjs(localStorage.getItem("sw-refresh-token-expires") ?? "");
+        }
+    }
+
+    async login(name: string, password: string) {
+        if (this.accessToken !== undefined || this.refreshToken !== undefined) {
+            throw new Error("Already logged in");
+        }
+
+        try {
+            const login = await this.request("/auth", {
+                method: "POST",
+                body: JSON.stringify({
+                    name,
+                    password,
+                    keepLoggedIn: true,
+                }),
+            }).then(value => value.json()).then(value => AuthTokenSchema.parse(value));
+
+            this.setLoginState(login);
+
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    async logout() {
+        if (this.accessToken === undefined) {
+            return;
+        }
+
+        await this.request("/auth", {
+            method: "DELETE",
+        });
+
+        this.resetAccessToken();
+        this.resetRefreshToken();
+    }
+
+    private setLoginState(tokens: AuthToken) {
+        this.setAccessToken(tokens.accessToken.token, dayjs(tokens.accessToken.expires));
+        this.setRefreshToken(tokens.refreshToken.token, dayjs(tokens.refreshToken.expires));
+        loggedIn.set(true);
+    }
+
+    private setAccessToken(token: string, expires: Dayjs) {
+        this.accessToken = token;
+        this.accessTokenExpires = expires;
+        localStorage.setItem("sw-access-token", token);
+        localStorage.setItem("sw-access-token-expires", expires.toString());
+    }
+
+    private resetAccessToken() {
+        if (this.accessToken === undefined) {
+            return;
+        }
+        this.accessToken = undefined;
+        this.accessTokenExpires = undefined;
+        localStorage.removeItem("sw-access-token");
+        localStorage.removeItem("sw-access-token-expires");
+    }
+
+    private setRefreshToken(token: string, expires: Dayjs) {
+        this.refreshToken = token;
+        this.refreshTokenExpires = expires;
+        localStorage.setItem("sw-refresh-token", token);
+        localStorage.setItem("sw-refresh-token-expires", expires.toString());
+    }
+
+    private resetRefreshToken() {
+        if (this.refreshToken === undefined) {
+            return;
+        }
+        this.refreshToken = undefined;
+        this.refreshTokenExpires = undefined;
+        localStorage.removeItem("sw-refresh-token");
+        localStorage.removeItem("sw-refresh-token-expires");
+
+        loggedIn.set(false);
+    }
+
+    private async refresh() {
+        if (this.refreshToken === undefined || this.refreshTokenExpires === undefined || this.refreshTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
+            this.resetRefreshToken();
+            this.resetAccessToken();
+
+            return;
+        }
+
+        try {
+            const response = await this.requestWithToken(this.refreshToken!, "/auth", {
+                method: "PUT",
+            }).then(value => value.json()).then(value => AuthTokenSchema.parse(value));
+
+            this.setLoginState(response);
+        } catch (e) {
+            this.resetRefreshToken();
+            this.resetAccessToken();
+            return;
+        }
+    }
+
+    async request(url: string, params: RequestInit = {}) {
+        if (this.accessToken !== undefined && this.accessTokenExpires !== undefined && this.accessTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
+            await this.refresh();
+        }
+
+        return this.requestWithToken(this.accessToken ?? "", url, params);
+    }
+
+    private async requestWithToken(token: string, url: string, params: RequestInit = {}) {
+        return fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {...params,
+            headers: {
+                ...(token !== "" ? {"Authorization": "Bearer " + (token)} : {}),
+                "Content-Type": "application/json", ...params.headers,
+            },
+        })
+            .then(value => {
+                if (value.status === 401) {
+                    tokenStore.set("");
+                }
+                return value;
+            });
+    }
+}
+
+export const loggedIn = writable(false);
+
+export const authV2Repo = readable(new AuthV2Repo());

src/components/repo/repo.ts

@@ -17,31 +17,9 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {writable} from "svelte/store";
+import {get, writable} from "svelte/store";
+import {authV2Repo} from "@repo/authv2.ts";
 
-export const fetchWithToken = (token: string, url: string, params: RequestInit = {}) =>
-    fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {...params,
-        headers: {
-            ...(token !== "" ? {"Authorization": "Bearer " + (token)} : {}),
-            "Content-Type": "application/json", ...params.headers,
-        },
-    })
-        .then(value => {
-            if (value.status === 401) {
-                tokenStore.set("");
-            }
-            return value;
-        });
+export const fetchWithToken = (token: string, url: string, params: RequestInit = {}) => get(authV2Repo).request(url, params);
 
-export function getLocalStorage() {
-    if (typeof localStorage === "undefined") {
-        return {
-            getItem: () => "",
-            setItem: () => {},
-        };
-    }
-    return localStorage;
-}
-
-export const tokenStore = writable((getLocalStorage().getItem("sw-session") ?? ""));
-tokenStore.subscribe((value) => getLocalStorage().setItem("sw-session", value));
+export const tokenStore = writable("");

src/components/repo/stats.ts

@@ -36,7 +36,7 @@ export class StatsRepo {
     }
 
     public async getUserStats(id: string): Promise<UserStats> {
-        return await fetchWithToken(this.token, `/stats/user/${id}`).then(value => value.json()).then(UserStatsSchema.parse);
+        return await fetchWithToken(this.token, `/stats/user`).then(value => value.json()).then(UserStatsSchema.parse);
     }
 }
 

src/components/types/auth.ts

@@ -0,0 +1,34 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2025 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 {z} from "zod";
+
+export const TokenSchema = z.object({
+    token: z.string(),
+    expires: z.string(),
+});
+
+export type Token = z.infer<typeof TokenSchema>;
+
+export const AuthTokenSchema = z.object({
+    accessToken: TokenSchema,
+    refreshToken: TokenSchema,
+});
+
+export type AuthToken = z.infer<typeof AuthTokenSchema>;

src/content/announcements/de/missilewars-iii-eventplan.md

@@ -0,0 +1,46 @@
+---
+title: MissileWars III Eventplan
+key: missilewars3-eventplan
+description: Der Eventplan für MissileWars 3
+created: 2025-03-23
+tags:
+  - event
+  - missilewars
+---
+
+### Infos:
+Eventleitung: TheBreadBeard  
+
+Fights werden nach Möglichkeit mit einer Pause von 10 Minuten vorverschoben.
+# Gruppenphase
+## Punkte aus der Gruppenphase
+
+<group-table data-event="67"> </group-table>
+
+### Fights
+
+| Start | Teams      |
+|-------|------------|
+| 16:00:00 | KT vs Borg |
+| 16:00:30 | VI vs FK |
+| 16:30:00 | FK vs KT |
+| 16:30:30 | Hlcy vs VI |
+| 17:00:00 | VI vs KT |
+| 17:00:30 | Borg vs Hlcy |
+| 17:30:00 | KT vs Hlcy|
+| 17:30:30 | FK vs Borg |
+| 18:00:00 | VI vs Borg |
+| 18:00:30 | FK vs Hlcy |
+
+## KO-Phase
+
+| Start | Teams      |
+|-------|------------|
+| 17:50:00 | VI vs Borg |
+| 18:20:00 | Hlcy vs FK |
+| 18:22:00 | VI vs FK |
+| 18:44:00 | Hlcy vs Borg |
+
+## Ergebnisse
+
+<fight-table data-event="67" data-group="Gruppe 1"> </fight-table>

src/i18n/common/de.json

@@ -205,7 +205,8 @@
     },
     "label": {
       "username": "Nutzername",
-      "password": "Passwort"
+      "password": "Passwort",
+      "repeat": "Passwort Wiederholen"
     },
     "setPassword": "Wie setzte ich mein Passwort?",
     "submit": "Login",

src/i18n/common/en.json

@@ -149,7 +149,8 @@
     },
     "label": {
       "username": "Username",
-      "password": "Password"
+      "password": "Password",
+      "repeat": "Repeat Password"
     },
     "setPassword": "How to set a Password",
     "submit": "Login",

src/layouts/NavbarLayout.astro

@@ -3,7 +3,7 @@ import {Image} from "astro:assets";
 import Basic from "./Basic.astro";
 import "../styles/button.css";
 import localLogo from "../images/logo.png";
-import {YoutubeSolid, DiscordSolid} from "flowbite-svelte-icons";
+import {YoutubeSolid, DiscordSolid, FileCodeSolid} from "flowbite-svelte-icons";
 import {t} from "astro-i18n";
 import {l} from "../util/util";
 
@@ -50,6 +50,9 @@ const {title, description} = Astro.props;
                         <a class="flex" href="/discord">
                             <DiscordSolid class="mr-2"/>
                             Discord</a>
+                        <a class="flex" href="https://git.steamwar.de">
+                            <FileCodeSolid class="mr-2"/>
+                            Gitea</a>
                     </div>
                 </div>
                 <span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span>

src/pages/ankuendigungen/[...slug].astro

@@ -111,15 +111,13 @@ const ogImage = await getImage({
             import type {ExtendedEvent} from "@type/event";
             import {mount} from "svelte";
 
-            const eventMounts: Map<string, ((ev: ExtendedEvent) => void)[]> = new Map();
+            const eventMounts: Map<string, Promise<ExtendedEvent>> = new Map();
 
             class FightTableElement extends HTMLElement {
                 connectedCallback(): void {
-                    if (!eventMounts.has(this.dataset["event"]!)) {
-                        eventMounts.set(this.dataset["event"]!, []);
-                    }
+                    loadEvent(this.dataset["event"]!);
                     const rows = Number.parseInt(this.dataset["rows"]!);
-                    eventMounts.get(this.dataset["event"]!)!.push(ev => {
+                    eventMounts.get(this.dataset["event"]!)!.then(ev => {
                         mount(FightTable, {
                             target: this,
                             props: {
@@ -134,11 +132,9 @@ const ogImage = await getImage({
 
             class GroupTableElement extends HTMLElement {
                 connectedCallback(): void {
-                    if (!eventMounts.has(this.dataset["event"]!)) {
-                        eventMounts.set(this.dataset["event"]!, []);
-                    }
+                    loadEvent(this.dataset["event"]!);
                     const rows = Number.parseInt(this.dataset["rows"]!);
-                    eventMounts.get(this.dataset["event"]!)!.push(ev => {
+                    eventMounts.get(this.dataset["event"]!)!.then(ev => {
                         mount(GroupTable, {
                             target: this,
                             props: {
@@ -154,17 +150,13 @@ const ogImage = await getImage({
             customElements.define("fight-table", FightTableElement);
             customElements.define("group-table", GroupTableElement);
 
-            function mountEvent() {
-                for (const key of eventMounts.keys()) {
-                    get(eventRepo).getEvent(key).then(ev => {
-                        for (const mount of eventMounts.get(key)!) {
-                            mount(ev);
-                        }
-                    });
+            function loadEvent(id: string) {
+                if (!eventMounts.has(id)) {
+                    eventMounts.set(id, get(eventRepo).getEvent(id));
                 }
             }
 
-            mountEvent();
+            document.addEventListener("astro:before-swap", eventMounts.clear);
         </script>
     </article>
 </PageLayout>

src/pages/dashboard.astro

@@ -8,9 +8,11 @@ import {t} from "astro-i18n";
     <script>
         import {l} from "../util/util";
         import {navigate} from "astro:transitions/client";
+        import {get} from "svelte/store";
+        import {loggedIn} from "../components/repo/authv2";
         document.addEventListener("astro:page-load", () => {
             if (window.location.href.endsWith("/dashboard") || window.location.href.endsWith("/dashboard/")) {
-                if ((localStorage.getItem("sw-session") ?? "") === "") {
+                if (!get(loggedIn)) {
                     navigate(l("/login"), {});
                 }
             }

src/pages/login.astro

@@ -9,10 +9,12 @@ import BackgroundImage from "../components/BackgroundImage.astro";
     <script>
         import {l} from "../util/util";
         import {navigate} from "astro:transitions/client";
+        import {loggedIn} from "../components/repo/authv2";
+        import {get} from "svelte/store";
 
         document.addEventListener("astro:page-load", () => {
             if (window.location.href.endsWith("/login") || window.location.href.endsWith("/login/")) {
-                if ((localStorage.getItem("sw-session") ?? "") !== "") {
+                if (get(loggedIn)) {
                     navigate(l("/dashboard"), {history: "replace"});
                 }
             }