create-nextblock 0.12.16 → 0.13.2

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

@@ -6,16 +6,23 @@ import { redirect } from 'next/navigation';
 import { createClient, verifyPackageOnline } from '@nextblock-cms/db/server';
 
 import {
+  CORTEX_AI_AGENT_SETTINGS_DEFAULTS,
+  CORTEX_AI_AGENT_SETTINGS_KEY,
   CORTEX_AI_OPENROUTER_MODEL_SELECTION_SETTING_KEY,
   CORTEX_AI_OPENROUTER_SETTING_KEY,
   CORTEX_AI_PACKAGE_ID,
+  CORTEX_AI_PEXELS_SETTING_KEY,
+  CORTEX_AI_UNSPLASH_APP_NAME_SETTING_KEY,
+  CORTEX_AI_UNSPLASH_SETTING_KEY,
   createCortexAiStoredModelSelection,
   encryptStoredOpenRouterApiKey,
   getCortexAiEnvConfig,
   getEnvOpenRouterKeyStatus,
   getStoredOpenRouterKeyStatus,
   listCortexAiCompatibleOpenRouterModels,
+  normalizeCortexAiAgentSettings,
   safeParseCortexAiModelSelection,
+  type CortexAiAgentSettings,
   type CortexAiStoredModelSelection,
 } from '@nextblock-cms/cortex';
 
@@ -23,14 +30,24 @@ const CORTEX_AI_SETTINGS_PATH = '/cms/settings/cortex-ai';
 
 type CortexAiSettingsStatus = {
   activeKeySource: 'env' | 'stored' | 'none';
+  activeStockProvider: 'pexels' | 'unsplash' | null;
+  agentSettings: CortexAiAgentSettings;
   hasEncryptionKey: boolean;
   hasEnvOpenRouterKey: boolean;
+  hasEnvPexelsKey: boolean;
+  hasEnvUnsplashKey: boolean;
   hasStoredOpenRouterKey: boolean;
+  hasStoredPexelsKey: boolean;
+  hasStoredUnsplashKey: boolean;
   isPackageActive: boolean;
   maskedEnvOpenRouterKey: string | null;
   maskedStoredOpenRouterKey: string | null;
+  maskedStoredPexelsKey: string | null;
+  maskedStoredUnsplashKey: string | null;
   selectedModel: CortexAiStoredModelSelection | null;
+  stockKeysUpdatedAt: string | null;
   storedOpenRouterKeyUpdatedAt: string | null;
+  unsplashAppName: string | null;
 };
 
 function redirectWithStatus(status: 'success' | 'error', message: string): never {
@@ -66,7 +83,15 @@ export async function getCortexAiSettingsStatus(): Promise<CortexAiSettingsStatu
   const env = getCortexAiEnvConfig();
   const envKeyStatus = getEnvOpenRouterKeyStatus();
 
-  const [{ data: storedKeyRow }, { data: selectedModelRow }, isPackageActive] = await Promise.all([
+  const [
+    { data: storedKeyRow },
+    { data: selectedModelRow },
+    { data: storedPexelsRow },
+    { data: storedUnsplashRow },
+    { data: unsplashAppNameRow },
+    { data: agentSettingsRow },
+    isPackageActive,
+  ] = await Promise.all([
     supabase
       .from('site_settings')
       .select('value')
@@ -77,11 +102,44 @@ export async function getCortexAiSettingsStatus(): Promise<CortexAiSettingsStatu
       .select('value')
       .eq('key', CORTEX_AI_OPENROUTER_MODEL_SELECTION_SETTING_KEY)
       .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_PEXELS_SETTING_KEY)
+      .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_UNSPLASH_SETTING_KEY)
+      .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_UNSPLASH_APP_NAME_SETTING_KEY)
+      .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_AGENT_SETTINGS_KEY)
+      .maybeSingle(),
     verifyPackageOnline(CORTEX_AI_PACKAGE_ID).catch(() => false),
   ]);
 
   const storedKeyStatus = getStoredOpenRouterKeyStatus(storedKeyRow?.value);
   const selectedModel = safeParseCortexAiModelSelection(selectedModelRow?.value);
