windwiderstand/src/lib/components/internal/ContactFormComponent.svelte

<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { env as publicEnv } from "$env/dynamic/public";
  import Button from "$lib/ui/Button.svelte";
  import TextInput from "$lib/ui/TextInput.svelte";
  import Textarea from "$lib/ui/Textarea.svelte";
  import Checkbox from "$lib/ui/Checkbox.svelte";
  import { useTranslate, T } from "$lib/translations";
  import {
    LIMITS,
    validateContact,
    type ContactErrors,
    type ContactFields,
  } from "./contact-form-validation";

  type FormState = "idle" | "pending" | "success" | "error";

  const t = useTranslate();

  const TURNSTILE_SITE_KEY = publicEnv.PUBLIC_TURNSTILE_SITE_KEY ?? "";
  const TURNSTILE_ENABLED = TURNSTILE_SITE_KEY !== "";

  let name = $state("");
  let email = $state("");
  let subject = $state("");
  let message = $state("");
  let consent = $state(false);

  // Honeypots — three with realistic names. Real users never see them.
  let honeypot = $state("");
  let website = $state("");
  let company = $state("");

  const pageLoadedAt = Date.now();

  let formState = $state<FormState>("idle");
  let serverError = $state("");
  let submitAttempted = $state(false);

  let turnstileToken = $state("");
  let turnstileEl: HTMLDivElement | null = null;
  let turnstileWidgetId: string | null = null;

  const fields = $derived<ContactFields>({ name, email, subject, message, consent });
  const errors = $derived<ContactErrors>(validateContact(fields));
  const isValid = $derived(Object.keys(errors).length === 0);

  function showError(field: keyof ContactFields): string {
    if (!submitAttempted) return "";
    const e = errors[field];
    return e ? t(e.key, e.params) : "";
  }

  const messageRemaining = $derived(LIMITS.MESSAGE_MAX - message.length);

  type TurnstileAPI = {
    render: (
      el: HTMLElement,
      opts: {
        sitekey: string;
        theme?: "light" | "dark" | "auto";
        size?: "normal" | "compact" | "flexible";
        callback?: (token: string) => void;
        "expired-callback"?: () => void;
        "error-callback"?: () => void;
      },
    ) => string;
    reset: (id?: string) => void;
    remove: (id: string) => void;
  };

  function getTurnstile(): TurnstileAPI | undefined {
    return (window as unknown as { turnstile?: TurnstileAPI }).turnstile;
  }

  function renderTurnstile() {
    if (!TURNSTILE_ENABLED || !turnstileEl) return;
    const ts = getTurnstile();
    if (!ts) return;
    if (turnstileWidgetId !== null) return;
    turnstileWidgetId = ts.render(turnstileEl, {
      sitekey: TURNSTILE_SITE_KEY,
      theme: "light",
      size: "flexible",
      callback: (token) => {
        turnstileToken = token;
      },
      "expired-callback": () => {
        turnstileToken = "";
      },
      "error-callback": () => {
        turnstileToken = "";
      },
    });
  }

  function loadTurnstileScript() {
    if (!TURNSTILE_ENABLED) return;
    if (document.querySelector("script[data-turnstile]")) {
      renderTurnstile();
      return;
    }
    const s = document.createElement("script");
    s.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
    s.async = true;
    s.defer = true;
    s.dataset.turnstile = "1";
    s.onload = renderTurnstile;
    document.head.appendChild(s);
  }

  onMount(loadTurnstileScript);
  onDestroy(() => {
    if (turnstileWidgetId !== null) {
      getTurnstile()?.remove(turnstileWidgetId);
      turnstileWidgetId = null;
    }
  });
  const messageHelp = $derived(
    messageRemaining >= 0
      ? t(T.contact_message_remaining, { n: messageRemaining })
      : t(T.contact_message_overflow, { n: -messageRemaining }),
  );

  async function handleSubmit(e: SubmitEvent) {
    e.preventDefault();
    submitAttempted = true;
    if (formState === "pending") return;
    if (!isValid) {
      const first = Object.keys(errors)[0];
      const el = document.querySelector<HTMLElement>(`[data-field="${first}"]`);
      el?.focus();
      return;
    }
    if (TURNSTILE_ENABLED && !turnstileToken) {
      serverError = t(T.contact_captcha_pending);
      formState = "error";
      return;
    }

    formState = "pending";
    serverError = "";

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name,
          email,
          subject,
          message,
          consent,
          _honeypot: honeypot,
          website,
          company,
          _client_age_ms: Date.now() - pageLoadedAt,
          cf_turnstile_token: turnstileToken,
        }),
      });

      if (res.ok) {
        formState = "success";
        return;
      }

      const body = await res.json().catch(() => ({}));
      if (res.status === 422) {
        serverError = t(T.contact_server_error_validation);
      } else if (res.status === 429) {
        serverError = t(T.contact_server_error_throttle);
      } else if (res.status === 403) {
        serverError = body?.error === "captcha"
          ? t(T.contact_server_error_captcha)
          : t(T.contact_server_error_blocked);
      } else {
        serverError = body?.error || t(T.contact_server_error_generic);
      }
      formState = "error";
      if (TURNSTILE_ENABLED) {
        turnstileToken = "";
        if (turnstileWidgetId !== null) getTurnstile()?.reset(turnstileWidgetId);
      }
    } catch {
      serverError = t(T.contact_server_error_network);
      formState = "error";
      if (TURNSTILE_ENABLED) {
        turnstileToken = "";
        if (turnstileWidgetId !== null) getTurnstile()?.reset(turnstileWidgetId);
      }
    }
  }
