Add SMTP admin settings and contact form delivery

components/root/contact-protection-form.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+
+import { AppCard } from "@/components/ui/app-card";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ContactProtectionFormValues } from "@/lib/contact-protection";
+
+type ContactProtectionFormProps = {
+  action: (formData: FormData) => Promise<void>;
+  initialSettings: ContactProtectionFormValues;
+};
+
+export function ContactProtectionForm({
+  action,
+  initialSettings,
+}: ContactProtectionFormProps) {
+  const [turnstileEnabled, setTurnstileEnabled] = useState(initialSettings.turnstile.enabled);
+  const [rateLimitEnabled, setRateLimitEnabled] = useState(initialSettings.rateLimit.enabled);
+
+  return (
+    <form id="contact-protection-form" action={action} className="space-y-6">
+      <AppCard>
+        <CardHeader>
+          <CardTitle>Turnstile</CardTitle>
+          <CardDescription>Cloudflare Schutz fuer das Kontaktformular.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-6 md:grid-cols-2">
+          <div className="space-y-4 md:col-span-2">
+            <label
+              htmlFor="turnstileEnabled"
+              className="flex cursor-pointer items-start gap-3 rounded-nested border border-input bg-card px-4 py-4 transition-colors hover:bg-accent/20"
+            >
+              <Checkbox
+                id="turnstileEnabled"
+                name="turnstileEnabled"
+                checked={turnstileEnabled}
+                onCheckedChange={(checked) => setTurnstileEnabled(checked === true)}
+                className="mt-0.5"
+              />
+              <span className="space-y-1">
+                <span className="block text-sm font-medium text-foreground">Enable Turnstile</span>
+                <span className="block text-xs text-muted-foreground">
+                  {turnstileEnabled
+                    ? "ON: Besucher muessen die Pruefung bestehen."
+                    : "OFF: Kein Turnstile Schutz im Formular."}
+                </span>
+              </span>
+            </label>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="turnstileSiteKey">Turnstile Site Key</Label>
+            <Input
+              id="turnstileSiteKey"
+              name="turnstileSiteKey"
+              defaultValue={initialSettings.turnstile.siteKey}
+              autoComplete="off"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="turnstileSecretKey">Turnstile Secret Key</Label>
+            <Input
+              id="turnstileSecretKey"
+              name="turnstileSecretKey"
+              type="password"
+              defaultValue={initialSettings.turnstile.secretKey}
+              placeholder={initialSettings.turnstile.hasSecretKey ? "Saved secret key will be kept" : "Secret key"}
+              autoComplete="new-password"
+            />
+          </div>
+        </CardContent>
+      </AppCard>
+
+      <AppCard>
+        <CardHeader>
+          <CardTitle>Rate Limiting</CardTitle>
+          <CardDescription>Begrenzung wiederholter Kontaktanfragen.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-6 md:grid-cols-2">
+          <div className="space-y-4 md:col-span-2">
+            <label
+              htmlFor="contactRateLimitEnabled"
+              className="flex cursor-pointer items-start gap-3 rounded-nested border border-input bg-card px-4 py-4 transition-colors hover:bg-accent/20"
+            >
+              <Checkbox
+                id="contactRateLimitEnabled"
+                name="contactRateLimitEnabled"
+                checked={rateLimitEnabled}
+                onCheckedChange={(checked) => setRateLimitEnabled(checked === true)}
+                className="mt-0.5"
+              />
+              <span className="space-y-1">
+                <span className="block text-sm font-medium text-foreground">Enable rate limiting</span>
+                <span className="block text-xs text-muted-foreground">
+                  {rateLimitEnabled
+                    ? "ON: Das Formular blockiert zu viele Anfragen pro Zeitfenster."
+                    : "OFF: Keine serverseitige Begrenzung aktiv."}
+                </span>
+              </span>
+            </label>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="contactRateLimitMaxRequests">Max Requests</Label>
+            <Input
+              id="contactRateLimitMaxRequests"
+              name="contactRateLimitMaxRequests"
+              type="number"
+              min="1"
+              defaultValue={initialSettings.rateLimit.maxRequests}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="contactRateLimitWindowMinutes">Window Minutes</Label>
+            <Input
+              id="contactRateLimitWindowMinutes"
+              name="contactRateLimitWindowMinutes"
+              type="number"
+              min="1"
+              defaultValue={initialSettings.rateLimit.windowMinutes}
+            />
+          </div>
+        </CardContent>
+      </AppCard>
+    </form>
+  );
+}

components/root/root-dashboard-shell.tsx

@@ -19,6 +19,7 @@ import { FormSaveButton } from "@/components/root/form-save-button";
 import { SidebarMaintenanceControl } from "@/components/root/sidebar-maintenance-control";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { getMaintenanceMode, getSiteSettingsMediaBindings } from "@/lib/app-config";
 import { getLocalizedPath } from "@/lib/locale";
 import { getRootNavigation } from "@/lib/root-navigation";
