@nocobase/portal-template-default 1.0.15 → 1.0.17

package/src/components/auth/sign-up-form.tsx

@@ -1,27 +1,201 @@
 "use client";
 
+import { AlertCircle, KeyRound } from "lucide-react";
 import { useState } from "react";
 import { useLink, useNotification, useRegister } from "@refinedev/core";
 import { useSearchParams } from "react-router";
 
 import { AuthLayout } from "@/components/auth/auth-layout";
 import { InputPassword } from "@/components/auth/input-password";
+import type {
+  Authenticator,
+  AuthenticatorSignUpField,
+} from "@/components/auth/types";
+import { usePublicAuthenticators } from "@/components/auth/use-public-authenticators";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
+import { resolveTranslatableText } from "@/lib/i18n";
 
-export const SignUpForm = () => {
-  const [email, setEmail] = useState("");
+type SignUpFieldValue = string | number | boolean;
+type SignUpValues = Record<string, SignUpFieldValue>;
+
+type SignUpVariables = SignUpValues & {
+  authenticator: string;
+  password: string;
+  confirm_password: string;
+};
+
+function getFieldLabel(field: AuthenticatorSignUpField) {
+  return (
+    resolveTranslatableText(field.uiSchema?.title, {
+      ns: "lm-collections",
+    }) || field.field
+  );
+}
+
+function getFieldId(authenticatorName: string, fieldName: string) {
+  return `${authenticatorName}-${fieldName}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+function DynamicSignUpField({
+  authenticatorName,
+  field,
+  value,
+  onChange,
+}: {
+  authenticatorName: string;
+  field: AuthenticatorSignUpField;
+  value: SignUpFieldValue | undefined;
+  onChange: (value: SignUpFieldValue) => void;
+}) {
+  const id = getFieldId(authenticatorName, field.field);
+  const label = getFieldLabel(field);
+  const component = field.uiSchema?.["x-component"];
+  const options = field.uiSchema?.enum;
+
+  if (options?.length) {
+    const selectedValue =
+      typeof value === "undefined" ? undefined : String(value);
+
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={id}>{label}</Label>
+        <Select
+          value={selectedValue}
+          onValueChange={(nextValue) => {
+            if (nextValue === null) return;
+            const option = options.find(
+              (item) => String(item.value) === nextValue
+            );
+            onChange(option?.value ?? nextValue);
+          }}
+        >
+          <SelectTrigger id={id} className="w-full" aria-required={field.required}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem
+                key={`${typeof option.value}:${String(option.value)}`}
+                value={String(option.value)}
+              >
+                {resolveTranslatableText(option.label) || String(option.value)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  }
+
+  if (component === "Checkbox") {
+    return (
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id={id}
+          name={field.field}
+          checked={value === true}
+          onCheckedChange={(checked) => onChange(checked)}
+          aria-required={field.required}
+        />
+        <Label htmlFor={id}>{label}</Label>
+      </div>
+    );
+  }
+
+  if (component === "Input.TextArea" || component === "TextArea") {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={id}>{label}</Label>
+        <Textarea
+          id={id}
+          name={field.field}
+          value={typeof value === "string" ? value : ""}
+          onChange={(event) => onChange(event.target.value)}
+          required={field.required}
+          rows={4}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id}>{label}</Label>
+      <Input
+        id={id}
+        name={field.field}
+        type={field.field === "email" ? "email" : "text"}
+        value={typeof value === "string" ? value : ""}
+        onChange={(event) => onChange(event.target.value)}
+        autoComplete={
+          field.field === "email"
+            ? "email"
+            : field.field === "username"
+              ? "username"
+              : undefined
+        }
+        required={field.required}
+      />
+    </div>
+  );
+}
+
+function BasicSignUpForm({ authenticator }: { authenticator: Authenticator }) {
+  const [values, setValues] = useState<SignUpValues>({});
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const { open } = useNotification();
   const Link = useLink();
-  const [searchParams] = useSearchParams();
-  const { mutate: register, isPending } = useRegister();
+  const { mutate: register, isPending } = useRegister<SignUpVariables>();
+  const fields = (authenticator.options?.signupForm ?? []).filter(
+    (field) =>
+      field?.show &&
+      field.field !== "password" &&
+      field.field !== "confirm_password"
+  );
+
+  const updateValue = (field: string, value: SignUpFieldValue) => {
+    setValues((current) => ({ ...current, [field]: value }));
+  };
 
   const handleSignUp = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
+    const missingField = fields.find(
+      (field) => field.required && !values[field.field]
+    );
+    if (missingField) {
+      open?.({
+        type: "error",
+        message: `Please enter ${getFieldLabel(missingField)}`,
+      });
+      return;
+    }
+
     if (password !== confirmPassword) {
       open?.({
         type: "error",
@@ -32,71 +206,125 @@ export const SignUpForm = () => {
     }
 
     register({
-      email,
+      ...values,
       password,
-      authenticator: searchParams.get("name") ?? undefined,
+      confirm_password: confirmPassword,
+      authenticator: authenticator.name,
     });
   };
 
+  return (
+    <form onSubmit={handleSignUp} className="space-y-5">
+      {fields.map((field) => (
+        <DynamicSignUpField
+          key={field.field}
+          authenticatorName={authenticator.name}
+          field={field}
+          value={values[field.field]}
+          onChange={(value) => updateValue(field.field, value)}
+        />
+      ))}
+
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-password`}>Password</Label>
+        <InputPassword
+          id={`${authenticator.name}-password`}
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          autoComplete="new-password"
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-confirm-password`}>
+          Confirm password
+        </Label>
+        <InputPassword
+          id={`${authenticator.name}-confirm-password`}
+          value={confirmPassword}
+          onChange={(event) => setConfirmPassword(event.target.value)}
+          autoComplete="new-password"
+          required
+        />
+      </div>
+
+      <Button type="submit" className="w-full" disabled={isPending}>
+        {isPending ? "Creating account…" : "Sign up"}
+      </Button>
+
+      <p className="text-center text-sm text-muted-foreground">
+        Have an account?{" "}
+        <Link
+          to="/login"
+          className="font-semibold text-foreground underline underline-offset-4"
+        >
+          Sign in
+        </Link>
+      </p>
+    </form>
+  );
+}
+
+export const SignUpForm = () => {
+  const [searchParams] = useSearchParams();
+  const { data: authenticators = [], error, isPending } =
+    usePublicAuthenticators();
+  const authenticatorName = searchParams.get("name");
+  const authenticator = authenticators.find(
+    (item) => item.name === authenticatorName
+  );
+
   return (
     <AuthLayout
       title="Create your account"
       description="Create your NocoBase account."
     >
-      <form onSubmit={handleSignUp} className="space-y-5">
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input
-            id="email"
-            type="email"
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-            autoComplete="email"
-            autoFocus
-            required
-          />
+      {isPending ? (
+        <div className="flex min-h-64 items-center justify-center">
+          <Spinner className="size-6 text-muted-foreground" />
         </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <InputPassword
-            id="password"
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
-            autoComplete="new-password"
-            required
-          />
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="confirmPassword">Confirm password</Label>
-          <InputPassword
-            id="confirmPassword"
-            value={confirmPassword}
-            onChange={(event) => setConfirmPassword(event.target.value)}
-            autoComplete="new-password"
-            required
-          />
-        </div>
-
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isPending}
-        >
-          {isPending ? "Creating account…" : "Sign up"}
-        </Button>
-
-        <p className="text-center text-sm text-muted-foreground">
-          Have an account?{" "}
-          <Link
-            to="/login"
-            className="font-semibold text-foreground underline underline-offset-4"
-          >
-            Sign in
-          </Link>
-        </p>
-      </form>
+      ) : error ? (
+        <Alert variant="destructive">
+          <AlertCircle />
+          <AlertTitle>Unable to load the sign-up method</AlertTitle>
+          <AlertDescription>
+            {import.meta.env.DEV && error instanceof Error
+              ? error.message
+              : "Please try again or contact your administrator."}
+          </AlertDescription>
+        </Alert>
+      ) : !authenticator || authenticator.authType !== "Email/Password" ? (
+        <Empty className="min-h-64 border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <KeyRound />
+            </EmptyMedia>
+            <EmptyTitle>No sign-up method available</EmptyTitle>
+            <EmptyDescription>
+              This sign-up link is invalid or the authentication method does
+              not support account registration.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      ) : authenticator.options?.allowSignUp !== true ? (
+        <Empty className="min-h-64 border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <KeyRound />
+            </EmptyMedia>
+            <EmptyTitle>Account registration is disabled</EmptyTitle>
+            <EmptyDescription>
+              Contact your administrator if you need an account.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      ) : (
+        <BasicSignUpForm
+          key={authenticator.name}
+          authenticator={authenticator}
+        />
+      )}
     </AuthLayout>
   );
 };

package/src/components/auth/types.ts

@@ -4,12 +4,34 @@ import type {
   ReactNode,
 } from "react";
 
+export type AuthenticatorSignUpFieldOption = {
+  label?: unknown;
+  value: string | number | boolean;
+};
+
+export type AuthenticatorSignUpField = {
+  field: string;
+  required?: boolean;
+  show?: boolean;
+  uiSchema?: {
+    enum?: AuthenticatorSignUpFieldOption[];
+    title?: unknown;
+    "x-component"?: string;
+  };
+};
+
+export type AuthenticatorPublicOptions = Record<string, unknown> & {
+  allowSignUp?: boolean;
+  enableResetPassword?: boolean;
+  signupForm?: AuthenticatorSignUpField[];
+};
+
 export type Authenticator = {
   name: string;
   authType: string;
   authTypeTitle?: string;
   title?: string;
-  options?: Record<string, unknown>;
+  options?: AuthenticatorPublicOptions;
   sort?: number;
 };
 

package/src/extensions/nocobase-acl/README.md

@@ -12,11 +12,17 @@ After installation, import the components from `@/extensions/nocobase-acl`.
   normal roles, Anonymous when enabled, and Full permissions through the
   `__union__` role when the system role mode allows it.
 
-Route resource metadata and `AclPage` accept a `roles` constraint with `anyOf`,
-`allOf`, and `noneOf`. Role constraints use the roles in the current effective
-ACL context. In union mode this is the set of roles participating in the union;
-in single-role mode it is only the selected role. Regions, fields, and actions
-continue to use resource permissions.
+Application route definitions and `AclPage` accept a `roles` constraint with
+`anyOf`, `allOf`, and `noneOf`. Put route-level constraints in `access.roles`
+through `defineAppRoutes`; the Starter applies the same constraint to menu
+visibility and direct URL access. Role constraints use the roles in the current
+effective ACL context. In union mode this is the set of roles participating in
+the union; in single-role mode it is only the selected role. Regions, fields,
+and actions continue to use resource permissions.
+
+Nested routes inherit their parents' route access. The generated navigation
+item evaluates every constraint in that route chain, matching the nested route
+guards used for direct URL access.
 
 Use the Starter's `useGetRoles()` hook when application UI needs the same
 effective role names. Its result follows the familiar Refine query shape with
@@ -35,15 +41,23 @@ function CurrentAccessContext() {
 ```
 
 ```tsx
-const adminRoute = {
-  name: "administration",
-  meta: {
-    acl: {
-      type: "authenticated",
+import { defineAppRoutes } from "@/app/route-runtime";
+
+export const appRoutes = defineAppRoutes([
+  {
+    name: "administration",
+    path: "/administration",
+    element: <AdministrationPage />,
+    resource: {
+      meta: {
+        label: "Administration",
+      },
+    },
+    access: {
       roles: { anyOf: ["admin"] },
     },
   },
-};
+]);
 
 function AuditLogsRoute() {
   return (
@@ -56,9 +70,9 @@ function AuditLogsRoute() {
 }
 ```
 
-Mark non-collection resources with `meta.acl.type = "authenticated"`, or use
-the `collection`, `snippet`, and `route` ACL metadata variants when the resource
-should participate in NocoBase permission checks.
+The route runtime marks generated non-collection resources as authenticated.
+Use the `collection`, `snippet`, and `route` ACL metadata variants when a
+resource should also participate in NocoBase permission checks.
 
 The underlying `accessControlProvider`, `roles:check` cache, record permissions,
 and Refine integration are provided by the compatible Starter.

package/src/extensions/nocobase-acl/demo/index.tsx

@@ -9,7 +9,13 @@ import {
   UserRoundCog,
   UsersRound,
 } from "lucide-react";
+import type { TreeMenuItem } from "@refinedev/core";
 
+import {
+  buildRouteResources,
+  defineAppRoutes,
+  RouteAccessGuard,
+} from "@/app/route-runtime";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CanAccess } from "@/components/access-control/can-access";
@@ -21,7 +27,11 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import type { RoleConstraint } from "@/lib/nocobase/acl";
+import {
+  filterMenuItemsByAcl,
+  type RoleConstraint,
+  useAclState,
+} from "@/lib/nocobase/acl";
 import { AclField, AclPage, AclRegion } from "../components/acl-boundary";
 import { AclPreviewProvider } from "./acl-preview-provider";
 import { AclBoundaryApi } from "./boundary-api";
