@nocobase/portal-template-default 1.0.13 → 1.0.15

package/src/extensions/nocobase-auth-sms/sms-sign-in-form.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+
+import type { AuthenticatorComponentProps } from "@/components/auth/types";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import { useSmsSignIn } from "./use-sms-sign-in";
+
+export default function SmsSignInForm({
+  authenticator,
+  onSendCode,
+  onSignIn,
+}: AuthenticatorComponentProps & {
+  onSendCode?: (phone: string) => void;
+  onSignIn?: (values: { phone: string; code: string }) => void;
+}) {
+  const [phone, setPhone] = useState("");
+  const [code, setCode] = useState("");
+  const sms = useSmsSignIn(authenticator);
+  const autoSignup = authenticator.options?.autoSignup === true;
+
+  return (
+    <form
+      className="space-y-5"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (onSignIn) {
+          onSignIn({ phone, code });
+          return;
+        }
+        void sms.signIn(phone, code);
+      }}
+    >
+      {sms.error && (
+        <Alert variant="destructive">
+          <AlertTitle>SMS sign-in failed</AlertTitle>
+          <AlertDescription>{sms.error.message}</AlertDescription>
+        </Alert>
+      )}
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-phone`}>Phone</Label>
+        <Input
+          id={`${authenticator.name}-phone`}
+          type="tel"
+          value={phone}
+          onChange={(event) => setPhone(event.target.value)}
+          autoComplete="tel"
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-code`}>
+          Verification code
+        </Label>
+        <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2">
+          <Input
+            id={`${authenticator.name}-code`}
+            inputMode="numeric"
+            value={code}
+            onChange={(event) => setCode(event.target.value)}
+            autoComplete="one-time-code"
+            required
+          />
+          <Button
+            type="button"
+            variant="outline"
+            disabled={
+              (!onSendCode && (sms.isSendingCode || sms.retryAfter > 0)) ||
+              !phone
+            }
+            onClick={() => {
+              if (onSendCode) {
+                onSendCode(phone);
+                return;
+              }
+              void sms.sendCode(phone).catch(() => undefined);
+            }}
+          >
+            {!onSendCode && sms.isSendingCode
+              ? "Sending…"
+              : !onSendCode && sms.retryAfter > 0
+                ? `Retry in ${sms.retryAfter}s`
+                : "Send code"}
+          </Button>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={!onSignIn && sms.isSigningIn}
+      >
+        {!onSignIn && sms.isSigningIn ? "Signing in…" : "Sign in"}
+      </Button>
+      {autoSignup && (
+        <p className="text-xs leading-5 text-muted-foreground">
+          An account will be created automatically if this phone number is new.
+        </p>
+      )}
+    </form>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { useAuthenticatorSignIn } from "@/components/auth";
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+type SmsCodeResponse = {
+  expiresAt?: string;
+};
+
+export function useSmsSignIn(authenticator: Authenticator) {
+  const auth = useAuthenticatorSignIn(authenticator.name);
+  const [isSendingCode, setIsSendingCode] = useState(false);
+  const [sendError, setSendError] = useState<Error>();
+  const [expiresAt, setExpiresAt] = useState<number>();
+  const [now, setNow] = useState(Date.now());
+  const verifier =
+    typeof authenticator.options?.verifier === "string"
+      ? authenticator.options.verifier
+      : "";
+
+  useEffect(() => {
+    if (!expiresAt || expiresAt <= Date.now()) return;
+    const timer = window.setInterval(() => setNow(Date.now()), 1_000);
+    return () => window.clearInterval(timer);
+  }, [expiresAt]);
+
+  const retryAfter = useMemo(
+    () =>
+      expiresAt ? Math.max(0, Math.ceil((expiresAt - now) / 1_000)) : 0,
+    [expiresAt, now]
+  );
+
+  const sendCode = useCallback(
+    async (phone: string) => {
+      if (!phone) throw new Error("Enter a phone number first.");
+      if (!verifier) {
+        throw new Error("The SMS verifier is not configured.");
+      }
+      if (retryAfter > 0) return;
+
+      setSendError(undefined);
+      setIsSendingCode(true);
+      try {
+        const result = await nocobaseClient.action<SmsCodeResponse>(
+          "smsOTP",
+          "publicCreate",
+          {
+            method: "POST",
+            authenticator: null,
+            includeRole: false,
+            withAclMeta: false,
+            body: {
+              action: "auth:signIn",
+              verifier,
+              uuid: phone,
+            },
+          }
+        );
+        const nextExpiry = result?.expiresAt
+          ? Date.parse(result.expiresAt)
+          : Date.now() + 60_000;
+        setNow(Date.now());
+        setExpiresAt(nextExpiry);
+      } catch (cause) {
+        const error =
+          cause instanceof Error
+            ? cause
+            : new Error("Unable to send the verification code.");
+        setSendError(error);
+        throw error;
+      } finally {
+        setIsSendingCode(false);
+      }
+    },
+    [retryAfter, verifier]
+  );
+
+  return {
+    sendCode,
+    signIn: (phone: string, code: string) =>
+      auth.signIn({ uuid: phone, code }),
+    isSendingCode,
+    isSigningIn: auth.isPending,
+    retryAfter,
+    error: sendError ?? auth.error,
+  };
+}

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

