Add SMTP admin settings and contact form delivery

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>
+  );
+}