add error handling and formatting

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

@@ -1,64 +1,79 @@
 <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 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 () => {
+		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);
+		const URL = '/api/users';
 
+		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.")
+		if (userName == '') {
+			alert('Der Benutzername darf nicht leer sein.');
 			return;
 		}
 
-        if (userPassword == "") {
-            alert("Das Passwort darf nicht leer sein.")
+		if (userPassword == '') {
+			alert('Das Passwort darf nicht leer sein.');
 			return;
 		}
 
-        const URL = "/api/users";
+		const URL = '/api/users';
 		const hashedUserPassword = new jsSHA('SHA-512', 'TEXT').update(userPassword).getHash('HEX');
-        const userData = {userName: userName, userPassword: hashedUserPassword}
+		const userData = { userName: userName, userPassword: hashedUserPassword };
 
+		try {
 			const response = await fetch(URL, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify(userData)
-        })
+			});
 
 			if (response.ok) {
-            userList = await getUsers();
+				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 = "";
+		userName = '';
+		userPassword = '';
 		addUserError = false;
 		setInterval(() => {
 			addUserSuccess = false;
@@ -68,17 +83,22 @@
 	async function deleteUser(userId: string) {
 		const URL = `/api/users/${userId}`;
 
+		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")
+				alert('Nutzer konnte nicht gelöscht werden');
+			}
+
+		} catch (error) {
+			console.log(`Error deleting users: ${error}`);
 		}
 	}
 
@@ -114,7 +134,7 @@
 							<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"/>
+											d="M6 18L18 6M6 6l12 12" />
 							</svg>
 						{/if}
 					</button>
@@ -134,12 +154,12 @@
 	<form>
 		<div class="form-group">
 			<label for="username">Benutzername</label>
-            <input bind:value={userName} type="text" id="username" placeholder="Namen eingeben"/>
+			<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"/>
+			<input bind:value={userPassword} type="password" id="password" placeholder="Passwort vergeben" />
 		</div>
 	</form>
 </div>
@@ -151,7 +171,7 @@
 			<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"/>
+							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>
@@ -162,7 +182,7 @@
 			<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"/>
+							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>