fix(forms): repair public form validation and reset

app/api/contact/route.ts

@@ -13,7 +13,7 @@ export async function POST(request: Request) {
   const subject = text(form.get("subject"));
   const message = text(form.get("message"));
 
-  if (!name || !email.includes("@") || !subject || message.length < 10 || form.get("privacy") !== "on") {
+  if (!name || !email.includes("@") || !subject || message.length < 10 || form.get("privacyAccepted") !== "on") {
     return NextResponse.json({ message: "Bitte füllen Sie alle Pflichtfelder aus." }, { status: 400 });
   }
 

app/api/repair/route.ts

@@ -14,9 +14,9 @@ export async function POST(request: Request) {
   const model = form.get("model");
   const deviceType = form.get("deviceType");
   const description = form.get("description");
-  const privacy = form.get("privacy");
+  const privacyAccepted = form.get("privacyAccepted");
 
-  if (!required(name) || !required(email) || !required(manufacturer) || !required(model) || !required(deviceType) || !required(description) || privacy !== "on") {
+  if (!required(name) || !required(email) || !required(manufacturer) || !required(model) || !required(deviceType) || !required(description) || privacyAccepted !== "on") {
     return NextResponse.json({ message: "Bitte füllen Sie alle Pflichtfelder aus." }, { status: 400 });
   }
 

components/ContactForm.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useRef, useState, type FormEvent } from "react";
 
 export default function ContactForm() {
+  const formRef = useRef<HTMLFormElement>(null);
   const [message, setMessage] = useState("");
   const [error, setError] = useState("");
   const [pending, setPending] = useState(false);
@@ -16,8 +17,9 @@ export default function ContactForm() {
     const email = String(form.get("email") ?? "").trim();
     const subject = String(form.get("subject") ?? "").trim();
     const text = String(form.get("message") ?? "").trim();
+    const privacyAccepted = form.get("privacyAccepted") === "on";
 
-    if (!name || !email.includes("@") || !subject || text.length < 10 || form.get("privacy") !== "on") {
+    if (!name || !email.includes("@") || !subject || text.length < 10 || !privacyAccepted) {
       setError("Bitte füllen Sie alle Pflichtfelder aus und bestätigen Sie die Datenschutz-Hinweise.");
       return;
     }
@@ -27,17 +29,17 @@ export default function ContactForm() {
       const response = await fetch("/api/contact", { method: "POST", body: form });
       const result = await response.json() as { message?: string };
       if (!response.ok) throw new Error(result.message ?? "Nachricht konnte nicht gesendet werden.");
-      event.currentTarget.reset();
+      formRef.current?.reset();
       setMessage(result.message ?? "Ihre Nachricht wurde vorbereitet.");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Nachricht konnte nicht gesendet werden.");
+      setError(err instanceof Error ? err.message : "Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es später erneut.");
     } finally {
       setPending(false);
     }
   }
 
   return (
-    <form className="form" onSubmit={submit} noValidate>
+    <form ref={formRef} className="form" onSubmit={submit} noValidate>
       <div className="field">
         <label htmlFor="name">Name</label>
         <input id="name" name="name" />
@@ -59,7 +61,7 @@ export default function ContactForm() {
         <textarea id="message" name="message" />
       </div>
       <label className="checkbox">
-        <input type="checkbox" name="privacy" />
+        <input type="checkbox" name="privacyAccepted" />
         <span>Ich stimme zu, dass meine Angaben zur Bearbeitung der Kontaktanfrage verarbeitet werden.</span>
       </label>
       {error && <p className="error">{error}</p>}

components/RepairForm.tsx

@@ -1,18 +1,21 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useRef, useState, type FormEvent } from "react";
 
-type ErrorField = "name" | "email" | "manufacturer" | "model" | "deviceType" | "description" | "privacy";
+type ErrorField = "name" | "email" | "manufacturer" | "model" | "deviceType" | "description" | "privacyAccepted";
 type Errors = Partial<Record<ErrorField, string>>;
 
 export default function RepairForm() {
+  const formRef = useRef<HTMLFormElement>(null);
   const [errors, setErrors] = useState<Errors>({});
   const [status, setStatus] = useState("");
+  const [submitError, setSubmitError] = useState("");
   const [pending, setPending] = useState(false);
 
   async function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setStatus("");
+    setSubmitError("");
     const form = new FormData(event.currentTarget);
     const nextErrors: Errors = {};
 
@@ -22,7 +25,7 @@ export default function RepairForm() {
     if (!String(form.get("model") ?? "").trim()) nextErrors.model = "Bitte nennen Sie das Modell.";
     if (!String(form.get("deviceType") ?? "").trim()) nextErrors.deviceType = "Bitte wählen Sie die Geräteart aus.";
     if (String(form.get("description") ?? "").trim().length < 20) nextErrors.description = "Bitte beschreiben Sie den Fehler mit mindestens 20 Zeichen.";
-    if (form.get("privacy") !== "on") nextErrors.privacy = "Bitte stimmen Sie der Verarbeitung Ihrer Angaben zu.";
+    if (form.get("privacyAccepted") !== "on") nextErrors.privacyAccepted = "Bitte stimmen Sie der Verarbeitung Ihrer Angaben zu.";
 
     setErrors(nextErrors);
     if (Object.keys(nextErrors).length > 0) return;
@@ -35,17 +38,18 @@ export default function RepairForm() {
       });
       const result = await response.json() as { message?: string };
       if (!response.ok) throw new Error(result.message ?? "Anfrage konnte nicht gesendet werden.");
-      event.currentTarget.reset();
+      formRef.current?.reset();
+      setErrors({});
       setStatus(result.message ?? "Ihre Reparaturanfrage wurde vorbereitet.");
     } catch (error) {
-      setStatus(error instanceof Error ? error.message : "Anfrage konnte nicht gesendet werden.");
+      setSubmitError(error instanceof Error ? error.message : "Anfrage konnte nicht gesendet werden. Bitte versuchen Sie es später erneut.");
     } finally {
       setPending(false);
     }
   }
 
   return (
-    <form className="form" onSubmit={submit} noValidate>
+    <form ref={formRef} className="form" onSubmit={submit} noValidate>
       <div className="grid two">
         <Field label="Name" name="name" error={errors.name} />
         <Field label="E-Mail" name="email" type="email" error={errors.email} />
@@ -90,10 +94,11 @@ export default function RepairForm() {
       </div>
       <p className="notice">Fotos vom Gerät, Typenschild oder Innenleben können später nach Rückmeldung ergänzt werden. Bitte senden Sie aktuell noch keine Dateien unaufgefordert.</p>
       <label className="checkbox">
-        <input type="checkbox" name="privacy" />
+        <input type="checkbox" name="privacyAccepted" />
         <span>Ich stimme zu, dass meine Angaben zur Bearbeitung der Reparaturanfrage verarbeitet werden.</span>
       </label>
-      {errors.privacy && <span className="error">{errors.privacy}</span>}
+      {errors.privacyAccepted && <span className="error">{errors.privacyAccepted}</span>}
+      {submitError && <p className="error">{submitError}</p>}
       {status && <p className="success">{status}</p>}
       <button className="button" type="submit" disabled={pending}>{pending ? "Wird gesendet..." : "Reparatur anfragen"}</button>
     </form>