@@ -0,0 +1,6 @@
+# NocoBase WeCom authentication
+
+Adds the WeCom sign-in button, callback errors, WeCom-browser automatic login,
+and `useWecomSignIn` for custom UI.
+
+Installing the Registry also adds a WeCom component Demo under Authentication.

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

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from "react";
+
+import { AuthAutoRedirectProvider } from "@/components/auth";
+
+import { isWecomBrowser } from "./use-wecom-sign-in";
+
+export default function WecomAutoLoginProvider({
+  children,
+}: PropsWithChildren) {
+  const insideWecom = isWecomBrowser();
+  return (
+    <AuthAutoRedirectProvider
+      resource="wecom"
+      action="checkLogin"
+      enabled={insideWecom}
+      query={{ isWeComBrowser: insideWecom }}
+    >
+      {children}
+    </AuthAutoRedirectProvider>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import WecomSignInButton from "./wecom-sign-in-button";
+
+const authenticator = {
+  name: "company-wecom",
+  authType: "wecom",
+  title: "Sign in via WeCom",
+  options: {
+    btnTooltip: "Use the account associated with your company directory.",
+  },
+};
+
+export function WecomAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="wecom"
+      methodName="WeCom"
+      description="Provide a WeCom sign-in button and support automatic login when the application is opened inside WeCom."
+    >
+      <WecomSignInButton authenticator={authenticator} onSignIn={() => {}} />
+    </AuthMethodDemo>
+  );
+}

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

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

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

@@ -0,0 +1 @@
+export { isWecomBrowser, useWecomSignIn } from "./use-wecom-sign-in";

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

@@ -0,0 +1,64 @@
+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 WecomAuthUrlResponse = {
+  url?: string;
+};
+
+export function isWecomBrowser() {
+  return (
+    typeof navigator !== "undefined" &&
+    navigator.userAgent.toLowerCase().includes("wxwork")
+  );
+}
+
+export function useWecomSignIn(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("errorMsg");
+    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<WecomAuthUrlResponse>(
+        "wecom",
+        "getAuthUrl",
+        {
+          method: "POST",
+          authenticator: authenticator.name,
+          includeRole: false,
+          withAclMeta: false,
+          body: { redirect, isWeComBrowser: isWecomBrowser() },
+        }
+      );
+      if (!result?.url) {
+        throw new Error("NocoBase did not return a WeCom authorization URL.");
+      }
+      window.location.replace(nocobaseClient.resolveUrl(result.url));
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause
+          : new Error("Unable to start WeCom sign-in.")
+      );
+      setIsPending(false);
+    }
+  }, [authenticator.name, searchParams]);
+
+  return { signIn, isPending, error: error ?? callbackError };
+}

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

