@vitrine-kit/vitrine 0.4.3 → 0.5.0

package/kit/registry/accounts/files/app/(frontend)/account/page.tsx

@@ -0,0 +1,86 @@
+import type { Metadata } from 'next';
+import { getCustomer } from '@/lib/accounts/session';
+import { LogoutButton } from '@/components/accounts/LogoutButton';
+
+export const metadata: Metadata = {
+  title: 'Account',
+  robots: { index: false, follow: false },
+};
+
+export default async function AccountPage() {
+  const customer = await getCustomer();
+
+  if (customer) {
+    return (
+      <div className="flex max-w-md flex-col gap-section">
+        <header className="flex flex-col gap-unit">
+          <h1 className="font-heading text-fg">Your account</h1>
+          <p className="text-muted-fg">
+            Signed in as <span className="text-fg">{customer.email}</span>
+            {customer.name ? ` (${customer.name})` : ''}
+          </p>
+        </header>
+        <div className="flex flex-col gap-gutter">
+          <a
+            href="/account/orders"
+            className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+          >
+            View orders
+          </a>
+          <LogoutButton />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex max-w-lg flex-col gap-section">
+      <header className="flex flex-col gap-unit">
+        <h1 className="font-heading text-fg">Account</h1>
+        <p className="text-muted-fg">
+          Sign in to see your orders, or look them up with the email used at checkout.
+        </p>
+      </header>
+
+      <div className="flex flex-wrap gap-gutter">
+        <a
+          href="/account/login"
+          className="rounded-md bg-primary px-gutter py-unit text-primary-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          Sign in
+        </a>
+        <a
+          href="/account/register"
+          className="rounded-md border border-input px-gutter py-unit text-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          Create account
+        </a>
+      </div>
+
+      <section className="flex flex-col gap-gutter border-t border-border pt-section">
+        <h2 className="font-heading text-fg">Guest order lookup</h2>
+        <p className="text-muted-fg text-sm">
+          Enter the email used at checkout. We show matching paid orders from this store.
+        </p>
+        <form action="/account/orders" method="get" className="flex flex-col gap-gutter">
+          <label className="flex flex-col gap-unit text-sm">
+            <span className="text-fg">Email</span>
+            <input
+              type="email"
+              name="email"
+              required
+              autoComplete="email"
+              className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+            />
+          </label>
+          <button
+            type="submit"
+            className="w-fit rounded-md border border-input px-gutter py-unit text-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+          >
+            Look up orders
+          </button>
+        </form>
+      </section>
+    </div>
+  );
+}

package/kit/registry/accounts/files/app/(frontend)/account/register/page.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from 'next';
+import { RegisterForm } from '@/components/accounts/RegisterForm';
+
+export const metadata: Metadata = {
+  title: 'Create account',
+  robots: { index: false, follow: false },
+};
+
+export default function AccountRegisterPage() {
+  return (
+    <div className="flex max-w-md flex-col gap-section">
+      <header className="flex flex-col gap-unit">
+        <h1 className="font-heading text-fg">Create account</h1>
+        <p className="text-muted-fg">
+          Already have an account?{' '}
+          <a href="/account/login" className="underline underline-offset-2">
+            Sign in
+          </a>
+        </p>
+      </header>
+      <RegisterForm />
+    </div>
+  );
+}

package/kit/registry/accounts/files/app/(frontend)/account/reset-password/page.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import { ResetPasswordForm } from '@/components/accounts/ResetPasswordForm';
+
+export const metadata: Metadata = {
+  title: 'Reset password',
+  robots: { index: false, follow: false },
+};
+
+interface PageProps {
+  searchParams: Promise<{ token?: string }>;
+}
+
+export default async function ResetPasswordPage({ searchParams }: PageProps) {
+  const { token = '' } = await searchParams;
+
+  return (
+    <div className="flex max-w-md flex-col gap-section">
+      <header className="flex flex-col gap-unit">
+        <h1 className="font-heading text-fg">Choose a new password</h1>
+        <p className="text-muted-fg">Use at least 8 characters.</p>
+      </header>
+      <ResetPasswordForm token={token} />
+    </div>
+  );
+}

package/kit/registry/accounts/files/app/api/account/orders/route.ts

@@ -0,0 +1,39 @@
+// GET /api/account/orders?email= — rate-limited guest order lookup.
+import { NextResponse } from 'next/server';
+import { getPayload } from 'payload';
+import config from '@payload-config';
+import { checkRateLimit, clientIpFromHeaders } from '@vitrine-kit/core';
+
+const RATE_LIMIT = { limit: 10, windowMs: 60_000 };
+
+export async function GET(req: Request) {
+  const { allowed, retryAfterMs } = checkRateLimit(`account:${clientIpFromHeaders(req.headers)}`, RATE_LIMIT);
+  if (!allowed) {
+    return NextResponse.json(
+      { error: 'too many requests' },
+      { status: 429, headers: { 'Retry-After': String(Math.ceil((retryAfterMs ?? 0) / 1000)) } },
+    );
+  }
+  const email = new URL(req.url).searchParams.get('email')?.trim().toLowerCase() ?? '';
+  if (!email?.includes('@')) {
+    return NextResponse.json({ error: 'email required' }, { status: 400 });
+  }
+  const payload = await getPayload({ config });
+  const res = await payload.find({
+    collection: 'orders',
+    where: { email: { equals: email } },
+    sort: '-createdAt',
+    limit: 50,
+    overrideAccess: true,
+  });
+  return NextResponse.json({
+    orders: res.docs.map((d) => ({
+      id: String(d.id),
+      status: (d as { status?: string }).status,
+      total: (d as { total?: number }).total,
+      currency: (d as { currency?: string }).currency,
+      createdAt: (d as { createdAt?: string }).createdAt,
+      paymentRef: (d as { paymentRef?: string }).paymentRef,
+    })),
+  });
+}

package/kit/registry/accounts/files/components/accounts/AccountLink.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useChromeLabel } from '@/lib/i18n/useChromeLabel';
+
+export function AccountLink() {
+  const label = useChromeLabel('account');
+  return (
+    <a
+      href="/account"
+      className="vt-account-link text-fg transition hover:text-primary focus-visible:outline-none focus-visible:ring-2 ring-ring"
+    >
+      {label}
+    </a>
+  );
+}