+  const pexelsStatus = getStoredOpenRouterKeyStatus(storedPexelsRow?.value);
+  const unsplashStatus = getStoredOpenRouterKeyStatus(storedUnsplashRow?.value);
+  const hasEnvPexelsKey = Boolean(process.env.PEXELS_API_KEY?.trim());
+  const hasEnvUnsplashKey = Boolean(process.env.UNSPLASH_ACCESS_KEY?.trim());
+  const activeStockProvider: 'pexels' | 'unsplash' | null = pexelsStatus.hasStoredKey
+    ? 'pexels'
+    : unsplashStatus.hasStoredKey
+      ? 'unsplash'
+      : hasEnvPexelsKey
+        ? 'pexels'
+        : hasEnvUnsplashKey
+          ? 'unsplash'
+          : null;
 
   return {
     activeKeySource: storedKeyStatus.hasStoredKey
@@ -89,14 +147,27 @@ export async function getCortexAiSettingsStatus(): Promise<CortexAiSettingsStatu
       : env.hasOpenRouterEnvKey
         ? 'env'
         : 'none',
+    activeStockProvider,
     hasEncryptionKey: env.hasEncryptionKey,
     hasEnvOpenRouterKey: env.hasOpenRouterEnvKey,
+    hasEnvPexelsKey,
+    hasEnvUnsplashKey,
     hasStoredOpenRouterKey: storedKeyStatus.hasStoredKey,
+    hasStoredPexelsKey: pexelsStatus.hasStoredKey,
+    hasStoredUnsplashKey: unsplashStatus.hasStoredKey,
     isPackageActive,
     maskedEnvOpenRouterKey: envKeyStatus.maskedEnvOpenRouterKey,
     maskedStoredOpenRouterKey: storedKeyStatus.maskedKey,
+    maskedStoredPexelsKey: pexelsStatus.maskedKey,
+    maskedStoredUnsplashKey: unsplashStatus.maskedKey,
+    agentSettings: normalizeCortexAiAgentSettings(agentSettingsRow?.value),
     selectedModel: storedKeyStatus.hasStoredKey ? selectedModel : null,
+    stockKeysUpdatedAt: pexelsStatus.updatedAt || unsplashStatus.updatedAt || null,
     storedOpenRouterKeyUpdatedAt: storedKeyStatus.updatedAt,
+    unsplashAppName:
+      typeof unsplashAppNameRow?.value === 'string' && unsplashAppNameRow.value.trim()
+        ? unsplashAppNameRow.value.trim()
+        : null,
   };
 }
 
@@ -162,6 +233,154 @@ export async function clearOpenRouterApiKeyAction() {
   redirectWithStatus('success', 'Stored OpenRouter key cleared.');
 }
 
