Add SMTP admin settings and contact form delivery

components/site/contact-form.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+
+import { ContactTurnstile } from "@/components/site/contact-turnstile";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import type { PublicContactProtectionSettings } from "@/lib/contact-protection";
+
+type ContactFormCopy = {
+  name: string;
+  email: string;
+  phone: string;
+  company: string;
+  message: string;
+  note: string;
+  submit: string;
+  preview: string;
+};
+
+type ContactFormProps = {
+  action: (formData: FormData) => Promise<void>;
+  locale: string;
+  previewHref: string;
+  copy: ContactFormCopy;
+  protection: PublicContactProtectionSettings;
+};
+
+export function ContactForm({
+  action,
+  locale,
+  previewHref,
+  copy,
+  protection,
+}: ContactFormProps) {
+  return (
+    <form action={action} className="grid gap-5">
+      <input type="hidden" name="locale" value={locale} />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Label className="grid gap-2">
+          {copy.name}
+          <Input type="text" name="name" placeholder={copy.name} required />
+        </Label>
+
+        <Label className="grid gap-2">
+          {copy.email}
+          <Input type="email" name="email" placeholder={copy.email} required />
+        </Label>
+
+        <Label className="grid gap-2">
+          {copy.phone}
+          <Input type="tel" name="phone" placeholder={copy.phone} />
+        </Label>
+
+        <Label className="grid gap-2">
+          {copy.company}
+          <Input type="text" name="company" placeholder={copy.company} />
+        </Label>
+      </div>
+
+      <Label className="grid gap-2">
+        {copy.message}
+        <Textarea rows={7} name="message" placeholder={copy.message} required minLength={10} />
+      </Label>
+
+      <p className="text-sm text-muted-foreground">{copy.note}</p>
+
+      {protection.turnstile.enabled ? (
+        <ContactTurnstile siteKey={protection.turnstile.siteKey} />
+      ) : null}
+
+      <div className="flex flex-wrap gap-3">
+        <Button type="submit">{copy.submit}</Button>
+        <Button asChild variant="outline">
+          <Link href={previewHref}>{copy.preview}</Link>
+        </Button>
+      </div>
+    </form>
+  );
+}

components/site/contact-turnstile.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+
+declare global {
+  interface Window {
+    turnstile?: {
+      render: (
+        container: HTMLElement,
+        options: {
+          sitekey: string;
+          callback?: (token: string) => void;
+          "expired-callback"?: () => void;
+          "error-callback"?: () => void;
+        },
+      ) => string;
+    };
+  }
+}
+
+type ContactTurnstileProps = {
+  siteKey: string;
+};
+
+export function ContactTurnstile({ siteKey }: ContactTurnstileProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [token, setToken] = useState("");
+  const [error, setError] = useState("");
+  const widgetId = useId();
+
+  useEffect(() => {
+    if (!siteKey || !containerRef.current) {
+      return undefined;
+    }
+
+    let cancelled = false;
+
+    function renderWidget() {
+      if (cancelled || !containerRef.current || !window.turnstile) {
+        return;
+      }
+
+      if (containerRef.current.dataset.widgetMounted === widgetId) {
+        return;
+      }
+
+      containerRef.current.innerHTML = "";
+      window.turnstile.render(containerRef.current, {
+        sitekey: siteKey,
+        callback: (nextToken) => {
+          setToken(nextToken);
+          setError("");
+        },
+        "expired-callback": () => {
+          setToken("");
+          setError("Verification expired. Please try again.");
+        },
+        "error-callback": () => {
+          setToken("");
+          setError("Verification could not be completed.");
+        },
+      });
+      containerRef.current.dataset.widgetMounted = widgetId;
+    }
+
+    function ensureScript() {
+      const existingScript = document.querySelector<HTMLScriptElement>(
+        'script[src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"]',
+      );
+
+      if (existingScript) {
+        if (window.turnstile) {
+          renderWidget();
+        } else {
+          existingScript.addEventListener("load", renderWidget, { once: true });
+        }
+
+        return;
+      }
+
+      const script = document.createElement("script");
+      script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+      script.async = true;
+      script.defer = true;
+      script.addEventListener("load", renderWidget, { once: true });
+      document.head.appendChild(script);
+    }
+
+    ensureScript();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [siteKey, widgetId]);
+
+  if (!siteKey) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div ref={containerRef} />
+      <input type="hidden" name="turnstileToken" value={token} />
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+    </div>
+  );
+}