Added error messages

src/routes/login/register/+page.server.ts

@@ -1,5 +1,8 @@
+import { RegisterResponseCause } from "$lib/errors";
 import type { Actions } from "./$types";
 
+import { fail } from "@sveltejs/kit"
+
 export const actions = {
 	register: async ({ request, fetch }) => {
 			
@@ -10,7 +13,25 @@ export const actions = {
 			body: await request.formData()
 		})
 
-		console.log(result)
+		const result_body = await result.json()
+
+		if (!result.ok) {
+			if (!result_body.cause) {
+				return fail(500, { message: "Interner Fehler, versuche es erneut." })
+			}
+
+			switch (result_body.cause) {
+				case RegisterResponseCause.MalformedRequest:  return fail(400, { message: "Bitte versuche es erneut." })
+				case RegisterResponseCause.EmailLength:       return fail(400, { message: "Bitte gib eine Email ein." })
+				case RegisterResponseCause.EmailFormat:       return fail(400, { message: "Das Format der Email ist nicht gültig." })
+				case RegisterResponseCause.EmailDuplicate:    return fail(409, { message: "Email wird bereits verwendet." })
+				case RegisterResponseCause.DisplayNameLength: return fail(400, { message: "Bitt gib einen Display Namen ein" })
+				case RegisterResponseCause.PasswordLength:    return fail(400, { message: "Bitte gib ein Passwort ein." })
+				default:
+					return fail(500, { message: "Ein interner Fehler ist aufgetreten. Bitte versuche es erneut."})
+			}
+		}
+
 
 		return { message: "Erfolg" }
 	}

src/routes/login/register/+page.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	
+	import type { PageProps } from "./$types"
+
+	const { form }: PageProps = $props()
+
 </script>
 
 <form action="?/register" method="POST" id="form_register"></form>
@@ -8,6 +12,7 @@
 		
 	<div class="grid">
 		<h1>Login</h1>
+		<p class="error_msg">{form?.message}</p>
 		<label for="username">E-Mail: </label><input type="text" id="username" form="form_register" name="email" />
 		<label for="password">Passwort: </label><input type="password" id="password" form="form_register" name="password" />
 		<label for="display_name">Anzeigename: </label><input type="text" id="display_name" form="form_register" name="display_name" />
@@ -25,6 +30,8 @@
 		width: 100%;
 		height: 100%;
 
+		padding-top: 100px;
+
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
@@ -43,6 +50,11 @@
 		grid-column: 1 / span 2;
 	}
 	
+	.grid > p {
+		width: 100%;
+		grid-column: 1 / span 2;
+	}
+
 	.grid > button {
 		width: 50%;
 		margin-top: 10px;
@@ -50,4 +62,8 @@
 		grid-column: 2;
 	}
 
+	.error_msg {
+		color: red;
+	}
+
 </style>