create-nextblock 0.13.7 → 0.13.9

package/templates/nextblock-template/app/cms/settings/security/components/SecurityPanel.tsx

@@ -1,10 +1,13 @@
 'use client';
 
-import { useRef, useState, useTransition } from 'react';
+import { useEffect, useRef, useState, useTransition } from 'react';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { MailWarning } from 'lucide-react';
 import {
   Alert,
   AlertDescription,
+  AlertTitle,
   Badge,
   Button,
   Card,
@@ -32,11 +35,19 @@ import {
   updateGlobalSecuritySettings,
   verifyEmailEnrollment,
   verifyTotpEnrollment,
+  type ActionResult,
   type SecurityPanelData,
 } from '../actions';
 
 type EnrollMode = 'idle' | 'totp' | 'email';
 
+/**
+ * How long the resend button stays parked after a successful send. Relays queue for
+ * seconds-to-minutes, and hammering resend is what leaves a user holding several codes
+ * with no idea which to type — they all work now, but the wait is still the real fix.
+ */
+const RESEND_COOLDOWN_SECONDS = 30;
+
 function formatDate(value: string): string {
   try {
     return new Date(value).toLocaleDateString(undefined, {
@@ -60,16 +71,37 @@ export default function SecurityPanel({ data }: { data: SecurityPanelData }) {
   );
   const [emailSent, setEmailSent] = useState(false);
   const [code, setCode] = useState('');
+  const [cooldown, setCooldown] = useState(0);
+  // Server-reported: catches SMTP breaking between page load and the click, when the
+  // server-rendered `data.emailConfigured` is already stale.
+  const [smtpUnavailable, setSmtpUnavailable] = useState(false);
+  const emailAvailable = data.emailConfigured && !smtpUnavailable;
+
+  useEffect(() => {
+    if (cooldown <= 0) return;
+    const timer = setTimeout(() => setCooldown((seconds) => seconds - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [cooldown]);
 
-  const run = (fn: () => Promise<unknown>, after?: () => void) => {
+  /**
+   * Actions report failure by returning it, so a failed one must not run `onSuccess` — a
+   * rejected code has to leave the QR / code entry on screen for another attempt.
+   */
+  const run = (fn: () => Promise<ActionResult>, onSuccess?: () => void) => {
     setMessage(null);
     startTransition(async () => {
       try {
-        const result = (await fn()) as { message?: string } | undefined;
-        if (result?.message) setMessage({ success: result.message });
-        after?.();
+        const result = await fn();
+        if (!result.ok) {
+          if (result.needsSmtp) setSmtpUnavailable(true);
+          setMessage({ error: result.error });
+          return;
+        }
+        setMessage({ success: result.message });
+        onSuccess?.();
         router.refresh();
       } catch (error) {
+        // Transport-level only (the actions themselves no longer throw).
         setMessage({
           error: error instanceof Error ? error.message : 'Something went wrong.',
         });
@@ -109,13 +141,45 @@ export default function SecurityPanel({ data }: { data: SecurityPanelData }) {
     run(() => verifyTotpEnrollment(formData), resetEnrollment);
   };
 
-  const beginEmail = () => {
-    setMode('email');
+  /** Used for both the initial "Secure Email Code" click and the Resend button. */
+  const requestEmailCode = () => {
+    if (!emailAvailable) return;
     setTotp(null);
-    run(async () => {
-      const result = await sendEmailEnrollmentCode();
-      setEmailSent(true);
-      return result;
+    setMessage(null);
+    if (mode !== 'email') {
+      setMode('email');
+      setCode('');
+    }
+
+    if (cooldown > 0) {
+      setMessage({
+        success: `A code is already on its way to ${data.email}. You can request another in ${cooldown}s.`,
+      });
+      return;
+    }
+
+    startTransition(async () => {
+      try {
+        const result = await sendEmailEnrollmentCode();
+        if (result.ok) {
+          setEmailSent(true);
+          setCooldown(RESEND_COOLDOWN_SECONDS);
+          setMessage({ success: result.message });
+          return;
+        }
+        if (result.needsSmtp) setSmtpUnavailable(true);
+        // Never leave the panel stuck on "Sending…" — drop back to the chooser so the
+        // failure and the fix (configure SMTP) are the only things on screen.
+        setEmailSent(false);
+        setMode('idle');
+        setMessage({ error: result.error });
+      } catch (error) {
+        setEmailSent(false);
+        setMode('idle');
+        setMessage({
+          error: error instanceof Error ? error.message : 'Could not send a code.',
+        });
+      }
     });
   };
 
@@ -185,6 +249,8 @@ export default function SecurityPanel({ data }: { data: SecurityPanelData }) {
             </div>
           ) : (
             <div className="space-y-4">
+              {!emailAvailable && <SmtpRequiredNotice isAdmin={data.isAdmin} />}
+
               {/* Method chooser */}
               <div className="grid gap-3 sm:grid-cols-2">
                 <button
@@ -201,14 +267,25 @@ export default function SecurityPanel({ data }: { data: SecurityPanelData }) {
                 </button>
                 <button
                   type="button"
-                  onClick={beginEmail}
-                  className={`rounded-lg border p-4 text-left transition hover:border-primary ${
+                  onClick={requestEmailCode}
+                  disabled={!emailAvailable}
+                  aria-describedby={!emailAvailable ? 'smtp-required-notice' : undefined}
+                  className={`rounded-lg border p-4 text-left transition enabled:hover:border-primary disabled:cursor-not-allowed disabled:opacity-60 ${
                     mode === 'email' ? 'border-primary ring-1 ring-primary' : ''
                   }`}
                 >
-                  <p className="font-medium text-sm">Secure Email Code</p>
+                  <p className="font-medium text-sm">
+                    Secure Email Code
+                    {!emailAvailable && (
+                      <Badge variant="secondary" className="ml-2 align-middle text-[10px]">
+                        Needs SMTP
+                      </Badge>
+                    )}
+                  </p>
                   <p className="text-xs text-slate-500">
-                    Receive a 6-digit code at your account email each time you sign in.
+                    {emailAvailable
+                      ? 'Receive a 6-digit code at your account email each time you sign in.'
+                      : 'Unavailable until an email (SMTP) server is configured for this site.'}
                   </p>
                 </button>
               </div>
@@ -298,16 +375,23 @@ export default function SecurityPanel({ data }: { data: SecurityPanelData }) {
                     </Button>
                     <Button
                       variant="ghost"
-                      onClick={beginEmail}
-                      disabled={isPending}
+                      onClick={requestEmailCode}
+                      disabled={isPending || cooldown > 0}
                       title="Send a new code"
                     >
-                      Resend
+                      {cooldown > 0 ? `Resend in ${cooldown}s` : 'Resend'}
                     </Button>
                     <Button variant="ghost" onClick={resetEnrollment} disabled={isPending}>
                       Cancel
                     </Button>
                   </div>
+                  {emailSent && (
+                    <p className="text-xs text-slate-500">
+                      Delivery depends on your mail provider and can take a minute. If you
+                      request another code, the earlier ones keep working for 5 minutes — enter
+                      whichever arrives first.
+                    </p>
+                  )}
                 </div>
               )}
             </div>
@@ -383,6 +467,38 @@ export default function SecurityPanel({ data }: { data: SecurityPanelData }) {
   );
 }
 
+/**
+ * Shown when no SMTP transport resolves. Without one the email factor is a dead end — the
+ * code is minted and the panel claims success, but nothing is ever delivered — so the tile
+ * is disabled and this points at the fix instead.
+ */
+function SmtpRequiredNotice({ isAdmin }: { isAdmin: boolean }) {
+  return (
+    <Alert variant="warning" id="smtp-required-notice">
+      <MailWarning className="h-4 w-4" />
+      <AlertTitle>Email codes need an SMTP server</AlertTitle>
+      <AlertDescription className="space-y-2">
+        <p>
+          This site has no outgoing mail server configured, so a verification code cannot
+          reach your inbox. Use an authenticator app instead, or set up SMTP first.
+        </p>
+        {isAdmin ? (
+          <Link
+            href="/cms/settings/email"
+            className="inline-flex items-center font-medium underline underline-offset-4"
+          >
+            Configure email (SMTP) →
+          </Link>
+        ) : (
+          <p className="font-medium">
+            Ask an administrator to configure it under Settings → Email.
+          </p>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+}
+
 function SignupPolicyCard({
   initial,
   isPending,

package/templates/nextblock-template/components/blocks/ProductGridClient.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { ProductGrid } from '@nextblock-cms/ecommerce/components/ProductGrid';
+import type { Product } from '@nextblock-cms/ecommerce/types';
+import { cn } from '@nextblock-cms/utils';
+
+import { fetchProductGridPage } from '../../app/actions/productGridActions';
+import type { ProductGridQuery } from '../../lib/blocks/product-grid-data';
+
+interface ProductGridClientProps {
+  initialProducts: Product[];
+  totalCount: number;
+  /** The block's resolved query, replayed by the server action for later pages. */
+  query: ProductGridQuery;
+  showPagination: boolean;
+}
+
+export default function ProductGridClient({
+  initialProducts,
+  totalCount,
+  query,
+  showPagination,
+}: ProductGridClientProps) {
+  const [products, setProducts] = React.useState(initialProducts);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const gridRef = React.useRef<HTMLDivElement>(null);
+
+  // Re-sync when the server sends a new first page (e.g. a live draft edit).
+  React.useEffect(() => {
+    setProducts(initialProducts);
+    setCurrentPage(1);
+  }, [initialProducts]);
+
+  const perPage = query.limit > 0 ? query.limit : products.length || 1;
+  const totalPages = showPagination ? Math.max(1, Math.ceil(totalCount / perPage)) : 1;
+
+  const goToPage = async (nextPage: number) => {
+    if (isLoading || nextPage < 1 || nextPage > totalPages || nextPage === currentPage) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await fetchProductGridPage({ ...query, page: nextPage });
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setProducts(result.products);
+        setCurrentPage(nextPage);
+        // Keep the top of the grid in view rather than leaving the reader
+        // stranded at the bottom of the previous page.
+        gridRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    } catch {
+      setError('Failed to load products.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div ref={gridRef} className="scroll-mt-24">
+      <div
+        aria-busy={isLoading}
+        className={cn('transition-opacity duration-200', isLoading && 'pointer-events-none opacity-50')}
+      >
+        <ProductGrid products={products} />
+      </div>
+
+      {error && (
+        <p role="alert" className="mt-6 text-center text-sm text-destructive">
+          {error}
+        </p>
+      )}
+
+      {showPagination && totalPages > 1 && (
+        <nav
+          aria-label="Product grid pagination"
+          className="mt-10 flex items-center justify-center gap-3"
+        >
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1 || isLoading}
+          >
+            <ChevronLeft className="h-4 w-4" />
+            Previous
+          </Button>
+          <span
+            aria-live="polite"
+            className="flex min-w-[7rem] items-center justify-center gap-1.5 text-sm text-muted-foreground"
+          >
+            {isLoading && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+            Page {currentPage} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages || isLoading}
+          >
+            Next
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </nav>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/lib/auth/twoFactor.test.ts

@@ -0,0 +1,254 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const dbServerMocks = vi.hoisted(() => ({
+  createClient: vi.fn(),
+  getServiceRoleSupabaseClient: vi.fn(),
+}));
+
+vi.mock('@nextblock-cms/db/server', () => dbServerMocks);
+vi.mock('./cookies', () => ({
+  TWO_FACTOR_COOKIE: 'nb_2fa',
+  clearCookie: vi.fn(),
+  getCookieValue: vi.fn(),
+  setSecureCookie: vi.fn(),
+}));
+vi.mock('./trustedDevices', () => ({ hasValidTrustedDevice: vi.fn() }));
+vi.mock('../privacy/settings', () => ({ getSecuritySettings: vi.fn() }));
+vi.mock('server-only', () => ({}));
+
+import {
+  createEmailChallenge,
+  getEmailResendCooldownSeconds,
+  hasPendingEmailChallenge,
+  verifyEmailChallenge,
+} from './twoFactor';
+
+type ChallengeRow = {
+  id: string;
+  user_id: string;
+  token_hash: string;
+  expires_at: string;
+  consumed_at: string | null;
+  created_at: string;
+};
+
+/**
+ * Minimal in-memory stand-in for the `email_2fa_challenges` table, supporting exactly the
+ * PostgREST chains twoFactor.ts builds. Rows get strictly increasing `created_at` values so
+ * the "newest N codes" window is deterministic rather than clock-resolution dependent.
+ */
+function createFakeDb() {
+  const rows: ChallengeRow[] = [];
+  let sequence = 0;
+
+  function makeQuery(kind: 'select' | 'update', patch?: Partial<ChallengeRow>) {
+    const filters: Array<(row: ChallengeRow) => boolean> = [];
+    let newestFirst = false;
+    let max = Number.POSITIVE_INFINITY;
+
+    const run = () => {
+      let matched = rows.filter((row) => filters.every((keep) => keep(row)));
+      if (newestFirst) {
+        matched = [...matched].sort((a, b) => b.created_at.localeCompare(a.created_at));
+      }
+      matched = matched.slice(0, max);
+      if (kind === 'update') {
+        matched.forEach((row) => Object.assign(row, patch));
+      }
+      return { data: matched.map((row) => ({ ...row })), error: null };
+    };
+
+    const query = {
+      eq(column: keyof ChallengeRow, value: unknown) {
+        filters.push((row) => row[column] === value);
+        return query;
+      },
+      is(column: keyof ChallengeRow, value: unknown) {
+        filters.push((row) => row[column] === value);
+        return query;
+      },
+      gt(column: keyof ChallengeRow, value: string) {
+        filters.push((row) => String(row[column]) > value);
+        return query;
+      },
+      order(_column: string, options?: { ascending?: boolean }) {
+        newestFirst = options?.ascending === false;
+        return query;
+      },
+      limit(count: number) {
+        max = count;
+        return query;
+      },
+      then<TResult>(
+        onFulfilled: (value: ReturnType<typeof run>) => TResult,
+        onRejected?: (reason: unknown) => TResult,
+      ) {
+        return Promise.resolve(run()).then(onFulfilled, onRejected);
+      },
+    };
+    return query;
+  }
+
+  const client = {
+    from(table: string) {
+      if (table !== 'email_2fa_challenges') {
+        throw new Error(`Unexpected table in test: ${table}`);
+      }
+      return {
+        insert(values: Omit<ChallengeRow, 'id' | 'consumed_at' | 'created_at'>) {
+          sequence += 1;
+          rows.push({
+            id: `row-${sequence}`,
+            consumed_at: null,
+            // Distinct, ordered timestamps regardless of how fast the test runs.
+            created_at: new Date(Date.UTC(2026, 0, 1) + sequence).toISOString(),
+            ...values,
+          });
+          return Promise.resolve({ data: null, error: null });
+        },
+        select: () => makeQuery('select'),
+        update: (patch: Partial<ChallengeRow>) => makeQuery('update', patch),
+      };
+    },
+  };
+
+  return { client, rows };
+}
+
+const USER = 'user-1';
+
+describe('email 2FA challenges', () => {
+  let db: ReturnType<typeof createFakeDb>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    process.env.NB_2FA_SECRET = 'test-secret';
+    db = createFakeDb();
+    dbServerMocks.getServiceRoleSupabaseClient.mockReturnValue(db.client);
+  });
+
+  it('keeps an earlier code valid after a resend', async () => {
+    // The regression: relays deliver out of order, so the code a user receives first is
+    // often the one requested first. Issuing a new code must not kill it.
+    const first = await createEmailChallenge(USER);
+    const second = await createEmailChallenge(USER);
+    expect(first).not.toBe(second);
+
+    await expect(verifyEmailChallenge(USER, first)).resolves.toBe(true);
+  });
+
+  it('accepts the newest code too', async () => {
+    await createEmailChallenge(USER);
+    const second = await createEmailChallenge(USER);
+
+    await expect(verifyEmailChallenge(USER, second)).resolves.toBe(true);
+  });
+
+  it('burns every live sibling once one code succeeds', async () => {
+    const first = await createEmailChallenge(USER);
+    const second = await createEmailChallenge(USER);
+
+    await expect(verifyEmailChallenge(USER, first)).resolves.toBe(true);
+    // The unused sibling must not stay redeemable after the factor is satisfied.
+    await expect(verifyEmailChallenge(USER, second)).resolves.toBe(false);
+  });
+
+  it('drops the fourth-oldest code out of the usable window', async () => {
+    const oldest = await createEmailChallenge(USER);
+    await createEmailChallenge(USER);
+    await createEmailChallenge(USER);
+    await createEmailChallenge(USER);
+
+    // Unreachable even though its row has not expired — the window caps the guess surface.
+    await expect(verifyEmailChallenge(USER, oldest)).resolves.toBe(false);
+  });
+
+  it('keeps all three in-window codes usable', async () => {
+    await createEmailChallenge(USER);
+    const second = await createEmailChallenge(USER);
+    await createEmailChallenge(USER);
+    await createEmailChallenge(USER);
+
+    // Second-oldest of four is the boundary of the three-code window.
+    await expect(verifyEmailChallenge(USER, second)).resolves.toBe(true);
+  });
+
+  it('rejects expired codes', async () => {
+    const code = await createEmailChallenge(USER);
+    db.rows.forEach((row) => {
+      row.expires_at = new Date(Date.now() - 1000).toISOString();
+    });
+
+    await expect(verifyEmailChallenge(USER, code)).resolves.toBe(false);
+  });
+
+  it('rejects malformed codes without touching the database', async () => {
+    await createEmailChallenge(USER);
+    const fromSpy = vi.spyOn(db.client, 'from');
+
+    await expect(verifyEmailChallenge(USER, 'abc')).resolves.toBe(false);
+    await expect(verifyEmailChallenge(USER, '12345')).resolves.toBe(false);
+    expect(fromSpy).not.toHaveBeenCalled();
+  });
+
+  it('does not leak codes across users', async () => {
+    const code = await createEmailChallenge(USER);
+
+    await expect(verifyEmailChallenge('user-2', code)).resolves.toBe(false);
+    await expect(verifyEmailChallenge(USER, code)).resolves.toBe(true);
+  });
+
+  describe('resend throttle', () => {
+    /** The fake stamps rows at a fixed epoch; move the newest one to a chosen age. */
+    const ageNewestBy = (ms: number) => {
+      const newest = [...db.rows].sort((a, b) => b.created_at.localeCompare(a.created_at))[0];
+      newest.created_at = new Date(Date.now() - ms).toISOString();
+    };
+
+    it('allows the first send', async () => {
+      await expect(getEmailResendCooldownSeconds(USER)).resolves.toBe(0);
+    });
+
+    it('blocks a send immediately after one', async () => {
+      await createEmailChallenge(USER);
+      ageNewestBy(0);
+
+      const wait = await getEmailResendCooldownSeconds(USER);
+      expect(wait).toBeGreaterThan(0);
+      expect(wait).toBeLessThanOrEqual(20);
+    });
+
+    it('allows another send once the window passes', async () => {
+      await createEmailChallenge(USER);
+      ageNewestBy(25_000);
+
+      await expect(getEmailResendCooldownSeconds(USER)).resolves.toBe(0);
+    });
+
+    it('measures time since the last send, not the last live code', async () => {
+      const code = await createEmailChallenge(USER);
+      await verifyEmailChallenge(USER, code); // consumes it
+      ageNewestBy(0);
+
+      // A consumed row still represents an email that just went out.
+      await expect(getEmailResendCooldownSeconds(USER)).resolves.toBeGreaterThan(0);
+    });
+
+    it('throttles per user', async () => {
+      await createEmailChallenge(USER);
+      ageNewestBy(0);
+
+      await expect(getEmailResendCooldownSeconds('user-2')).resolves.toBe(0);
+    });
+  });
+
+  it('reports a pending challenge only while one is live', async () => {
+    await expect(hasPendingEmailChallenge(USER)).resolves.toBe(false);
+
+    const code = await createEmailChallenge(USER);
+    await expect(hasPendingEmailChallenge(USER)).resolves.toBe(true);
+
+    await verifyEmailChallenge(USER, code);
+    await expect(hasPendingEmailChallenge(USER)).resolves.toBe(false);
+  });
+});