create-brainerce-store 1.6.1 → 1.8.0

package/templates/nextjs/base/src/app/forgot-password/page.tsx

@@ -1,111 +1,112 @@
-'use client';
-
-import { useState } from 'react';
-import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-
-export default function ForgotPasswordPage() {
-  const t = useTranslations('auth');
-  const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [sent, setSent] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (loading) return;
-
-    try {
-      setLoading(true);
-      setError(null);
-      const client = getClient();
-      await client.forgotPassword(email);
-      setSent(true);
-    } catch (err) {
-      const message =
-        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
-      setError(message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('forgotPasswordTitle')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('forgotPasswordSubtitle')}</p>
-        </div>
-
-        {error && (
-          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
-            {error}
-          </div>
-        )}
-
-        {sent ? (
-          <div className="space-y-4">
-            <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
-              {t('resetLinkSent')}
-            </div>
-            <Link
-              href="/login"
-              className="text-primary block text-center text-sm font-medium hover:underline"
-            >
-              {t('backToLogin')}
-            </Link>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label
-                htmlFor="forgot-email"
-                className="text-foreground mb-1.5 block text-sm font-medium"
-              >
-                {t('email')}
-              </label>
-              <input
-                id="forgot-email"
-                type="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder={t('emailPlaceholder')}
-                autoComplete="email"
-                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
-              />
-            </div>
-
-            <button
-              type="submit"
-              disabled={loading}
-              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {loading ? (
-                <>
-                  <LoadingSpinner
-                    size="sm"
-                    className="border-primary-foreground/30 border-t-primary-foreground"
-                  />
-                  {t('sendingResetLink')}
-                </>
-              ) : (
-                t('sendResetLink')
-              )}
-            </button>
-
-            <Link
-              href="/login"
-              className="text-muted-foreground block text-center text-sm hover:underline"
-            >
-              {t('backToLogin')}
-            </Link>
-          </form>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+export default function ForgotPasswordPage() {
+  const t = useTranslations('auth');
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+      const client = getClient();
+      const resetUrl = `${window.location.origin}/api/auth/reset-callback`;
+      await client.forgotPassword(email, { resetUrl });
+      setSent(true);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('forgotPasswordTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('forgotPasswordSubtitle')}</p>
+        </div>
+
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+
+        {sent ? (
+          <div className="space-y-4">
+            <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+              {t('resetLinkSent')}
+            </div>
+            <Link
+              href="/login"
+              className="text-primary block text-center text-sm font-medium hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="forgot-email"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('email')}
+              </label>
+              <input
+                id="forgot-email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={t('emailPlaceholder')}
+                autoComplete="email"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  {t('sendingResetLink')}
+                </>
+              ) : (
+                t('sendResetLink')
+              )}
+            </button>
+
+            <Link
+              href="/login"
+              className="text-muted-foreground block text-center text-sm hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/login/page.tsx

@@ -1,58 +1,59 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
-import { useAuth } from '@/providers/store-provider';
-import { LoginForm } from '@/components/auth/login-form';
-import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/lib/translations';
-
-export default function LoginPage() {
-  const router = useRouter();
-  const auth = useAuth();
-  const t = useTranslations('auth');
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleLogin(email: string, password: string) {
-    try {
-      setError(null);
-      const client = getClient();
-      const result = await client.loginCustomer(email, password);
-
-      if (result.requiresVerification) {
-        router.push(`/verify-email?token=${encodeURIComponent(result.token)}`);
-        return;
-      }
-
-      auth.login(result.token);
-      router.push('/');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Login failed. Please try again.';
-      setError(message);
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('welcomeBack')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('signInSubtitle')}</p>
-        </div>
-
-        <LoginForm onSubmit={handleLogin} error={error} />
-
-        <OAuthButtons />
-
-        <p className="text-muted-foreground text-center text-sm">
-          {t('noAccount')}{' '}
-          <Link href="/register" className="text-primary font-medium hover:underline">
-            {t('createOne')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useAuth } from '@/providers/store-provider';
+import { proxyLogin } from '@/lib/auth';
+import { LoginForm } from '@/components/auth/login-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { useTranslations } from '@/lib/translations';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const t = useTranslations('auth');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleLogin(email: string, password: string) {
+    try {
+      setError(null);
+      const result = await proxyLogin(email, password);
+
+      if (result.requiresVerification) {
+        // Verification token is NOT the auth JWT — safe to pass in URL
+        router.push('/verify-email');
+        return;
+      }
+
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Login failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('welcomeBack')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('signInSubtitle')}</p>
+        </div>
+
+        <LoginForm onSubmit={handleLogin} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          {t('noAccount')}{' '}
+          <Link href="/register" className="text-primary font-medium hover:underline">
+            {t('createOne')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/products/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense, useEffect, useState, useCallback } from 'react';
+import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import type { Product } from 'brainerce';
 import type { ProductQueryParams } from 'brainerce';
@@ -26,9 +26,198 @@ const sortOptions: SortOption[] = [
   { labelKey: 'sortPriceHigh', sortBy: 'price', sortOrder: 'desc' },
 ];
 
-interface CategoryFilter {
+interface CategoryNode {
   id: string;
   name: string;
+  parentId?: string | null;
+  children: CategoryNode[];
+}
+
+/** Collect all descendant IDs (including self) */
+function getAllDescendantIds(node: CategoryNode): string[] {
+  const ids = [node.id];
+  for (const child of node.children) {
+    ids.push(...getAllDescendantIds(child));
+  }
+  return ids;
+}
+
+/** Check if a category or any of its descendants matches the selected ID */
+function isActiveInTree(node: CategoryNode, selectedId: string): boolean {
+  if (node.id === selectedId) return true;
+  return node.children.some((child) => isActiveInTree(child, selectedId));
+}
+
+/** Chevron down SVG */
+function ChevronDown({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 4.5L6 7.5L9 4.5" />
+    </svg>
+  );
+}
+
+/** Recursive dropdown items for nested categories */
+function CategoryDropdownItems({
+  children,
+  depth,
+  selectedId,
+  onSelect,
+}: {
+  children: CategoryNode[];
+  depth: number;
+  selectedId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <>
+      {children.map((child) => (
+        <div key={child.id}>
+          <button
+            onClick={() => onSelect(child.id)}
+            className={cn(
+              'w-full text-start px-4 py-2 text-sm transition-colors hover:bg-muted',
+              selectedId === child.id && 'bg-primary/10 text-primary font-medium'
+            )}
+            style={{ paddingInlineStart: `${(depth + 1) * 16}px` }}
+          >
+            {child.name}
+          </button>
+          {child.children.length > 0 && (
+            <CategoryDropdownItems
+              children={child.children}
+              depth={depth + 1}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          )}
+        </div>
+      ))}
+    </>
+  );
+}
+
+/** Category chip with dropdown for subcategories */
+function CategoryChip({
+  category,
+  selectedId,
+  onSelect,
+  tc,
+}: {
+  category: CategoryNode;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  tc: (key: string) => string;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const hasChildren = category.children.length > 0;
+  const isActive = isActiveInTree(category, selectedId);
+
+  // Find the display name for the selected subcategory
+  function findName(nodes: CategoryNode[], id: string): string | null {
+    for (const n of nodes) {
+      if (n.id === id) return n.name;
+      const found = findName(n.children, id);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  const selectedChildName =
+    isActive && selectedId !== category.id ? findName(category.children, selectedId) : null;
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  if (!hasChildren) {
+    return (
+      <button
+        onClick={() => onSelect(category.id)}
+        className={cn(
+          'rounded-full border px-3 py-1.5 text-sm transition-colors',
+          selectedId === category.id
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+        )}
+      >
+        {category.name}
+      </button>
+    );
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((prev) => !prev)}
+        className={cn(
+          'inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-sm transition-colors',
+          isActive
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+        )}
+      >
+        {category.name}
+        {selectedChildName && (
+          <span className="opacity-80">
+            {'·'} {selectedChildName}
+          </span>
+        )}
+        <ChevronDown
+          className={cn('transition-transform ms-0.5', open && 'rotate-180')}
+        />
+      </button>
+
+      {open && (
+        <div className="bg-background border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
+          {/* "All in [category]" option */}
+          <button
+            onClick={() => {
+              onSelect(category.id);
+              setOpen(false);
+            }}
+            className={cn(
+              'w-full text-start px-4 py-2 text-sm font-medium transition-colors hover:bg-muted',
+              selectedId === category.id && 'bg-primary/10 text-primary'
+            )}
+          >
+            {tc('all')} {category.name}
+          </button>
+          <div className="bg-border mx-2 h-px" />
+          {/* Recursive children */}
+          <div
+            onClick={() => setOpen(false)}
+          >
+            <CategoryDropdownItems
+              children={category.children}
+              depth={0}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 function ProductsContent() {
@@ -47,18 +236,18 @@ function ProductsContent() {
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [total, setTotal] = useState(0);
-  const [categories, setCategories] = useState<CategoryFilter[]>([]);
+  const [categories, setCategories] = useState<CategoryNode[]>([]);
 
   const sortIndex = parseInt(sortParam, 10) || 0;
   const currentSort = sortOptions[sortIndex] || sortOptions[0];
 
-  // Load categories
+  // Load categories (keep tree structure)
   useEffect(() => {
     async function loadCategories() {
       try {
         const client = getClient();
         const result = await client.getCategories();
-        setCategories(result.categories.map((c) => ({ id: c.id, name: c.name })));
+        setCategories(result.categories as CategoryNode[]);
       } catch {
         // Categories endpoint may not be available in all modes
       }
@@ -127,6 +316,10 @@ function ProductsContent() {
     router.push(`/products?${params.toString()}`);
   }
 
+  function handleCategorySelect(id: string) {
+    updateParam('category', id);
+  }
+
   return (
     <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       {/* Page Header */}
@@ -158,18 +351,13 @@ function ProductsContent() {
               {tc('all')}
             </button>
             {categories.map((cat) => (
-              <button
+              <CategoryChip
                 key={cat.id}
-                onClick={() => updateParam('category', cat.id)}
-                className={cn(
-                  'rounded-full border px-3 py-1.5 text-sm transition-colors',
-                  categoryId === cat.id
-                    ? 'bg-primary text-primary-foreground border-primary'
-                    : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-                )}
-              >
-                {cat.name}
-              </button>
+                category={cat}
+                selectedId={categoryId}
+                onSelect={handleCategorySelect}
+                tc={tc as (key: string) => string}
+              />
             ))}
           </div>
         )}