feat(newsletter): newsletter signup as internal component

Wire a newsletter signup form into the CMS internal-component pattern
(form-newsletter). Posts to /api/newsletter which subscribes to listmonk
(double opt-in) and mirrors a best-effort backup record to the RustyCMS
forms plugin. Reuses the contact-form anti-spam stack: Cloudflare
Turnstile, honeypots, client-age check, origin validation.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/lib/block-types.ts

@@ -469,7 +469,7 @@ export type CalendarBlockData = Omit<
 };
 
 /** Internal component block (_type: "internal_component"). */
-export type InternalComponentId = "form-contact" | "form-mitmachen";
+export type InternalComponentId = "form-contact" | "form-mitmachen" | "form-newsletter";
 
 export interface InternalComponentBlockData {
   _type?: "internal_component";

src/lib/components/blocks/InternalComponentBlock.svelte

@@ -3,6 +3,7 @@
   import type { InternalComponentBlockData } from "$lib/block-types";
   import ContactFormComponent from "$lib/components/internal/ContactFormComponent.svelte";
   import MitmachenFormComponent from "$lib/components/internal/MitmachenFormComponent.svelte";
+  import NewsletterFormComponent from "$lib/components/internal/NewsletterFormComponent.svelte";
   import FormCard from "$lib/components/internal/FormCard.svelte";
 
   let { block }: { block: InternalComponentBlockData } = $props();
@@ -20,6 +21,10 @@
     <FormCard>
       <MitmachenFormComponent />
     </FormCard>
+  {:else if component === "form-newsletter"}
+    <FormCard>
+      <NewsletterFormComponent />
+    </FormCard>
   {:else}
     <p class="text-sm text-stein-500">Unbekannte interne Komponente: <code>{component}</code></p>
   {/if}

src/lib/components/internal/NewsletterFormComponent.svelte

@@ -0,0 +1,265 @@
+<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 Checkbox from "$lib/ui/Checkbox.svelte";
+  import { useTranslate, T } from "$lib/translations";
+  import {
+    validateNewsletter,
+    type NewsletterErrors,
+    type NewsletterFields,
+  } from "./newsletter-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 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<NewsletterFields>({ name, email, consent });
+  const errors = $derived<NewsletterErrors>(validateNewsletter(fields));
+  const isValid = $derived(Object.keys(errors).length === 0);
+
+  function showError(field: keyof NewsletterFields): string {
+    if (!submitAttempted) return "";
+    const e = errors[field];
+    return e ? t(e.key, e.params) : "";
+  }
+
+  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;
+    }
+  });
+
+  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/newsletter", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name,
+          email,
+          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.newsletter_success_title)}</p>
+    <p class="mt-1 text-sm text-stein-600">{t(T.newsletter_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="newsletter-hp-1">leer lassen</label>
+      <input id="newsletter-hp-1" name="_honeypot" type="text" tabindex="-1" autocomplete="off" bind:value={honeypot} />
+      <label for="newsletter-hp-2">Website</label>
+      <input id="newsletter-hp-2" name="website" type="url" tabindex="-1" autocomplete="off" bind:value={website} />
+      <label for="newsletter-hp-3">Firma</label>
+      <input id="newsletter-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.newsletter_label_name)}
+        placeholder={t(T.newsletter_placeholder_name)}
+        bind:value={name}
+        error={showError("name")}
+      />
+    </div>
+
+    <div data-field="email">
+      <TextInput
+        size="sm"
+        name="email"
+        type="email"
+        label={t(T.newsletter_label_email)}
+        placeholder={t(T.newsletter_placeholder_email)}
+        required
+        bind:value={email}
+        error={showError("email")}
+      />
+    </div>
+
+    <div data-field="consent" class="pt-1">
+      <Checkbox
+        size="sm"
+        name="consent"
+        bind:checked={consent}
+        label={t(T.newsletter_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.newsletter_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.newsletter_submitting) : t(T.newsletter_submit)}
+      />
+      {#if !isValid && submitAttempted && !serverError}
+        <span class="text-xs text-error">{t(T.contact_fix_errors)}</span>
+      {/if}
+    </div>
+  </form>
+{/if}

src/lib/components/internal/newsletter-form-validation.ts

@@ -0,0 +1,51 @@
+/**
+ * Shared validation for NewsletterFormComponent + /api/newsletter server route.
+ * Single source of truth for limits and rules.
+ */
+
+export const LIMITS = {
+  NAME_MAX: 80,
+  EMAIL_MAX: 200,
+  MIN_CLIENT_AGE_MS: 3000,
+} as const;
+
+export const HONEYPOT_FIELDS = ["_honeypot", "website", "company"] as const;
+
+export type NewsletterFields = {
+  name: string;
+  email: string;
+  consent: boolean;
+};
+
+/** Error as translation-key + optional params (resolved in the UI). */
+export type NewsletterError = {
+  key: string;
+  params?: Record<string, string | number>;
+};
+
+export type NewsletterErrors = Partial<Record<keyof NewsletterFields, NewsletterError>>;
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+
+function trim(s: unknown): string {
+  return typeof s === "string" ? s.trim() : "";
+}
+
+export function validateNewsletter(input: Partial<NewsletterFields>): NewsletterErrors {
+  const errors: NewsletterErrors = {};
+  const email = trim(input.email);
+
+  if (!email) {
+    errors.email = { key: "newsletter_error_email_required" };
+  } else if (email.length > LIMITS.EMAIL_MAX) {
+    errors.email = { key: "newsletter_error_email_max", params: { n: LIMITS.EMAIL_MAX } };
+  } else if (!EMAIL_RE.test(email)) {
+    errors.email = { key: "newsletter_error_email_invalid" };
+  }
+
+  if (input.consent !== true) {
+    errors.consent = { key: "newsletter_error_consent_required" };
+  }
+
+  return errors;
+}

src/lib/translations.ts

@@ -353,6 +353,22 @@ const TRANSLATION_KEYS = [
   "mitmachen_error_files_count",          // {{n}}
   "mitmachen_error_files_size",           // {{mb}}
   "mitmachen_error_files_type",
+  // Newsletter form (NewsletterFormComponent.svelte). Generische Submit-/
+  // Server-Error-Texte werden aus contact_* wiederverwendet.
+  "newsletter_label_name",
+  "newsletter_placeholder_name",
+  "newsletter_label_email",
+  "newsletter_placeholder_email",
+  "newsletter_label_consent",
+  "newsletter_privacy_note",
+  "newsletter_submit",
+  "newsletter_submitting",
+  "newsletter_success_title",
+  "newsletter_success_body",
+  "newsletter_error_email_required",
+  "newsletter_error_email_invalid",
+  "newsletter_error_email_max",           // {{n}}
+  "newsletter_error_consent_required",
 ] as const;
 
 export type TranslationKey = (typeof TRANSLATION_KEYS)[number];