refactor viewer-login page with error messages and validation

src/routes/anmeldung/+page.server.ts

@@ -1,18 +1,20 @@
 import { dev } from '$app/environment';
-import { loginUser, logoutUser } from '$lib/server/authService';
+import { error, fail, redirect } from '@sveltejs/kit';
-import { fail, redirect } from '@sveltejs/kit';
 import { ROUTE_NAMES } from '../index.js';
+import { vorgangPINValidation } from '$lib/server/vorgangService.js';
 
 export const actions = {
-	login: ({ request, cookies }) => loginUser({ request, cookies }),
+	default: async ({ request, cookies }) => {
-	logout: (event) => logoutUser(event),
-	getVorgangByToken: async ({ request, cookies }) => {
 		const data = await request.formData();
 		const vorgangToken = data.get('vorgang-token');
 		const vorgangPIN = data.get('vorgang-pin') as string;
 
-		if (!vorgangToken || !vorgangPIN) {
+		if (!vorgangPIN) {
-			return fail(400, { message: 'Token oder PIN fehlen' });
+			return fail(400, { message: 'Bitte einen PIN eingeben.'});
+		}
+
+		if (!vorgangPINValidation(vorgangToken, vorgangPIN)) {
+			return fail(400, { message: 'Falsche Zugangsdaten.'});
 		}
 
 		const COOKIE_NAME = `token-${vorgangToken}`;
@@ -26,3 +28,8 @@ export const actions = {
 		throw redirect(303, ROUTE_NAMES.VORGANG(vorgangToken));
 	}
 } as const;
+
+export const load: PageServerLoad = async ({ url }) => {
+	const vorgang = url.searchParams.get('vorgang');
+	if (!vorgang) error(404, "Not Found");
+};

src/routes/anmeldung/+page.svelte

@@ -9,6 +9,7 @@
 	const vorgangToken = page.url.searchParams.get('vorgang');
 </script>
 
+{#if vorgangToken}
 <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" />
@@ -20,8 +21,8 @@
 	<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">
-				{#if vorgangToken}
+
-					<form action={ROUTE_NAMES.ANMELDUNG_GET_VORGANG_BY_TOKEN} method="POST">
+					<form method="POST">
 						<input type="hidden" name="vorgang-token" value={vorgangToken} />
 						<div class="mt-5">
 							<BaseInputField
@@ -33,48 +34,17 @@
 								error={form?.error?.message}
 							/>
 						</div>
+						{#if form?.message}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{form.message}</p>
+						{/if}
+
 						<div class="flex justify-end pt-4">
 							<Button type="submit"><ArrowRight /></Button>
 						</div>
 					</form>
-				{:else}
-					<form action={ROUTE_NAMES.ANMELDUNG_LOGIN} method="POST">
-						<div>
-							<label for="user" class="text-sm font-medium leading-6 text-gray-900">Name</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>
-				{/if}
 			</div>
 		</div>
 	</div>
 </div>
+{/if}