@nocobase/portal-template-default 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/portal-template-default",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "packageManager": "pnpm@10.28.0",
   "type": "module",
   "devDependencies": {

package/scripts/build-html.mjs

@@ -1,6 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { loadEnv } from "vite";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const rootDir = path.resolve(__dirname, "..");
@@ -11,6 +12,17 @@ const indexPath = path.join(distDir, "index.html");
 const startMarker = "<!-- nocobase-runtime-config:start -->";
 const endMarker = "<!-- nocobase-runtime-config:end -->";
 
+const loadBuildHtmlEnv = () => {
+  const mode = process.env.MODE || "production";
+  const env = loadEnv(mode, rootDir, "");
+
+  for (const [key, value] of Object.entries(env)) {
+    if (process.env[key] === undefined) {
+      process.env[key] = value;
+    }
+  }
+};
+
 const normalizePortalBase = (base) => {
   const normalized = String(base || "/").trim();
   if (!normalized || normalized === "/") return "/";
@@ -63,6 +75,8 @@ const stripExistingRuntimeConfig = (html) => {
   return html.replace(pattern, "");
 };
 
+loadBuildHtmlEnv();
+
 const portalBase = normalizePortalBase(process.env.NOCOBASE_PORTAL_BASE);
 const apiUrl = String(process.env.NOCOBASE_API_URL || "/api").trim() || "/api";
 const storagePrefix =

package/src/extensions/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/src/extensions/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/src/extensions/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/src/extensions/nocobase-auth-cas/extension.tsx

@@ -0,0 +1,48 @@
+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",
+  dev: {
+    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/src/extensions/nocobase-auth-cas/index.ts

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

package/src/extensions/nocobase-auth-cas/use-cas-sign-in.ts

@@ -0,0 +1,31 @@
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+import { resolvePortalUrl } from "@/providers/runtime-config";
+
+export function useCasSignIn(authenticator: Authenticator) {
+  const [searchParams] = useSearchParams();
+  const callbackError = useMemo(() => {
+    if (searchParams.get("authenticator") !== authenticator.name) {
+      return undefined;
+    }
+    const message = searchParams.get("error");
+    return message ? new Error(message) : undefined;
+  }, [authenticator.name, searchParams]);
+
+  const signIn = useCallback(() => {
+    const redirect = resolvePortalUrl(
+      searchParams.get("to") || searchParams.get("redirect") || "/"
+    );
+    const url = nocobaseClient.buildUrl("cas:login", {
+      authenticator: authenticator.name,
+      __appName: nocobaseClient.getAppName(),
+      redirect,
+    });
+    window.location.replace(url.toString());
+  }, [authenticator.name, searchParams]);
+
+  return { signIn, error: callbackError };
+}

package/src/extensions/nocobase-auth-dingtalk/README.md

@@ -0,0 +1,7 @@
+# NocoBase DingTalk authentication
+
+Adds DingTalk OAuth sign-in, callback errors, OAuth or micro-app automatic
+login, and `useDingtalkSignIn` for custom UI. The DingTalk JSAPI is loaded only
+inside a DingTalk browser during internal automatic login.
+
+Installing the Registry also adds a DingTalk component Demo under Authentication.

package/src/extensions/nocobase-auth-dingtalk/auto-login-provider.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router";
+
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { clearAcl } from "@/lib/nocobase/acl";
+import { nocobaseClient } from "@/lib/nocobase/client";
+import { resolvePortalUrl } from "@/providers/runtime-config";
+
+import { isDingtalkBrowser } from "./use-dingtalk-sign-in";
+
+type CheckLoginResponse = {
+  success?: boolean;
+  autoLoginType?: "oauth" | "internal";
+  authUrl?: string;
+  authenticator?: string;
+  corpId?: string;
+};
+
+type SignInResponse = {
+  token?: string;
+};
+
+type DingtalkAuthCodeResult = {
+  code?: string;
+  authCode?: string;
+};
+
+type DingtalkAuthCodeOptions = {
+  corpId: string;
+  success: (result: DingtalkAuthCodeResult) => void;
+  fail: (error: { errorMessage?: string; message?: string }) => void;
+};
+
+type DingtalkApi = {
+  ready?: (callback: () => void) => void;
+  getAuthCode?: (options: DingtalkAuthCodeOptions) => void;
+  runtime?: {
+    permission?: {
+      requestAuthCode?: (
+        options: DingtalkAuthCodeOptions
+      ) => Promise<DingtalkAuthCodeResult> | void;
+    };
+  };
+};
+
+const publicAuthPaths = new Set([
+  "/login",
+  "/signin",
+  "/register",
+  "/forgot-password",
+]);
+
+async function requestDingtalkAuthCode(corpId: string) {
+  const module = await import("dingtalk-jsapi");
+  const dd = ((module as { default?: unknown }).default ??
+    module) as DingtalkApi;
+
+  return new Promise<string>((resolve, reject) => {
+    const success = (result: DingtalkAuthCodeResult) => {
+      const code = result?.code ?? result?.authCode;
+      if (code) {
+        resolve(String(code));
+      } else {
+        reject(new Error("DingTalk did not return an authorization code."));
+      }
+    };
+    const fail = (error: { errorMessage?: string; message?: string }) =>
+      reject(
+        new Error(
+          error?.errorMessage ||
+            error?.message ||
+            "Unable to request a DingTalk authorization code."
+        )
+      );
+    const run = () => {
+      const requestAuthCode = dd?.runtime?.permission?.requestAuthCode;
+      if (typeof requestAuthCode === "function") {
+        const result = requestAuthCode({ corpId, success, fail });
+        if (result?.then) result.then(success).catch(fail);
+        return;
+      }
+      if (typeof dd?.getAuthCode === "function") {
+        dd.getAuthCode({ corpId, success, fail });
+        return;
+      }
+      fail({ message: "DingTalk auth-code API is unavailable." });
+    };
+
+    try {
+      if (typeof dd.ready === "function") {
+        dd.ready(run);
+      } else {
+        run();
+      }
+    } catch (error) {
+      fail(error as Error);
+    }
+  });
+}
+
+export default function DingtalkAutoLoginProvider({
+  children,
+}: React.PropsWithChildren) {
+  const { pathname, search } = useLocation();
+  const attemptedRef = useRef(false);
+  const insideDingtalk = isDingtalkBrowser();
+  const redirect = resolvePortalUrl(`${pathname}${search}`);
+  const shouldCheck =
+    insideDingtalk &&
+    !nocobaseClient.getToken() &&
+    !publicAuthPaths.has(pathname);
+  const [isChecking, setIsChecking] = useState(shouldCheck);
+
+  useEffect(() => {
+    if (!shouldCheck || attemptedRef.current) {
+      setIsChecking(false);
+      return;
+    }
+    attemptedRef.current = true;
+    setIsChecking(true);
+    const controller = new AbortController();
+
+    void (async () => {
+      try {
+        const result = await nocobaseClient.action<CheckLoginResponse>(
+          "dingtalk",
+          "checkLogin",
+          {
+            method: "GET",
+            query: { isDingTalkBrowser: true, redirect },
+            signal: controller.signal,
+            authenticator: null,
+            includeRole: false,
+            withAclMeta: false,
+          }
+        );
+
+        if (result?.success !== false) return;
+        if (result.autoLoginType === "oauth" && result.authUrl) {
+          window.location.replace(nocobaseClient.resolveUrl(result.authUrl));
+          return;
+        }
+        if (
+          result.autoLoginType !== "internal" ||
+          !result.authenticator ||
+          !result.corpId
+        ) {
+          return;
+        }
+
+        const authCode = await requestDingtalkAuthCode(result.corpId);
+        const signedIn = await nocobaseClient.action<SignInResponse>(
+          "auth",
+          "signIn",
+          {
+            method: "POST",
+            authenticator: result.authenticator,
+            body: { authCode, loginType: "internal" },
+          }
+        );
+        if (!signedIn.token) {
+          throw new Error("NocoBase did not return an access token.");
+        }
+        nocobaseClient.setAuthenticator(result.authenticator);
+        nocobaseClient.setToken(signedIn.token);
+        nocobaseClient.setRole(null);
+        clearAcl();
+        window.location.replace(redirect);
+      } catch (error) {
+        if (!(error instanceof DOMException && error.name === "AbortError")) {
+          console.warn("Unable to complete DingTalk automatic login", error);
+        }
+      } finally {
+        setIsChecking(false);
+      }
+    })();
+
+    return () => controller.abort();
+  }, [redirect, shouldCheck]);
+
+  if (isChecking) {
+    return <LoadingState className="min-h-svh" />;
+  }
+  return children;
+}

package/src/extensions/nocobase-auth-dingtalk/demo.tsx

@@ -0,0 +1,23 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import DingtalkSignInButton from "./dingtalk-sign-in-button";
+
+const authenticator = {
+  name: "company-dingtalk",
+  authType: "dingtalk",
+  title: "Sign in via DingTalk",
+};
+
+export function DingtalkAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="dingtalk"
+      methodName="DingTalk"
+      description="Provide DingTalk OAuth login and support internal micro-app automatic login through DingTalk JSAPI."
+    >
+      <DingtalkSignInButton
+        authenticator={authenticator}
+        onSignIn={() => {}}
+      />
+    </AuthMethodDemo>
+  );
+}

package/src/extensions/nocobase-auth-dingtalk/dingtalk-sign-in-button.tsx

@@ -0,0 +1,45 @@
+import { MessageSquare } 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 { useDingtalkSignIn } from "./use-dingtalk-sign-in";
+
+export default function DingtalkSignInButton({
+  authenticator,
+  onSignIn,
+}: AuthenticatorComponentProps & { onSignIn?: () => void }) {
+  const { signIn, isPending, error } = useDingtalkSignIn(authenticator);
+  return (
+    <div className="space-y-3">
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>DingTalk sign-in failed</AlertTitle>
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+      <Button
+        type="button"
+        variant="outline"
+        className="w-full"
+        disabled={!onSignIn && isPending}
+        onClick={onSignIn ?? signIn}
+      >
+        <MessageSquare />
+        {!onSignIn && isPending
+          ? "Redirecting…"
+          : resolveTranslatableText(
+              authenticator.title ||
+                authenticator.authTypeTitle ||
+                "Sign in via DingTalk"
+            )}
+      </Button>
+    </div>
+  );
+}

package/src/extensions/nocobase-auth-dingtalk/extension.tsx

@@ -0,0 +1,53 @@
+import { lazy } from "react";
+import { MessageSquare } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extension";
+import { AuthDemoRoute } from "@/components/auth/demo";
+
+const DingtalkSignInButton = lazy(() => import("./dingtalk-sign-in-button"));
+const DingtalkAutoLoginProvider = lazy(() => import("./auto-login-provider"));
+const DingtalkAuthDemoPage = lazy(() =>
+  import("./demo").then((module) => ({
+    default: module.DingtalkAuthDemoPage,
+  }))
+);
+
+const dingtalkAuthExtension: AppExtension = {
+  id: "nocobase-auth-dingtalk",
+  AuthRuntimeProvider: DingtalkAutoLoginProvider,
+  authRuntimePriority: 10,
+  dev: {
+    resources: [
+      {
+        name: "auth-dingtalk-demo",
+        list: "auth/dingtalk",
+        meta: {
+          parent: "auth-components",
+          label: "DingTalk",
+          icon: <MessageSquare />,
+          acl: { type: "authenticated" },
+        },
+      },
+    ],
+    routes: (
+      <Route
+        path="auth/dingtalk"
+        element={
+          <AuthDemoRoute>
+            <DingtalkAuthDemoPage />
+          </AuthDemoRoute>
+        }
+      />
+    ),
+  },
+  authAdapters: [
+    {
+      authType: "dingtalk",
+      placement: "button",
+      Component: DingtalkSignInButton,
+    },
+  ],
+};
+
+export default dingtalkAuthExtension;

package/src/extensions/nocobase-auth-dingtalk/index.ts

@@ -0,0 +1,4 @@
+export {
+  isDingtalkBrowser,
+  useDingtalkSignIn,
+} from "./use-dingtalk-sign-in";

package/src/extensions/nocobase-auth-dingtalk/use-dingtalk-sign-in.ts

@@ -0,0 +1,66 @@
+import { useCallback, useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+import { resolvePortalUrl } from "@/providers/runtime-config";
+
+type DingtalkAuthUrlResponse = {
+  url?: string;
+};
+
+export function isDingtalkBrowser() {
+  return (
+    typeof navigator !== "undefined" &&
+    navigator.userAgent.toLowerCase().includes("dingtalk")
+  );
+}
+
+export function useDingtalkSignIn(authenticator: Authenticator) {
+  const [searchParams] = useSearchParams();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<Error>();
+  const callbackError = useMemo(() => {
+    if (searchParams.get("authenticator") !== authenticator.name) {
+      return undefined;
+    }
+    const message = searchParams.get("error");
+    return message ? new Error(message) : undefined;
+  }, [authenticator.name, searchParams]);
+
+  const signIn = useCallback(async () => {
+    setError(undefined);
+    setIsPending(true);
+    try {
+      const redirect = resolvePortalUrl(
+        searchParams.get("to") || searchParams.get("redirect") || "/"
+      );
+      const result = await nocobaseClient.action<DingtalkAuthUrlResponse>(
+        "dingtalk",
+        "getAuthUrl",
+        {
+          method: "POST",
+          authenticator: authenticator.name,
+          includeRole: false,
+          withAclMeta: false,
+          body: { redirect },
+        }
+      );
+      if (!result?.url) {
+        throw new Error(
+          "NocoBase did not return a DingTalk authorization URL."
+        );
+      }
+      window.location.replace(nocobaseClient.resolveUrl(result.url));
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause
+          : new Error("Unable to start DingTalk sign-in.")
+      );
+      setIsPending(false);
+    }
+  }, [authenticator.name, searchParams]);
+
+  return { signIn, isPending, error: error ?? callbackError };
+}

package/src/extensions/nocobase-auth-ldap/README.md

@@ -0,0 +1,6 @@
+# NocoBase LDAP authentication
+
+Adds the LDAP account/password form to the Starter's dynamic sign-in page and
+exports `useLdapSignIn` for application-owned login UI.
+
+Installing the Registry also adds an LDAP component Demo under Authentication.

package/src/extensions/nocobase-auth-ldap/demo.tsx

@@ -0,0 +1,21 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import LdapSignInForm from "./ldap-sign-in-form";
+
+const authenticator = {
+  name: "company-ldap",
+  authType: "LDAP",
+  title: "Company directory",
+  options: { autoSignup: true },
+};
+
+export function LdapAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="LDAP"
+      methodName="LDAP directory"
+      description="Use the familiar account and password form while sending credentials through the selected LDAP authenticator."
+    >
+      <LdapSignInForm authenticator={authenticator} onSignIn={() => {}} />
+    </AuthMethodDemo>
+  );
+}