@@ -34,13 +35,16 @@ type RootDashboardCopy = {
   portfolio: string;
   media: string;
   siteSettings: string;
+  smtp?: string;
+  contactProtection?: string;
   logout: string;
   backToSite: string;
 };
 
 type RootDashboardShellProps = {
   copy: RootDashboardCopy;
-  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings";
+  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp";
+  smtpChild?: "settings" | "contact-protection";
   portfolioChild?: "overview" | "projects" | "new-project" | "categories";
   logoutAction: () => Promise<void>;
   headerTitle: string;
@@ -58,6 +62,7 @@ type RootDashboardShellProps = {
 export async function RootDashboardShell({
   copy,
   active,
+  smtpChild,
   portfolioChild,
   logoutAction,
   headerTitle,
@@ -75,7 +80,7 @@ export async function RootDashboardShell({
     getSiteSettingsMediaBindings(),
     getMaintenanceMode(),
   ]);
-  const sidebarItems = getRootNavigation(copy, active, portfolioChild).filter(
+  const normalizedSidebarItems = getRootNavigation(copy, active, smtpChild, portfolioChild).filter(
     (item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
   );
   const headerIcon =
@@ -87,6 +92,8 @@ export async function RootDashboardShell({
           ? SwatchBook
           : active === "site-settings"
             ? Globe2
+          : active === "smtp"
+            ? ShieldAlert
           : active === "media"
             ? ImageIcon
             : portfolioChild === "categories"
@@ -111,7 +118,7 @@ export async function RootDashboardShell({
       title={headerTitle}
       description={headerDescription}
       icon={headerIcon}
-      items={sidebarItems}
+      items={normalizedSidebarItems}
       sidebarIconSrc={mediaBindings.favicon?.url}
       sidebarTop={
         <div className="space-y-2">
@@ -149,6 +156,7 @@ export async function RootDashboardShell({
               <LogOut className="h-4 w-4" />
             </Button>
           </form>
+          <Separator />
         </>
       }
       headerActions={

components/root/smtp-settings-form.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { KeyRound, Mail, Send, Server } from "lucide-react";
+import { useState } from "react";
+
+import { AppCard } from "@/components/ui/app-card";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { MailSettingsFormValues } from "@/lib/mail-settings";
+
+type SMTPSettingsFormProps = {
+  action: (formData: FormData) => Promise<void>;
+  initialSettings: MailSettingsFormValues;
+};
+
+export function SMTPSettingsForm({
+  action,
+  initialSettings,
+}: SMTPSettingsFormProps) {
+  const [smtpSecure, setSmtpSecure] = useState(initialSettings.smtp.secure);
+
+  return (
+    <form id="smtp-settings-form" action={action} className="space-y-6">
+      <div className="grid gap-6 xl:grid-cols-2">
+        <AppCard>
+          <CardHeader>
+            <CardTitle>SMTP Connection</CardTitle>
+            <CardDescription>Server und Login.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-6 md:grid-cols-2">
+            <div className="space-y-2 md:col-span-2">
+              <Label htmlFor="smtpHost">SMTP Host</Label>
+              <div className="relative">
+                <Server className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="smtpHost"
+                  name="smtpHost"
+                  defaultValue={initialSettings.smtp.host}
+                  autoComplete="off"
+                  className="pl-9"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="smtpPort">SMTP Port</Label>
+              <Input
+                id="smtpPort"
+                name="smtpPort"
+                type="number"
+                min="1"
+                defaultValue={initialSettings.smtp.port}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="smtpUsername">SMTP Username</Label>
+              <div className="relative">
+                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="smtpUsername"
+                  name="smtpUsername"
+                  defaultValue={initialSettings.smtp.username}
+                  autoComplete="off"
+                  className="pl-9"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2 md:col-span-2">
+              <Label htmlFor="smtpPassword">SMTP Password</Label>
+              <div className="relative">
+                <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="smtpPassword"
+                  name="smtpPassword"
+                  type="password"
+                  defaultValue={initialSettings.smtp.password}
+                  placeholder={initialSettings.smtp.hasPassword ? "Saved password will be kept" : "SMTP password"}
+                  autoComplete="new-password"
+                  className="pl-9"
+                />
+              </div>
+            </div>
+
+            <div className="md:col-span-2">
+              <label
+                htmlFor="smtpSecure"
+                className="flex cursor-pointer items-start gap-3 rounded-nested border border-input bg-card px-4 py-4 transition-colors hover:bg-accent/20"
+              >
+                <Checkbox
+                  id="smtpSecure"
+                  name="smtpSecure"
+                  checked={smtpSecure}
+                  onCheckedChange={(checked) => setSmtpSecure(checked === true)}
+                  className="mt-0.5"
+                />
+                <span className="space-y-1">
+                  <span className="block text-sm font-medium text-foreground">Use secure SMTP</span>
+                  <span className="block text-xs text-muted-foreground">
+                    {smtpSecure ? "ON: meist Port 465." : "OFF: meist Port 587."}
+                  </span>
+                </span>
+              </label>
+            </div>
+          </CardContent>
+        </AppCard>
+
+        <AppCard>
+          <CardHeader>
+            <CardTitle>Sender And Recipients</CardTitle>
+            <CardDescription>Absender und Ziele.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-6 md:grid-cols-2">
+            <div className="space-y-2 md:col-span-2">
+              <Label htmlFor="mailFromEmail">From Email</Label>
+              <div className="relative">
+                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="mailFromEmail"
+                  name="mailFromEmail"
+                  type="email"
+                  defaultValue={initialSettings.sender.email}
+                  autoComplete="off"
+                  className="pl-9"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2 md:col-span-2">
+              <Label htmlFor="mailFromName">From Name</Label>
+              <Input
+                id="mailFromName"
+                name="mailFromName"
+                defaultValue={initialSettings.sender.name}
+                autoComplete="off"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="mailContactRecipient">Contact Recipient Email</Label>
+              <div className="relative">
+                <Send className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="mailContactRecipient"
+                  name="mailContactRecipient"
+                  type="email"
+                  defaultValue={initialSettings.recipients.contact}
+                  autoComplete="off"
+                  className="pl-9"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="mailTestRecipient">Test Recipient Email</Label>
+              <div className="relative">
+                <Send className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="mailTestRecipient"
+                  name="mailTestRecipient"
+                  type="email"
+                  defaultValue={initialSettings.recipients.test}
+                  autoComplete="off"
+                  className="pl-9"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </AppCard>
+      </div>
+    </form>
+  );
+}

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