feat: Enhance login functionality with Discord integration and improve code formatting

src/components/Login.svelte

@@ -18,12 +18,14 @@
   -->
 
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
+    import { preventDefault } from "svelte/legacy";
 
     import { l } from "@utils/util.ts";
     import { t } from "astro-i18n";
     import { get } from "svelte/store";
     import { navigate } from "astro:transitions/client";
+    import { onMount } from "svelte";
+    import { authV2Repo } from "./repo/authv2.ts";
 
     let username: string = $state("");
     let pw: string = $state("");
@@ -52,6 +54,24 @@
             error = t("login.error");
         }
     }
+
+    onMount(() => {
+        if (window.location.hash.includes("access_token")) {
+            const params = new URLSearchParams(window.location.hash.substring(1));
+            const accessToken = params.get("access_token");
+
+            if (accessToken) {
+                let auth = $authV2Repo.loginDiscord(accessToken);
+                if (!auth) {
+                    pw = "";
+                    error = t("login.error");
+                    return;
+                }
+
+                navigate(l("/dashboard"));
+            }
+        }
+    });
 </script>
 
 <form class="bg-gray-100 dark:bg-neutral-900 p-12 rounded-2xl shadow-2xl border-2 border-gray-600 flex flex-col" onsubmit={preventDefault(login)}>
@@ -63,12 +83,19 @@
         <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("/set-password")}>{t("login.setPassword")}</a></p>
+        <a class="text-neutral-500 hover:underline" href={l("/set-password")}>{t("login.setPassword")}</a>
+    </p>
 
     {#if error}
         <p class="mt-2 text-red-500">{error}</p>
     {/if}
     <button class="btn mt-4 !mx-0 justify-center" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button>
+    <a
+        class="btn mt-4 !mx-0 justify-center"
+        href="https://discord.com/oauth2/authorize?client_id=869611389818400779&response_type=token&redirect_uri=http%3A%2F%2Flocalhost%3A4321%2Flogin&scope=identify"
+    >
+        {t("login.discord")}
+    </a>
 </form>
 
 <style lang="postcss">

src/components/repo/authv2.ts

@@ -18,48 +18,31 @@
  */
 
 import { readable, writable } from "svelte/store";
-import dayjs, {type Dayjs} from "dayjs";
-import {type AuthToken, AuthTokenSchema} from "@type/auth.ts";
+import { ResponseUserSchema } from "@components/types/data";
 
 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) {
+        this.request("/data/me").then((value) => {
+            if (value.ok) {
                 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", {
+            await this.request("/auth", {
                 method: "POST",
                 body: JSON.stringify({
                     name,
                     password,
                     keepLoggedIn: true,
                 }),
-            }).then(value => value.json()).then(value => AuthTokenSchema.parse(value));
+            })
+                .then((value) => value.json())
+                .then((value) => ResponseUserSchema.parse(value));
 
-            this.setLoginState(login);
+            loggedIn.set(true);
 
             return true;
         } catch (e) {
@@ -67,114 +50,36 @@ export class AuthV2Repo {
         }
     }
 
-    async logout() {
-        if (this.accessToken === undefined) {
-            return;
+    async loginDiscord(token: string) {
+        try {
+            await this.request("/auth/discord", {
+                method: "POST",
+                body: token,
+            })
+                .then((value) => value.json())
+                .then((value) => ResponseUserSchema.parse(value));
+            loggedIn.set(true);
+            return true;
+        } catch (e) {
+            return false;
+        }
     }
 
+    async logout() {
         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;
-        }
-
-        const response = await this.requestWithToken(this.refreshToken!, "/auth", {
-            method: "PUT",
-        }).then(value => {
-            if (value.status === 401) {
-                this.resetRefreshToken();
-                this.resetAccessToken();
-
-                return undefined;
-            }
-
-            return value.json();
-        }).then(value => AuthTokenSchema.parse(value));
-
-        this.setLoginState(response);
-    }
-
-    async request(url: string, params: RequestInit = {}, retryCount: number = 0) {
-        if (this.accessToken !== undefined && this.accessTokenExpires !== undefined && this.accessTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
-            await this.refresh();
-        }
-
-        return this.requestWithToken(this.accessToken ?? "", url, params, retryCount);
-    }
-
-    private async requestWithToken(token: string, url: string, params: RequestInit = {}, retryCount: number = 0): Promise<Response> {
-        if (retryCount >= 3) {
-            throw new Error("Too many retries");
-        }
-
-        return fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {...params,
+    async request(url: string, params: RequestInit = {}) {
+        return fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {
+            ...params,
+            credentials: "include",
             headers: {
-                ...(token !== "" ? {"Authorization": "Bearer " + (token)} : {}),
-                "Content-Type": "application/json", ...params.headers,
+                "Content-Type": "application/json",
+                ...params.headers,
             },
-        })
-            .then(async value => {
-                if (value.status === 401 && url !== "/auth") {
-                    try {
-                        await this.refresh();
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    } catch (_e) { /* empty */ }
-
-                    return this.request(url, params, retryCount + 1);
-                }
-                return value;
         });
     }
 }

src/i18n/common/de.json

@@ -223,6 +223,7 @@
         },
         "setPassword": "Wie setze ich mein Passwort?",
         "submit": "Login",
+        "discord": "Mit Discord Einloggen",
         "error": "Falscher Nutzername oder falsches Passwort"
     },
     "ranked": {

src/i18n/common/en.json

@@ -159,6 +159,7 @@
         },
         "setPassword": "How to set a Password",
         "submit": "Login",
+        "discord": "Login with Discord",
         "error": "Invalid username or password"
     },
     "ranked": {