Add email verification, personal calendar feed, and full SEO implementation
- Customer accounts now require email verification (hashed, single-use, time-limited tokens) before they can request/confirm bookings, with resend flows on login/account/booking widget and rate limiting. - Admins get a private, rotatable iCalendar (ICS) subscription feed of their confirmed bookings and public events, timezone-correct for Europe/Berlin including DST, never exposing meeting passwords. - Adds a full SEO layer: per-page canonical/OG/Twitter metadata with CMS-editable overrides and content-derived fallbacks, a dynamic sitemap.xml and robots.txt driven by real published content, JSON-LD (Organization/LocalBusiness, WebSite, WebPage, BreadcrumbList, Service, Event, BlogPosting) that never fabricates data, and a CMS-managed redirect table for changed slugs. - Global ANOUMA-naming audit: the brand name is never used to label personal account/calendar areas anywhere in the app, CMS, or emails. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -1,6 +1,8 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { Breadcrumbs, type Crumb } from "@/components/Breadcrumbs";
|
||||
import { OrganicBlob } from "@/components/OrganicBlob";
|
||||
import { JsonLd, breadcrumbJsonLd } from "@/lib/seo/jsonld";
|
||||
import { getSiteUrl } from "@/lib/seo/config";
|
||||
|
||||
type PageHeaderProps = {
|
||||
eyebrow?: string;
|
||||
@@ -9,11 +11,24 @@ type PageHeaderProps = {
|
||||
crumbs?: Crumb[];
|
||||
};
|
||||
|
||||
export function PageHeader({ eyebrow, title, lead, crumbs }: PageHeaderProps) {
|
||||
/** Renders the visual breadcrumb trail AND its matching BreadcrumbList JSON-LD from the same `crumbs` — every page that already passes `crumbs` gets structured breadcrumb data for free. */
|
||||
export async function PageHeader({ eyebrow, title, lead, crumbs }: PageHeaderProps) {
|
||||
const breadcrumbData = crumbs?.length
|
||||
? await (async () => {
|
||||
const siteUrl = await getSiteUrl();
|
||||
const items = [
|
||||
{ name: "Startseite", url: siteUrl },
|
||||
...crumbs.map((crumb) => ({ name: crumb.title, url: crumb.href ? `${siteUrl}${crumb.href}` : undefined })),
|
||||
];
|
||||
return breadcrumbJsonLd(items);
|
||||
})()
|
||||
: null;
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden border-b border-anouma-taupe/10 bg-anouma-cream-light pb-16 pt-14 sm:pb-20 sm:pt-20">
|
||||
<OrganicBlob tone="rose" className="-right-20 -top-20 h-72 w-72" />
|
||||
<div className="relative mx-auto max-w-6xl px-6 sm:px-8 lg:px-12">
|
||||
{breadcrumbData && <JsonLd data={breadcrumbData} />}
|
||||
{crumbs && <Breadcrumbs items={crumbs} />}
|
||||
{eyebrow && (
|
||||
<p className="mb-4 text-xs font-medium uppercase tracking-[0.24em] text-anouma-plum">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { AdminViewServerProps } from "payload";
|
||||
import { getAdminCalendarItems, type AdminCalendarItem } from "@/lib/booking/adminCalendar";
|
||||
import { CalendarFeedPanel } from "./CalendarFeedPanel";
|
||||
import styles from "./AdminCalendarView.module.css";
|
||||
|
||||
const WEEKDAY_LABELS = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
|
||||
@@ -58,6 +59,12 @@ export async function AdminCalendarView({ initPageResult }: AdminViewServerProps
|
||||
rangeEnd.setDate(rangeEnd.getDate() + 41); // 6 full weeks
|
||||
|
||||
const items = await getAdminCalendarItems(req.payload, { from: rangeStart, to: rangeEnd });
|
||||
|
||||
// Local API (overrideAccess: true by default) so this can see
|
||||
// calendarFeedTokenHash despite its field-level access being locked to
|
||||
// "nobody" for every real API path — see collections/Users.ts.
|
||||
const currentUser = req.user ? await req.payload.findByID({ collection: "users", id: req.user.id, req }) : null;
|
||||
const calendarFeedConfigured = Boolean((currentUser as { calendarFeedTokenHash?: string | null } | null)?.calendarFeedTokenHash);
|
||||
const itemsByDay = new Map<string, AdminCalendarItem[]>();
|
||||
for (const item of items) {
|
||||
const key = dateKey(new Date(item.date));
|
||||
@@ -134,6 +141,8 @@ export async function AdminCalendarView({ initPageResult }: AdminViewServerProps
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<CalendarFeedPanel initiallyConfigured={calendarFeedConfigured} />
|
||||
</div>
|
||||
|
||||
<div className={styles.schedule}>
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
.panel {
|
||||
margin-top: 28px;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 12px;
|
||||
padding: 20px 22px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 4px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin: 0 0 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #8b616d;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 9px 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background: #66505f;
|
||||
}
|
||||
.button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.secondaryButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 9px 18px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: #8b616d;
|
||||
border: 1px solid #8b616d;
|
||||
}
|
||||
.secondaryButton:hover {
|
||||
background: #f7f0f2;
|
||||
}
|
||||
.secondaryButton:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 16px;
|
||||
border-radius: 10px;
|
||||
background: #f7f4f1;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.resultWarning {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #7a2020;
|
||||
margin: 0 0 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.urlRow {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.urlInput {
|
||||
flex: 1;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
font-size: 12px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dcdcdc;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.copied {
|
||||
font-size: 12px;
|
||||
color: #3a4f30;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 13px;
|
||||
color: #7a2020;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
margin-top: 18px;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.instructions strong {
|
||||
color: #444;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import styles from "./CalendarFeedPanel.module.css";
|
||||
|
||||
export function CalendarFeedPanel({ initiallyConfigured }: { initiallyConfigured: boolean }) {
|
||||
const [configured, setConfigured] = useState(initiallyConfigured);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function generate() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setCopied(false);
|
||||
try {
|
||||
const res = await fetch("/api/admin/calendar-feed/regenerate", { method: "POST", credentials: "include" });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
setError(data.error || "Der Kalender-Link konnte nicht erzeugt werden.");
|
||||
return;
|
||||
}
|
||||
setUrl(data.url);
|
||||
setConfigured(true);
|
||||
} catch {
|
||||
setError("Verbindung fehlgeschlagen.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function copy() {
|
||||
if (!url) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
setCopied(true);
|
||||
} catch {
|
||||
// Clipboard API can be unavailable (e.g. insecure context) — the
|
||||
// input is still selectable/copyable by hand in that case.
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.panel}>
|
||||
<h2 className={styles.heading}>Kalender synchronisieren</h2>
|
||||
<p className={styles.hint}>
|
||||
Abonniere deinen persönlichen Kalender in Apple Kalender, Google Kalender, Outlook, Thunderbird oder einer
|
||||
anderen iCalendar-kompatiblen App. Der Link enthält ein geheimes Zugriffstoken — teile ihn nicht.
|
||||
</p>
|
||||
|
||||
{!url && (
|
||||
<p className={styles.status}>
|
||||
{configured ? "Ein Kalender-Link ist eingerichtet." : "Es ist noch kein Kalender-Link eingerichtet."}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!url && (
|
||||
<button type="button" className={styles.button} onClick={generate} disabled={loading}>
|
||||
{loading ? "Wird erzeugt …" : configured ? "Kalender-Link neu generieren" : "Kalender-Link generieren"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
|
||||
{url && (
|
||||
<div className={styles.result}>
|
||||
<p className={styles.resultWarning}>Wird nur jetzt einmal angezeigt — bitte gleich kopieren.</p>
|
||||
<div className={styles.urlRow}>
|
||||
<input className={styles.urlInput} type="text" readOnly value={url} onFocus={(e) => e.currentTarget.select()} />
|
||||
<button type="button" className={styles.secondaryButton} onClick={copy}>
|
||||
Kopieren
|
||||
</button>
|
||||
</div>
|
||||
{copied && <p className={styles.copied}>In die Zwischenablage kopiert.</p>}
|
||||
<button type="button" className={styles.secondaryButton} style={{ marginTop: 12 }} onClick={generate} disabled={loading}>
|
||||
{loading ? "Wird erzeugt …" : "Kalender-Link neu generieren"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className={styles.instructions}>
|
||||
<strong>Apple Kalender:</strong> Ablage → Neues Kalenderabonnement → Link einfügen.
|
||||
<br />
|
||||
<strong>Google Kalender:</strong> Weitere Kalender „+“ → Per URL → Link einfügen.
|
||||
<br />
|
||||
<strong>Outlook:</strong> Kalender hinzufügen → Aus dem Internet abonnieren → Link einfügen.
|
||||
<br />
|
||||
<strong>Thunderbird:</strong> Kalender → Neuer Kalender → Im Netzwerk → Link einfügen.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { ResendVerificationButton } from "./ResendVerificationButton";
|
||||
|
||||
const fieldClass =
|
||||
"w-full rounded-2xl border border-anouma-taupe/30 bg-white px-5 py-3.5 text-base text-anouma-plum placeholder:text-anouma-plum/50 focus:border-anouma-mauve-dark focus:outline-none";
|
||||
@@ -67,6 +68,7 @@ export function LoginForm() {
|
||||
>
|
||||
{loading ? "Wird geprüft …" : "Anmelden"}
|
||||
</button>
|
||||
<ResendVerificationButton variant="email-prompt" className="pt-1" />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { useState, type FormEvent } from "react";
|
||||
|
||||
const fieldClass =
|
||||
"w-full rounded-2xl border border-anouma-taupe/30 bg-white px-4 py-2.5 text-sm text-anouma-plum placeholder:text-anouma-plum/50 focus:border-anouma-mauve-dark focus:outline-none";
|
||||
|
||||
async function callResend(email?: string): Promise<{ ok: boolean; error?: string }> {
|
||||
try {
|
||||
const res = await fetch("/api/auth/resend-verification", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(email ? { email } : {}),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) return { ok: false, error: data.error || "Die Bestätigungs-E-Mail konnte nicht gesendet werden." };
|
||||
return { ok: true };
|
||||
} catch {
|
||||
return { ok: false, error: "Verbindung fehlgeschlagen." };
|
||||
}
|
||||
}
|
||||
|
||||
const GENERIC_SENT_MESSAGE =
|
||||
"Falls das Konto noch nicht bestätigt ist, wurde eine neue Bestätigungs-E-Mail gesendet.";
|
||||
|
||||
/**
|
||||
* variant "session": a single button that resends for the currently logged-in
|
||||
* customer (used in /konto and the booking widget, where a session already
|
||||
* exists).
|
||||
*
|
||||
* variant "email-prompt": a toggle link that reveals an email field first
|
||||
* (used on /login, where the visitor may not be authenticated yet).
|
||||
*/
|
||||
export function ResendVerificationButton({
|
||||
variant,
|
||||
triggerLabel = "E-Mail noch nicht bestätigt?",
|
||||
className,
|
||||
}: {
|
||||
variant: "session" | "email-prompt";
|
||||
triggerLabel?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function resendForSession() {
|
||||
setStatus("sending");
|
||||
const result = await callResend();
|
||||
if (result.ok) {
|
||||
setStatus("sent");
|
||||
} else {
|
||||
setStatus("error");
|
||||
setError(result.error ?? null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEmailSubmit(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setStatus("sending");
|
||||
setError(null);
|
||||
const email = String(new FormData(e.currentTarget).get("email") ?? "");
|
||||
const result = await callResend(email);
|
||||
if (result.ok) {
|
||||
setStatus("sent");
|
||||
} else {
|
||||
setStatus("error");
|
||||
setError(result.error ?? null);
|
||||
}
|
||||
}
|
||||
|
||||
if (variant === "session") {
|
||||
return (
|
||||
<div className={className}>
|
||||
{status === "sent" ? (
|
||||
<p className="text-sm text-anouma-olive">{GENERIC_SENT_MESSAGE}</p>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={resendForSession}
|
||||
disabled={status === "sending"}
|
||||
className="text-sm font-medium text-anouma-mauve-dark underline underline-offset-4 disabled:opacity-60"
|
||||
>
|
||||
{status === "sending" ? "Wird gesendet …" : "Bestätigungs-E-Mail erneut senden"}
|
||||
</button>
|
||||
)}
|
||||
{status === "error" && error && (
|
||||
<p role="alert" className="mt-1 text-sm text-red-700">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{!open ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="text-sm font-medium text-anouma-mauve-dark underline underline-offset-4"
|
||||
>
|
||||
{triggerLabel}
|
||||
</button>
|
||||
) : status === "sent" ? (
|
||||
<p className="text-sm text-anouma-olive">{GENERIC_SENT_MESSAGE}</p>
|
||||
) : (
|
||||
<form onSubmit={handleEmailSubmit} className="mt-2 flex flex-wrap items-start gap-2">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="Deine E-Mail-Adresse"
|
||||
className={`${fieldClass} max-w-xs flex-1`}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === "sending"}
|
||||
className="rounded-full bg-anouma-mauve-dark px-5 py-2.5 text-sm font-medium text-white hover:bg-anouma-plum disabled:opacity-60"
|
||||
>
|
||||
{status === "sending" ? "Wird gesendet …" : "Bestätigungs-E-Mail erneut senden"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
{status === "error" && error && (
|
||||
<p role="alert" className="mt-1 text-sm text-red-700">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { MonthCalendar, type CalendarMarker } from "./MonthCalendar";
|
||||
import { ResendVerificationButton } from "@/components/auth/ResendVerificationButton";
|
||||
|
||||
type SlotsResponse = { durationMinutes: number; slots: Record<string, { start: string; end: string }[]> };
|
||||
|
||||
@@ -16,7 +17,15 @@ function fmtDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString("de-DE", { weekday: "long", day: "2-digit", month: "long" });
|
||||
}
|
||||
|
||||
export function BookingWidget({ offerSlug, isLoggedIn }: { offerSlug: string; isLoggedIn: boolean }) {
|
||||
export function BookingWidget({
|
||||
offerSlug,
|
||||
isLoggedIn,
|
||||
isVerified,
|
||||
}: {
|
||||
offerSlug: string;
|
||||
isLoggedIn: boolean;
|
||||
isVerified: boolean;
|
||||
}) {
|
||||
const [slotsByDay, setSlotsByDay] = useState<SlotsResponse["slots"]>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedDay, setSelectedDay] = useState<Date | null>(null);
|
||||
@@ -76,6 +85,16 @@ export function BookingWidget({ offerSlug, isLoggedIn }: { offerSlug: string; is
|
||||
);
|
||||
}
|
||||
|
||||
if (!isVerified) {
|
||||
return (
|
||||
<div className="rounded-3xl bg-anouma-cream-light p-8 text-center">
|
||||
<p className="text-base text-anouma-plum">Bitte bestätige zuerst deine E-Mail-Adresse.</p>
|
||||
<p className="mt-2 text-sm text-anouma-plum/70">Erst danach kannst du einen Termin anfragen.</p>
|
||||
<ResendVerificationButton variant="session" className="mt-5 flex justify-center" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const markers: CalendarMarker[] = Object.keys(slotsByDay).map((key) => ({ date: new Date(key), status: "public" }));
|
||||
const daySlots = selectedDay ? (slotsByDay[dateKey(selectedDay)] ?? []) : [];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user