@nocobase/portal-template-default 1.0.15 → 1.0.16

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/dist/assets/auto-login-provider-DyaPGK2D.js

@@ -1 +0,0 @@
-import{j as r}from"./index-MB-jfQld.js";import{A as i}from"./auto-redirect-provider-CfwRvYOI.js";import{i as t}from"./use-wecom-sign-in-C9j8wfCD.js";function n({children:e}){const o=t();return r.jsx(i,{resource:"wecom",action:"checkLogin",enabled:o,query:{isWeComBrowser:o},children:e})}export{n as default};

package/dist/assets/auto-redirect-provider-Cr3jmYts.js

@@ -1 +0,0 @@
-import{j as e}from"./index-MB-jfQld.js";import{A as t}from"./auto-redirect-provider-CfwRvYOI.js";function c({children:r}){return e.jsx(t,{resource:"saml",action:"checkRedirect",children:r})}export{c as default};

package/dist/assets/auto-redirect-provider-QkJQRBbG.js

@@ -1 +0,0 @@
-import{j as e}from"./index-MB-jfQld.js";import{A as t}from"./auto-redirect-provider-CfwRvYOI.js";function c({children:r}){return e.jsx(t,{resource:"oidc",action:"checkRedirect",children:r})}export{c as default};

package/dist/assets/createSeriesDataSimply-D0A6SAVQ.js

@@ -1 +0,0 @@
-import{H as t,N as c,as as m,at as o}from"./echarts-runtime-D8kXn6ME.js";function S(e,a,n){a=t(a)&&{coordDimensions:a}||c({encodeDefine:e.getEncode()},a);var r=e.getSource(),s=m(r,a).dimensions,i=new o(s,e);return i.initData(r,n),i}export{S as c};