feat: initial Funktechnik Schubert website

components/RepairForm.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+
+type Errors = Partial<Record<"name" | "email" | "manufacturer" | "model" | "description" | "privacy", string>>;
+
+export default function RepairForm() {
+  const [errors, setErrors] = useState<Errors>({});
+  const [status, setStatus] = useState("");
+  const [pending, setPending] = useState(false);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setStatus("");
+    const form = new FormData(event.currentTarget);
+    const nextErrors: Errors = {};
+
+    if (!String(form.get("name") ?? "").trim()) nextErrors.name = "Bitte geben Sie Ihren Namen ein.";
+    if (!String(form.get("email") ?? "").includes("@")) nextErrors.email = "Bitte geben Sie eine gültige E-Mail-Adresse ein.";
+    if (!String(form.get("manufacturer") ?? "").trim()) nextErrors.manufacturer = "Bitte nennen Sie den Hersteller.";
+    if (!String(form.get("model") ?? "").trim()) nextErrors.model = "Bitte nennen Sie das Modell.";
+    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.";
+
+    setErrors(nextErrors);
+    if (Object.keys(nextErrors).length > 0) return;
+
+    setPending(true);
+    try {
+      const response = await fetch("/api/repair", {
+        method: "POST",
+        body: form,
+      });
+      const result = await response.json() as { message?: string };
+      if (!response.ok) throw new Error(result.message ?? "Anfrage konnte nicht gesendet werden.");
+      event.currentTarget.reset();
+      setStatus(result.message ?? "Ihre Reparaturanfrage wurde vorbereitet.");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "Anfrage konnte nicht gesendet werden.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <form 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} />
+        <Field label="Telefon" name="phone" />
+        <Field label="Hersteller" name="manufacturer" error={errors.manufacturer} />
+        <Field label="Modell" name="model" error={errors.model} />
+        <Field label="Seriennummer optional" name="serialNumber" />
+      </div>
+      <div className="field">
+        <label htmlFor="opened">Wurde das Gerät bereits geöffnet?</label>
+        <select id="opened" name="opened" defaultValue="unknown">
+          <option value="unknown">Bitte auswählen</option>
+          <option value="no">Nein</option>
+          <option value="yes">Ja</option>
+        </select>
+      </div>
+      <div className="field">
+        <label htmlFor="previousWork">Gibt es Vorarbeiten?</label>
+        <textarea id="previousWork" name="previousWork" placeholder="z. B. Bauteile getauscht, Abgleich versucht, Fremdwerkstatt" />
+      </div>
+      <div className="field">
+        <label htmlFor="description">Fehlerbeschreibung</label>
+        <textarea id="description" name="description" placeholder="Bitte Gerät, Fehlerbild und bisherige Beobachtungen beschreiben." />
+        {errors.description && <span className="error">{errors.description}</span>}
+      </div>
+      <p className="notice">Datei- und Bild-Upload ist für eine spätere Ausbaustufe vorbereitet. Bitte senden Sie Bilder aktuell erst nach Rückmeldung.</p>
+      <label className="checkbox">
+        <input type="checkbox" name="privacy" />
+        <span>Ich stimme zu, dass meine Angaben zur Bearbeitung der Reparaturanfrage verarbeitet werden.</span>
+      </label>
+      {errors.privacy && <span className="error">{errors.privacy}</span>}
+      {status && <p className="success">{status}</p>}
+      <button className="button" type="submit" disabled={pending}>{pending ? "Wird gesendet..." : "Reparatur anfragen"}</button>
+    </form>
+  );
+}
+
+function Field({ label, name, type = "text", error }: { label: string; name: string; type?: string; error?: string }) {
+  return (
+    <div className="field">
+      <label htmlFor={name}>{label}</label>
+      <input id={name} name={name} type={type} />
+      {error && <span className="error">{error}</span>}
+    </div>
+  );
+}