show invalid fields an messages on action error popup input error

src/pages/feedback.astro

@@ -30,6 +30,7 @@ import Input from '@components/input/Input.svelte';
   import { actions } from 'astro:actions';
   import { confirmPopupState } from '@components/popup/ConfirmPopup';
   import { popupState } from '@components/popup/Popup';
+  import { actionErrorPopup } from '../util/action';
 
   const form = document.getElementById('feedback-contact') as HTMLFormElement;
   const type = document.getElementById('type') as HTMLSelectElement;
@@ -74,17 +75,12 @@ import Input from '@components/input/Input.svelte';
 
   async function sendFeedback() {
     const { error } = await actions.feedback.addWebsiteFeedback({
-      type: 'website-feedback',
       content: content.value
     });
 
     if (error) {
-      popupState.set({
+      actionErrorPopup(error);
-        type: 'error',
+      return;
-        title: 'Fehler beim senden des Feedbacks',
-        message: error.message
-      });
-      throw error;
     }
 
     popupState.set({
@@ -96,18 +92,13 @@ import Input from '@components/input/Input.svelte';
 
   async function sendContact() {
     const { error } = await actions.feedback.addWebsiteContact({
-      type: 'website-contact',
       content: content.value,
       email: email.value
     });
 
     if (error) {
-      popupState.set({
+      actionErrorPopup(error);
-        type: 'error',
+      return;
-        title: 'Fehler beim senden der Kontaktanfrage',
-        message: error.message
-      });
-      throw error;
     }
 
     popupState.set({

src/util/action.ts

@@ -1,10 +1,35 @@
-import type { ActionError } from 'astro:actions';
+import { type ActionError, isInputError } from 'astro:actions';
 import { popupState } from '@components/popup/Popup.ts';
 
-export function actionErrorPopup<E extends Record<string, any>>(error: ActionError<E>) {
+export function actionErrorPopup<E extends Record<string, any>>(
+  error: ActionError<E>,
+  values?: { title?: string; message?: string }
+) {
+  let title = values?.title;
+  if (title == undefined) {
+    if (isInputError(error)) {
+      title = 'Fehler (ungültige Eingabe)';
+    } else {
+      title = `Fehler (${error.status})`;
+    }
+  }
+
+  let message = values?.message;
+  if (message == undefined) {
+    if (isInputError(error)) {
+      const messages = [];
+      for (const [name, msgs] of Object.entries(error.fields)) {
+        messages.push(`${name}: ${(msgs as string[]).join(', ')}`);
+      }
+      message = messages.join('\n');
+    } else {
+      message = error.message;
+    }
+  }
+
   popupState.set({
     type: 'error',
-    title: `Fehler (${error.status})`,
+    title: title,
-    message: error.message
+    message: message
   });
 }