From 723ec0773df5aef9afd5e4d5674ff18b7a802e3a Mon Sep 17 00:00:00 2001
From: Chi Cong Tran <chi-cong.tran@polizei.niedersachsen.de>
Date: Tue, 19 Aug 2025 13:19:23 +0200
Subject: [PATCH] add error handling and formatting

---
 .../(angemeldet)/user-management/+page.svelte | 288 ++++++++++--------
 1 file changed, 154 insertions(+), 134 deletions(-)

diff --git a/src/routes/(angemeldet)/user-management/+page.svelte b/src/routes/(angemeldet)/user-management/+page.svelte
index 8bef7e4..957326c 100644
--- a/src/routes/(angemeldet)/user-management/+page.svelte
+++ b/src/routes/(angemeldet)/user-management/+page.svelte
@@ -1,174 +1,194 @@
 <script lang="ts">
-    import {onMount} from 'svelte';
-    import Button from "$lib/components/Button.svelte";
+	import { onMount } from 'svelte';
+	import Button from '$lib/components/Button.svelte';
 
-    import jsSHA from 'jssha'
+	import jsSHA from 'jssha';
 
-    const {data} = $props();
+	const { data } = $props();
 
-    let userName = $state('')
-    let userPassword = $state('')
-    let userList: { userId: string; userName: string }[] = $state([])
-    let addUserError = $state(false);
-    let addUserSuccess = $state(false);
-    const currentUser: string = data.user.id;
+	let userName = $state('');
+	let userPassword = $state('');
+	let userList: { userId: string; userName: string }[] = $state([]);
+	let addUserError = $state(false);
+	let addUserSuccess = $state(false);
+	const currentUser: string = data.user.id;
 
-    onMount(async () => {
-        userList = await getUsers();
-    })
+	onMount(async () => {
+		try {
+			userList = await getUsers();
+		} catch (error) {
+			console.log(`An error occured while retrieving users: ${error}`);
+		}
+	});
 
-    async function getUsers() {
-        const URL = "/api/users"
-        const response = await fetch(URL);
+	async function getUsers() {
+		const URL = '/api/users';
 
-        return await response.json();
-    }
+		try {
+			const response = await fetch(URL);
+			return await response.json();
+		} catch (error) {
+			console.log(`Error fetching users: ${error}`);
+			return null;
+		}
+	}
 
-    async function addUser() {
-        if (userName == "") {
-            alert("Der Benutzername darf nicht leer sein.")
-            return;
-        }
+	async function addUser() {
+		if (userName == '') {
+			alert('Der Benutzername darf nicht leer sein.');
+			return;
+		}
 
-        if (userPassword == "") {
-            alert("Das Passwort darf nicht leer sein.")
-            return;
-        }
+		if (userPassword == '') {
+			alert('Das Passwort darf nicht leer sein.');
+			return;
+		}
 
-        const URL = "/api/users";
-        const hashedUserPassword = new jsSHA('SHA-512', 'TEXT').update(userPassword).getHash('HEX');
-        const userData = {userName: userName, userPassword: hashedUserPassword}
+		const URL = '/api/users';
+		const hashedUserPassword = new jsSHA('SHA-512', 'TEXT').update(userPassword).getHash('HEX');
+		const userData = { userName: userName, userPassword: hashedUserPassword };
 
-        const response = await fetch(URL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
+		try {
+			const response = await fetch(URL, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(userData)
+			});
 
-        if (response.ok) {
-            userList = await getUsers();
-            addUserSuccess = true;
-            resetInput();
-        } else {
-            addUserError = true;
-        }
-    }
+			if (response.ok) {
+				const newUser = await response.json();
+				userList = [...userList, newUser];
+				addUserSuccess = true;
+				resetInput();
+			} else {
+				addUserError = true;
+			}
+		} catch (error) {
+			console.log(`Error creating user: ${error}`);
+			addUserError = true;
+		}
+	}
 
-    function resetInput() {
-        userName = "";
-        userPassword = "";
-        addUserError = false;
-        setInterval(() => {
-            addUserSuccess = false;
-        }, 5000);
-    }
+	function resetInput() {
+		userName = '';
+		userPassword = '';
+		addUserError = false;
+		setInterval(() => {
+			addUserSuccess = false;
+		}, 5000);
+	}
 
