create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/app/(auth-pages)/two-factor/actions.ts

@@ -0,0 +1,91 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { createClient } from '@nextblock-cms/db/server';
+import {
+  createEmailChallenge,
+  issueTwoFactorVerifiedCookie,
+  verifyEmailChallenge,
+} from '../../../lib/auth/twoFactor';
+import { issueTrustedDevice } from '../../../lib/auth/trustedDevices';
+import {
+  REMEMBER_INTENT_COOKIE,
+  clearCookie,
+  getCookieValue,
+} from '../../../lib/auth/cookies';
+import { sendTwoFactorCodeEmail } from '../../actions/twoFactorEmail';
+
+function safeRedirect(path?: string): string {
+  return path && path.startsWith('/') && !path.startsWith('//') ? path : '/cms/dashboard';
+}
+
+/** If the user opted into "remember this device" at login, mint the trust now. */
+async function maybeIssueTrustedDevice(userId: string): Promise<void> {
+  const intent = await getCookieValue(REMEMBER_INTENT_COOKIE);
+  if (intent !== '1') return;
+  const userAgent = (await headers()).get('user-agent');
+  await issueTrustedDevice(userId, userAgent);
+  await clearCookie(REMEMBER_INTENT_COOKIE);
+}
+
+export async function verifyTotpChallenge(formData: FormData) {
+  const code = (formData.get('code')?.toString() ?? '').trim();
+  const redirectTo = safeRedirect(formData.get('redirect_to')?.toString());
+  const supabase = createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) return { error: 'Your session expired. Please sign in again.' };
+  if (!/^\d{6}$/.test(code)) return { error: 'Enter the 6-digit code from your app.' };
+
+  const { data: factors } = await supabase.auth.mfa.listFactors();
+  const factor = factors?.totp?.find((f) => f.status === 'verified');
+  if (!factor) return { error: 'No authenticator is set up for this account.' };
+
+  const { data: challenge, error: challengeError } = await supabase.auth.mfa.challenge({
+    factorId: factor.id,
+  });
+  if (challengeError || !challenge) return { error: 'Could not start verification.' };
+
+  const { error: verifyError } = await supabase.auth.mfa.verify({
+    factorId: factor.id,
+    challengeId: challenge.id,
+    code,
+  });
+  if (verifyError) return { error: 'That code was not valid. Please try again.' };
+
+  await maybeIssueTrustedDevice(user.id);
+  redirect(redirectTo);
+}
+
+export async function verifyEmailCode(formData: FormData) {
+  const code = (formData.get('code')?.toString() ?? '').trim();
+  const redirectTo = safeRedirect(formData.get('redirect_to')?.toString());
+  const supabase = createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) return { error: 'Your session expired. Please sign in again.' };
+
+  const ok = await verifyEmailChallenge(user.id, code);
+  if (!ok) return { error: 'That code was incorrect or expired. Request a new one.' };
+
+  await issueTwoFactorVerifiedCookie(user.id);
+  await maybeIssueTrustedDevice(user.id);
+  redirect(redirectTo);
+}
+
+export async function resendEmailCode() {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user?.email) return { error: 'No email address is associated with your account.' };
+
+  const code = await createEmailChallenge(user.id);
+  await sendTwoFactorCodeEmail(user.email, code);
+  return { success: true, message: `A new code is on its way to ${user.email}.` };
+}

