From fd0572939e96d1b07149c88d086a71ebd71754d0 Mon Sep 17 00:00:00 2001
From: Jared <jared.busch@polizei.niedersachsen.de>
Date: Thu, 12 Jun 2025 10:57:25 +0200
Subject: [PATCH] change login page frontend

---
 src/routes/anmeldung/+page.svelte | 128 +++++++++++++++++++-----------
 1 file changed, 83 insertions(+), 45 deletions(-)
diff --git a/src/routes/anmeldung/+page.svelte b/src/routes/anmeldung/+page.svelte
index be512ee..0e27aa9 100644
--- a/src/routes/anmeldung/+page.svelte
+++ b/src/routes/anmeldung/+page.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
-	import type { ActionData } from "./$types";
+	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 Login from '$lib/icons/Login.svelte';
+	import type { ActionData } from './$types';
 
 	export let form: ActionData;
 
 	let user = form?.user ?? '';
 
+	let open = false;
+	$: open = form?.success ?? false;
 </script>
 
-<!--
-  This example requires updating your template:
-
-  ```
-  <html class="h-full bg-white">
-  <body class="h-full">
-  ```
--->
 <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" />
@@ -27,44 +28,81 @@
 	<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="user" class="block 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>
-				<div class="flex items-center justify-between">
-					<label for="password" class="block text-sm font-medium leading-6 text-gray-900"
-						>Passwort</label
-					>
-				</div>
-				<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
+				<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>
+				</form>
+			</div>
+		</ModalContent>
+		<ModalFooter><Button on:click={() => (open = false)}>Ok</Button></ModalFooter>
+	</Modal>
 </div>
