86 lines
3.3 KiB
Svelte
86 lines
3.3 KiB
Svelte
<!--
|
|
- 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>
|