Merge pull request 'f092_ViewAuth-von-User-vereinfachen' (#37) from f092_ViewAuth-von-User-vereinfachen into development

Reviewed-on: #37

src/lib/components/Header.svelte

@@ -21,7 +21,7 @@
 			<h1 class="text-3xl text-slate-400 font-bold">Tatort</h1>
 			<div class="lg:flex lg:justify-end w-48">
 				{#if data.user}
-					<form method="POST" action="{ROUTE_NAMES.ANMELDUNG_LOGOUT}">
+					<form method="POST" action="{ROUTE_NAMES.LOGOUT}">
 						<input type="hidden" />
 						<button type="submit" class="text-sm font-semibold leading-6 text-gray-900"
 							><span

src/lib/server/authService.ts

@@ -12,7 +12,8 @@ export const loginUser = async ({ request, cookies }: { request: Request; cookie
 
 	const token = authenticate(user, password);
 
-	if (!token) return fail(400, { user, incorrect: true });
+	if (!token) return fail(400, { user, incorrect: true,
+								message: "Ungültige Zugangsdaten" });
 
 	cookies.set(COOKIE_NAME, token, {
 		path: ROUTE_NAMES.ROOT,
@@ -26,5 +27,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

@@ -1,12 +1,12 @@
-import { redirect, type ServerLoadEvent } from '@sveltejs/kit';
+import { type ServerLoadEvent } from '@sveltejs/kit';
 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)
-		throw redirect(303, ROUTE_NAMES.ANMELDUNG);
-	return {
-		user: event.locals.user
-	};
+	if (event.locals.user) {
+		return {
+			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,6 @@
+import { loginUser, logoutUser } from '$lib/server/authService';
+
+export const actions = {
+	login: ({ request, cookies }) => loginUser({ request, cookies }),
+	logout: (event) => logoutUser(event),
+} 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 action="{ROUTE_NAMES.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>
+						{#if form?.incorrect}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{form.message}</p>
+						{/if}
+						<div class="flex justify-end">
+							<Button type="submit" class="mt-5">Anmelden</Button>
+						</div>
+					</form>
+			</div>
+		</div>
+	</div>
+</div>
+
+{/if}
+
 <style>
 </style>
+

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

@@ -1,7 +1,12 @@
 import { getVorgaenge } from '$lib/server/vorgangService';
 import type { PageServerLoad } from '../../(token-based)/view/$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async (event) => {
+	if (!event.locals.user) {
+		error(404, 'Not Found')
+	}
 
-export const load: PageServerLoad = async () => {
 	const vorgangList = getVorgaenge();
 
 	return {

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

@@ -1,6 +1,6 @@
 import { Readable } from 'stream';
 import { BUCKET, client } from '$lib/minio';
-import { fail } from '@sveltejs/kit';
+import { fail, error } from '@sveltejs/kit';
 import { v4 as uuidv4 } from 'uuid';
 
 import { db } from '$lib/server/dbService';
@@ -123,3 +123,10 @@ export const actions = {
 		return { etag, error };
 	}
 };
+
+
+export const load: PageServerLoad = async (event) => {
+	if (!event.locals.user) {
+		error(404, 'Not found')
+	}
+};

src/routes/(angemeldet)/user-management/+page.server.ts

@@ -0,0 +1,8 @@
+import type { PageServerLoad } from '../../(token-based)/view/$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async (event) => {
+	if (!event.locals.user) {
+		error(404, 'Not Found')
+	}
+};

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

@@ -1,19 +1,23 @@
 import { dev } from '$app/environment';
-import { loginUser, logoutUser } from '$lib/server/authService';
-import { redirect } from '@sveltejs/kit';
+import { error, 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 }),
-	logout: (event) => logoutUser(event),
-	getVorgangByToken: async ({ request, cookies }) => {
+	default: async ({ request, cookies }) => {
 		const data = await request.formData();
 		const vorgangToken = data.get('vorgang-token');
-		const vorgangPIN = data.get('vorgang-pin');
+		const vorgangPIN = data.get('vorgang-pin') as string;
 
-		if (!vorgangToken || !vorgangPIN) return;
+		if (!vorgangPIN) {
+			return fail(400, { message: 'Bitte einen PIN eingeben.'});
+		}
 
-		const COOKIE_NAME = `token-${vorgangToken}`
+		if (!vorgangPINValidation(vorgangToken, vorgangPIN)) {
+			return fail(400, { message: 'Falsche Zugangsdaten.'});
+		}
+
+		const COOKIE_NAME = `token-${vorgangToken}`;
 		cookies.set(COOKIE_NAME, vorgangPIN, {
 			path: '/',
 			httpOnly: true,
@@ -24,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

@@ -1,22 +1,15 @@
 <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';
 	import { ROUTE_NAMES } from '../index.js';
 	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" />
@@ -28,73 +21,30 @@
 	<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="{ROUTE_NAMES.ANMELDUNG_GET_VORGANG_BY_TOKEN}" method="POST">
-					<BaseInputField
-						id="vorgang-token"
-						name="vorgang-token"
-						label="Vorgangskennung"
-						type="text"
-						value={vorgangToken}
-					/>
-					<div class="mt-5">
-						<BaseInputField
-							id="vorgang-pin"
-							name="vorgang-pin"
-							label="Zugangs-PIN"
-							type="text"
-							value={form?.vorgangPIN}
-							error={form?.error?.message}
-						/>
-					</div>
-					<div class="flex justify-end pt-4">
-						<Button type="submit"><ArrowRight /></Button>
-					</div>
-				</form>
+
+					<form method="POST">
+						<input type="hidden" name="vorgang-token" value={vorgangToken} />
+						<div class="mt-5">
+							<BaseInputField
+								id="vorgang-pin"
+								name="vorgang-pin"
+								label="Zugangs-PIN"
+								type="text"
+								value={form?.vorgangPIN}
+								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>
+
 			</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="{ROUTE_NAMES.ANMELDUNG_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>
+{/if}

src/routes/index.ts

@@ -16,8 +16,8 @@ export const ROUTE_NAMES = {
 
 	// Anmeldung: actions
 	ANMELDUNG: '/anmeldung',
-	ANMELDUNG_LOGIN: '/anmeldung?/login',
-	ANMELDUNG_LOGOUT: '/anmeldung?/logout',
+	LOGIN: '/?/login',
+	LOGOUT: '/?/logout',
 	ANMELDUNG_GET_VORGANG_BY_TOKEN: '/anmeldung?/getVorgangByToken',
 	ANMELDUNG_VORGANG_PARAM: (vorgangToken: string) => `/anmeldung?vorgang=${vorgangToken}`
 };