src/lib/server/authService.ts

@@ -26,5 +26,5 @@ export const loginUser = async ({ request, cookies }: { request: Request; cookie
 export const logoutUser = async (event: RequestEvent) => {
 	event.cookies.delete(COOKIE_NAME, { path: ROUTE_NAMES.ROOT });
 	event.locals.user = null;
-	return { success: true };
+	return redirect(303, ROUTE_NAMES.ROOT);
 };

src/routes/(angemeldet)/+layout.server.ts

@@ -4,9 +4,9 @@ import type { PageServerLoad } from '../anmeldung/$types';
 import { ROUTE_NAMES } from '..';
 
 export const load: PageServerLoad = (event: ServerLoadEvent) => {
-	if (!event.locals.user && event.url.pathname !== ROUTE_NAMES.ANMELDUNG)
+	if (event.locals.user) {
-		throw redirect(303, ROUTE_NAMES.ANMELDUNG);
+		return {
-	return {
+			user: event.locals.user
-		user: event.locals.user
+		};
-	};
+	}
 };

src/routes/(angemeldet)/+layout.svelte

@@ -5,6 +5,8 @@
 	export let data;
 </script>
 
+{#if data.user?.admin}
+
 <div class="h-screen v-screen flex flex-col">
 	<div class="flex flex-col h-full">
 		<Header {data}/>
@@ -16,3 +18,10 @@
 
 	</div>
 </div>
+
+{:else}
+
+<div class="h-screen bg-white"><slot /></div>
+
+
+{/if}

src/routes/(angemeldet)/+page.server.ts

@@ -0,0 +1,5 @@
+import { loginUser } from '$lib/server/authService';
+
+export const actions = {
+	default: ({ request, cookies }) => loginUser({ request, cookies }),
+} as const;

src/routes/(angemeldet)/+page.svelte

@@ -2,18 +2,21 @@
 	import AddProcess from '$lib/icons/Add-Process.svelte';
 	import FileRect from '$lib/icons/File-rect.svelte';
 	import ListIcon from '$lib/icons/List-icon.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import ArrowRight from '$lib/icons/Arrow-right.svelte';
 
 	import { ROUTE_NAMES } from '../index.js';
 
 	export let data;
+	export let form;
 	export let outline = true;
 </script>
 
+{#if data.user?.admin}
 <div
 	class=" inset-x-0 top-0 -z-10 h-full flex items-center justify-center bg-white shadow-lg ring-1 ring-gray-900/5"
 >
 	<div class="mx-auto flex justify-center max-w-7xl py-10 px-8 w-full">
-		{#if data.user.admin}
 			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
 				<div
 					class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
@@ -28,8 +31,6 @@
 					Verschaffe Dir einen Überblick über alle gespeicherten Tatorte.
 				</p>
 			</div>
-		{/if}
-		{#if data.user.admin}
 			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
 				<div
 					class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
@@ -42,7 +43,6 @@
 				</a>
 				<p class="mt-1 text-gray-600">Fügen Sie einem Tatort Bilder hinzu.</p>
 			</div>
-		{/if}
 		<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
 			<div
 				class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
@@ -58,5 +58,64 @@
 	</div>
 </div>
 
+{:else}
+
+<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 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>
+						{#if form?.incorrect}
+						Wrong credentials
+						{/if}
+						<div class="flex justify-end">
+							<Button type="submit" class="mt-5">Anmelden</Button>
+						</div>
+					</form>
+			</div>
+		</div>
+	</div>
+</div>
+
+{/if}
+
 <style>
 </style>
+

tests/views/Layout.test.ts

@@ -11,13 +11,8 @@ describe('+layout.server load(): Teste korrekte URL', () => {
 			},
 			url: new URL(`https://example.com/not-anmeldung`)
 		};
-		try {
+		const res = load(mockEvent);
-			load(mockEvent);
+		expect(res).toBe(undefined);
-			throw new Error('Expected load() to throw');
-		} catch (err) {
-			expect(err.status).toBe(303);
-			expect(err.location).toBe(ROUTE_NAMES.ANMELDUNG);
-		}
 	});
 });