-    async function deleteUser(userId: string) {
-        const URL = `/api/users/${userId}`;
+	async function deleteUser(userId: string) {
+		const URL = `/api/users/${userId}`;
 
-        const response = await fetch(URL, {
-            method: 'DELETE',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        })
+		try {
+			const response = await fetch(URL, {
+				method: 'DELETE',
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
 
-        if (response.status == 204) {
-            userList = await getUsers();
-        } else {
-            alert("Nutzer konnte nicht gelöscht werden")
-        }
-    }
+			if (response.status == 204) {
+				userList = await getUsers();
+			} else {
+				alert('Nutzer konnte nicht gelöscht werden');
+			}
+
+		} catch (error) {
+			console.log(`Error deleting users: ${error}`);
+		}
+	}
 
 </script>
 
 <h1 class="flex justify-center text-3xl md:text-4xl font-bold text-gray-800 dark:text-white tracking-tight mb-4">
-    Benutzerverwaltung
+	Benutzerverwaltung
 </h1>
 
 <h1 class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
-    Benutzerliste
+	Benutzerliste
 </h1>
 
 <div class="w-1/4 mx-auto">
-    <table class="min-w-full border border-gray-300 rounded overflow-hidden">
-        <thead class="bg-gray-100 dark:bg-gray-700">
-        <tr>
-            <th class="text-left px-4 py-2">Benutzername</th>
-            <th class="text-center px-4 py-2">Entfernen</th>
-        </tr>
-        </thead>
-        <tbody>
-        {#each userList as userItem}
-            <tr class="border-t border-gray-200 dark:border-gray-600">
-                <td class="px-4 py-2 text-gray-800 dark:text-white">{userItem.userName}</td>
-                <td class="px-4 py-2 text-center">
-                    <button
-                            class="text-red-600 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-full p-1 transition"
-                            on:click={() => deleteUser(userItem.userId)}
-                            aria-label="Delete user"
-                    >
-                        {#if (userItem.userName != currentUser)}
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-                                 stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                      d="M6 18L18 6M6 6l12 12"/>
-                            </svg>
-                        {/if}
-                    </button>
-                </td>
-            </tr>
-        {/each}
-        </tbody>
-    </table>
+	<table class="min-w-full border border-gray-300 rounded overflow-hidden">
+		<thead class="bg-gray-100 dark:bg-gray-700">
+		<tr>
+			<th class="text-left px-4 py-2">Benutzername</th>
+			<th class="text-center px-4 py-2">Entfernen</th>
+		</tr>
+		</thead>
+		<tbody>
+		{#each userList as userItem}
+			<tr class="border-t border-gray-200 dark:border-gray-600">
+				<td class="px-4 py-2 text-gray-800 dark:text-white">{userItem.userName}</td>
+				<td class="px-4 py-2 text-center">
+					<button
+						class="text-red-600 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-full p-1 transition"
+						on:click={() => deleteUser(userItem.userId)}
+						aria-label="Delete user"
+					>
+						{#if (userItem.userName != currentUser)}
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+									 stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+											d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						{/if}
+					</button>
+				</td>
+			</tr>
+		{/each}
+		</tbody>
+	</table>
 </div>
 
 <h1 style="margin-top: 50px;"
-    class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
-    Neuer Nutzer
+		class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
+	Neuer Nutzer
 </h1>
 
 <div class="mx-auto flex justify-center">
-    <form>
-        <div class="form-group">
-            <label for="username">Benutzername</label>
-            <input bind:value={userName} type="text" id="username" placeholder="Namen eingeben"/>
-        </div>
+	<form>
+		<div class="form-group">
+			<label for="username">Benutzername</label>
+			<input bind:value={userName} type="text" id="username" placeholder="Namen eingeben" />
+		</div>
 
-        <div class="form-group">
-            <label for="password">Passwort</label>
-            <input bind:value={userPassword} type="password" id="password" placeholder="Passwort vergeben"/>
-        </div>
-    </form>
+		<div class="form-group">
+			<label for="password">Passwort</label>
+			<input bind:value={userPassword} type="password" id="password" placeholder="Passwort vergeben" />
+		</div>
+	</form>
 </div>
 
 <div class="mx-auto flex flex-col items-center space-y-4" style="margin-top: 20px;">
-    {#if addUserError}
-        <div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
-             role="alert">
-            <svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                 stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z"/>
-            </svg>
-            <span class="text-sm font-medium">Der Benutzer konnte nicht hinzugefügt werden.</span>
-        </div>
-    {/if}
-    {#if addUserSuccess}
-        <div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
-             role="alert">
-            <svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                 stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z"/>
-            </svg>
-            <span class="text-sm font-medium">Der Benutzer wurde hinzugefügt.</span>
-        </div>
-    {/if}
+	{#if addUserError}
+		<div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
+				 role="alert">
+			<svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+					 stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+							d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z" />
+			</svg>
+			<span class="text-sm font-medium">Der Benutzer konnte nicht hinzugefügt werden.</span>
+		</div>
+	{/if}
+	{#if addUserSuccess}
+		<div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
+				 role="alert">
+			<svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+					 stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+							d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z" />
+			</svg>
+			<span class="text-sm font-medium">Der Benutzer wurde hinzugefügt.</span>
+		</div>
+	{/if}
 
-    <Button on:click={addUser}>Benutzer hinzufügen</Button>
+	<Button on:click={addUser}>Benutzer hinzufügen</Button>
 </div>
 
 <style>