From bb010952a8c4769721d00a9b0766fc8fae04e7aa Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Sun, 18 May 2025 18:26:20 +0200
Subject: [PATCH] show invalid fields an messages on action error popup input
 error

---
 src/pages/feedback.astro | 19 +++++--------------
 src/util/action.ts       | 33 +++++++++++++++++++++++++++++----
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/pages/feedback.astro b/src/pages/feedback.astro
index c01eb09..7c685c2 100644
--- a/src/pages/feedback.astro
+++ b/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({
-        type: 'error',
-        title: 'Fehler beim senden des Feedbacks',
-        message: error.message
-      });
-      throw error;
+      actionErrorPopup(error);
+      return;
     }
 
     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({
-        type: 'error',
-        title: 'Fehler beim senden der Kontaktanfrage',
-        message: error.message
-      });
-      throw error;
+      actionErrorPopup(error);
+      return;
     }
 
     popupState.set({
diff --git a/src/util/action.ts b/src/util/action.ts
index 21b698f..c997adc 100644
--- a/src/util/action.ts
+++ b/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})`,
-    message: error.message
+    title: title,
+    message: message
   });
 }