@@ -0,0 +1,70 @@
+import { Building2 } 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 {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { resolveTranslatableText } from "@/lib/i18n";
+
+import { useWecomSignIn } from "./use-wecom-sign-in";
+
+function plainText(value: unknown) {
+  return typeof value === "string"
+    ? value.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim()
+    : "";
+}
+
+export default function WecomSignInButton({
+  authenticator,
+  onSignIn,
+}: AuthenticatorComponentProps & { onSignIn?: () => void }) {
+  const { signIn, isPending, error } = useWecomSignIn(authenticator);
+  const tooltip = plainText(authenticator.options?.btnTooltip);
+  const button = (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full"
+      disabled={!onSignIn && isPending}
+      onClick={onSignIn ?? signIn}
+    >
+      <Building2 />
+      {!onSignIn && isPending
+        ? "Redirecting…"
+        : resolveTranslatableText(
+            authenticator.title ||
+              authenticator.authTypeTitle ||
+              "Sign in via WeCom"
+          )}
+    </Button>
+  );
+
+  return (
+    <div className="space-y-3">
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>WeCom sign-in failed</AlertTitle>
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+      {tooltip ? (
+        <Tooltip>
+          <TooltipTrigger render={button} />
+          <TooltipContent side="right" className="max-w-xs">
+            {tooltip}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        button
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+# NocoBase i18n
+
+Optional NocoBase server-language integration and language controls for the
+NocoBase Admin Starter.
+
+The Starter owns the Refine i18n provider, local i18next runtime, application
+resources, locale selection, and the shared `systemSettings:get` bootstrap.
+This Registry reuses those foundations and adds only the NocoBase-specific
+remote capabilities:
+
+- load registered dynamic namespaces from `app:getLang`;
+- persist a signed-in user's selected language through `users:updateLang`;
+- expose reusable page and user-menu language switchers;
+- provide an integrated Demo and Prompt generator.
+
+When this Registry is not installed, the Starter still uses the system default
+language and all local translations normally. It does not request
+`app:getLang`. When installed, the Registry reads the already-cached system
+settings and requests only registered server namespaces. `lm-collections` is
+registered by default for collection and field metadata.
+
+Application-owned React translations belong in `src/locales`, outside the
+installed Registry directory:
+
+```ts
+import { registerLocaleResources } from "@/providers/i18n";
+
+registerLocaleResources("my-feature", {
+  "en-US": { title: "Orders" },
+  "zh-CN": { title: "订单" },
+});
+```
+
+Other installed components can opt into another server-generated namespace:
+
+```ts
+import { registerServerResourceNamespace } from "@/extensions/nocobase-i18n";
+
+registerServerResourceNamespace("my-dynamic-namespace");
+```
+
+Namespaces registered after startup are loaded incrementally. Existing exact
+NocoBase expressions such as `{{t("Orders")}}` remain supported by the
+Starter's translation compatibility helper.

package/src/extensions/nocobase-i18n/components/index.ts

@@ -0,0 +1 @@
+export * from "./language-switcher";

package/src/extensions/nocobase-i18n/components/language-switcher.tsx

@@ -0,0 +1,138 @@
+import { useGetLocale, useSetLocale, useTranslate } from "@refinedev/core";
+import { Languages, Loader2 } from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+import {
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useEnabledLocales } from "@/providers/i18n";
+
+export type LanguageSwitcherProps = {
+  className?: string;
+  label?: ReactNode | false;
+  triggerClassName?: string;
+};
+
+export function LanguageSwitcher({
+  className,
+  label,
+  triggerClassName,
+}: LanguageSwitcherProps) {
+  const translate = useTranslate();
+  const getLocale = useGetLocale();
+  const setLocale = useSetLocale();
+  const locales = useEnabledLocales();
+  const currentLocale = getLocale();
+  const [switching, setSwitching] = useState(false);
+  const [error, setError] = useState<string>();
+  const resolvedLabel =
+    typeof label === "undefined"
+      ? translate("language.label", { ns: "nocobase-i18n" }, "Language")
+      : label;
+
+  if (locales.length < 2) return null;
+
+  const currentDefinition =
+    locales.find(({ locale }) => locale === currentLocale) ?? locales[0];
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {resolvedLabel === false ? null : (
+        <p className="text-xs font-medium text-muted-foreground">
+          {resolvedLabel}
+        </p>
+      )}
+      <Select
+        value={currentLocale}
+        disabled={switching}
+        onValueChange={(value) => {
+          if (!value || value === currentLocale) return;
+          setSwitching(true);
+          setError(undefined);
+          Promise.resolve(setLocale(value)).catch((reason) => {
+            setError(
+              reason instanceof Error
+                ? reason.message
+                : translate(
+                    "language.switchError",
+                    { ns: "nocobase-i18n" },
+                    "Unable to switch language."
+                  )
+            );
+            setSwitching(false);
+          });
+        }}
+      >
+        <SelectTrigger
+          className={cn("w-full min-w-52", triggerClassName)}
+          aria-label={String(resolvedLabel || "Language")}
+        >
+          {switching ? <Loader2 className="animate-spin" /> : <Languages />}
+          <SelectValue>{currentDefinition?.label ?? currentLocale}</SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {locales.map((definition) => (
+            <SelectItem key={definition.locale} value={definition.locale}>
+              {definition.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+    </div>
+  );
+}
+
+export function LanguageUserMenuItems() {
+  const translate = useTranslate();
+  const getLocale = useGetLocale();
+  const setLocale = useSetLocale();
+  const locales = useEnabledLocales();
+  const currentLocale = getLocale();
+
+  if (locales.length < 2) return null;
+
+  return (
+    <>
+      <DropdownMenuSeparator />
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger className="min-h-9 gap-2 px-2 text-muted-foreground focus:text-foreground">
+          <Languages />
+          <span>
+            {translate("language.label", { ns: "nocobase-i18n" }, "Language")}
+          </span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="min-w-44">
+          <DropdownMenuRadioGroup
+            value={currentLocale}
+            onValueChange={(value) => {
+              if (value && value !== currentLocale) void setLocale(value);
+            }}
+          >
+            {locales.map((definition) => (
+              <DropdownMenuRadioItem
+                key={definition.locale}
+                value={definition.locale}
+              >
+                {definition.label}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </>
+  );
+}