<!--
  -   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/>.
  -->

<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";

    let username: string = $state("");
    let pw: string = $state("");

    let error: string = $state("");

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

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

            tokenStore.set(auth);
            navigate(l("/dashboard"));
        } catch (e: any) {
            pw = "";
            error = t("login.error");
        }
    }
</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)}>
    <h1 class="text-4xl text-white text-center">{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="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>
</form>

<style lang="postcss">
    input {
        @apply border-2 rounded-md p-2 shadow-2xl w-80 dark:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-transparent text-black;
    }

    label {
        @apply text-neutral-300;
    }
</style>