@nocobase/portal-template-default 1.0.4 → 1.0.6

package/README.MD

@@ -24,6 +24,83 @@ namespace for shared controls. Feature-specific Registry translations remain
 inside their own extension namespace and are not mixed into application locale
 files.
 
+### Authentication UI
+
+The default login page calls `authenticators:publicList` and renders every
+enabled NocoBase authenticator that has a frontend adapter installed. Basic
+username/password authentication is built into the Starter. Optional methods
+are installed independently:
+
+```bash
+pnpm exec shadcn add @nocobase/auth-sms
+pnpm exec shadcn add @nocobase/auth-ldap
+pnpm exec shadcn add @nocobase/auth-oidc
+pnpm exec shadcn add @nocobase/auth-saml
+pnpm exec shadcn add @nocobase/auth-cas
+pnpm exec shadcn add @nocobase/auth-wecom
+pnpm exec shadcn add @nocobase/auth-dingtalk
+```
+
+The Starter includes an Authentication Demo for the three customization
+boundaries below. Each optional authentication Registry adds its own component
+Demo under the same Authentication menu when installed.
+
+The application login page remains the customization boundary. Keep the
+default dynamic page with:
+
+```tsx
+import { DefaultSignInPage } from "@/components/auth/default-sign-in-page"
+
+export const Login = () => <DefaultSignInPage />
+```
+
+To replace only one authenticator UI, use `renderAuthenticator` and return the
+default element for everything else:
+
+```tsx
+import { DefaultSignInPage } from "@/components/auth/default-sign-in-page"
+import { useOidcSignIn } from "@/extensions/nocobase-auth-oidc"
+import { Button } from "@/components/ui/button"
+
+function CompanyOidcButton({ authenticator }) {
+  const oidc = useOidcSignIn(authenticator)
+  return <Button onClick={oidc.signIn}>Company SSO</Button>
+}
+
+export const Login = () => (
+  <DefaultSignInPage
+    renderAuthenticator={({ authenticator, defaultElement }) =>
+      authenticator.name === "company-oidc" ? (
+        <CompanyOidcButton authenticator={authenticator} />
+      ) : (
+        defaultElement
+      )
+    }
+  />
+)
+```
+
+Replace `src/pages/login/index.tsx` completely when the application needs a
+fully custom login page. Token callback capture, current authenticator storage,
+request headers, and logout behavior remain provided by the Starter runtime and
+do not depend on `DefaultSignInPage`.
+
+```tsx
+import { AuthLayout } from "@/components/auth/auth-layout"
+import { BasicSignInForm } from "@/components/auth"
+
+export const Login = () => (
+  <AuthLayout title="Sign in" description="Continue to your workspace.">
+    <BasicSignInForm
+      authenticator={{
+        name: "basic",
+        authType: "Email/Password",
+      }}
+    />
+  </AuthLayout>
+)
+```
+
 ## Available Scripts
 
 ### Running the development server.

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@nocobase/portal-template-default",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "devDependencies": {
     "@ai-sdk/react": "2.0.0",
     "@base-ui/react": "^1.6.0",
     "@dicebear/core": "^9.4.3",
+    "@eslint/js": "^9.25.0",
     "@fontsource-variable/geist": "^5.3.0",
     "@hookform/resolvers": "^5.0.1",
     "@nocobase/ai-employee-avatars": "^1.0.2",
@@ -17,18 +18,31 @@
     "@refinedev/react-table": "^6.0.0",
     "@refinedev/rest": "^2.1.0",
     "@refinedev/simple-rest": "^6.0.0",
+    "@tailwindcss/postcss": "^4.1.4",
     "@tailwindcss/vite": "^4.1.8",
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-table": "^8.2.6",
+    "@types/node": "^20",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "ai": "5.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.10.7",
+    "dingtalk-jsapi": "3.1.1",
     "echarts": "^5.5.0",
     "echarts-for-react": "3.0.2",
     "embla-carousel-react": "^8.6.0",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
     "eventsource-parser": "3.1.0",
+    "globals": "^16.0.0",
+    "i18next": "^25.3.2",
     "ignore": "^7.0.6",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.487.0",
