create-nextblock 0.12.15 → 0.13.1

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>
   );

package/templates/nextblock-template/app/cms/users/new/page.tsx

@@ -0,0 +1,44 @@
+// app/cms/users/new/page.tsx
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@nextblock-cms/ui";
+import { createClient } from "@nextblock-cms/db/server";
+import CreateUserForm from "../components/CreateUserForm";
+
+export default async function NewUserPage() {
+  const supabase = createClient();
+  const { data: { user: currentAdmin } } = await supabase.auth.getUser();
+
+  if (!currentAdmin) {
+    return <p>Access Denied. Not authenticated.</p>;
+  }
+
+  // User management is admin-only (mirrors the users list page). The CMS layout already
+  // gates ADMIN/WRITER; this blocks writers and direct-access attempts.
+  const { data: adminProfile } = await supabase
+    .from("profiles")
+    .select("role")
+    .eq("id", currentAdmin.id)
+    .single();
+  if (adminProfile?.role !== "ADMIN") {
+    return <p>Access Denied. Admin privileges required.</p>;
+  }
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <div className="flex items-center gap-3 mb-6">
+        <Button variant="outline" size="icon" aria-label="Back to users" asChild>
+          <Link href="/cms/users">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <h1 className="text-2xl font-bold">Create User</h1>
+      </div>
+      <p className="text-sm text-muted-foreground mb-6">
+        Create an account directly. After creating, you can fill in the profile, addresses,
+        and avatar on the next screen.
+      </p>
+      <CreateUserForm />
+    </div>
+  );
+}

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

@@ -11,7 +11,7 @@ import {
   TableRow,
 } from "@nextblock-cms/ui";
 import { Badge } from "@nextblock-cms/ui";
-import { MoreHorizontal, Edit3, Users } from "lucide-react";
+import { MoreHorizontal, Edit3, Users, PlusCircle } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -110,7 +110,11 @@ export default async function CmsUsersListPage() {
     <div className="w-full">
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-2xl font-semibold">Manage Users</h1>
-        {/* No "Create New User" button as users are created via sign-up flow. Admins manage roles. */}
+        <Button asChild>
+          <Link href="/cms/users/new" className="flex items-center">
+            <PlusCircle className="mr-2 h-4 w-4" /> Create User
+          </Link>
+        </Button>
       </div>
 
       {users.length === 0 ? (
@@ -118,8 +122,13 @@ export default async function CmsUsersListPage() {
           <Users className="mx-auto h-12 w-12 text-muted-foreground" />
           <h3 className="mt-2 text-sm font-medium text-foreground">No other users found</h3>
           <p className="mt-1 text-sm text-muted-foreground">
-            New users will appear here after they sign up.
+            Create a user, or new users will appear here after they sign up.
           </p>
+          <Button asChild className="mt-4">
+            <Link href="/cms/users/new" className="flex items-center">
+              <PlusCircle className="mr-2 h-4 w-4" /> Create User
+            </Link>
+          </Button>
         </div>
       ) : (
         <div className="rounded-lg border overflow-hidden">

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.12.15",
+  "version": "0.13.1",
   "private": true,
   "scripts": {
     "dev": "next dev",