89 lines
2.6 KiB
Svelte
89 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import Input from '$lib/components/Input/Input.svelte';
|
|
import { env } from '$env/dynamic/public';
|
|
import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
|
|
import { goto } from '$app/navigation';
|
|
|
|
let passwordValue: string;
|
|
async function login() {
|
|
// eslint-disable-next-line no-async-promise-executor
|
|
loginRequest = new Promise(async (resolve, reject) => {
|
|
const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/login`, {
|
|
method: 'POST',
|
|
body: new FormData(document.forms[0])
|
|
});
|
|
if (response.ok) {
|
|
await goto(`${env.PUBLIC_BASE_PATH}/admin`, { invalidateAll: true });
|
|
resolve();
|
|
} else if (response.status == 403) {
|
|
passwordValue = '';
|
|
showError = true;
|
|
errorToastElement.reset();
|
|
resolve();
|
|
} else {
|
|
reject(Error(`${response.statusText} (${response.status})`));
|
|
}
|
|
loginRequest = null;
|
|
});
|
|
}
|
|
|
|
let loginRequest: Promise<void> | null = null;
|
|
let showError = false;
|
|
let errorToastElement: ErrorToast;
|
|
</script>
|
|
|
|
<div class="card px-14 py-6 shadow-lg">
|
|
<h1 class="text-center text-4xl mt-2 mb-4">Craftattack Admin Login</h1>
|
|
<form class="flex flex-col items-center" on:submit|preventDefault={login}>
|
|
<div class="flex flex-col justify-center items-center">
|
|
<div class="grid gap-4">
|
|
<Input id="username" name="username" type="text" required={true}>
|
|
<span slot="label">Nutzername</span>
|
|
</Input>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required={true}
|
|
bind:value={passwordValue}
|
|
>
|
|
<span slot="label">Passwort</span>
|
|
</Input>
|
|
</div>
|
|
</div>
|
|
<div class="grid w-min mt-6">
|
|
<div class="row-[1] col-[1]">
|
|
<Input id="submit" type="submit" value="Login" disabled={loginRequest !== null} />
|
|
</div>
|
|
{#key loginRequest}
|
|
{#if loginRequest}
|
|
{#await loginRequest}
|
|
<span
|
|
class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
|
|
/>
|
|
{:catch error}
|
|
<dialog
|
|
class="modal"
|
|
on:close={() => setTimeout(() => (loginRequest = null), 200)}
|
|
open
|
|
>
|
|
<form method="dialog" class="modal-box">
|
|
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
|
<h3 class="font-bold text-lg">Error</h3>
|
|
<p class="py-4">{error.message}</p>
|
|
</form>
|
|
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
{/await}
|
|
{/if}
|
|
{/key}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<ErrorToast timeout={2000} bind:show={showError} bind:this={errorToastElement}>
|
|
<span>Nutzername oder Passwort falsch</span>
|
|
</ErrorToast>
|