232 lines
11 KiB
TypeScript
232 lines
11 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 { PublicFooter } from "@/components/layout/public-footer";
|
|
import { SETTING_KEYS } from "@/lib/constants";
|
|
import { toast } from "sonner";
|
|
import { Eye, Save } from "lucide-react";
|
|
|
|
function isValidFooterUrl(value: string) {
|
|
if (!value) return true;
|
|
if (value.startsWith("/")) return true;
|
|
return /^https?:\/\//i.test(value);
|
|
}
|
|
|
|
const brandingSchema = z.object({
|
|
frontend_header_text: z.string().trim().min(1, "Bitte einen Header-Text eingeben").max(80),
|
|
frontend_header_logo_url: z.string().trim().refine((v) => v === "" || /^https?:\/\//i.test(v), "Gültige URL mit http:// oder https://"),
|
|
footer_privacy_label: z.string().trim().max(60),
|
|
footer_privacy_url: z.string().trim().refine(isValidFooterUrl, "URL muss mit /, http:// oder https:// beginnen"),
|
|
footer_imprint_label: z.string().trim().max(60),
|
|
footer_imprint_url: z.string().trim().refine(isValidFooterUrl, "URL muss mit /, http:// oder https:// beginnen"),
|
|
footer_copyright_text: z.string().trim().min(1, "Bitte Copyright-Text eingeben").max(180),
|
|
branding_accent_color: z.string().trim().regex(/^#[0-9a-fA-F]{6}$/, "Hex-Farbe, z.B. #4f46e5")
|
|
});
|
|
|
|
type BrandingFormValues = z.infer<typeof brandingSchema>;
|
|
|
|
export function BrandingPanel() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [companyName, setCompanyName] = useState("CalBook");
|
|
|
|
const form = useForm<BrandingFormValues>({
|
|
resolver: zodResolver(brandingSchema),
|
|
defaultValues: {
|
|
frontend_header_text: "Gespräch",
|
|
frontend_header_logo_url: "",
|
|
footer_privacy_label: "Datenschutz",
|
|
footer_privacy_url: "/datenschutz",
|
|
footer_imprint_label: "Impressum",
|
|
footer_imprint_url: "/impressum",
|
|
footer_copyright_text: "© {{year}} {{companyName}}",
|
|
branding_accent_color: "#4f46e5"
|
|
}
|
|
});
|
|
|
|
const headerText = form.watch("frontend_header_text");
|
|
const headerLogoUrl = form.watch("frontend_header_logo_url");
|
|
const accentColor = form.watch("branding_accent_color");
|
|
const privacyLabel = form.watch("footer_privacy_label");
|
|
const privacyUrl = form.watch("footer_privacy_url");
|
|
const imprintLabel = form.watch("footer_imprint_label");
|
|
const imprintUrl = form.watch("footer_imprint_url");
|
|
const copyrightText = form.watch("footer_copyright_text");
|
|
|
|
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({
|
|
frontend_header_text: s[SETTING_KEYS.FRONTEND_HEADER_TEXT] ?? "Gespräch",
|
|
frontend_header_logo_url: s[SETTING_KEYS.FRONTEND_HEADER_LOGO_URL] ?? "",
|
|
footer_privacy_label: s[SETTING_KEYS.FOOTER_PRIVACY_LABEL] ?? "Datenschutz",
|
|
footer_privacy_url: s[SETTING_KEYS.FOOTER_PRIVACY_URL] ?? "/datenschutz",
|
|
footer_imprint_label: s[SETTING_KEYS.FOOTER_IMPRINT_LABEL] ?? "Impressum",
|
|
footer_imprint_url: s[SETTING_KEYS.FOOTER_IMPRINT_URL] ?? "/impressum",
|
|
footer_copyright_text: s[SETTING_KEYS.FOOTER_COPYRIGHT_TEXT] ?? "© {{year}} {{companyName}}",
|
|
branding_accent_color: s[SETTING_KEYS.BRANDING_ACCENT_COLOR] ?? "#4f46e5"
|
|
});
|
|
setCompanyName(s[SETTING_KEYS.COMPANY_NAME] ?? "CalBook");
|
|
} catch { toast.error("Branding-Einstellungen 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.FRONTEND_HEADER_TEXT]: values.frontend_header_text.trim(),
|
|
[SETTING_KEYS.FRONTEND_HEADER_LOGO_URL]: values.frontend_header_logo_url.trim(),
|
|
[SETTING_KEYS.FOOTER_PRIVACY_LABEL]: values.footer_privacy_label.trim(),
|
|
[SETTING_KEYS.FOOTER_PRIVACY_URL]: values.footer_privacy_url.trim(),
|
|
[SETTING_KEYS.FOOTER_IMPRINT_LABEL]: values.footer_imprint_label.trim(),
|
|
[SETTING_KEYS.FOOTER_IMPRINT_URL]: values.footer_imprint_url.trim(),
|
|
[SETTING_KEYS.FOOTER_COPYRIGHT_TEXT]: values.footer_copyright_text.trim(),
|
|
[SETTING_KEYS.BRANDING_ACCENT_COLOR]: values.branding_accent_color.trim()
|
|
}
|
|
})
|
|
});
|
|
if (!res.ok) { toast.error("Branding-Einstellungen konnten nicht gespeichert werden."); return; }
|
|
toast.success("Branding 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">Branding</h1>
|
|
<p className="mt-1 text-sm font-medium text-slate-500">Header, Footer und Logo</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={onSubmit} className="space-y-6">
|
|
{/* Header */}
|
|
<div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
|
<div className="border-b border-slate-100 px-5 py-3 flex items-center gap-2">
|
|
<Eye className="h-4 w-4 text-slate-400" />
|
|
<h2 className="text-sm font-black text-slate-900">Frontend-Header</h2>
|
|
</div>
|
|
<div className="p-5 space-y-4">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="header-text">Header-Text</Label>
|
|
<Input id="header-text" {...form.register("frontend_header_text")} placeholder="Gespräch" />
|
|
{form.formState.errors.frontend_header_text && <p className="text-xs text-red-600">{form.formState.errors.frontend_header_text.message}</p>}
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="header-logo">Logo-URL (optional)</Label>
|
|
<Input id="header-logo" {...form.register("frontend_header_logo_url")} placeholder="https://example.com/logo.png" />
|
|
<p className="text-xs text-slate-400">Leer = Standard-Icon.</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="accent-color">Akzent-Farbe</Label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
id="accent-color-picker"
|
|
type="color"
|
|
value={accentColor}
|
|
onChange={(e) => {
|
|
form.setValue("branding_accent_color", e.target.value);
|
|
document.documentElement.style.setProperty("--accent", e.target.value);
|
|
}}
|
|
className="h-10 w-10 rounded-lg border border-slate-200 cursor-pointer"
|
|
/>
|
|
<Input
|
|
{...form.register("branding_accent_color")}
|
|
className="font-mono"
|
|
onChange={(e) => {
|
|
form.setValue("branding_accent_color", e.target.value);
|
|
document.documentElement.style.setProperty("--accent", e.target.value);
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-slate-400">Schritt-Nummern, Logo-Icon, Diagramme.</p>
|
|
</div>
|
|
</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">Vorschau</p>
|
|
<div className="flex items-center gap-3 rounded-xl bg-white p-3">
|
|
{headerLogoUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src={headerLogoUrl} alt="Logo" className="h-10 w-10 rounded-lg border border-slate-200 object-cover" />
|
|
) : (
|
|
<div className="h-10 w-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: accentColor }} />
|
|
)}
|
|
<p className="text-xl font-bold text-slate-900">{headerText || "Gespräch"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
|
<div className="border-b border-slate-100 px-5 py-3 flex items-center gap-2">
|
|
<Eye className="h-4 w-4 text-slate-400" />
|
|
<h2 className="text-sm font-black text-slate-900">Frontend-Footer</h2>
|
|
</div>
|
|
<div className="p-5 space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="footer-privacy-label">Link-Text Datenschutz</Label>
|
|
<Input id="footer-privacy-label" {...form.register("footer_privacy_label")} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="footer-privacy-url">Link-Ziel Datenschutz</Label>
|
|
<Input id="footer-privacy-url" {...form.register("footer_privacy_url")} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="footer-imprint-label">Link-Text Impressum</Label>
|
|
<Input id="footer-imprint-label" {...form.register("footer_imprint_label")} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="footer-imprint-url">Link-Ziel Impressum</Label>
|
|
<Input id="footer-imprint-url" {...form.register("footer_imprint_url")} />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="footer-copyright">Copyright-Text</Label>
|
|
<Input id="footer-copyright" {...form.register("footer_copyright_text")} />
|
|
<p className="text-xs text-slate-400">{"Platzhalter: {{year}}, {{companyName}}"}</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">Vorschau Footer</p>
|
|
<div className="rounded-xl border border-slate-200 bg-white px-4">
|
|
<PublicFooter
|
|
companyName={companyName}
|
|
privacyLabel={privacyLabel}
|
|
privacyHref={privacyUrl}
|
|
imprintLabel={imprintLabel}
|
|
imprintHref={imprintUrl}
|
|
copyrightTemplate={copyrightText}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button type="submit" size="lg" disabled={form.formState.isSubmitting}>
|
|
<Save className="mr-2 h-4 w-4" />
|
|
{form.formState.isSubmitting ? "Speichert..." : "Alles speichern"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|