From c4c805083adf68e1a2ee1c7605aaf53eb7b22c38 Mon Sep 17 00:00:00 2001
From: "theis.gaedigk" <theis.gaedigk@icloud.com>
Date: Wed, 13 Aug 2025 22:08:54 +0200
Subject: [PATCH] feat: add maxLength validation to form inputs and improve
 saveRow feedback

---
 frontend/src/components/MainForm.tsx | 13 ++++++++++---
 frontend/src/utils/tableActions.ts   |  6 ++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/MainForm.tsx b/frontend/src/components/MainForm.tsx
index 46a74a4..930db09 100644
--- a/frontend/src/components/MainForm.tsx
+++ b/frontend/src/components/MainForm.tsx
@@ -32,6 +32,7 @@ const MainForm: React.FC = () => {
             id="losnummer"
             name="losnummer"
             placeholder="XXXX-XXXX-XXXX-XXXX"
+            maxLength={255}
             required
             className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none ring-0 transition focus:border-black/40 focus:ring-2 focus:ring-black/10"
           />
@@ -51,6 +52,7 @@ const MainForm: React.FC = () => {
               name="vorname"
               placeholder="Max"
               required
+              maxLength={100}
               className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
             />
           </div>
@@ -68,6 +70,7 @@ const MainForm: React.FC = () => {
               name="nachname"
               placeholder="Mustermann"
               required
+              maxLength={100}
               className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
             />
           </div>
@@ -86,20 +89,22 @@ const MainForm: React.FC = () => {
             name="adresse"
             placeholder="Musterstraße 1"
             required
+            maxLength={255}
             className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
           />
         </div>
 
         <div className="space-y-1">
           <label htmlFor="plz" className="text-sm font-medium text-zinc-800">
-            Postleitzahl + Ort:
+            Postleitzahl:
           </label>
           <input
             type="text"
             id="plz"
             name="plz"
-            placeholder="12345 Musterstadt"
+            placeholder="12345"
             required
+            maxLength={10}
             className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
           />
         </div>
@@ -114,6 +119,7 @@ const MainForm: React.FC = () => {
             name="email"
             placeholder="max@mustermann.de"
             required
+            maxLength={255}
             className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
           />
         </div>
@@ -125,7 +131,8 @@ const MainForm: React.FC = () => {
           Los registrieren
         </button>
         <p className="mt-1 text-xs text-zinc-500">
-          Wenn Sie die Daten eines bereits registrierten Loses bearbeiten möchten,{" "}
+          Wenn Sie die Daten eines bereits registrierten Loses bearbeiten
+          möchten,{" "}
           <a
             className="text-blue-600 underline"
             href="mailto:example@example.com"
diff --git a/frontend/src/utils/tableActions.ts b/frontend/src/utils/tableActions.ts
index e92fcf1..5de0b55 100644
--- a/frontend/src/utils/tableActions.ts
+++ b/frontend/src/utils/tableActions.ts
@@ -54,5 +54,11 @@ export const saveRow = (data: any) => {
     method: "PUT",
     headers: headers,
     body: JSON.stringify(data),
+  }).then((response) => {
+    if (response.ok) {
+      myToast("Eintrag erfolgreich gespeichert.", "success");
+    } else {
+      myToast("Fehler beim Speichern des Eintrags.", "error");
+    }
   });
 };