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 Button from '$lib/components/Button.svelte';
 
-    import jsSHA from 'jssha'
+	import jsSHA from 'jssha';
 
 	const { data } = $props();
 
-    let userName = $state('')
+	let userName = $state('');
-    let userPassword = $state('')
+	let userPassword = $state('');
-    let userList: { userId: string; userName: string }[] = $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 URL = '/api/users';
-        const response = await fetch(URL);
 
+		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 == "") {
+		if (userName == '') {
-            alert("Der Benutzername darf nicht leer sein.")
+			alert('Der Benutzername darf nicht leer sein.');
 			return;
 		}
 
-        if (userPassword == "") {
+		if (userPassword == '') {
-            alert("Das Passwort darf nicht leer sein.")
+			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 = "";
+		userName = '';
-        userPassword = "";
+		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}`);
 		}
 	}