@nocobase/portal-template-default 1.0.4 → 1.0.6

package/src/components/auth/dynamic-sign-in.tsx

@@ -0,0 +1,191 @@
+import { AlertCircle, KeyRound } from "lucide-react";
+import { Fragment, Suspense, useEffect, useMemo } from "react";
+
+import { authenticatorAdapterMap } from "@/components/auth/authenticator-adapters";
+import type {
+  Authenticator,
+  RenderAuthenticator,
+} from "@/components/auth/types";
+import { usePublicAuthenticators } from "@/components/auth/use-public-authenticators";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { resolveTranslatableText } from "@/lib/i18n";
+
+type DynamicSignInProps = {
+  renderAuthenticator?: RenderAuthenticator;
+};
+
+type ResolvedAuthenticator = {
+  authenticator: Authenticator;
+  placement: "form" | "button";
+  element: React.ReactNode;
+};
+
+function AuthenticatorFallback() {
+  return (
+    <div className="flex min-h-32 items-center justify-center">
+      <Spinner className="size-5 text-muted-foreground" />
+    </div>
+  );
+}
+
+export function DynamicSignIn({
+  renderAuthenticator,
+}: DynamicSignInProps) {
+  const { data: authenticators = [], error, isPending } =
+    usePublicAuthenticators();
+
+  const unsupportedAuthTypes = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          authenticators
+            .filter(
+              (authenticator) =>
+                !authenticatorAdapterMap.has(authenticator.authType)
+            )
+            .map((authenticator) => authenticator.authType)
+        )
+      ),
+    [authenticators]
+  );
+
+  useEffect(() => {
+    if (!import.meta.env.DEV || unsupportedAuthTypes.length === 0) return;
+    console.warn(
+      `[auth] No frontend adapter is installed for: ${unsupportedAuthTypes.join(
+        ", "
+      )}`
+    );
+  }, [unsupportedAuthTypes]);
+
+  const resolved = useMemo<ResolvedAuthenticator[]>(() => {
+    return authenticators.flatMap((authenticator) => {
+      const adapter = authenticatorAdapterMap.get(authenticator.authType);
+      if (!adapter) return [];
+
+      const Component = adapter.Component;
+      const defaultElement = (
+        <Suspense fallback={<AuthenticatorFallback />}>
+          <Component authenticator={authenticator} />
+        </Suspense>
+      );
+      const element = renderAuthenticator
+        ? renderAuthenticator({ authenticator, adapter, defaultElement })
+        : defaultElement;
+
+      if (element === null || element === false || element === undefined) {
+        return [];
+      }
+
+      return [{ authenticator, placement: adapter.placement, element }];
+    });
+  }, [authenticators, renderAuthenticator]);
+
+  if (isPending) {
+    return (
+      <div className="flex min-h-64 items-center justify-center">
+        <Spinner className="size-6 text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert variant="destructive">
+        <AlertCircle />
+        <AlertTitle>Unable to load sign-in methods</AlertTitle>
+        <AlertDescription>
+          {import.meta.env.DEV && error instanceof Error
+            ? error.message
+            : "Please try again or contact your administrator."}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  const forms = resolved.filter((item) => item.placement === "form");
+  const buttons = resolved.filter((item) => item.placement === "button");
+
+  if (resolved.length === 0) {
+    return (
+      <Empty className="min-h-64 border">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <KeyRound />
+          </EmptyMedia>
+          <EmptyTitle>No supported sign-in methods</EmptyTitle>
+          <EmptyDescription>
+            No sign-in method is currently available. Contact your
+            administrator for access.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {forms.length === 1 ? (
+        forms[0].element
+      ) : forms.length > 1 ? (
+        <Tabs defaultValue={forms[0].authenticator.name}>
+          <TabsList className="w-full">
+            {forms.map(({ authenticator }) => (
+              <TabsTrigger
+                key={authenticator.name}
+                value={authenticator.name}
+              >
+                {resolveTranslatableText(
+                  authenticator.title ||
+                    authenticator.authTypeTitle ||
+                    authenticator.authType
+                )}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {forms.map(({ authenticator, element }) => (
+            <TabsContent
+              key={authenticator.name}
+              value={authenticator.name}
+            >
+              {element}
+            </TabsContent>
+          ))}
+        </Tabs>
+      ) : null}
+
+      {buttons.length > 0 && (
+        <Fragment>
+          {forms.length > 0 && (
+            <div className="flex items-center gap-4 py-1">
+              <Separator className="flex-1" />
+              <span className="text-xs text-muted-foreground">
+                Or continue with
+              </span>
+              <Separator className="flex-1" />
+            </div>
+          )}
+          <div className="grid gap-3">
+            {buttons.map(({ authenticator, element }) => (
+              <Fragment key={authenticator.name}>{element}</Fragment>
+            ))}
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+}

package/src/components/auth/forgot-password-form.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { ArrowLeft } from "lucide-react";
 import { useForgotPassword, useLink } from "@refinedev/core";
+import { useSearchParams } from "react-router";
 
 import { AuthLayout } from "@/components/auth/auth-layout";
 import { Button } from "@/components/ui/button";
@@ -12,11 +13,15 @@ import { Label } from "@/components/ui/label";
 export const ForgotPasswordForm = () => {
   const [email, setEmail] = useState("");
   const Link = useLink();
-  const { mutate: forgotPassword } = useForgotPassword();
+  const [searchParams] = useSearchParams();
+  const { mutate: forgotPassword, isPending } = useForgotPassword();
 
   const handleForgotPassword = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    forgotPassword({ email });
+    forgotPassword({
+      email,
+      authenticator: searchParams.get("name") ?? undefined,
+    });
   };
 
   return (
@@ -44,11 +49,14 @@ export const ForgotPasswordForm = () => {
             autoComplete="email"
             autoFocus
             required
-            className="h-11 rounded-lg"
           />
         </div>
-        <Button type="submit" size="lg" className="h-11 w-full rounded-lg">
-          Send reset link
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={isPending}
+        >
+          {isPending ? "Sending…" : "Send reset link"}
         </Button>
       </form>
     </AuthLayout>

package/src/components/auth/index.ts

@@ -0,0 +1,13 @@
+export { BasicSignInForm } from "./basic-sign-in-form";
+export { DefaultSignInPage } from "./default-sign-in-page";
+export { DynamicSignIn } from "./dynamic-sign-in";
+export { AuthAutoRedirectProvider } from "./auto-redirect-provider";
+export { useAuthenticatorSignIn } from "./use-authenticator-sign-in";
+export { usePublicAuthenticators } from "./use-public-authenticators";
+export type {
+  Authenticator,
+  AuthenticatorAdapter,
+  AuthenticatorComponentProps,
+  RenderAuthenticator,
+  RenderAuthenticatorContext,
+} from "./types";

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

@@ -1,111 +1 @@
-"use client";
-
-import { useState } from "react";
-import { Chrome, Github } from "lucide-react";
-import { useLink, useLogin } from "@refinedev/core";
-
-import { AuthLayout } from "@/components/auth/auth-layout";
-import { InputPassword } from "@/components/auth/input-password";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-
-export const SignInForm = () => {
-  const [account, setAccount] = useState("");
-  const [password, setPassword] = useState("");
-  const Link = useLink();
-  const { mutate: login } = useLogin();
-
-  const handleSignIn = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    login({ username: account, password });
-  };
-
-  return (
-    <AuthLayout
-      title="Welcome back"
-      description="Use your NocoBase account to continue."
-    >
-      <form onSubmit={handleSignIn} className="space-y-5">
-        <div className="space-y-2">
-          <Label htmlFor="account">Username or email</Label>
-          <Input
-            id="account"
-            type="text"
-            value={account}
-            onChange={(event) => setAccount(event.target.value)}
-            autoComplete="username"
-            autoFocus
-            required
-            className="h-11 rounded-lg"
-          />
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <InputPassword
-            id="password"
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
-            autoComplete="current-password"
-            required
-            className="h-11 rounded-lg"
-          />
-        </div>
-
-        <Button type="submit" size="lg" className="h-11 w-full rounded-lg">
-          Sign in
-        </Button>
-
-        <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 text-sm text-muted-foreground">
-          <Link
-            to="/forgot-password"
-            className="transition-colors hover:text-foreground hover:underline hover:underline-offset-4"
-          >
-            Forgot password?
-          </Link>
-          <span>
-            No account?{" "}
-            <Link
-              to="/register"
-              className="font-semibold text-foreground underline underline-offset-4"
-            >
-              Sign up
-            </Link>
-          </span>
-        </div>
-
-        <div className="flex items-center gap-4 py-1">
-          <div className="h-px flex-1 bg-border" />
-          <span className="text-xs text-muted-foreground">
-            Or continue with
-          </span>
-          <div className="h-px flex-1 bg-border" />
-        </div>
-
-        <div className="grid grid-cols-2 gap-3">
-          <Button
-            type="button"
-            variant="outline"
-            className="h-10 rounded-lg"
-            onClick={() => login({ providerName: "google" })}
-          >
-            <Chrome />
-            Google
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            className="h-10 rounded-lg"
-            onClick={() => login({ providerName: "github" })}
-          >
-            <Github />
-            GitHub
-          </Button>
-        </div>
-      </form>
-    </AuthLayout>
-  );
-};
-
-SignInForm.displayName = "SignInForm";
+export { DefaultSignInPage as SignInForm } from "./default-sign-in-page";

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { Chrome, Github } from "lucide-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";
@@ -16,7 +16,8 @@ export const SignUpForm = () => {
   const [confirmPassword, setConfirmPassword] = useState("");
   const { open } = useNotification();
   const Link = useLink();
-  const { mutate: register } = useRegister();
+  const [searchParams] = useSearchParams();
+  const { mutate: register, isPending } = useRegister();
 
   const handleSignUp = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -30,7 +31,11 @@ export const SignUpForm = () => {
       return;
     }
 
-    register({ email, password });
+    register({
+      email,
+      password,
+      authenticator: searchParams.get("name") ?? undefined,
+    });
   };
 
   return (
@@ -49,7 +54,6 @@ export const SignUpForm = () => {
             autoComplete="email"
             autoFocus
             required
-            className="h-11 rounded-lg"
           />
         </div>
 
@@ -61,7 +65,6 @@ export const SignUpForm = () => {
             onChange={(event) => setPassword(event.target.value)}
             autoComplete="new-password"
             required
-            className="h-11 rounded-lg"
           />
         </div>
 
@@ -73,12 +76,15 @@ export const SignUpForm = () => {
             onChange={(event) => setConfirmPassword(event.target.value)}
             autoComplete="new-password"
             required
-            className="h-11 rounded-lg"
           />
         </div>
 
-        <Button type="submit" size="lg" className="h-11 w-full rounded-lg">
-          Sign up
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={isPending}
+        >
+          {isPending ? "Creating account…" : "Sign up"}
         </Button>
 
         <p className="text-center text-sm text-muted-foreground">
@@ -90,35 +96,6 @@ export const SignUpForm = () => {
             Sign in
           </Link>
         </p>
-
-        <div className="flex items-center gap-4 py-1">
-          <div className="h-px flex-1 bg-border" />
-          <span className="text-xs text-muted-foreground">
-            Or continue with
-          </span>
-          <div className="h-px flex-1 bg-border" />
-        </div>
-
-        <div className="grid grid-cols-2 gap-3">
-          <Button
-            type="button"
-            variant="outline"
-            className="h-10 rounded-lg"
-            onClick={() => register({ providerName: "google" })}
-          >
-            <Chrome />
-            Google
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            className="h-10 rounded-lg"
-            onClick={() => register({ providerName: "github" })}
-          >
-            <Github />
-            GitHub
-          </Button>
-        </div>
       </form>
     </AuthLayout>
   );

package/src/components/auth/types.ts

@@ -0,0 +1,38 @@
+import type {
+  ComponentType,
+  LazyExoticComponent,
+  ReactNode,
+} from "react";
+
+export type Authenticator = {
+  name: string;
+  authType: string;
+  authTypeTitle?: string;
+  title?: string;
+  options?: Record<string, unknown>;
+  sort?: number;
+};
+
+export type AuthenticatorComponentProps = {
+  authenticator: Authenticator;
+};
+
+type AuthenticatorComponent = ComponentType<AuthenticatorComponentProps>;
+
+export type AuthenticatorAdapter = {
+  authType: string;
+  placement: "form" | "button";
+  Component:
+    | AuthenticatorComponent
+    | LazyExoticComponent<AuthenticatorComponent>;
+};
+
+export type RenderAuthenticatorContext = {
+  authenticator: Authenticator;
+  adapter: AuthenticatorAdapter;
+  defaultElement: ReactNode;
+};
+
+export type RenderAuthenticator = (
+  context: RenderAuthenticatorContext
+) => ReactNode;

package/src/components/auth/use-authenticator-sign-in.ts

@@ -0,0 +1,14 @@
+import { useLogin } from "@refinedev/core";
+
+type SignInValues = Record<string, unknown>;
+
+export function useAuthenticatorSignIn(authenticator: string) {
+  const mutation = useLogin<SignInValues & { authenticator: string }>();
+
+  return {
+    signIn: (values: SignInValues) =>
+      mutation.mutateAsync({ ...values, authenticator }),
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+}

package/src/components/auth/use-public-authenticators.ts

@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { nocobaseClient } from "@/lib/nocobase/client";
+import type { Authenticator } from "@/components/auth/types";
+
+export const publicAuthenticatorsQueryKey = [
+  "nocobase",
+  "public-authenticators",
+] as const;
+
+export function usePublicAuthenticators() {
+  return useQuery({
+    queryKey: publicAuthenticatorsQueryKey,
+    queryFn: ({ signal }) =>
+      nocobaseClient.action<Authenticator[]>("authenticators", "publicList", {
+        method: "GET",
+        signal,
+        authenticator: null,
+        includeRole: false,
+        withAclMeta: false,
+      }),
+    staleTime: 0,
+    refetchOnMount: "always",
+    retry: false,
+  });
+}