Website/src/components/Login.svelte

<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2026 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/>.
  -->

<script lang="ts">
    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("");
    let error: string = $state("");

    async function login() {
        let { authV2Repo } = await import("./repo/authv2.ts");
        if (username === "" || pw === "") {
            pw = "";
            error = t("login.error");
            return;
        }

        try {
            let auth = await get(authV2Repo).login(username, pw);
            if (!auth) {
                pw = "";
                error = t("login.error");
                return;
            }

            await navigate(l("/dashboard"));
        } catch (e: any) {
            pw = "";
            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) {
                (async () => {
                    let auth = await $authV2Repo.loginDiscord(accessToken);
                    if (!auth) {
                        pw = "";
                        error = t("login.error");
                        return;
                    }

                    navigate(l("/dashboard"));
                })();
            }
        }
    });
</script>

<form class="sw-login-form" onsubmit={preventDefault(login)}>
    <h1 class="text-4xl text-white text-center" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.08em;">{t("login.title")}</h1>
    <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="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="sw-link" 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 justify-center w-full" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button>
    <a
        class="btn mt-4 justify-center w-full"
        href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify"
    >
        {t("login.discord")}
    </a>
</form>

<style lang="postcss">
    .sw-login-form {
        background: rgba(12, 12, 12, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-top: 2px solid #f59e0b;
        backdrop-filter: blur(24px);
        padding: 3rem;
        display: flex;
        flex-direction: column;
    }

    input {
        width: 20rem;
        padding: 0.6rem 0.8rem;
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #f5f5f5;
        font-size: 0.85rem;
        outline: none;
        transition: border-color 0.2s ease;
    }

    input:focus {
        border-color: rgba(245, 158, 11, 0.5);
    }

    label {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgba(163, 163, 163, 0.7);
        margin-top: 0.5rem;
    }

    .sw-link {
        color: rgba(163, 163, 163, 0.5);
        text-decoration: none;
        font-size: 0.85rem;
        border-bottom: 1px solid transparent;
        transition:
            color 0.2s,
            border-color 0.2s;
    }

    .sw-link:hover {
        color: #f59e0b;
        border-bottom-color: #f59e0b;
    }
</style>