@@ -58,6 +68,53 @@ const usersRouteRoles = {
   anyOf: ["admin"],
 } satisfies RoleConstraint;
 
+const navigationDemoRoutes = defineAppRoutes([
+  {
+    name: "dashboard",
+    path: "/dashboard",
+    resource: {
+      meta: {
+        label: "Dashboard",
+        icon: <LayoutPanelTop />,
+      },
+    },
+  },
+  {
+    name: "users",
+    path: "/users",
+    resource: {
+      meta: {
+        label: "Users",
+        icon: <UsersRound />,
+      },
+    },
+    access: {
+      roles: usersRouteRoles,
+    },
+  },
+  {
+    name: "roles",
+    path: "/roles",
+    resource: {
+      meta: {
+        label: "Roles",
+        icon: <UserRoundCog />,
+      },
+    },
+  },
+]);
+
+const navigationDemoResources = buildRouteResources(navigationDemoRoutes);
+const navigationDemoMenuItems: TreeMenuItem[] = navigationDemoResources.map(
+  (resource) => ({
+    key: resource.name,
+    name: resource.name,
+    route: typeof resource.list === "string" ? resource.list : undefined,
+    meta: resource.meta,
+    children: [],
+  })
+);
+
 const allowedRegionPermissions = {
   "users:list": {},
   "departments:list": {},
@@ -127,12 +184,12 @@ export function AclPatternsPage() {
           defaultScene: "User and role administration",
           defaultTarget:
             "Allow administrators to open Users, but remove it from navigation and block its direct URL for other roles.",
-          requirements: `- Put role constraints on the route resource through meta.acl.roles using anyOf, allOf, or noneOf.
-- Use meta.acl.type = "authenticated" when the route itself is role-controlled and its inner regions perform collection checks.
-- Let the Starter filter inaccessible sidebar items and choose the first accessible default route.
-- Wrap list, create, show, and edit routes with the Starter CanAccess and provide an AccessDenied fallback.
-- Mark non-collection utility pages as authenticated, snippet, route, or acl: false instead of treating them as collections.
-- If a parent route is denied but an accessible child remains, navigation must continue to the child route.`,
+          requirements: `- Define application-owned navigation once through defineAppRoutes in src/routes.tsx.
+- Put role constraints in the route access.roles field using anyOf, allOf, or noneOf.
+- Let the route runtime generate the Refine resource, filter the sidebar item, and wrap the direct route with CanAccess.
+- Do not repeat the same role list in Resource meta or a manually written route guard.
+- Keep resource/action, record, region, and field permissions in their dedicated ACL boundaries.
+- Let the Starter choose the first accessible route after inaccessible leaves and empty groups are removed.`,
         }}
       >
         <OutcomeComparison