@@ -46,25 +60,12 @@
     "shadcn": "^4.13.1",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
-    "tw-animate-css": "^1.2.5",
-    "zod": "^3.24.3",
-    "@eslint/js": "^9.25.0",
-    "@tailwindcss/postcss": "^4.1.4",
-    "@types/node": "^20",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
-    "i18next": "^25.3.2",
     "tailwindcss": "^4.1.4",
+    "tw-animate-css": "^1.2.5",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "zod": "^3.25.76"
   },
   "publishConfig": {
     "access": "public"
@@ -77,6 +78,7 @@
     "postinstall": "node ./scripts/registry.mjs install-missing",
     "dev": "vite",
     "build": "tsc && refine build",
+    "build:html": "node ./scripts/build-html.mjs",
     "registry:install": "node ./scripts/registry.mjs install-missing",
     "registry:preview": "node ./scripts/registry.mjs preview",
     "registry:build": "node ./scripts/registry.mjs build && shadcn build ./registry.json -o ./public/r",
@@ -96,5 +98,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "dependencies": {
+    "@shadcn/react": "^0.2.1",
+    "cmdk": "^1.1.1"
   }
 }

package/registry/nocobase-acl/demo/prompt-generator.tsx

@@ -1,7 +1,7 @@
-import { Check, ChevronDown, Copy, Sparkles } from "lucide-react";
+import { ChevronDown, Sparkles } from "lucide-react";
 import { useMemo, useState } from "react";
 
