Add password reset, order confirmation email with editable templates, and fix missing account entry points

Password reset uses Payload's built-in forgot/reset-password flow,
customized to link to this app instead of the Payload admin. Order
confirmation email and the password-reset email's wording both come from
a new Payload email-templates collection, editable without a deploy and
previewable via Live Preview at /email-preview/[type] (same mechanism as
Posts/LegalPages/Testimonials, sample data instead of a real document).

Also: order numbers get a random suffix (prevents guessing, motivated by
a considered-and-deferred guest order-lookup feature); the discount code
field only shows in the cart when a code is actually active (codes now
apply via a ?code= link instead of manual entry); and three navigation
gaps found while testing — no reachable login link with an empty cart, no
logout link anywhere, no way back from profile to order history.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/konto/bestellungen/[orderNumber]/page.tsx

@@ -4,8 +4,9 @@ import Link from "next/link";
 import { Reveal } from "../../../components/Reveal";
 import { Footer } from "../../../components/Footer";
 import { formatPrice, formatDate } from "../../../lib/format";
-import { getSessionCustomer, getCustomerOrderDetail, ORDER_STATUS_LABEL, customerOrderAction } from "../../../lib/customerAuth";
+import { getSessionCustomer, getCustomerOrderDetail, customerOrderAction } from "../../../lib/customerAuth";
 import { OrderActionButton } from "./components/OrderActionButton";
