<!--
  -   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 {Button, Input, Label, Spinner, Toast} from "flowbite-svelte";
    import {fly} from "svelte/transition";
    import {replace} from "svelte-spa-router";
    import {EyeOutline, EyeSlashOutline, EyeSolid} from "flowbite-svelte-icons";
    import {fetchWithToken, tokenStore} from "../../repo/repo.js";

    let show = false;
    let loading = false;
    let value = "";
    let error = false;

    async function handleSubmit() {
        loading = true;
        let res = await fetchWithToken(value, "/data")
        loading = false;
        if(res.ok) {
            $tokenStore = value;
            await replace("/");
        } else {
            error = true;
            value = "";
            setTimeout(() => {
                error = false;
            }, 5000)
        }
    }
</script>

<div class="h-screen w-screen grid place-items-center overflow-hidden">
    <form on:submit|preventDefault={handleSubmit} class="grid">
        <div class="grid gap-6 mb-6 md:grid-cols-1">
            <div>
                <Label for="token-xyz" class="mb-2">Token</Label>
                <Input type={show?'text':'password'} id="token-xyz" placeholder="•••••••••" required size="lg" bind:value>
                    <button slot="left" on:click={() => (show = !show)} class="pointer-events-auto" type="button">
                        {#if show}
                            <EyeOutline />
                        {:else}
                            <EyeSlashOutline />
                        {/if}
                    </button>
                </Input>
            </div>
        </div>
        <Button type="submit">
            {#if loading}
                <Spinner size={4} class="mr-3" color="white"/> <span>Loading...</span>
            {:else}
                <span>Submit</span>
            {/if}
        </Button>
    </form>
</div>

<Toast color="red" position="bottom-left" bind:open={error} transition={fly} params="{{x: -200}}">
    <svelte:fragment slot="icon">
        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        <span class="sr-only">Error icon</span>
    </svelte:fragment>
    Invalid Token.
</Toast>

<svelte:head>
    <title>SteamWar.de Multitool - Login</title>
</svelte:head>
