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

    let show = $state(false);
    let loading = $state(false);
    let value = $state("");
    let error = $state(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 onsubmit={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>
                    {#snippet left()}
                    <button  onclick={() => (show = !show)} class="pointer-events-auto" type="button">
                          {#if show}
                              <EyeOutline/>
                          {:else}
                              <EyeSlashOutline/>
                          {/if}
                      </button>
                  {/snippet}
                </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}}">
    {#snippet 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>
      
  {/snippet}
    Invalid Token.
</Toast>

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