+import { OrderStatusBadge } from "../../components/OrderStatusBadge";
 
 export const metadata: Metadata = {
   title: "Bestelldetails",
@@ -45,7 +46,7 @@ export default async function KontoBestellungDetailPage({ params }: { params: Pr
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-label text-text-muted">Status</p>
-              <p className="text-body-sm text-text-primary">{ORDER_STATUS_LABEL[order.status] ?? order.status}</p>
+              <OrderStatusBadge status={order.status} />
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-label text-text-muted">Zahlungsart</p>

app/konto/bestellungen/page.tsx

@@ -4,7 +4,9 @@ import Link from "next/link";
 import { Reveal } from "../../components/Reveal";
 import { Footer } from "../../components/Footer";
 import { formatPrice, formatDate } from "../../lib/format";
-import { getSessionCustomer, getCustomerOrders, ORDER_STATUS_LABEL } from "../../lib/customerAuth";
+import { getSessionCustomer, getCustomerOrders } from "../../lib/customerAuth";
+import { OrderStatusBadge } from "../components/OrderStatusBadge";
+import { LogoutButton } from "../components/LogoutButton";
 
 // robots: noindex — account area, same reasoning as /checkout.
 export const metadata: Metadata = {
@@ -57,7 +59,7 @@ export default async function KontoBestellungenPage() {
                   </div>
                   <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Status</p>
-                    <p className="text-body-sm text-text-primary">{ORDER_STATUS_LABEL[order.status] ?? order.status}</p>
+                    <OrderStatusBadge status={order.status} />
                   </div>
                   <div className="flex flex-col gap-1 ml-auto">
                     <p className="text-label text-text-muted">Gesamtbetrag</p>
@@ -75,6 +77,7 @@ export default async function KontoBestellungenPage() {
             <Link href="/shop" className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
               Weiter einkaufen
             </Link>
+            <LogoutButton />
           </div>
         </Reveal>
       </main>

app/konto/components/LogoutButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export function LogoutButton() {
+  const router = useRouter();
+
+  async function handleLogout() {
+    await fetch("/api/account/logout", { method: "POST" });
+    router.push("/");
+    router.refresh();
+  }
+
+  return (
+    <button type="button" onClick={handleLogout} className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
+      Abmelden
+    </button>
+  );
+}

app/konto/components/OrderStatusBadge.tsx

@@ -0,0 +1,28 @@
+import { ORDER_STATUS_LABEL } from "../../lib/customerAuth";
+
+// Colors are a rough "how good is this news" scale — neutral while
+// in-progress, success once actually delivered, warm/red for anything
+// that means the order didn't complete as planned. Reuses existing tokens
+// where they exist (--color-brand, --color-success/-subtle); cancelled/
+// return_requested borrow plain Tailwind red/orange since this codebase
+// has no custom tokens for those (same reasoning as the existing
+// text-red-600 error-text convention elsewhere).
+const STYLES: Record<string, string> = {
+  received: "bg-bg-muted text-text-muted",
+  processing: "bg-brand/10 text-brand",
+  shipped: "bg-brand/10 text-brand",
+  delivered: "bg-success-subtle text-success",
+  cancelled: "bg-red-50 text-red-600",
+  return_requested: "bg-orange-50 text-orange-600",
+  returned: "bg-bg-muted text-text-light",
+};
+
+export function OrderStatusBadge({ status }: { status: string }) {
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[status] ?? "bg-bg-muted text-text-muted"}`}
+    >
+      {ORDER_STATUS_LABEL[status] ?? status}
+    </span>
+  );
+}

app/konto/login/components/LoginForm.tsx

@@ -75,6 +75,9 @@ export function LoginForm() {
           {loading ? "Einen Moment…" : "Einloggen"}
         </button>
       </form>
+      <Link href="/konto/passwort-vergessen" className="text-body-sm text-text-muted underline hover:text-brand transition-colors">
+        Passwort vergessen?
+      </Link>
       <p className="text-body-sm text-text-muted">
         Noch kein Konto? Einfach beim{" "}
         <Link href="/checkout" className="underline hover:text-brand transition-colors">

app/konto/passwort-vergessen/components/ForgotPasswordForm.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { Reveal } from "../../../components/Reveal";
+
+export function ForgotPasswordForm() {
+  const [email, setEmail] = useState("");
+  const [sent, setSent] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await fetch("/api/account/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+    } catch {
+      // Same "always show success" reasoning as the route itself — a
+      // network hiccup here shouldn't reveal anything either.
+    }
+    setSent(true);
+    setLoading(false);
+  }
+
+  if (sent) {
+    return (
+      <Reveal className="flex flex-col gap-4 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+        <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+          E-Mail unterwegs
+        </p>
+        <p className="text-body text-text-muted">
+          Falls zu <strong>{email}</strong> ein Konto existiert, haben wir dir eine E-Mail mit einem Link zum
+          Zurücksetzen deines Passworts geschickt.
+        </p>
+      </Reveal>
+    );
+  }
+
+  return (
+    <Reveal className="flex flex-col gap-6 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+      <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+        Passwort vergessen
+      </p>
+      <p className="text-body text-text-muted">
+        Gib deine E-Mail-Adresse ein — wir schicken dir einen Link, mit dem du ein neues Passwort vergeben kannst.
+      </p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start w-full">
+        <label className="flex flex-col gap-2 items-start w-full">
+          <span className="text-label text-text-muted">E-Mail-Adresse</span>
+          <input
+            type="email"
+            required
+            autoComplete="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors"
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={loading}
+          className={`w-full flex items-center justify-center py-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary ${loading ? "opacity-70 pointer-events-none" : ""}`}
+        >
+          {loading ? "Einen Moment…" : "Link anfordern"}
+        </button>
+      </form>
+    </Reveal>
+  );
+}

app/konto/passwort-vergessen/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import { ForgotPasswordForm } from "./components/ForgotPasswordForm";
+import { Footer } from "../../components/Footer";
+
+export const metadata: Metadata = {
+  title: "Passwort vergessen",
+  robots: { index: false, follow: true },
+};
+
+export default function PasswortVergessenPage() {
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-bg-base">
+        <ForgotPasswordForm />
+      </main>
+      <Footer />
+    </>
+  );
+}

app/konto/passwort-zuruecksetzen/components/ResetPasswordForm.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Reveal } from "../../../components/Reveal";
+
+export function ResetPasswordForm({ token }: { token: string | null }) {
+  const router = useRouter();
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!token) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/account/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, password }),
+      });
+      const data = await res.json();
+      if (!data.ok) {
+        setError(data.reason || "Passwort konnte nicht zurückgesetzt werden.");
+        setLoading(false);
+        return;
+      }
+      router.push("/konto/bestellungen");
+      router.refresh();
+    } catch {
+      setError("Passwort konnte gerade nicht zurückgesetzt werden.");
+      setLoading(false);
+    }
+  }
+
+  if (!token) {
+    return (
+      <Reveal className="flex flex-col gap-4 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+        <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+          Link ungültig
+        </p>
+        <p className="text-body text-text-muted">
+          Dieser Link zum Zurücksetzen des Passworts ist ungültig oder abgelaufen. Fordere gerne einen neuen an.
+        </p>
+      </Reveal>
+    );
+  }
+
+  return (
+    <Reveal className="flex flex-col gap-6 items-start pt-10 pb-20 px-[var(--layout-padding-x)] w-full max-w-[26rem] mx-auto">
+      <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+        Neues Passwort vergeben
+      </p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start w-full">
+        <label className="flex flex-col gap-2 items-start w-full">
+          <span className="text-label text-text-muted">Neues Passwort</span>
+          <input
+            type="password"
+            required
+            minLength={8}
+            autoComplete="new-password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors"
+          />
+        </label>
+        {error && <p className="text-label text-red-600">{error}</p>}
+        <button
+          type="submit"
+          disabled={loading}
+          className={`w-full flex items-center justify-center py-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary ${loading ? "opacity-70 pointer-events-none" : ""}`}
+        >
+          {loading ? "Einen Moment…" : "Passwort speichern"}
+        </button>
+      </form>
+    </Reveal>
+  );
+}

app/konto/passwort-zuruecksetzen/page.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { ResetPasswordForm } from "./components/ResetPasswordForm";
+import { Footer } from "../../components/Footer";
+
+export const metadata: Metadata = {
+  title: "Passwort zurücksetzen",
+  robots: { index: false, follow: true },
+};
+
+// token read server-side from searchParams (not the client-side
+// useSearchParams() hook) — avoids needing a Suspense boundary here, same
+// reasoning as /konto/profil's ?verified= handling.
+export default async function PasswortZuruecksetzenPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string }>;
+}) {
+  const { token } = await searchParams;
+
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-bg-base">
+        <ResetPasswordForm token={token ?? null} />
+      </main>
+      <Footer />
+    </>
+  );
+}

app/konto/profil/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 import { Footer } from "../../components/Footer";
 import { getSessionCustomer, getCustomerProfile } from "../../lib/customerAuth";
 import { ProfileForm } from "./components/ProfileForm";
@@ -29,6 +30,9 @@ export default async function KontoProfilPage({
     <>
       <main className="flex flex-col flex-1 bg-bg-base">
         <div className="flex flex-col gap-10 items-start pt-10 pb-16 px-[var(--layout-padding-x)] w-full max-w-[40rem] mx-auto">
+          <Link href="/konto/bestellungen" className="text-body-sm text-text-muted hover:text-brand transition-colors">
+            ← Meine Bestellungen
+          </Link>
           <VerificationBanner emailVerified={profile.emailVerified} justVerified={verified === "1" || verified === "0" ? verified : undefined} />
           <ProfileForm profile={profile} />
           <PasswordForm email={profile.email} />