package/templates/nextblock-template/app/(auth-pages)/two-factor/components/TwoFactorForm.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Alert, AlertDescription, Button, Input, Label, Spinner } from '@nextblock-cms/ui';
+import { resendEmailCode, verifyEmailCode, verifyTotpChallenge } from '../actions';
+
+interface TwoFactorFormProps {
+  type: 'totp' | 'email';
+  email: string;
+  redirectTo: string;
+  pendingEmailCode: boolean;
+}
+
+export default function TwoFactorForm({
+  type,
+  email,
+  redirectTo,
+  pendingEmailCode,
+}: TwoFactorFormProps) {
+  const [isPending, startTransition] = useTransition();
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(
+    type === 'email' && pendingEmailCode ? `Enter the code we sent to ${email}.` : null,
+  );
+
+  const submit = () => {
+    setError(null);
+    const formData = new FormData();
+    formData.append('code', code);
+    formData.append('redirect_to', redirectTo);
+    startTransition(async () => {
+      try {
+        const action = type === 'totp' ? verifyTotpChallenge : verifyEmailCode;
+        const result = await action(formData);
+        // A successful action redirects server-side; only failures return here.
+        if (result?.error) setError(result.error);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Verification failed.');
+      }
+    });
+  };
+
+  const resend = () => {
+    setError(null);
+    setInfo(null);
+    startTransition(async () => {
+      try {
+        const result = await resendEmailCode();
+        if (result?.error) setError(result.error);
+        else if (result?.message) setInfo(result.message);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Could not send a code.');
+      }
+    });
+  };
+
+  return (
+    <div className="rounded-xl border bg-card p-6 shadow-sm">
+      <h1 className="text-xl font-semibold">Two-step verification</h1>
+      <p className="mt-1 text-sm text-muted-foreground">
+        {type === 'totp'
+          ? 'Enter the 6-digit code from your authenticator app to finish signing in.'
+          : `For your security, enter the 6-digit code sent to ${email || 'your email'}.`}
+      </p>
+
+      <form
+        className="mt-6 space-y-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <div className="space-y-2">
+          <Label htmlFor="code">Verification code</Label>
+          <Input
+            id="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            autoFocus
+            maxLength={6}
+            value={code}
+            onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+            placeholder="000000"
+            className="tracking-[0.5em] text-center text-lg"
+          />
+        </div>
+
+        {error && (
+          <Alert variant="destructive" className="py-2 px-4">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+        {info && !error && (
+          <Alert variant="success" className="py-2 px-4">
+            <AlertDescription>{info}</AlertDescription>
+          </Alert>
+        )}
+
+        <Button type="submit" disabled={isPending || code.length !== 6} className="w-full">
+          {isPending ? <Spinner className="mr-2 h-4 w-4 animate-spin" /> : null}
+          Verify &amp; continue
+        </Button>
+      </form>
+
+      {type === 'email' && (
+        <button
+          type="button"
+          onClick={resend}
+          disabled={isPending}
+          className="mt-4 w-full text-center text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground disabled:opacity-50"
+        >
+          {pendingEmailCode ? 'Resend code' : 'Send me a code'}
+        </button>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/(auth-pages)/two-factor/page.tsx

@@ -0,0 +1,51 @@
+import { redirect } from 'next/navigation';
+import { createClient } from '@nextblock-cms/db/server';
+import {
+  evaluateTwoFactor,
+  hasPendingEmailChallenge,
+} from '../../../lib/auth/twoFactor';
+import TwoFactorForm from './components/TwoFactorForm';
+
+function safeRedirect(path?: string): string {
+  return path && path.startsWith('/') && !path.startsWith('//') ? path : '/cms/dashboard';
+}
+
+export default async function TwoFactorPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ redirect_to?: string }>;
+}) {
+  const params = await searchParams;
+  const redirectTo = safeRedirect(params.redirect_to);
+
+  const evaluation = await evaluateTwoFactor();
+  const userId = evaluation.userId;
+  if (!userId) {
+    redirect('/sign-in');
+  }
+  // Already satisfied (or no MFA) -> straight through.
+  if (evaluation.status === 'satisfied' || evaluation.status === 'not_required') {
+    redirect(redirectTo);
+  }
+
+  const type = evaluation.status === 'totp_required' ? 'totp' : 'email';
+
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const pendingEmailCode =
+    type === 'email' ? await hasPendingEmailChallenge(userId) : false;
+
+  return (
+    <div className="flex-1 flex flex-col w-full max-w-md mx-auto py-10">
+      <TwoFactorForm
+        type={type}
+        email={user?.email ?? ''}
+        redirectTo={redirectTo}
+        pendingEmailCode={pendingEmailCode}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/.well-known/ucp/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import { buildUcpProfile } from '../../lib/ucp/protocol';
+
+export const dynamic = 'force-dynamic';
+export const runtime = 'nodejs';
+
+export async function GET(request: Request) {
+  const baseUrl =
+    process.env.NEXT_PUBLIC_URL?.replace(/\/+$/, '') || new URL(request.url).origin;
+
+  return NextResponse.json(buildUcpProfile(baseUrl), {
+    headers: {
+      'Cache-Control': 'public, max-age=300, s-maxage=300',
+    },
+  });
+}

package/templates/nextblock-template/app/[slug]/PageClientContent.tsx

@@ -2,18 +2,28 @@
 "use client";
 
 import React, { useState, useEffect, useMemo } from 'react';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation'; // For navigation on lang switch
 import type { Database } from "@nextblock-cms/db";
-import { useLanguage } from '@/context/LanguageContext';
-import { useCurrentContent } from '@/context/CurrentContentContext';
+import { useLanguage } from '../../context/LanguageContext';
+import { useCurrentContent } from '../../context/CurrentContentContext';
 import Link from 'next/link';
-import { createClient } from '@nextblock-cms/db';
+import { getPublishedPageForLocale } from './pageClientActions';
 
 type PageType = Database['public']['Tables']['pages']['Row'];
 type BlockType = Database['public']['Tables']['blocks']['Row'];
 
 interface PageClientContentProps {
-  initialPageData: (PageType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string; }) | null;
+  initialPageData: (PageType & {
+    blocks: BlockType[];
+    language_code: string;
+    language_id: number;
+    translation_group_id: string | null;
+    feature_image_url?: string | null;
+    feature_image_blur_data_url?: string | null;
+    feature_image_width?: number | null;
+    feature_image_height?: number | null;
+  }) | null;
   currentSlug: string; // The slug of the currently viewed page
   children: React.ReactNode;
   translatedSlugs?: { [key: string]: string };
@@ -51,8 +61,6 @@ export default function PageClientContent({ initialPageData, currentSlug, childr
   // It's initially set by the server for the slug it resolved.
   const [currentPageData, setCurrentPageData] = useState(initialPageData);
   const [isLoadingTargetLang, setIsLoadingTargetLang] = useState(false);
-  const supabase = useMemo(() => createClient(), []);
-
   // Memoize pageId and pageSlug
   const pageId = useMemo(() => currentPageData?.id, [currentPageData?.id]);
   const pageSlug = useMemo(() => currentPageData?.slug, [currentPageData?.id, currentLocale]); // include locale so updates propagate
@@ -68,24 +76,10 @@ export default function PageClientContent({ initialPageData, currentSlug, childr
       } else if (targetSlug && targetSlug === currentSlug) {
         // Same slug across languages - refetch the page in the target language and update content
         (async () => {
-          const { data, error } = await supabase
-            .from("pages")
-            .select("*, languages!inner(code), blocks(*)")
-            .eq("slug", targetSlug)
-            .eq("languages.code", currentLocale)
-            .eq("status", "published")
-            .order('order', { foreignTable: 'blocks', ascending: true })
-            .maybeSingle();
-
-          if (!error && data) {
-            const langInfo = Array.isArray(data.languages) ? data.languages[0] : (data.languages as unknown as { code?: string });
-            setCurrentPageData({
-              ...(data as PageType),
-              blocks: (data as any).blocks || [],
-              language_code: langInfo?.code || currentLocale,
-              language_id: data.language_id,
-              translation_group_id: data.translation_group_id || currentPageData.translation_group_id,
-            } as typeof currentPageData);
+          const data = await getPublishedPageForLocale(targetSlug, currentLocale);
+
+          if (data) {
+            setCurrentPageData(data as typeof currentPageData);
           } else {
             // fallback to refresh if fetch fails
             router.refresh();
@@ -98,7 +92,7 @@ export default function PageClientContent({ initialPageData, currentSlug, childr
         setIsLoadingTargetLang(false);
       }
     }
-  }, [currentLocale, currentPageData, currentSlug, router, initialPageData, translatedSlugs]); // Rerun if initialPageData changes (e.g. after revalidation)
+  }, [currentLocale, currentPageData, currentSlug, router, translatedSlugs]); // Rerun if route data or locale changes
 
   // Update HTML lang attribute based on the *actually displayed* content's language
   useEffect(() => {
@@ -126,11 +120,16 @@ export default function PageClientContent({ initialPageData, currentSlug, childr
                            currentContent.slug !== null);
 
     if (needsUpdate) {
-      setCurrentContent({ id: pageId, type: newType, slug: slugToSet });
+      setCurrentContent({ 
+        id: pageId, 
+        type: newType, 
+        slug: slugToSet, 
+        translation_group_id: currentPageData?.translation_group_id 
+      });
     } else if (needsClearing) {
-      setCurrentContent({ id: null, type: null, slug: null });
+      setCurrentContent({ id: null, type: null, slug: null, translation_group_id: null });
     }
-  }, [pageId, pageSlug, setCurrentContent, currentContent.id, currentContent.type, currentContent.slug]);
+  }, [pageId, pageSlug, setCurrentContent, currentContent.id, currentContent.type, currentContent.slug, currentContent.translation_group_id, currentPageData?.translation_group_id]);
 
   // Separate useEffect for cleanup
   useEffect(() => {
@@ -166,6 +165,27 @@ export default function PageClientContent({ initialPageData, currentSlug, childr
   return (
     <article className="w-full mx-auto">
       {isLoadingTargetLang && <div className="text-center py-2 text-sm text-muted-foreground">Switching language...</div>}
+
+      {currentPageData.feature_image_url ? (
+        <div className="relative h-48 w-full overflow-hidden bg-slate-950 sm:h-56 md:h-64 lg:h-72">
+          <Image
+            src={currentPageData.feature_image_url}
+            alt={`Feature image for ${currentPageData.title}`}
+            fill
+            sizes="100vw"
+            className="object-cover"
+            placeholder={currentPageData.feature_image_blur_data_url ? "blur" : "empty"}
+            blurDataURL={currentPageData.feature_image_blur_data_url ?? undefined}
+            priority
+          />
+          <div className="absolute inset-0 bg-slate-950/45" />
+          <div className="absolute inset-0 flex items-center justify-center px-4 text-center">
+            <div className="max-w-5xl break-words text-3xl font-semibold leading-tight text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.65)] sm:text-4xl md:text-5xl">
+              {currentPageData.title}
+            </div>
+          </div>
+        </div>
+      ) : null}
       
       {/* Render blocks passed as children */}
       {children}

package/templates/nextblock-template/app/[slug]/page.tsx

@@ -6,7 +6,16 @@ import type { Metadata } from 'next';
 import PageClientContent from "./PageClientContent";
 import { getPageDataBySlug } from "./page.utils";
 import BlockRenderer from "../../components/BlockRenderer";
-import { cookies, headers } from "next/headers";
+import { cookies, draftMode, headers } from "next/headers";
+import {
+  resolveMetaTitle,
+  resolvePageMetaDescription,
+  stringifyJsonLd,
+  buildSocialMetadata,
+  toOpenGraphLocale,
+} from "../lib/seo";
+import { getSiteSettings } from "../lib/site-settings";
+import { getRequestOrigin } from "../../lib/visual-editing/edit-info";
 
 export const dynamicParams = true;
 export const revalidate = 360;
@@ -68,7 +77,7 @@ export async function generateMetadata(
     return { title: "Page Not Found" };
   }
 
-  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "";
+  const siteUrl = process.env.NEXT_PUBLIC_URL || "";
   const supabase = getSsgSupabaseClient();
   
   // Parallel queries for better performance
@@ -94,9 +103,22 @@ export async function generateMetadata(
     });
   }
 
+  const title = resolveMetaTitle(pageData.meta_title, pageData.title);
+  const description = resolvePageMetaDescription(pageData.meta_description, pageData.blocks);
+  const { siteTitle } = await getSiteSettings();
+
   return {
-    title: pageData.meta_title || pageData.title,
-    description: pageData.meta_description || "",
+    title,
+    description,
+    ...buildSocialMetadata({
+      title,
+      description,
+      url: `${siteUrl}/${params.slug}`,
+      siteTitle,
+      imageUrl: pageData.feature_image_url,
+      type: 'website',
+      locale: toOpenGraphLocale(pageData.language_code),
+    }),
     alternates: {
       canonical: `${siteUrl}/${params.slug}`,
       languages: Object.keys(alternates).length > 0 ? alternates : undefined,
@@ -148,11 +170,46 @@ export default async function DynamicPage({ params: paramsPromise }: PageProps)
 
 
 
-  const pageBlocks = pageData ? <BlockRenderer blocks={pageData.blocks} languageId={pageData.language_id} /> : null;
+  const requestOrigin = await getRequestOrigin();
+  const draft = await draftMode();
+  const visualEditingEnabled =
+    draft.isEnabled || process.env.NEXTBLOCK_VISUAL_EDITING_ENABLED === 'true';
+  const siteUrl = process.env.NEXT_PUBLIC_URL || "";
+  const nonce = (await headers()).get('x-nonce') || undefined;
+  const title = resolveMetaTitle(pageData.meta_title, pageData.title);
+  const description = resolvePageMetaDescription(pageData.meta_description, pageData.blocks);
+  const pageJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    name: title,
+    description,
+    url: `${siteUrl}/${params.slug}`,
+    inLanguage: pageData.language_code,
+  };
+  const pageBlocks = pageData ? (
+    <BlockRenderer
+      blocks={pageData.blocks}
+      languageId={pageData.language_id}
+      visualEditing={{
+        enabled: visualEditingEnabled,
+        documentType: "page",
+        documentId: pageData.id,
+        slug: pageData.slug,
+        languageId: pageData.language_id,
+        draftId: pageData.draft_id ?? null,
+        pageOrigin: requestOrigin,
+      }}
+    />
+  ) : null;
 
   return (
     <>
-
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: stringifyJsonLd(pageJsonLd) }}
+      />
       <PageClientContent initialPageData={pageData} currentSlug={params.slug} translatedSlugs={translatedSlugs}>
         {pageBlocks}
       </PageClientContent>