package/kit/registry/accounts/files/components/accounts/ForgotPasswordForm.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+export function ForgotPasswordForm() {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+  const [pending, setPending] = useState(false);
+
+  async function submit(): Promise<void> {
+    const form = formRef.current;
+    if (!form) return;
+    setPending(true);
+    setError(null);
+    const email = String(new FormData(form).get('email') ?? '');
+    try {
+      const res = await fetch('/api/customers/forgot-password', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      // Always show success copy — avoid email enumeration.
+      if (!res.ok && res.status !== 200) {
+        const data = (await res.json().catch(() => ({}))) as { errors?: Array<{ message?: string }> };
+        // Payload may still 200 for unknown emails; only surface hard failures.
+        if (res.status >= 500) {
+          setError(data.errors?.[0]?.message ?? 'Could not send reset email.');
+          return;
+        }
+      }
+      setDone(true);
+    } catch {
+      setError('Could not send reset email.');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  if (done) {
+    return (
+      <div className="flex flex-col gap-unit text-muted-fg" role="status">
+        <p>
+          If an account exists for that email, a reset link is on its way. Check your inbox.
+        </p>
+        <p className="text-sm">
+          Without SMTP, the link is printed in the server console /{' '}
+          <code className="text-fg">docker compose logs</code> (set{' '}
+          <code className="text-fg">EMAIL_FROM</code>; add <code className="text-fg">SMTP_HOST</code>{' '}
+          for real delivery).
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      ref={formRef}
+      className="vt-forgot-password-form flex flex-col gap-gutter"
+      onSubmit={(e) => {
+        e.preventDefault();
+        void submit();
+      }}
+    >
+      <label className="flex flex-col gap-unit text-sm">
+        <span className="text-fg">Email</span>
+        <input
+          type="email"
+          name="email"
+          required
+          autoComplete="email"
+          className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+      </label>
+      <button
+        type="button"
+        onClick={() => void submit()}
+        disabled={pending}
+        className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+      >
+        {pending ? 'Sending…' : 'Send reset link'}
+      </button>
+      {error ? (
+        <p role="alert" className="text-danger">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}

package/kit/registry/accounts/files/components/accounts/LoginForm.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export function LoginForm() {
+  const router = useRouter();
+  const formRef = useRef<HTMLFormElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function signIn(): Promise<void> {
+    const form = formRef.current;
+    if (!form) return;
+    setPending(true);
+    setError(null);
+    const fd = new FormData(form);
+    const email = String(fd.get('email') ?? '');
+    const password = String(fd.get('password') ?? '');
+    try {
+      const res = await fetch('/api/customers/login', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as { errors?: Array<{ message?: string }> };
+        setError(data.errors?.[0]?.message ?? 'Could not sign in.');
+        return;
+      }
+      router.push('/account/orders');
+      router.refresh();
+    } catch {
+      setError('Could not sign in.');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <form
+      ref={formRef}
+      className="vt-login-form flex flex-col gap-gutter"
+      onSubmit={(e) => {
+        e.preventDefault();
+        void signIn();
+      }}
+    >
+      <label className="flex flex-col gap-unit text-sm">
+        <span className="text-fg">Email</span>
+        <input
+          type="email"
+          name="email"
+          required
+          autoComplete="email"
+          className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+      </label>
+      <label className="flex flex-col gap-unit text-sm">
+        <span className="text-fg">Password</span>
+        <input
+          type="password"
+          name="password"
+          required
+          autoComplete="current-password"
+          className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+      </label>
+      <button
+        type="button"
+        onClick={() => void signIn()}
+        disabled={pending}
+        className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+      >
+        {pending ? 'Signing in…' : 'Sign in'}
+      </button>
+      {error ? (
+        <p role="alert" className="text-danger">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}

package/kit/registry/accounts/files/components/accounts/LogoutButton.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+export function LogoutButton() {
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
+
+  async function logout(): Promise<void> {
+    setPending(true);
+    try {
+      await fetch('/api/customers/logout', { method: 'POST' });
+      router.push('/account');
+      router.refresh();
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={logout}
+      disabled={pending}
+      className="w-fit text-fg underline underline-offset-2 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+    >
+      {pending ? 'Signing out…' : 'Sign out'}
+    </button>
+  );
+}

package/kit/registry/accounts/files/components/accounts/RegisterForm.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export function RegisterForm() {
+  const router = useRouter();
+  const formRef = useRef<HTMLFormElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function createAccount(): Promise<void> {
+    const form = formRef.current;
+    if (!form) return;
+    setPending(true);
+    setError(null);
+    const fd = new FormData(form);
+    const name = String(fd.get('name') ?? '').trim();
+    const email = String(fd.get('email') ?? '');
+    const password = String(fd.get('password') ?? '');
+    try {
+      const create = await fetch('/api/customers', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, password, name: name || undefined }),
+      });
+      if (!create.ok) {
+        const data = (await create.json().catch(() => ({}))) as {
+          errors?: Array<{ message?: string }>;
+          message?: string;
+        };
+        setError(data.errors?.[0]?.message ?? data.message ?? 'Could not create account.');
+        return;
+      }
+      const login = await fetch('/api/customers/login', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      if (!login.ok) {
+        setError('Account created — please sign in.');
+        router.push('/account/login');
+        return;
+      }
+      router.push('/account/orders');
+      router.refresh();
+    } catch {
+      setError('Could not create account.');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <form
+      ref={formRef}
+      className="vt-register-form flex flex-col gap-gutter"
+      onSubmit={(e) => {
+        e.preventDefault();
+        void createAccount();
+      }}
+    >
+      <label className="flex flex-col gap-unit text-sm">
+        <span className="text-fg">Name</span>
+        <input
+          type="text"
+          name="name"
+          autoComplete="name"
+          className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+      </label>
+      <label className="flex flex-col gap-unit text-sm">
+        <span className="text-fg">Email</span>
+        <input
+          type="email"
+          name="email"
+          required
+          autoComplete="email"
+          className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+      </label>
+      <label className="flex flex-col gap-unit text-sm">
+        <span className="text-fg">Password</span>
+        <input
+          type="password"
+          name="password"
+          required
+          minLength={8}
+          autoComplete="new-password"
+          className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+      </label>
+      <button
+        type="button"
+        onClick={() => void createAccount()}
+        disabled={pending}
+        className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+      >
+        {pending ? 'Creating…' : 'Create account'}
+      </button>
+      {error ? (
+        <p role="alert" className="text-danger">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}

package/kit/registry/accounts/files/components/accounts/ResetPasswordForm.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export interface ResetPasswordFormProps {
+  token: string;
+}
+
+export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
+  const router = useRouter();
+  const formRef = useRef<HTMLFormElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function submit(): Promise<void> {
+    const form = formRef.current;
+    if (!form || !token) return;
+    setPending(true);
+    setError(null);
+    const password = String(new FormData(form).get('password') ?? '');
+    try {
+      const res = await fetch('/api/customers/reset-password', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as {
+          errors?: Array<{ message?: string }>;
+          message?: string;
+        };
+        setError(data.errors?.[0]?.message ?? data.message ?? 'Could not reset password.');
+        return;
+      }
+      router.push('/account/login');
+      router.refresh();
+    } catch {
+      setError('Could not reset password.');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  if (!token) {
+    return <p className="text-muted-fg">Missing reset token. Request a new link from the login page.</p>;
+  }
+
+  return (
+    <form
+      ref={formRef}
+      className="vt-reset-password-form flex flex-col gap-gutter"
+      onSubmit={(e) => {
+        e.preventDefault();
+        void submit();
+      }}
+    >
+      <label className="flex flex-col gap-unit text-sm">
+        <span className="text-fg">New password</span>
+        <input
+          type="password"
+          name="password"
+          required
+          minLength={8}
+          autoComplete="new-password"
+          className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+      </label>
+      <button
+        type="button"
+        onClick={() => void submit()}
+        disabled={pending}
+        className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+      >
+        {pending ? 'Saving…' : 'Update password'}
+      </button>
+      {error ? (
+        <p role="alert" className="text-danger">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}

package/kit/registry/accounts/files/lib/accounts/blueprint.ts

@@ -0,0 +1,47 @@
+import type { BlueprintFieldDef, Extend } from '@vitrine-kit/contracts';
+
+type BlueprintLike = {
+  extend: Extend;
+  addCollection: (config: {
+    slug: string;
+    fields: BlueprintFieldDef[];
+    [option: string]: unknown;
+  }) => void;
+};
+
+const isAdmin = ({ req }: { req?: { user?: { collection?: string } } }): boolean =>
+  Boolean(req?.user && req.user.collection === 'users');
+
+/** Customers can read/update only themselves; admins can manage all. */
+const selfOrAdmin = ({ req }: { req?: { user?: { id?: string | number; collection?: string } } }) => {
+  if (!req?.user) return false;
+  if (req.user.collection === 'users') return true;
+  return { id: { equals: req.user.id } };
+};
+
+export function extendAccountsBlueprint(blueprint: BlueprintLike): void {
+  blueprint.addCollection({
+    slug: 'customers',
+    auth: { maxLoginAttempts: 5, lockTime: 10 * 60 * 1000 },
+    admin: { useAsTitle: 'email', defaultColumns: ['email', 'name'] },
+    access: {
+      create: () => true,
+      read: selfOrAdmin,
+      update: selfOrAdmin,
+      delete: isAdmin,
+      admin: isAdmin,
+    },
+    fields: [{ name: 'name', type: 'text', label: 'Name' }],
+  });
+
+  blueprint.extend('order', {
+    addFields: [
+      {
+        name: 'customer',
+        type: 'relationship',
+        relationTo: 'customers',
+        label: 'Customer',
+      },
+    ],
+  });
+}

package/kit/registry/accounts/files/lib/accounts/register.ts

@@ -0,0 +1,6 @@
+import { registerSlot } from '@vitrine-kit/core';
+import { AccountLink } from '../../components/accounts/AccountLink.js';
+
+export function registerAccountsSlots(): void {
+  registerSlot({ slot: 'global.header-actions', component: AccountLink, order: 25 });
+}

package/kit/registry/accounts/files/lib/accounts/session.ts

@@ -0,0 +1,18 @@
+// Server helpers for the storefront customer session (Payload auth collection `customers`).
+import { headers } from 'next/headers';
+import { getPayload } from 'payload';
+import config from '@payload-config';
+
+export type CustomerUser = {
+  id: string | number;
+  email?: string | null;
+  name?: string | null;
+  collection?: string;
+};
+
+export async function getCustomer(): Promise<CustomerUser | null> {
+  const payload = await getPayload({ config });
+  const { user } = await payload.auth({ headers: await headers() });
+  if (!user || (user as CustomerUser).collection !== 'customers') return null;
+  return user as CustomerUser;
+}

package/kit/registry/cart/feature.json

@@ -2,7 +2,7 @@
   "$schema": "../../schemas/feature.schema.json",
   "name": "cart",
   "title": "Cart",
-  "kitVersion": "0.4.3",
+  "kitVersion": "0.5.0",
   "requiresContracts": ">=1.0.0 <2.0.0",
   "tier": [
     "simple-store",