100 lines
3.1 KiB
Svelte
100 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import BaseInputField from '$lib/components/BaseInputField.svelte';
|
|
import Button from '$lib/components/Button.svelte';
|
|
import Modal from '$lib/components/Modal/Modal.svelte';
|
|
import ModalContent from '$lib/components/Modal/ModalContent.svelte';
|
|
import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
|
|
import ModalTitle from '$lib/components/Modal/ModalTitle.svelte';
|
|
import ArrowRight from '$lib/icons/Arrow-right.svelte';
|
|
import Login from '$lib/icons/Login.svelte';
|
|
|
|
export let form;
|
|
|
|
export let open = false;
|
|
|
|
import { page } from '$app/state';
|
|
const vorgangToken = page.url.searchParams.get('vorgang');
|
|
</script>
|
|
|
|
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
|
|
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
|
|
<img class="mx-auto h-10 w-auto" src="/Landeswappen_NI.svg" alt="Landeswappen Niedersachsen" />
|
|
|
|
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
|
|
Willkommen beim 3D Tatort
|
|
</h2>
|
|
</div>
|
|
<div class="w-full max-w-sm mx-auto">
|
|
<div class="relative mt-5 bg-gray-50 rounded-xl shadow-xl p-3 pt-1">
|
|
<div class="mt-10">
|
|
<form action="?/getVorgangByToken" method="POST">
|
|
<BaseInputField
|
|
id="case-token"
|
|
name="case-token"
|
|
label="Vorgangskennung"
|
|
type="text"
|
|
value={vorgangToken}
|
|
/>
|
|
<div class="mt-5">
|
|
<BaseInputField
|
|
id="case-password"
|
|
name="case-password"
|
|
label="Zugangspasswort"
|
|
type="text"
|
|
value={form?.password}
|
|
error={form?.error?.message}
|
|
/>
|
|
</div>
|
|
<div class="flex justify-end pt-4">
|
|
<Button type="submit"><ArrowRight /></Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-10 px-3">
|
|
<Button on:click={() => (open = true)}><Login /></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Modal {open}>
|
|
<ModalTitle>Anmelden</ModalTitle>
|
|
<ModalContent class="flex justify-center">
|
|
<form action="?/login" method="POST">
|
|
<div>
|
|
<label for="user" class="text-sm font-medium leading-6 text-gray-900">Kennung</label>
|
|
<div class="mt-2">
|
|
<input
|
|
id="user"
|
|
name="user"
|
|
type="text"
|
|
autocomplete="email"
|
|
required
|
|
class="rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium leading-6 text-gray-900"
|
|
>Passwort</label
|
|
>
|
|
<div class="mt-2">
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
required
|
|
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<Button type="submit" class="mt-5">Anmelden</Button>
|
|
</div>
|
|
</form>
|
|
</ModalContent>
|
|
<ModalFooter><Button on:click={() => (open = false)}>Ok</Button></ModalFooter>
|
|
</Modal>
|