171 lines
7.3 KiB
TypeScript
171 lines
7.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
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 { SETTING_KEYS } from "@/lib/constants";
|
|
import { toast } from "sonner";
|
|
import { Eye, Save, Shield } from "lucide-react";
|
|
import { cn, renderLegalTokens } from "@/lib/utils";
|
|
|
|
const legalSchema = z.object({
|
|
privacy_page_title: z.string().trim().min(1, "Titel erforderlich").max(120),
|
|
privacy_page_content: z.string().trim().min(1, "Inhalt erforderlich").max(12000),
|
|
imprint_page_title: z.string().trim().min(1, "Titel erforderlich").max(120),
|
|
imprint_page_content: z.string().trim().min(1, "Inhalt erforderlich").max(12000)
|
|
});
|
|
|
|
type LegalFormValues = z.infer<typeof legalSchema>;
|
|
|
|
const TABS = [
|
|
{ id: "privacy", label: "Datenschutz", icon: Shield },
|
|
{ id: "imprint", label: "Impressum", icon: Shield }
|
|
] as const;
|
|
|
|
export function LegalPagesSettingsPanel() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [companyName, setCompanyName] = useState("CalBook");
|
|
const [activeTab, setActiveTab] = useState<"privacy" | "imprint">("privacy");
|
|
|
|
const form = useForm<LegalFormValues>({
|
|
resolver: zodResolver(legalSchema),
|
|
defaultValues: {
|
|
privacy_page_title: "Datenschutz",
|
|
privacy_page_content: "",
|
|
imprint_page_title: "Impressum",
|
|
imprint_page_content: ""
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch("/api/admin/einstellungen", { cache: "no-store" });
|
|
const data = await res.json();
|
|
const s = (data.settings ?? {}) as Record<string, string>;
|
|
form.reset({
|
|
privacy_page_title: s[SETTING_KEYS.PRIVACY_PAGE_TITLE] ?? "Datenschutz",
|
|
privacy_page_content: s[SETTING_KEYS.PRIVACY_PAGE_CONTENT] ?? "",
|
|
imprint_page_title: s[SETTING_KEYS.IMPRINT_PAGE_TITLE] ?? "Impressum",
|
|
imprint_page_content: s[SETTING_KEYS.IMPRINT_PAGE_CONTENT] ?? ""
|
|
});
|
|
setCompanyName(s[SETTING_KEYS.COMPANY_NAME] ?? "CalBook");
|
|
} catch { toast.error("Rechtliche Seiten konnten nicht geladen werden."); }
|
|
finally { setLoading(false); }
|
|
}
|
|
void load();
|
|
}, [form]);
|
|
|
|
const onSubmit = form.handleSubmit(async (values) => {
|
|
const res = await fetch("/api/admin/einstellungen", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
values: {
|
|
[SETTING_KEYS.PRIVACY_PAGE_TITLE]: values.privacy_page_title.trim(),
|
|
[SETTING_KEYS.PRIVACY_PAGE_CONTENT]: values.privacy_page_content.trim(),
|
|
[SETTING_KEYS.IMPRINT_PAGE_TITLE]: values.imprint_page_title.trim(),
|
|
[SETTING_KEYS.IMPRINT_PAGE_CONTENT]: values.imprint_page_content.trim()
|
|
}
|
|
})
|
|
});
|
|
if (!res.ok) { toast.error("Seiten konnten nicht gespeichert werden."); return; }
|
|
toast.success("Rechtliche Seiten gespeichert.");
|
|
}, () => { toast.error("Bitte prüfe die Eingaben."); });
|
|
|
|
if (loading) return null;
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="mb-6 flex items-end justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-black tracking-tight text-slate-950">Rechtliches</h1>
|
|
<p className="mt-1 text-sm font-medium text-slate-500">Datenschutz und Impressum</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={onSubmit}>
|
|
{/* Tabs */}
|
|
<div className="flex rounded-t-2xl border border-b-0 border-slate-200 bg-slate-50/80">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={cn(
|
|
"flex items-center gap-2 px-5 py-3.5 text-sm font-bold transition-all first:rounded-tl-2xl",
|
|
activeTab === tab.id
|
|
? "border-b-2 border-slate-900 bg-white text-slate-900"
|
|
: "text-slate-500 hover:text-slate-700 hover:bg-white/50"
|
|
)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rounded-b-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
{activeTab === "privacy" && (
|
|
<div className="animate-in fade-in slide-in-from-left-2 duration-200 space-y-4">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="privacy-title">Titel</Label>
|
|
<Input id="privacy-title" {...form.register("privacy_page_title")} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="privacy-content">Inhalt</Label>
|
|
<Textarea id="privacy-content" {...form.register("privacy_page_content")} rows={12} />
|
|
<p className="text-xs text-slate-400">{"Platzhalter: {{companyName}}, {{year}}"}</p>
|
|
</div>
|
|
<div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
|
|
<p className="mb-2 text-xs font-black uppercase tracking-widest text-slate-400 flex items-center gap-1.5">
|
|
<Eye className="h-3.5 w-3.5" /> Vorschau
|
|
</p>
|
|
<h3 className="text-lg font-bold text-slate-900">{form.watch("privacy_page_title") || "Datenschutz"}</h3>
|
|
<div className="mt-2 whitespace-pre-wrap text-sm text-slate-700 leading-relaxed">
|
|
{renderLegalTokens(form.watch("privacy_page_content") || "", companyName)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "imprint" && (
|
|
<div className="animate-in fade-in slide-in-from-left-2 duration-200 space-y-4">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="imprint-title">Titel</Label>
|
|
<Input id="imprint-title" {...form.register("imprint_page_title")} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="imprint-content">Inhalt</Label>
|
|
<Textarea id="imprint-content" {...form.register("imprint_page_content")} rows={12} />
|
|
<p className="text-xs text-slate-400">{"Platzhalter: {{companyName}}, {{year}}"}</p>
|
|
</div>
|
|
<div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
|
|
<p className="mb-2 text-xs font-black uppercase tracking-widest text-slate-400 flex items-center gap-1.5">
|
|
<Eye className="h-3.5 w-3.5" /> Vorschau
|
|
</p>
|
|
<h3 className="text-lg font-bold text-slate-900">{form.watch("imprint_page_title") || "Impressum"}</h3>
|
|
<div className="mt-2 whitespace-pre-wrap text-sm text-slate-700 leading-relaxed">
|
|
{renderLegalTokens(form.watch("imprint_page_content") || "", companyName)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-end">
|
|
<Button type="submit" size="lg" disabled={form.formState.isSubmitting}>
|
|
<Save className="mr-2 h-4 w-4" />
|
|
{form.formState.isSubmitting ? "Speichert..." : "Speichern"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|