</script>

{#if formState === "success"}
  <div class="rounded-sm border border-wald-300 bg-wald-50 px-4 py-5 text-center shadow-sm">
    <p class="text-base font-semibold text-wald-700">{t(T.contact_success_title)}</p>
    <p class="mt-1 text-sm text-stein-600">{t(T.contact_success_body)}</p>
  </div>
{:else}
  <form
    onsubmit={handleSubmit}
    novalidate
    class="space-y-3"
    aria-busy={formState === "pending"}
  >
    <!-- Honeypots: visually hidden, off the keyboard, off the a11y tree -->
    <div aria-hidden="true" class="pointer-events-none absolute left-[-9999px] top-auto h-px w-px overflow-hidden opacity-0">
      <label for="contact-hp-1">leer lassen</label>
      <input id="contact-hp-1" name="_honeypot" type="text" tabindex="-1" autocomplete="off" bind:value={honeypot} />
      <label for="contact-hp-2">Website</label>
      <input id="contact-hp-2" name="website" type="url" tabindex="-1" autocomplete="off" bind:value={website} />
      <label for="contact-hp-3">Firma</label>
      <input id="contact-hp-3" name="company" type="text" tabindex="-1" autocomplete="off" bind:value={company} />
    </div>

    <div data-field="name">
      <TextInput
        size="sm"
        name="name"
        label={t(T.contact_label_name)}
        placeholder={t(T.contact_placeholder_name)}
        required
        bind:value={name}
        error={showError("name")}
      />
    </div>

    <div data-field="email">
      <TextInput
        size="sm"
        name="email"
        type="email"
        label={t(T.contact_label_email)}
        placeholder={t(T.contact_placeholder_email)}
        required
        bind:value={email}
        error={showError("email")}
      />
    </div>

    <div data-field="subject">
      <TextInput
        size="sm"
        name="subject"
        label={t(T.contact_label_subject)}
        placeholder={t(T.contact_placeholder_subject)}
        bind:value={subject}
        error={showError("subject")}
      />
    </div>

    <div data-field="message">
      <Textarea
        size="sm"
        name="message"
        label={t(T.contact_label_message)}
        placeholder={t(T.contact_placeholder_message)}
        required
        rows={5}
        bind:value={message}
        error={showError("message")}
        helpText={messageHelp}
      />
    </div>

    <div data-field="consent" class="pt-1">
      <Checkbox
        size="sm"
        name="consent"
        bind:checked={consent}
        label={t(T.contact_label_consent)}
      />
      {#if showError("consent")}
        <p class="mt-1 text-[0.7rem] text-error" role="alert">{showError("consent")}</p>
      {/if}
      <p class="mt-1 text-[0.7rem] leading-snug text-stein-500">{t(T.contact_privacy_note)}</p>
    </div>

    {#if TURNSTILE_ENABLED}
      <div bind:this={turnstileEl} class="pt-1"></div>
    {/if}

    {#if serverError}
      <div class="rounded-sm border border-error bg-error-subtle px-3 py-2 text-sm text-error shadow-sm" role="alert">
        {serverError}
      </div>
    {/if}

    <div class="flex items-center gap-3 pt-2">
      <Button
        type="submit"
        variant="primary"
        size="sm"
        loading={formState === "pending"}
        disabled={!isValid && submitAttempted}
        label={formState === "pending" ? t(T.contact_submitting) : t(T.contact_submit)}
      />
      {#if !isValid && submitAttempted && !serverError}
        <span class="text-xs text-error">{t(T.contact_fix_errors)}</span>
      {/if}
    </div>
  </form>
{/if}