Changes

src/components/admin/pages/Login.svelte

@@ -0,0 +1,66 @@
+<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 {tokenStore} from "../repo/repo.js";
+
+    let show = false;
+    let loading = false;
+    let value = "";
+    let error = false;
+
+    async function handleSubmit() {
+        loading = true;
+        let res = await fetch("https://steamwar.de/eventplanner-api/data", {headers: {"X-SW-Auth": value}})
+        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>