create-nextblock 0.10.2 → 0.10.4

package/templates/nextblock-template/app/cms/components/TwoFactorReminderBanner.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { Button } from '@nextblock-cms/ui';
+import { ShieldAlert, X } from 'lucide-react';
+
+/**
+ * In-app reminder for staff (ADMIN/WRITER) who have not enrolled a second factor,
+ * shown when the "Encourage staff to enable 2FA" policy is on. Dismissible for the
+ * session (state lives in the persistent CMS layout, so it survives client-side
+ * navigation but reappears on the next full load until 2FA is set up).
+ */
+export default function TwoFactorReminderBanner() {
+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) return null;
+
+  return (
+    <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200">
+      <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">
+          Your account doesn&rsquo;t have two-factor authentication enabled.
+        </p>
+        <p className="text-xs opacity-90">
+          Protect your CMS account by adding a second factor (authenticator app or email code).
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button asChild size="sm" variant="outline" className="border-amber-400">
+          <Link href="/cms/settings/security">Set up 2FA</Link>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setDismissed(true)}
+          aria-label="Dismiss for now"
+          className="h-8 w-8"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/dashboard/components/DashboardOnboarding.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import Link from 'next/link';
+import { useTransition } from 'react';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@nextblock-cms/ui';
+import { ArrowRight, CheckCircle2, Circle, X } from 'lucide-react';
+import type { OnboardingStatus } from '../../../../lib/onboarding/status';
+
+export default function DashboardOnboarding({
+  status,
+  dismissAction,
+}: {
+  status: OnboardingStatus;
+  dismissAction: (dismissed: boolean) => Promise<void>;
+}) {
+  const [isPending, startTransition] = useTransition();
+
+  if (status.dismissed) return null;
+
+  const pct = status.total > 0 ? Math.round((status.completed / status.total) * 100) : 0;
+  const allDone = status.completed >= status.total;
+
+  const dismiss = () => {
+    startTransition(async () => {
+      await dismissAction(true);
+    });
+  };
+
+  return (
+    <Card className="border-primary/30 bg-primary/[0.03]">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1">
+            <CardTitle className="flex items-center gap-2">
+              {allDone ? '🎉 Your site is ready' : 'Finish setting up your site'}
+            </CardTitle>
+            <CardDescription>
+              {allDone
+                ? 'Every recommended step is complete. You can dismiss this checklist.'
+                : 'Complete these steps to get the most out of NextBlock. You can do them in any order.'}
+            </CardDescription>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={dismiss}
+            disabled={isPending}
+            aria-label="Dismiss onboarding checklist"
+            className="shrink-0"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="mt-3 space-y-1.5">
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>
+              {status.completed} of {status.total} complete
+            </span>
+            <span>{pct}%</span>
+          </div>
+          <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+            <div
+              className="h-full rounded-full bg-primary transition-all duration-500 ease-out"
+              style={{ width: `${pct}%` }}
+            />
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        <ul className="divide-y">
+          {status.steps.map((step) => (
+            <li key={step.key} className="flex items-center gap-3 py-3">
+              {step.done ? (
+                <CheckCircle2 className="h-5 w-5 shrink-0 text-emerald-600" />
+              ) : (
+                <Circle className="h-5 w-5 shrink-0 text-muted-foreground/50" />
+              )}
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span
+                    className={`text-sm font-medium ${
+                      step.done ? 'text-muted-foreground line-through' : ''
+                    }`}
+                  >
+                    {step.title}
+                  </span>
+                  {step.optional && (
+                    <span className="rounded-full border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                      Optional
+                    </span>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground">{step.description}</p>
+              </div>
+              {!step.done && step.key !== 'admin' && (
+                <Button asChild variant="outline" size="sm" className="shrink-0">
+                  <Link href={step.href}>
+                    Set up
+                    <ArrowRight className="ml-1 h-3.5 w-3.5" />
+                  </Link>
+                </Button>
+              )}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/nextblock-template/app/cms/dashboard/page.tsx

@@ -1,26 +1,21 @@
-import { Alert, AlertDescription, AlertTitle, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextblock-cms/ui"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextblock-cms/ui"
 import { Calendar, FileText, PenTool, Users, Eye, TrendingUp, DollarSign, Receipt, ShoppingCart } from "lucide-react"
 import { getDashboardStats } from "./actions"
 import { MetricCard, SalesLedger, PremiumCTA } from "./components/DashboardComponents"
+import DashboardOnboarding from "./components/DashboardOnboarding"
+import { getOnboardingStatus } from "../../../lib/onboarding/status"
+import { setOnboardingDismissed } from "../../../lib/onboarding/actions"
 import { formatPrice } from "@nextblock-cms/utils"
 
 export default async function CmsDashboardPage() {
   const stats = await getDashboardStats();
-  const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
-  const showWarning = !gtmId && gtmId !== "false";
+  const onboarding = await getOnboardingStatus({ isEcommerceActive: stats.isEcommerceActive });
 
   const isEcommerce = stats.isEcommerceActive;
 
   return (
     <div className="w-full space-y-8">
-      {showWarning && (
-        <Alert variant="destructive">
-          <AlertTitle>Google Tag Manager Not Configured</AlertTitle>
-          <AlertDescription>
-            Missing <code>NEXT_PUBLIC_GTM_ID</code>. Analytics tracking is disabled.
-          </AlertDescription>
-        </Alert>
-      )}
+      <DashboardOnboarding status={onboarding} dismissAction={setOnboardingDismissed} />
 
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
         <div>

package/templates/nextblock-template/app/cms/layout.tsx

@@ -2,7 +2,7 @@ import 'katex/dist/katex.min.css';
 import { redirect } from 'next/navigation';
 import CmsClientLayout from "./CmsClientLayout";
 import { verifyPackageOnline } from '@nextblock-cms/db/server';
-import { evaluateTwoFactor } from '../../lib/auth/twoFactor';
+import { evaluateTwoFactor, getStaffTwoFactorReminder } from '../../lib/auth/twoFactor';
 
 export default async function CmsLayout({
   children,
@@ -16,13 +16,18 @@ export default async function CmsLayout({
     redirect('/two-factor?redirect_to=/cms/dashboard');
   }
 
-  const [isEcommerceActive, isCortexAiActive] = await Promise.all([
+  const [isEcommerceActive, isCortexAiActive, showTwoFactorReminder] = await Promise.all([
     verifyPackageOnline('ecommerce'),
     verifyPackageOnline('cortex-ai'),
+    getStaffTwoFactorReminder(),
   ]);
 
   return (
-    <CmsClientLayout isCortexAiActive={isCortexAiActive} isEcommerceActive={isEcommerceActive}>
+    <CmsClientLayout
+      isCortexAiActive={isCortexAiActive}
+      isEcommerceActive={isEcommerceActive}
+      showTwoFactorReminder={showTwoFactorReminder}
+    >
       {children}
     </CmsClientLayout>
   );

package/templates/nextblock-template/app/cms/settings/email/actions.ts

@@ -0,0 +1,60 @@
+// app/cms/settings/email/actions.ts
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+import { saveEmailSettings } from '../../../../lib/config/email-settings';
+import { sendEmail } from '../../../actions/email';
+
+async function assertAdmin() {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    throw new Error('You must be logged in to update settings.');
+  }
+  const { data: profile, error } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+  if (error || !profile || profile.role !== 'ADMIN') {
+    throw new Error('You do not have permission to perform this action.');
+  }
+}
+
+export async function updateEmailSettings(formData: FormData) {
+  await assertAdmin();
+
+  await saveEmailSettings({
+    host: String(formData.get('host') ?? ''),
+    port: String(formData.get('port') ?? ''),
+    fromEmail: String(formData.get('fromEmail') ?? ''),
+    fromName: String(formData.get('fromName') ?? ''),
+    secure: formData.get('secure') === 'on' || formData.get('secure') === 'true',
+    user: String(formData.get('user') ?? ''),
+    pass: String(formData.get('pass') ?? ''),
+  });
+
+  revalidatePath('/cms/settings/email');
+  return { success: true as const, message: 'Email settings saved.' };
+}
+
+export async function sendTestEmail(formData: FormData) {
+  await assertAdmin();
+
+  const to = String(formData.get('to') ?? '').trim();
+  if (!to) {
+    throw new Error('Enter a recipient email address.');
+  }
+
+  await sendEmail({
+    to,
+    subject: 'NextBlock test email',
+    text: 'This is a test email from your NextBlock CMS. SMTP is configured correctly.',
+    html: '<p>This is a test email from your NextBlock CMS. SMTP is configured correctly. 🎉</p>',
+  });
+
+  return { success: true as const, message: `Test email sent to ${to}.` };
+}

package/templates/nextblock-template/app/cms/settings/email/components/EmailForm.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { useRef, useState, useTransition } from 'react';
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Checkbox,
+  Input,
+  Label,
+  Spinner,
+} from '@nextblock-cms/ui';
+import type { EmailSettingsView } from '../../../../../lib/config/email-settings';
+import { updateEmailSettings, sendTestEmail } from '../actions';
+import type { Message } from '../../../../../components/form-message';
+import { useHotkeys } from '../../../../../hooks/use-hotkeys';
+
+interface EmailFormProps {
+  initialSettings: EmailSettingsView;
+}
+
+export default function EmailForm({ initialSettings }: EmailFormProps) {
+  const [isPending, startTransition] = useTransition();
+  const [isTesting, startTestTransition] = useTransition();
+  const [message, setMessage] = useState<Message | null>(null);
+
+  const [host, setHost] = useState(initialSettings.host);
+  const [port, setPort] = useState(initialSettings.port);
+  const [fromEmail, setFromEmail] = useState(initialSettings.fromEmail);
+  const [fromName, setFromName] = useState(initialSettings.fromName);
+  const [secure, setSecure] = useState(initialSettings.secure);
+  const [user, setUser] = useState('');
+  const [pass, setPass] = useState('');
+  const [testTo, setTestTo] = useState('');
+
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setMessage(null);
+    const formData = new FormData();
+    formData.append('host', host);
+    formData.append('port', port);
+    formData.append('fromEmail', fromEmail);
+    formData.append('fromName', fromName);
+    formData.append('secure', secure ? 'on' : '');
+    // Only send credentials when changed — blank keeps the stored secret.
+    if (user.trim()) formData.append('user', user.trim());
+    if (pass.trim()) formData.append('pass', pass.trim());
+
+    startTransition(async () => {
+      try {
+        const result = await updateEmailSettings(formData);
+        setMessage({ success: result.message });
+        setUser('');
+        setPass('');
+      } catch (error) {
+        setMessage({ error: error instanceof Error ? error.message : 'Failed to save settings.' });
+      }
+    });
+  };
+
+  const handleSendTest = () => {
+    setMessage(null);
+    const formData = new FormData();
+    formData.append('to', testTo.trim());
+    startTestTransition(async () => {
+      try {
+        const result = await sendTestEmail(formData);
+        setMessage({ success: result.message });
+      } catch (error) {
+        setMessage({ error: error instanceof Error ? error.message : 'Failed to send test email.' });
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {initialSettings.envFallbackActive && (
+        <Alert className="py-2 px-4">
+          <AlertDescription className="text-xs">
+            SMTP is currently read from environment variables (<code>SMTP_*</code>). Saving here
+            moves it into the database and takes precedence.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="host">SMTP host</Label>
+            <Input id="host" value={host} onChange={(e) => setHost(e.target.value)} placeholder="smtp.example.com" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="port">Port</Label>
+            <Input id="port" value={port} onChange={(e) => setPort(e.target.value)} placeholder="465" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="fromEmail">From email</Label>
+            <Input id="fromEmail" type="email" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} placeholder="no-reply@example.com" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="fromName">From name</Label>
+            <Input id="fromName" value={fromName} onChange={(e) => setFromName(e.target.value)} placeholder="My Site" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="user">
+              Username{' '}
+              {initialSettings.hasUser && (
+                <span className="text-xs text-muted-foreground">
+                  (stored{initialSettings.userLast4 ? ` ••••${initialSettings.userLast4}` : ''} — leave blank to keep)
+                </span>
+              )}
+            </Label>
+            <Input id="user" autoComplete="off" value={user} onChange={(e) => setUser(e.target.value)} placeholder={initialSettings.hasUser ? '••••••••' : 'smtp username'} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="pass">
+              Password{' '}
+              {initialSettings.hasPass && (
+                <span className="text-xs text-muted-foreground">(stored — leave blank to keep)</span>
+              )}
+            </Label>
+            <Input id="pass" type="password" autoComplete="new-password" value={pass} onChange={(e) => setPass(e.target.value)} placeholder={initialSettings.hasPass ? '••••••••' : 'smtp password'} />
+          </div>
+        </div>
+
+        <label className="flex items-start gap-3">
+          <Checkbox checked={secure} onCheckedChange={(c) => setSecure(c === true)} className="mt-1" />
+          <span className="text-sm">
+            <span className="font-medium">Use implicit TLS (SMTPS)</span>
+            <span className="block text-xs text-muted-foreground">
+              Enable for port 465. Disable for STARTTLS on ports like 587.
+            </span>
+          </span>
+        </label>
+
+        <div className="flex items-center gap-4">
+          <Button type="submit" disabled={isPending}>
+            {isPending ? (<><Spinner className="mr-2 h-4 w-4" /> Saving…</>) : 'Save settings'}
+          </Button>
+        </div>
+      </form>
+
+      <div className="rounded-lg border p-4 space-y-3">
+        <div className="space-y-1">
+          <Label htmlFor="testTo">Send a test email</Label>
+          <p className="text-xs text-muted-foreground">
+            Save your settings first, then send a test message to confirm delivery.
+          </p>
+        </div>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <Input
+            id="testTo"
+            type="email"
+            value={testTo}
+            onChange={(e) => setTestTo(e.target.value)}
+            placeholder="you@example.com"
+            className="sm:max-w-xs"
+          />
+          <Button type="button" variant="outline" onClick={handleSendTest} disabled={isTesting || !testTo.trim()}>
+            {isTesting ? (<><Spinner className="mr-2 h-4 w-4" /> Sending…</>) : 'Send test email'}
+          </Button>
+        </div>
+      </div>
+
+      {message && (
+        <Alert variant={'error' in message ? 'destructive' : 'success'} className="py-2 px-4">
+          <AlertDescription>
+            {'error' in message
+              ? message.error
+              : 'success' in message
+                ? message.success
+                : message.message}
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/email/page.tsx

@@ -0,0 +1,28 @@
+// app/cms/settings/email/page.tsx
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+import { getEmailSettingsView } from '../../../../lib/config/email-settings';
+import EmailForm from './components/EmailForm';
+
+export const dynamic = 'force-dynamic';
+
+export default async function EmailSettingsPage() {
+  const settings = await getEmailSettingsView();
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>Email (SMTP)</CardTitle>
+          <CardDescription>
+            Configure the SMTP server used for transactional email (verification, password
+            resets, 2FA codes, contact notifications). Credentials are encrypted at rest. If left
+            blank, NextBlock falls back to the <code>SMTP_*</code> environment variables.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <EmailForm initialSettings={settings} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/google-analytics/actions.ts

@@ -0,0 +1,60 @@
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+import {
+  getPrivacySettings as readPrivacySettings,
+  mergePrivacySettings,
+} from '../../../../lib/privacy/settings';
+import type { PrivacySettings } from '../../../../lib/privacy/types';
+
+export interface GoogleAnalyticsSettings {
+  gtm_id: string;
+  ga_measurement_id: string;
+  custom_scripts: string;
+}
+
+export async function getGoogleAnalyticsSettings(): Promise<GoogleAnalyticsSettings> {
+  const settings = await readPrivacySettings();
+  return {
+    gtm_id: settings.gtm_id,
+    ga_measurement_id: settings.ga_measurement_id,
+    custom_scripts: settings.custom_scripts,
+  };
+}
+
+async function assertAdmin(): Promise<void> {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    throw new Error('You must be logged in to update settings.');
+  }
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+  if (!profile || profile.role !== 'ADMIN') {
+    throw new Error('You do not have permission to perform this action.');
+  }
+}
+
+export async function updateGoogleAnalyticsSettings(formData: FormData) {
+  await assertAdmin();
+
+  // Only the analytics fields are touched; mergePrivacySettings preserves the
+  // banner/corporate fields owned by the Privacy & Consent page.
+  const patch: Partial<PrivacySettings> = {
+    gtm_id: (formData.get('gtm_id')?.toString() ?? '').trim(),
+    ga_measurement_id: (formData.get('ga_measurement_id')?.toString() ?? '').trim(),
+    custom_scripts: formData.get('custom_scripts')?.toString() ?? '',
+  };
+
+  await mergePrivacySettings(patch);
+  // The analytics guard (GTM/GA4 + custom scripts) lives in the root layout.
+  revalidatePath('/', 'layout');
+
+  return { success: true, message: 'Google Analytics settings saved.' };
+}