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 { l } from "@utils/util.ts";
-    import {t} from "astro-i18n";
+    import { t } from "astro-i18n";
-    import {get} from "svelte/store";
+    import { get } from "svelte/store";
-    import {navigate} from "astro:transitions/client";
+    import { navigate } from "astro:transitions/client";
+    import { onMount } from "svelte";
+    import { authV2Repo } from "./repo/authv2.ts";
 
     let username: string = $state("");
     let pw: string = $state("");
@@ -31,7 +33,7 @@
     let error: string = $state("");
 
     async function login() {
-        let {authV2Repo} = await import("./repo/authv2.ts");
+        let { authV2Repo } = await import("./repo/authv2.ts");
         if (username === "" || pw === "") {
             pw = "";
             error = t("login.error");
@@ -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

@@ -17,49 +17,32 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {readable, writable} from "svelte/store";
+import { readable, writable } from "svelte/store";
-import dayjs, {type Dayjs} from "dayjs";
+import { ResponseUserSchema } from "@components/types/data";
-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") {
+        this.request("/data/me").then((value) => {
-            return;
+            if (value.ok) {
-        }
-
-        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", {
+            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() {
+    async loginDiscord(token: string) {
-        if (this.accessToken === undefined) {
+        try {
-            return;
+            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() {
+    async request(url: string, params: RequestInit = {}) {
-        if (this.refreshToken === undefined || this.refreshTokenExpires === undefined || this.refreshTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
+        return fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {
-            this.resetRefreshToken();
+            ...params,
-            this.resetAccessToken();
+            credentials: "include",
-
-            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,
             headers: {
-                ...(token !== "" ? {"Authorization": "Bearer " + (token)} : {}),
+                "Content-Type": "application/json",
-                "Content-Type": "application/json", ...params.headers,
+                ...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": {

src/pages/login.astro

@@ -1,21 +1,21 @@
 ---
 import LoginComponent from "@components/Login.svelte";
 import NavbarLayout from "@layouts/NavbarLayout.astro";
-import {t} from "astro-i18n";
+import { t } from "astro-i18n";
 import BackgroundImage from "../components/BackgroundImage.astro";
 ---
 
 <NavbarLayout title={t("login.page")}>
     <script>
-        import {l} from "../util/util";
+        import { l } from "../util/util";
-        import {navigate} from "astro:transitions/client";
+        import { navigate } from "astro:transitions/client";
-        import {loggedIn} from "../components/repo/authv2";
+        import { loggedIn } from "../components/repo/authv2";
-        import {get} from "svelte/store";
+        import { get } from "svelte/store";
 
         document.addEventListener("astro:page-load", () => {
             if (window.location.href.endsWith("/login") || window.location.href.endsWith("/login/")) {
                 if (get(loggedIn)) {
-                    navigate(l("/dashboard"), {history: "replace"});
+                    navigate(l("/dashboard"), { history: "replace" });
                 }
             }
         });
@@ -24,7 +24,7 @@ import BackgroundImage from "../components/BackgroundImage.astro";
         <BackgroundImage />
     </div>
     <div class="h-screen mx-auto p-8 rounded-b-md pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center
-            dark:text-white " style="width: min(100vw, 75em);">
+            dark:text-white" style="width: min(100vw, 75em);">
-        <LoginComponent client:load/>
+        <LoginComponent client:load />
     </div>
 </NavbarLayout>