-import { Button } from "@/components/ui/button";
+import { PromptOutput } from "@/components/demo/prompt-output";
 import {
   Card,
   CardContent,
@@ -28,8 +28,6 @@ export function AclScenarioPromptGenerator({
 }) {
   const [scene, setScene] = useState(config.defaultScene);
   const [target, setTarget] = useState(config.defaultTarget);
-  const [copied, setCopied] = useState(false);
-  const [copyError, setCopyError] = useState(false);
 
   const prompt = useMemo(
     () => `Build a complete NocoBase ACL scene in the NocoBase Admin Starter.
@@ -93,41 +91,10 @@ Implementation contract
             </div>
           </CardContent>
         </Card>
-        <Card className="min-w-0 gap-0 overflow-hidden py-0">
-          <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
-            <div>
-              <div className="text-sm font-medium">Generated prompt</div>
-              <div className="text-xs text-muted-foreground">
-                Updates as you change the business scene and permission target.
-              </div>
-            </div>
-            <Button
-              size="sm"
-              onClick={async () => {
-                try {
-                  await navigator.clipboard.writeText(prompt);
-                  setCopyError(false);
-                  setCopied(true);
-                  window.setTimeout(() => setCopied(false), 1500);
-                } catch {
-                  setCopyError(true);
-                }
-              }}
-            >
-              {copied ? <Check /> : <Copy />}
-              {copied ? "Copied" : "Copy prompt"}
-            </Button>
-          </div>
-          {copyError ? (
-            <p className="border-b px-4 py-2 text-xs text-destructive">
-              Clipboard access failed. Select the prompt text and copy it
-              manually.
-            </p>
-          ) : null}
-          <pre className="max-h-[520px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
-            {prompt}
-          </pre>
-        </Card>
+        <PromptOutput
+          description="Updates as you change the business scene and permission target."
+          prompt={prompt}
+        />
       </div>
     </details>
   );

package/registry/nocobase-acl/demo/role-switcher-prompt-generator.tsx

@@ -1,7 +1,6 @@
-import { Check, Copy } from "lucide-react";
 import { useMemo, useState } from "react";
 
-import { Button } from "@/components/ui/button";
+import { PromptOutput } from "@/components/demo/prompt-output";
 import {
   Card,
   CardContent,
@@ -54,8 +53,6 @@ export function RoleSwitcherPromptGenerator() {
   const [surface, setSurface] = useState(
     "Use the Starter's existing account controls and visual language. Do not create a separate demo page."
   );
-  const [copied, setCopied] = useState(false);
-  const [copyError, setCopyError] = useState(false);
 
   const prompt = useMemo(
     () => `Integrate the RoleSwitcher into the existing NocoBase Admin Starter.
@@ -155,44 +152,11 @@ Integration requirements
         </CardContent>
       </Card>
 
-      <Card className="gap-0 overflow-hidden py-0">
-        <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
-          <div>
-            <div className="text-sm font-medium">
-              Generated integration prompt
-            </div>
-            <div className="text-xs text-muted-foreground">
-              Updates as you change placement and presentation settings.
-            </div>
-          </div>
-          <Button
-            size="sm"
-            onClick={async () => {
-              try {
-                await navigator.clipboard.writeText(prompt);
-                setCopyError(false);
-                setCopied(true);
-                window.setTimeout(() => setCopied(false), 1500);
-              } catch {
-                setCopyError(true);
-              }
-            }}
-          >
-            {copied ? <Check /> : <Copy />}
-            {copied ? "Copied" : "Copy prompt"}
-          </Button>
-        </div>
-        {copyError ? (
-          <p className="border-b px-4 py-2 text-xs text-destructive">
-            Clipboard access failed. Select the prompt and copy it manually.
-          </p>
-        ) : null}
-        <CardContent className="p-0">
-          <pre className="max-h-[560px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
-            {prompt}
-          </pre>
-        </CardContent>
-      </Card>
+      <PromptOutput
+        title="Generated integration prompt"
+        description="Updates as you change placement and presentation settings."
+        prompt={prompt}
+      />
     </div>
   );
 }

package/registry/nocobase-ai/demo/page-context-prompt-generator.tsx

@@ -155,7 +155,7 @@ Implementation requirements
   ]);
 
   return (
-    <div className="grid items-start gap-5 xl:grid-cols-[390px_minmax(0,1fr)]">
+    <div className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
       <Card className="gap-0 py-0">
         <CardHeader className="border-b py-4">
           <CardTitle>Scene settings</CardTitle>

package/registry/nocobase-ai/demo/prompt-card.tsx

@@ -1,7 +1,4 @@
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Check, Copy } from "lucide-react";
-import { useState } from "react";
+import { PromptOutput } from "@/components/demo/prompt-output";
 
 export function PromptCard({
   title,
@@ -12,30 +9,12 @@ export function PromptCard({
   description: string;
   prompt: string;
 }) {
-  const [copied, setCopied] = useState(false);
-
   return (
-    <Card className="gap-0 overflow-hidden py-0">
-      <div className="flex items-center justify-between gap-4 border-b px-4 py-3">
-        <div>
-          <div className="text-sm font-medium">{title}</div>
-          <div className="text-xs text-muted-foreground">{description}</div>
-        </div>
-        <Button
-          size="sm"
-          onClick={async () => {
-            await navigator.clipboard.writeText(prompt);
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1500);
-          }}
-        >
-          {copied ? <Check /> : <Copy />}
-          {copied ? "Copied" : "Copy prompt"}
-        </Button>
-      </div>
-      <pre className="max-h-[620px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
-        {prompt}
-      </pre>
-    </Card>
+    <PromptOutput
+      title={title}
+      description={description}
+      prompt={prompt}
+      promptClassName="max-h-[620px]"
+    />
   );
 }

package/registry/nocobase-ai/demo/prompt-generator.tsx

@@ -6,7 +6,7 @@ import {
   useAIPageElementPicker,
   type AIChatComposerAction,
 } from "../components";
-import { Button } from "@/components/ui/button";
+import { PromptOutput } from "@/components/demo/prompt-output";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import {
@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { AIChatProvider, useAIChatBase } from "../providers";
-import { Check, Copy, Globe2, MousePointer2 } from "lucide-react";
+import { Globe2, MousePointer2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import type { ChatContainer } from "./container-showcase";
 
@@ -95,7 +95,6 @@ function PromptGeneratorContent() {
   const [messagePresentation, setMessagePresentation] =
     useState<MessagePresentation>("transcript");
   const [capabilities, setCapabilities] = useState(DEFAULT_CAPABILITIES);
-  const [copied, setCopied] = useState(false);
 
   const previewActions = useMemo<AIChatComposerAction[]>(() => {
     const actions: AIChatComposerAction[] = [];
@@ -275,7 +274,7 @@ Implementation requirements:
   })();
 
   return (
-    <div className="grid items-start gap-5 xl:grid-cols-[380px_minmax(0,1fr)]">
+    <div className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
       <Card className="gap-0 py-0">
         <CardHeader className="border-b py-4">
           <CardTitle className="text-base">Describe the integration</CardTitle>
@@ -405,32 +404,12 @@ Implementation requirements:
           </div>
         </Card>
 
-        <Card className="gap-0 overflow-hidden py-0">
-          <div className="flex items-center justify-between border-b px-4 py-3">
-            <div>
-              <div className="text-sm font-medium">
-                Generated implementation prompt
-              </div>
-              <div className="text-xs text-muted-foreground">
-                Updates from the selected page, placement, and capabilities.
-              </div>
-            </div>
-            <Button
-              size="sm"
-              onClick={async () => {
-                await navigator.clipboard.writeText(prompt);
-                setCopied(true);
-                window.setTimeout(() => setCopied(false), 1500);
-              }}
-            >
-              {copied ? <Check /> : <Copy />}
-              {copied ? "Copied" : "Copy prompt"}
-            </Button>
-          </div>
-          <pre className="max-h-[760px] min-h-[520px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
-            {prompt}
-          </pre>
-        </Card>
+        <PromptOutput
+          title="Generated implementation prompt"
+          description="Updates from the selected page, placement, and capabilities."
+          prompt={prompt}
+          promptClassName="max-h-[760px] min-h-[520px]"
+        />
       </div>
     </div>
   );

package/registry/nocobase-ai/demo/shortcut.tsx

@@ -678,7 +678,7 @@ Implementation requirements:
           task, model, Web search, Skills, and Tools configuration.
         </p>
       </div>
-      <div className="grid items-start gap-5 xl:grid-cols-[520px_minmax(0,1fr)]">
+      <div className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
         <Card className="gap-0 py-0">
           <CardHeader className="py-4">
             <CardTitle className="text-base">

package/registry/nocobase-ai/demo/tool-cards.tsx

@@ -2,8 +2,8 @@ import {
   ToolCallCard,
   type ToolCallPart,
 } from "../components/chat/tool-call-card";
+import { PromptOutput } from "@/components/demo/prompt-output";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import {
@@ -15,7 +15,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
-import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 
 const tools = {
@@ -217,8 +216,8 @@ export function ToolCardsPage() {
             Tool Cards
           </h1>
           <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
-            Specialized tools render their complete business interaction.
-            Tools without a registered renderer fall back to the shared status,
+            Specialized tools render their complete business interaction. Tools
+            without a registered renderer fall back to the shared status,
             approval, error, and input disclosure card.
           </p>
         </div>
@@ -371,7 +370,6 @@ function ToolCardCodePrompt() {
     "Show the affected support records, summarize the proposed changes, and let the user approve, request a revision, or reject the operation."
   );
   const [handlesApproval, setHandlesApproval] = useState(true);
-  const [copied, setCopied] = useState(false);
   const referenceDefinition = referenceRenderers[reference];
   const prompt = `Implement a specialized NocoBase AI Tool Card for the tool "${
     toolName || "customTool"
@@ -410,7 +408,7 @@ Verification:
 - Verify the card in light and dark themes, narrow chat panels, expanded dialogs, pending approval, completed, and error states.`;
 
   return (
-    <div className="grid items-start gap-5 xl:grid-cols-[380px_minmax(0,1fr)]">
+    <div className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
       <Card className="gap-0 py-0">
         <CardHeader className="border-b py-4">
           <CardTitle className="text-base">Describe the Tool Card</CardTitle>
@@ -479,30 +477,12 @@ Verification:
           </label>
         </CardContent>
       </Card>
-      <Card className="gap-0 py-0">
-        <div className="flex items-center justify-between border-b px-4 py-3">
-          <div>
-            <div className="text-sm font-medium">Coding prompt</div>
-            <div className="text-xs text-muted-foreground">
-              Ready to paste into an implementation task.
-            </div>
-          </div>
-          <Button
-            size="sm"
-            onClick={async () => {
-              await navigator.clipboard.writeText(prompt);
-              setCopied(true);
-              window.setTimeout(() => setCopied(false), 1500);
-            }}
-          >
-            {copied ? <Check /> : <Copy />}
-            {copied ? "Copied" : "Copy prompt"}
-          </Button>
-        </div>
-        <pre className="max-h-[720px] min-h-[560px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
-          {prompt}
-        </pre>
-      </Card>
+      <PromptOutput
+        title="Coding prompt"
+        description="Ready to paste into an implementation task."
+        prompt={prompt}
+        promptClassName="max-h-[720px] min-h-[560px]"
+      />
     </div>
   );
 }

package/registry/nocobase-auth-cas/README.md

@@ -0,0 +1,6 @@
+# NocoBase CAS authentication
+
+Adds the CAS sign-in button, callback error handling, and `useCasSignIn` for
+application-owned login UI.
+
+Installing the Registry also adds a CAS component Demo under Authentication.

package/registry/nocobase-auth-cas/cas-sign-in-button.tsx

@@ -0,0 +1,41 @@
+import { LogIn } from "lucide-react";
+
+import type { AuthenticatorComponentProps } from "@/components/auth/types";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { resolveTranslatableText } from "@/lib/i18n";
+
+import { useCasSignIn } from "./use-cas-sign-in";
+
+export default function CasSignInButton({
+  authenticator,
+  onSignIn,
+}: AuthenticatorComponentProps & { onSignIn?: () => void }) {
+  const { signIn, error } = useCasSignIn(authenticator);
+
+  return (
+    <div className="space-y-3">
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>CAS sign-in failed</AlertTitle>
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+      <Button
+        type="button"
+        variant="outline"
+        className="w-full"
+        onClick={onSignIn ?? signIn}
+      >
+        <LogIn />
+        {resolveTranslatableText(
+          authenticator.title || authenticator.authTypeTitle || "CAS"
+        )}
+      </Button>
+    </div>
+  );
+}

package/registry/nocobase-auth-cas/demo.tsx

@@ -0,0 +1,20 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import CasSignInButton from "./cas-sign-in-button";
+
+const authenticator = {
+  name: "company-cas",
+  authType: "CAS",
+  title: "Company CAS",
+};
+
+export function CasAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="CAS"
+      methodName="Central Authentication Service"
+      description="Redirect users to a CAS server and capture the returned NocoBase token without coupling the page UI to CAS."
+    >
+      <CasSignInButton authenticator={authenticator} onSignIn={() => {}} />
+    </AuthMethodDemo>
+  );
+}

package/registry/nocobase-auth-cas/extension.tsx

@@ -0,0 +1,46 @@
+import { lazy } from "react";
+import { KeyRound } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extension";
+import { AuthDemoRoute } from "@/components/auth/demo";
+
+const CasSignInButton = lazy(() => import("./cas-sign-in-button"));
+const CasAuthDemoPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.CasAuthDemoPage }))
+);
+
+const casAuthExtension: AppExtension = {
+  id: "nocobase-auth-cas",
+  resources: [
+    {
+      name: "auth-cas-demo",
+      list: "/auth/cas",
+      meta: {
+        parent: "auth-components",
+        label: "CAS",
+        icon: <KeyRound />,
+        acl: { type: "authenticated" },
+      },
+    },
+  ],
+  routes: (
+    <Route
+      path="/auth/cas"
+      element={
+        <AuthDemoRoute>
+          <CasAuthDemoPage />
+        </AuthDemoRoute>
+      }
+    />
+  ),
+  authAdapters: [
+    {
+      authType: "CAS",
+      placement: "button",
+      Component: CasSignInButton,
+    },
+  ],
+};
+
+export default casAuthExtension;

package/registry/nocobase-auth-cas/index.ts

@@ -0,0 +1 @@
+export { useCasSignIn } from "./use-cas-sign-in";