+export async function saveStockPhotoKeysAction(formData: FormData) {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot save keys to the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const pexelsKey = String(formData.get('pexels_api_key') || '').trim();
+    const unsplashKey = String(formData.get('unsplash_access_key') || '').trim();
+    const unsplashAppName = String(formData.get('unsplash_app_name') || '').trim();
+
+    if (!pexelsKey && !unsplashKey && !unsplashAppName) {
+      throw new Error('Enter a Pexels or Unsplash API key, or an Unsplash app name.');
+    }
+
+    const rows: Array<{ key: string; value: unknown }> = [];
+
+    if (pexelsKey) {
+      rows.push({
+        key: CORTEX_AI_PEXELS_SETTING_KEY,
+        value: encryptStoredOpenRouterApiKey(pexelsKey),
+      });
+    }
+
+    if (unsplashKey) {
+      rows.push({
+        key: CORTEX_AI_UNSPLASH_SETTING_KEY,
+        value: encryptStoredOpenRouterApiKey(unsplashKey),
+      });
+    }
+
+    // Non-secret: the registered Unsplash app name for attribution utm_source.
+    if (unsplashAppName) {
+      rows.push({ key: CORTEX_AI_UNSPLASH_APP_NAME_SETTING_KEY, value: unsplashAppName });
+    }
+
+    const { error } = await supabase.from('site_settings').upsert(rows);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to save stock photo keys.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Stock photo API key saved.');
+}
+
+export async function clearStockPhotoKeysAction() {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot clear keys from the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const { error } = await supabase
+      .from('site_settings')
+      .delete()
+      .in('key', [CORTEX_AI_PEXELS_SETTING_KEY, CORTEX_AI_UNSPLASH_SETTING_KEY]);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to clear stock photo keys.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Stock photo API keys cleared.');
+}
+
+export async function saveCortexAiAgentSettingsAction(formData: FormData) {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot save settings to the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const unlimited = String(formData.get('max_output_unlimited') || '') === 'on';
+    const rawMaxOutput = String(formData.get('max_output_tokens') || '').trim();
+    const rawTimeoutSeconds = Number(formData.get('response_timeout_seconds'));
+
+    // normalizeCortexAiAgentSettings clamps everything to safe bounds.
+    const settings = normalizeCortexAiAgentSettings({
+      maxOutputTokens: unlimited
+        ? null
+        : rawMaxOutput
+          ? Number(rawMaxOutput)
+          : CORTEX_AI_AGENT_SETTINGS_DEFAULTS.maxOutputTokens,
+      maxSteps: Number(formData.get('max_steps')),
+      responseTimeoutMs: Number.isFinite(rawTimeoutSeconds)
+        ? rawTimeoutSeconds * 1000
+        : CORTEX_AI_AGENT_SETTINGS_DEFAULTS.responseTimeoutMs,
+      temperature: Number(formData.get('temperature')),
+    });
+
+    const { error } = await supabase.from('site_settings').upsert({
+      key: CORTEX_AI_AGENT_SETTINGS_KEY,
+      value: settings,
+    });
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to save advanced settings.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Advanced agent settings saved.');
+}
+
+export async function resetCortexAiAgentSettingsAction() {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot change settings in the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const { error } = await supabase
+      .from('site_settings')
+      .delete()
+      .eq('key', CORTEX_AI_AGENT_SETTINGS_KEY);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to reset advanced settings.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Advanced agent settings reset to defaults.');
+}
+
 export async function saveCortexAiModelSelectionAction(formData: FormData) {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
     throw new Error('Sandbox environment cannot save model selection to the database.');

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

@@ -36,6 +36,7 @@ export default async function CortexAiSettingsPage({
     : {};
   const storedKeyUpdatedAt = formatDate(status.storedOpenRouterKeyUpdatedAt);
   const selectedModelUpdatedAt = formatDate(status.selectedModel?.updatedAt || null);
+  const stockKeysUpdatedAt = formatDate(status.stockKeysUpdatedAt);
   let compatibleModels: Awaited<ReturnType<typeof listCortexAiCompatibleOpenRouterModels>> = [];
   let modelCatalogError: string | null = null;
 
@@ -73,6 +74,16 @@ export default async function CortexAiSettingsPage({
       selectedModelUpdatedAt={selectedModelUpdatedAt}
       hasEncryptionKey={status.hasEncryptionKey}
       modelCatalogError={modelCatalogError}
+      activeStockProvider={status.activeStockProvider}
+      hasStoredPexelsKey={status.hasStoredPexelsKey}
+      maskedStoredPexelsKey={status.maskedStoredPexelsKey}
+      hasStoredUnsplashKey={status.hasStoredUnsplashKey}
+      maskedStoredUnsplashKey={status.maskedStoredUnsplashKey}
+      hasEnvPexelsKey={status.hasEnvPexelsKey}
+      hasEnvUnsplashKey={status.hasEnvUnsplashKey}
+      stockKeysUpdatedAt={stockKeysUpdatedAt}
+      unsplashAppName={status.unsplashAppName}
+      agentSettings={status.agentSettings}
       successMessage={params.success}
       errorMessage={params.error}
     />

package/templates/nextblock-template/app/cms/users/[id]/edit/page.tsx

@@ -17,6 +17,7 @@ async function getUserAndProfileData(userId: string): Promise<{
   authUser: AuthUser;
   profile: Profile | null;
   addresses: Awaited<ReturnType<typeof getDefaultUserAddresses>>;
+  isSoleAdmin: boolean;
 } | null> {
 
   // Fetch user from auth.users
@@ -64,7 +65,24 @@ async function getUserAndProfileData(userId: string): Promise<{
 
   const addresses = await getDefaultUserAddresses(userId, serviceSupabase as any);
 
-  return { authUser: simplifiedAuthUser, profile: profileData as Profile | null, addresses };
+  // Is this user the only remaining Admin? If so, the edit form locks the role selector
+  // so the last admin can't demote themselves out of CMS access (the server action also
+  // guards this — the lock just prevents hitting that error).
+  let isSoleAdmin = false;
+  if ((profileData as Profile | null)?.role === 'ADMIN') {
+    const { count } = await serviceSupabase
+      .from('profiles')
+      .select('*', { count: 'exact', head: true })
+      .eq('role', 'ADMIN');
+    isSoleAdmin = count === 1;
+  }
+
+  return {
+    authUser: simplifiedAuthUser,
+    profile: profileData as Profile | null,
+    addresses,
+    isSoleAdmin,
+  };
 }
 
 export default async function EditUserPage(props: { params: Promise<{ id: string }> }) {
@@ -90,6 +108,7 @@ export default async function EditUserPage(props: { params: Promise<{ id: string
         userToEditProfile={userData.profile}
         userToEditAddresses={userData.addresses}
         formAction={updateUserActionWithId}
+        lockRole={userData.isSoleAdmin}
       />
     </div>
   );

package/templates/nextblock-template/app/cms/users/actions.ts

@@ -57,6 +57,75 @@ function createServiceRoleClient() {
   });
 }
 
+export async function createUser(formData: FormData) {
+  const supabase = createClient();
+  const adminCheck = await verifyAdmin(supabase);
+  if (!adminCheck.isAdmin) {
+    return { error: adminCheck.error || "Unauthorized" };
+  }
+
+  const email = (formData.get("email") as string | null)?.trim().toLowerCase() || "";
+  const password = (formData.get("password") as string | null) || "";
+  const fullName = (formData.get("full_name") as string | null)?.trim() || "";
+  const role = formData.get("role") as UserRole;
+  // Admin-created accounts are confirmed by default so the user can sign in
+  // immediately without an SMTP round-trip (mirrors completeSetup / auto-accept).
+  const emailConfirm = formData.get("email_confirm") !== "false";
+
+  if (!email) {
+    return { error: "Email is required." };
+  }
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return { error: "Enter a valid email address." };
+  }
+  if (!password || password.length < 8) {
+    return { error: "Password must be at least 8 characters." };
+  }
+  if (!role || !['ADMIN', 'WRITER', 'USER'].includes(role)) {
+    return { error: "Invalid role specified." };
+  }
+
+  const adminSupabase = createServiceRoleClient();
+
+  const { data: created, error: createError } = await adminSupabase.auth.admin.createUser({
+    email,
+    password,
+    email_confirm: emailConfirm,
+    user_metadata: fullName ? { full_name: fullName } : {},
+  });
+
+  if (createError || !created?.user) {
+    if (createError && /already|registered|exists/i.test(createError.message)) {
+      return { error: "An account with this email already exists." };
+    }
+    return { error: `Failed to create user: ${createError?.message ?? 'unknown error'}` };
+  }
+
+  // The handle_new_user trigger inserts the profile row during createUser and assigns
+  // role USER (an admin already exists, so this account is never the first user). Apply
+  // the admin's chosen role and name explicitly afterward.
+  const { error: profileError } = await adminSupabase
+    .from("profiles")
+    .update({ role, full_name: fullName || null })
+    .eq("id", created.user.id);
+
+  revalidatePath("/cms/users");
+
+  if (profileError) {
+    // The account was created (trigger seeded role USER), but applying the chosen role
+    // failed. Land the admin on the edit screen — the recovery path — rather than
+    // stranding them on the create form, where a retry would hit "email already exists".
+    console.error("Error setting new user profile:", profileError);
+    redirect(
+      `/cms/users/${created.user.id}/edit?success=${encodeURIComponent(
+        "User created, but their role wasn't applied automatically — set it below and save.",
+      )}`,
+    );
+  }
+
+  redirect(`/cms/users/${created.user.id}/edit?success=User created successfully`);
+}
+
 export async function updateUserProfile(userIdToUpdate: string, formData: FormData) {
   const supabase = createClient();
   const adminCheck = await verifyAdmin(supabase);

package/templates/nextblock-template/app/cms/users/components/CreateUserForm.tsx

@@ -0,0 +1,217 @@
+// app/cms/users/components/CreateUserForm.tsx
+"use client";
+
+import React, { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import { Checkbox } from "@nextblock-cms/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@nextblock-cms/ui";
+import { Alert, AlertTitle, AlertDescription, Spinner } from "@nextblock-cms/ui";
+import { Eye, EyeOff, RefreshCw } from "lucide-react";
+import type { Database } from "@nextblock-cms/db";
+import { createUser } from "../actions";
+
+type UserRole = Database["public"]["Enums"]["user_role"];
+
+function generatePassword(length = 16): string {
+  const charset =
+    "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789!@#$%^&*";
+  const values = new Uint32Array(length);
+  crypto.getRandomValues(values);
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += charset[values[i] % charset.length];
+  }
+  return result;
+}
+
+export default function CreateUserForm() {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [role, setRole] = useState<UserRole>("USER");
+  const [emailConfirm, setEmailConfirm] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+
+  // Only errors surface here — the action redirects on success.
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setFormError(null);
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
+      setFormError("Enter a valid email address.");
+      return;
+    }
+    if (password.length < 8) {
+      setFormError("Password must be at least 8 characters.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.set("email", email);
+    formData.set("password", password);
+    formData.set("full_name", fullName);
+    formData.set("role", role);
+    formData.set("email_confirm", emailConfirm ? "true" : "false");
+
+    startTransition(async () => {
+      try {
+        const result = await createUser(formData);
+        // On success the action redirects; only errors return here.
+        if (result?.error) {
+          setFormError(result.error);
+        }
+      } catch {
+        setFormError("Something went wrong creating the user. Please try again.");
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {formError && (
+        <Alert variant="destructive">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{formError}</AlertDescription>
+        </Alert>
+      )}
+
+      <div>
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          name="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          autoComplete="off"
+          className="mt-1"
+          placeholder="user@example.com"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="full_name">Full Name</Label>
+        <Input
+          id="full_name"
+          name="full_name"
+          value={fullName}
+          onChange={(e) => setFullName(e.target.value)}
+          className="mt-1"
+          placeholder="Jane Doe"
+        />
+        <p className="text-xs text-muted-foreground mt-1">Optional. Can be edited later.</p>
+      </div>
+
+      <div>
+        <Label htmlFor="password">Password</Label>
+        <div className="flex gap-2 mt-1">
+          <div className="relative flex-1">
+            <Input
+              id="password"
+              name="password"
+              type={showPassword ? "text" : "password"}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={8}
+              autoComplete="new-password"
+              className="pr-10"
+              placeholder="At least 8 characters"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword((v) => !v)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label={showPassword ? "Hide password" : "Show password"}
+            >
+              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </button>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setPassword(generatePassword());
+              setShowPassword(true);
+            }}
+          >
+            <RefreshCw className="mr-2 h-4 w-4" /> Generate
+          </Button>
+        </div>
+        <p className="text-xs text-muted-foreground mt-1">
+          Share this password with the user securely. They can change it later from their profile.
+        </p>
+      </div>
+
+      <div>
+        <Label htmlFor="role">Role</Label>
+        <Select value={role} onValueChange={(val: UserRole) => setRole(val)}>
+          <SelectTrigger id="role" className="mt-1">
+            <SelectValue placeholder="Select role" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="USER">User</SelectItem>
+            <SelectItem value="WRITER">Writer</SelectItem>
+            <SelectItem value="ADMIN">Admin</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground mt-1">
+          Writers and Admins can access the CMS. Users have public-site access only.
+        </p>
+      </div>
+
+      <div className="flex items-start space-x-2 pt-2">
+        <Checkbox
+          id="email_confirm"
+          checked={emailConfirm}
+          onCheckedChange={(checked) => setEmailConfirm(checked as boolean)}
+          className="mt-0.5"
+        />
+        <div>
+          <Label htmlFor="email_confirm" className="font-normal leading-none">
+            Mark email as confirmed
+          </Label>
+          <p className="text-xs text-muted-foreground mt-1">
+            The user can sign in immediately without a verification email. Uncheck only if your
+            project sends confirmation emails and you want the user to verify first.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex justify-end space-x-3 pt-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.push("/cms/users")}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isPending}>
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Creating...
+            </>
+          ) : (
+            "Create User"
+          )}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/nextblock-template/app/cms/users/components/UserForm.tsx

@@ -16,9 +16,11 @@ interface UserFormProps {
     shippingAddress: CustomerAddressInput | null;
   };
   formAction: (formData: FormData) => Promise<{ error?: string } | void>;
+  /** Lock the role selector — true when this user is the only remaining Admin. */
+  lockRole?: boolean;
 }
 
-export default function UserForm({ userToEditAuth, userToEditProfile, userToEditAddresses, formAction }: UserFormProps) {
+export default function UserForm({ userToEditAuth, userToEditProfile, userToEditAddresses, formAction, lockRole }: UserFormProps) {
   const searchParams = useSearchParams();
   const successMsg = searchParams.get('success');
 
@@ -63,6 +65,7 @@ export default function UserForm({ userToEditAuth, userToEditProfile, userToEdit
           email={userToEditAuth.email}
           onAction={handleAdminSave}
           initialSuccessMessage={successMsg}
+          lockRole={lockRole}
       />
     </div>
   );