package/src/extensions/nocobase-auth-ldap/extension.tsx

@@ -0,0 +1,48 @@
+import { lazy } from "react";
+import { ContactRound } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extension";
+import { AuthDemoRoute } from "@/components/auth/demo";
+
+const LdapSignInForm = lazy(() => import("./ldap-sign-in-form"));
+const LdapAuthDemoPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.LdapAuthDemoPage }))
+);
+
+const ldapAuthExtension: AppExtension = {
+  id: "nocobase-auth-ldap",
+  dev: {
+    resources: [
+      {
+        name: "auth-ldap-demo",
+        list: "auth/ldap",
+        meta: {
+          parent: "auth-components",
+          label: "LDAP",
+          icon: <ContactRound />,
+          acl: { type: "authenticated" },
+        },
+      },
+    ],
+    routes: (
+      <Route
+        path="auth/ldap"
+        element={
+          <AuthDemoRoute>
+            <LdapAuthDemoPage />
+          </AuthDemoRoute>
+        }
+      />
+    ),
+  },
+  authAdapters: [
+    {
+      authType: "LDAP",
+      placement: "form",
+      Component: LdapSignInForm,
+    },
+  ],
+};
+
+export default ldapAuthExtension;

package/src/extensions/nocobase-auth-ldap/index.ts

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