innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor login page, change routes to token-based, add service classes

Browse Source
This commit is contained in:
Jared
2025-06-17 16:19:22 +02:00
parent 6d3e6ad047
commit 34f8fd5490
36 changed files with 405 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/routes/anmeldung/+page.svelte
View File

@@ -1,19 +1,16 @@
<script lang="ts">
import Button from '$lib/components/ui/Button.svelte';
import Modal from '$lib/components/ui/Modal/Modal.svelte';
import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
import Exclamation from '$lib/icons/Exclamation.svelte';
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';
import type { ActionData } from './$types';
export let form: ActionData;
export let form;
let user = form?.user ?? '';
let open = false;
$: open = form?.success ?? false;
export let open = false;
</script>
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
@@ -21,88 +18,75 @@
<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">
Anmeldung zum 3D Tatort
Willkommen beim 3D Tatort
</h2>
</div>
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form class="space-y-6" action="?/login" method="POST">
<div>
<label for="caseNumber" class="block text-sm font-medium leading-6 text-gray-900"
><span class="flex"
>{#if form?.error?.caseNumber}
<span class="inline-block mr-1"><Exclamation /></span>
{/if} Vorgangs-Nr.</span
></label
>
<div class="mt-2">
<div
class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
>
<input
value={form?.caseNumber ?? ''}
type="text"
name="caseNumber"
id="caseNumber"
class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 text-sm leading-6"
/>
</div>
</div>
{#if form?.error?.caseNumber}
<p class="block text-sm leading-6 text-red-900 mt-2">{form.error.caseNumber}</p>
{/if}
</div>
</form>
<div class="flex justify-end pt-4">
<Button on:click={() => (open = true)}><Login /></Button>
</div>
</div>
<Modal {open}>
<ModalTitle>Anmelden</ModalTitle>
<ModalContent>
<div class="content-center">
<form action="">
<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="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>
<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>
<button
type="submit"
class="mt-10 flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Anmelden</button
>
<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="?/getVorgang" method="POST">
<BaseInputField
id="caseNumber"
name="caseNumber"
label="Vorgangs-Nr."
type="text"
value={form?.caseNumber}
error={form?.error?.message}
/>
<div class="flex justify-end pt-4">
<Button type="submit"><ArrowRight /></Button>
</div>
</form>
</div>
</ModalContent>
<ModalFooter><Button on:click={() => (open = false)}>Ok</Button></ModalFooter>
</Modal>
</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>