create-nextblock 0.10.2 → 0.10.4

package/templates/nextblock-template/app/cms/settings/google-analytics/components/GoogleAnalyticsForm.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useRef, useState, useTransition } from 'react';
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Input,
+  Label,
+  Spinner,
+  Textarea,
+} from '@nextblock-cms/ui';
+import { Message } from '../../../../../components/form-message';
+import { useHotkeys } from '../../../../../hooks/use-hotkeys';
+import {
+  updateGoogleAnalyticsSettings,
+  type GoogleAnalyticsSettings,
+} from '../actions';
+
+interface GoogleAnalyticsFormProps {
+  initialSettings: GoogleAnalyticsSettings;
+}
+
+export default function GoogleAnalyticsForm({ initialSettings }: GoogleAnalyticsFormProps) {
+  const [isPending, startTransition] = useTransition();
+  const [message, setMessage] = useState<Message | null>(null);
+
+  const [gtmId, setGtmId] = useState(initialSettings.gtm_id);
+  const [gaId, setGaId] = useState(initialSettings.ga_measurement_id);
+  const [customScripts, setCustomScripts] = useState(initialSettings.custom_scripts);
+
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('gtm_id', gtmId);
+    formData.append('ga_measurement_id', gaId);
+    formData.append('custom_scripts', customScripts);
+
+    startTransition(async () => {
+      try {
+        const result = await updateGoogleAnalyticsSettings(formData);
+        setMessage({ success: result.message });
+      } catch (error) {
+        setMessage({
+          error: error instanceof Error ? error.message : 'An unknown error occurred.',
+        });
+      }
+    });
+  };
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-8">
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-sm font-semibold">Analytics &amp; tracking</h3>
+          <p className="text-xs text-slate-500">
+            These load <strong>only</strong> after a visitor consents to analytics in the
+            Law 25 banner (managed under Privacy &amp; Consent), so the default page weight
+            stays at zero tracking bytes.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="gtm_id">Google Tag Manager ID</Label>
+          <Input
+            id="gtm_id"
+            value={gtmId}
+            onChange={(e) => setGtmId(e.target.value)}
+            placeholder="GTM-XXXXXXX"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="ga_measurement_id">GA4 Measurement ID</Label>
+          <Input
+            id="ga_measurement_id"
+            value={gaId}
+            onChange={(e) => setGaId(e.target.value)}
+            placeholder="G-XXXXXXXXXX"
+          />
+          <p className="text-xs text-slate-500">
+            Loads Google Analytics 4 directly via <code>gtag</code>. If you also configure
+            GA4 inside your GTM container, set only one of these to avoid double-counting.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="custom_scripts">Custom consented scripts (optional)</Label>
+          <Textarea
+            id="custom_scripts"
+            value={customScripts}
+            onChange={(e) => setCustomScripts(e.target.value)}
+            placeholder="<!-- Additional marketing/analytics <script> tags, injected only after consent -->"
+            rows={4}
+            className="font-mono text-xs"
+          />
+        </div>
+      </section>
+
+      <div className="flex items-center gap-4">
+        <Button type="submit" disabled={isPending}>
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4 animate-spin" /> Saving...
+            </>
+          ) : (
+            'Save Google Analytics Settings'
+          )}
+        </Button>
+        {message && (
+          <Alert
+            variant={'success' in message ? 'success' : 'destructive'}
+            className="py-2 px-4 w-auto inline-flex items-center"
+          >
+            <AlertDescription>
+              {'success' in message
+                ? message.success
+                : 'error' in message
+                  ? message.error
+                  : ''}
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,26 @@
+// app/cms/settings/google-analytics/page.tsx
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+import { getGoogleAnalyticsSettings } from './actions';
+import GoogleAnalyticsForm from './components/GoogleAnalyticsForm';
+
+export default async function GoogleAnalyticsSettingsPage() {
+  const settings = await getGoogleAnalyticsSettings();
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>Google Analytics</CardTitle>
+          <CardDescription>
+            Configure Google Tag Manager and Google Analytics 4. These tags load only
+            after a visitor accepts analytics in the Law 25 consent banner (managed under
+            Privacy &amp; Consent), so the default page weight stays at zero tracking bytes.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <GoogleAnalyticsForm initialSettings={settings} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -4,7 +4,7 @@ import { createClient } from '@nextblock-cms/db/server';
 import { revalidatePath } from 'next/cache';
 import {
   getPrivacySettings as readPrivacySettings,
-  savePrivacySettings,
+  mergePrivacySettings,
 } from '../../../../lib/privacy/settings';
 import type { PrivacySettings } from '../../../../lib/privacy/types';
 
@@ -33,11 +33,10 @@ async function assertAdmin(): Promise<void> {
 export async function updatePrivacySettings(formData: FormData) {
   await assertAdmin();
 
-  const settings: PrivacySettings = {
+  // Analytics fields (GTM/GA4/custom scripts) are owned by the Google Analytics
+  // settings page; merge only the consent + corporate fields so they aren't clobbered.
+  const patch: Partial<PrivacySettings> = {
     banner_enabled: formData.get('banner_enabled') === 'true',
-    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() ?? '',
     corporate: {
       legal_name: (formData.get('legal_name')?.toString() ?? '').trim(),
       address: (formData.get('address')?.toString() ?? '').trim(),
@@ -45,7 +44,7 @@ export async function updatePrivacySettings(formData: FormData) {
     },
   };
 
-  await savePrivacySettings(settings);
+  await mergePrivacySettings(patch);
   // Footer (corporate identity) and the analytics guard live in the root layout.
   revalidatePath('/', 'layout');
 

package/templates/nextblock-template/app/cms/settings/privacy/components/PrivacyForm.tsx

@@ -26,9 +26,6 @@ export default function PrivacyForm({ initialSettings }: PrivacyFormProps) {
   const [message, setMessage] = useState<Message | null>(null);
 
   const [bannerEnabled, setBannerEnabled] = useState(initialSettings.banner_enabled);
-  const [gtmId, setGtmId] = useState(initialSettings.gtm_id);
-  const [gaId, setGaId] = useState(initialSettings.ga_measurement_id);
-  const [customScripts, setCustomScripts] = useState(initialSettings.custom_scripts);
   const [legalName, setLegalName] = useState(initialSettings.corporate.legal_name);
   const [address, setAddress] = useState(initialSettings.corporate.address);
   const [supportEmail, setSupportEmail] = useState(initialSettings.corporate.support_email);
@@ -42,9 +39,6 @@ export default function PrivacyForm({ initialSettings }: PrivacyFormProps) {
 
     const formData = new FormData();
     formData.append('banner_enabled', String(bannerEnabled));
-    formData.append('gtm_id', gtmId);
-    formData.append('ga_measurement_id', gaId);
-    formData.append('custom_scripts', customScripts);
     formData.append('legal_name', legalName);
     formData.append('address', address);
     formData.append('support_email', supportEmail);
@@ -84,48 +78,6 @@ export default function PrivacyForm({ initialSettings }: PrivacyFormProps) {
 
       <Separator />
 
-      {/* Analytics */}
-      <section className="space-y-4">
-        <div>
-          <h3 className="text-sm font-semibold">Analytics &amp; tracking</h3>
-          <p className="text-xs text-slate-500">
-            These load <strong>only</strong> after a visitor consents to analytics, so
-            the default page weight stays at zero tracking bytes.
-          </p>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="gtm_id">Google Tag Manager ID</Label>
-          <Input
-            id="gtm_id"
-            value={gtmId}
-            onChange={(e) => setGtmId(e.target.value)}
-            placeholder="GTM-XXXXXXX"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="ga_measurement_id">GA4 Measurement ID (optional)</Label>
-          <Input
-            id="ga_measurement_id"
-            value={gaId}
-            onChange={(e) => setGaId(e.target.value)}
-            placeholder="G-XXXXXXXXXX"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="custom_scripts">Custom consented scripts (optional)</Label>
-          <Textarea
-            id="custom_scripts"
-            value={customScripts}
-            onChange={(e) => setCustomScripts(e.target.value)}
-            placeholder="<!-- Additional marketing/analytics <script> tags, injected only after consent -->"
-            rows={4}
-            className="font-mono text-xs"
-          />
-        </div>
-      </section>
-
-      <Separator />
-
       {/* Corporate identity */}
       <section className="space-y-4">
         <div>

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

@@ -12,9 +12,10 @@ export default async function PrivacySettingsPage() {
         <CardHeader>
           <CardTitle>Privacy &amp; Consent (Law 25 / CASL)</CardTitle>
           <CardDescription>
-            Control the Quebec Law 25 consent banner, the analytics that load only
-            after consent, and the corporate identity appended to the CASL-compliant
-            footer. Analytics scripts download zero bytes until a visitor opts in.
+            Control the Quebec Law 25 consent banner and the corporate identity appended
+            to the CASL-compliant footer. Analytics tags (Google Tag Manager / GA4) are
+            configured under Settings &rarr; Google Analytics and download zero bytes until
+            a visitor opts in here.
           </CardDescription>
         </CardHeader>
         <CardContent>

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

@@ -0,0 +1,44 @@
+// app/cms/settings/registration/actions.ts
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+import {
+  getSystemConfiguration,
+  updateSystemConfiguration,
+} from '../../../../lib/setup/system-config';
+
+export async function getRegistrationSettings(): Promise<{ autoAcceptSignups: boolean }> {
+  const config = await getSystemConfiguration();
+  return { autoAcceptSignups: config.auto_accept_signups };
+}
+
+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 updateRegistrationSettings(formData: FormData) {
+  await assertAdmin();
+
+  const autoAcceptSignups =
+    formData.get('autoAcceptSignups') === 'on' || formData.get('autoAcceptSignups') === 'true';
+
+  await updateSystemConfiguration({ auto_accept_signups: autoAcceptSignups });
+
+  revalidatePath('/cms/settings/registration');
+  return { success: true as const, message: 'Registration settings saved.' };
+}

package/templates/nextblock-template/app/cms/settings/registration/components/RegistrationForm.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useRef, useState, useTransition } from 'react';
+import { Alert, AlertDescription, Button, Checkbox, Spinner } from '@nextblock-cms/ui';
+import { updateRegistrationSettings } from '../actions';
+import type { Message } from '../../../../../components/form-message';
+import { useHotkeys } from '../../../../../hooks/use-hotkeys';
+
+interface RegistrationFormProps {
+  initialSettings: { autoAcceptSignups: boolean };
+}
+
+export default function RegistrationForm({ initialSettings }: RegistrationFormProps) {
+  const [isPending, startTransition] = useTransition();
+  const [message, setMessage] = useState<Message | null>(null);
+  const [autoAccept, setAutoAccept] = useState(initialSettings.autoAcceptSignups);
+
+  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('autoAcceptSignups', autoAccept ? 'on' : '');
+
+    startTransition(async () => {
+      try {
+        const result = await updateRegistrationSettings(formData);
+        setMessage({ success: result.message });
+      } catch (error) {
+        setMessage({ error: error instanceof Error ? error.message : 'Failed to save settings.' });
+      }
+    });
+  };
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
+      <label className="flex items-start gap-3 rounded-lg border p-4">
+        <Checkbox checked={autoAccept} onCheckedChange={(c) => setAutoAccept(c === true)} className="mt-1" />
+        <span className="text-sm">
+          <span className="font-medium">Auto-approve new registrations (skip email verification)</span>
+          <span className="block text-xs text-muted-foreground">
+            New sign-ups become active immediately, even without SMTP configured. Convenient for
+            local / self-hosted use. Leave off for public production sites so new accounts must
+            confirm their email address.
+          </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>
+        {message && (
+          <Alert variant={'error' in message ? 'destructive' : 'success'} className="py-2 px-4 w-auto inline-flex items-center">
+            <AlertDescription>
+              {'error' in message ? message.error : 'success' in message ? message.success : message.message}
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,27 @@
+// app/cms/settings/registration/page.tsx
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+import { getRegistrationSettings } from './actions';
+import RegistrationForm from './components/RegistrationForm';
+
+export const dynamic = 'force-dynamic';
+
+export default async function RegistrationSettingsPage() {
+  const settings = await getRegistrationSettings();
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>Sign-ups &amp; Registration</CardTitle>
+          <CardDescription>
+            Control how new public registrations are handled. Email verification requires a
+            configured SMTP server (Settings → Configuration → Email).
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RegistrationForm initialSettings={settings} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -106,6 +106,9 @@ export async function updateAutoAcceptSignups(formData: FormData) {
 // --- Global policy (admin only) -------------------------------------------------
 
 export async function updateGlobalSecuritySettings(formData: FormData) {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Security settings are disabled in the sandbox environment.');
+  }
   const { supabase, user } = await requireUser();
   const { data: profile } = await supabase
     .from('profiles')

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

@@ -503,8 +503,8 @@ function AdminPolicyCard({
             <div className="space-y-1">
               <Label htmlFor="enforce_staff_2fa">Encourage staff to enable 2FA</Label>
               <p className="text-xs text-slate-500">
-                Surfaces a reminder for ADMIN/WRITER accounts that haven&rsquo;t set up a
-                second factor.
+                Shows a reminder banner across the CMS to ADMIN/WRITER accounts that
+                haven&rsquo;t set up a second factor. On by default.
               </p>
             </div>
           </div>

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

@@ -1,8 +1,28 @@
 // app/cms/settings/security/page.tsx
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
 import { getSecurityPanelData } from './actions';
 import SecurityPanel from './components/SecurityPanel';
 
 export default async function SecuritySettingsPage() {
+  // The sandbox/demo runs on a single shared account, so per-account security (2FA,
+  // trusted devices, policy) is intentionally disabled there.
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    return (
+      <div className="max-w-4xl mx-auto">
+        <Card>
+          <CardHeader>
+            <CardTitle>Security &amp; 2FA</CardTitle>
+            <CardDescription>
+              Security settings are disabled in the sandbox/demo environment, which runs on a
+              shared account and resets daily. They are available in a real installation.
+            </CardDescription>
+          </CardHeader>
+          <CardContent />
+        </Card>
+      </div>
+    );
+  }
+
   const data = await getSecurityPanelData();
 
   return (

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

@@ -440,7 +440,10 @@ export default async function RootLayout({
     privacySettings,
   } = await loadLayoutData();
   const draft = await draftMode();
-  const resolvedGtmId = privacySettings.gtm_id || process.env.NEXT_PUBLIC_GTM_ID || '';
+  // GTM container id comes solely from the privacy settings row (site_settings).
+  // There is intentionally no NEXT_PUBLIC_GTM_ID env fallback — analytics is
+  // configured in the CMS (Settings -> Privacy), not via build-time env.
+  const resolvedGtmId = privacySettings.gtm_id || '';
   const visualEditingEnabled =
     draft.isEnabled || process.env.NEXTBLOCK_VISUAL_EDITING_ENABLED === 'true';
   const isVercelDeployment = process.env.VERCEL === '1';
@@ -519,6 +522,7 @@ export default async function RootLayout({
         <DeferredSpeedInsights />
         <ConsentGatedAnalytics
           gtmId={resolvedGtmId}
+          gaMeasurementId={privacySettings.ga_measurement_id || ''}
           customScripts={privacySettings.custom_scripts}
           nonce={nonce}
         />