@@ -343,21 +400,36 @@ function OutcomeComparison({
 }
 
 function NavigationPreview() {
+  const acl = useAclState();
+  const menuItems =
+    acl.status === "ready"
+      ? filterMenuItemsByAcl(navigationDemoMenuItems, acl.permissions)
+      : [];
+  const usersVisible = menuItems.some((item) => item.name === "users");
+  const usersRoute = navigationDemoRoutes.find(
+    (route) => route.name === "users"
+  );
+
   return (
     <div className="grid min-h-48 grid-cols-[150px_minmax(0,1fr)] overflow-hidden rounded-xl border bg-background">
       <aside className="border-r bg-muted/35 p-3">
         <div className="mb-3 text-xs font-semibold text-muted-foreground">
           Workspace
         </div>
-        <NavItem icon={<LayoutPanelTop />} label="Dashboard" />
-        <CanAccess roles={usersRouteRoles}>
-          <NavItem icon={<UsersRound />} label="Users" active />
-        </CanAccess>
-        <NavItem icon={<UserRoundCog />} label="Roles" />
+        {menuItems.map((item) => (
+          <NavItem
+            key={item.name}
+            icon={item.meta?.icon}
+            label={String(item.meta?.label ?? item.name)}
+            active={
+              usersVisible ? item.name === "users" : item.name === "dashboard"
+            }
+          />
+        ))}
       </aside>
       <div className="flex items-center justify-center p-5 text-center">
-        <CanAccess
-          roles={usersRouteRoles}
+        <RouteAccessGuard
+          access={usersRoute?.access}
           fallback={
             <div>
               <LayoutPanelTop className="mx-auto size-7 text-muted-foreground" />
@@ -375,7 +447,7 @@ function NavigationPreview() {
               Route is available
             </div>
           </div>
-        </CanAccess>
+        </RouteAccessGuard>
       </div>
     </div>
   );

package/src/extensions/nocobase-acl/demo/prompt-generator.tsx

@@ -45,6 +45,7 @@ Implementation contract
 - Use the Starter's built-in NocoBase accessControlProvider and ACL store.
 - NocoBase roles:check is the source of truth. Do not create a second permission store. Use configured role names only when the requirement explicitly includes a role constraint.
 - Import the Starter CanAccess from @/components/access-control/can-access. Use it with AclPage, AclRegion, and AclField for permission presentation. Do not copy their checks into local booleans or role comparisons.
+- For route-level role access, define the route once with defineAppRoutes in src/routes.tsx and put the constraint in access.roles. Let the route runtime control both its menu item and direct URL.
 - Use useGetRoles only when UI needs to display or pass through the current effective ACL roles; it is not a replacement permission evaluator.
 - Keep backend ACL enforcement in place; frontend checks only control presentation and navigation.
 - Import reusable components from the installed local entry point at @/extensions/nocobase-acl when page composition is needed.