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