@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.57

package/client/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from 'cn';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='skeleton'
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/client/components/ui/spinner.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { cn } from 'cn';
+import { Loader2Icon } from 'lucide-react';
+
+function Spinner(inputProps: React.ComponentProps<'svg'>) {
+  const { t } = useTranslation();
+  const { className, ...props } = inputProps;
+
+  return (
+    <Loader2Icon
+      data-slot='spinner'
+      role='status'
+      aria-label={t('status.loading', { defaultValue: 'Loading' })}
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/client/components/ui/tabs.tsx

@@ -0,0 +1,79 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from 'cn';
+
+function Tabs({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot='tabs'
+      data-orientation={orientation}
+      className={cn(
+        'group/tabs flex gap-2 data-horizontal:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = 'default',
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot='tabs-list'
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot='tabs-trigger'
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+        'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot='tabs-content'
+      className={cn('flex-1 text-sm outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/client/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { cn } from 'cn';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot='textarea'
+      className={cn(
+        'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/client/components/ui/toast.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useTranslation } from '@nocobase/i18n/client';
+import * as React from 'react';
+import { Toast as ToastPrimitive } from '@base-ui/react/toast';
+import { cn } from 'cn';
+
+import { Button } from '#components/ui/button';
+import {
+  XIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from 'lucide-react';
+
+const toast = ToastPrimitive.createToastManager();
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />;
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot='toast-portal' {...props} />;
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot='toast-viewport'
+      className={cn(
+        'pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot='toast'
+      className={cn(
+        'group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        '[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]',
+        'h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]',
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        'data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]',
+        'data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]',
+        '[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]',
+        'data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot='toast-content'
+      className={cn(
+        'flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot='toast-title'
+      className={cn('text-sm font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot='toast-description'
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function ToastAction({
+  className,
+  render = <Button variant='outline' size='sm' />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot='toast-action'
+      render={render}
+      className={cn('shrink-0', className)}
+      {...props}
+    />
+  );
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button variant='ghost' size='icon-sm' />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  const { t } = useTranslation();
+  return (
+    <ToastPrimitive.Close
+      data-slot='toast-close'
+      aria-label={t('actions.close')}
+      render={render}
+      className={cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <XIcon aria-hidden='true' />}
+    </ToastPrimitive.Close>
+  );
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null;
+
+  if (type === 'success') {
+    icon = <CircleCheckIcon aria-hidden='true' />;
+  }
+
+  if (type === 'info') {
+    icon = <InfoIcon aria-hidden='true' />;
+  }
+
+  if (type === 'warning') {
+    icon = <TriangleAlertIcon aria-hidden='true' />;
+  }
+
+  if (type === 'error') {
+    icon = <OctagonXIcon className='text-destructive' aria-hidden='true' />;
+  }
+
+  if (type === 'loading') {
+    icon = <Loader2Icon className='animate-spin' aria-hidden='true' />;
+  }
+
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <span
+      data-slot='toast-icon'
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  );
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager();
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className='flex min-w-0 flex-1 flex-col gap-1'>
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ));
+}
+
+function Toaster({
+  children,
+  toastManager = toast,
+  ...props
+}: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider toastManager={toastManager} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  );
+}
+
+const createToastManager = ToastPrimitive.createToastManager;
+const useToastManager = ToastPrimitive.useToastManager;
+
+export {
+  Toaster,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  createToastManager,
+  toast,
+  useToastManager,
+};

package/client/components/ui/tooltip.tsx

@@ -0,0 +1,63 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { cn } from 'cn';
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot='tooltip-provider'
+      delay={delay}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot='tooltip' {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className='isolate z-50'
+      >
+        <TooltipPrimitive.Popup
+          data-slot='tooltip-content'
+          className={cn(
+            'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className='z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5' />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/client/components/use-route-overlay.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext, type Context } from 'react';
+
+export interface RouteOverlayContextValue {
+  /** Runs `beforeClose`, then navigates to the parent route unless it declined. Concurrent calls share one request. */
+  readonly close: () => Promise<void>;
+  /** True while a close request for the current location is pending. */
+  readonly isClosing: boolean;
+}
+
+/** Internal context shared by both route overlay components. */
+export const RouteOverlayContext: Context<RouteOverlayContextValue | null> =
+  createContext<RouteOverlayContextValue | null>(null);
+
+/**
+ * Closes the enclosing `RouteDialog` or `RouteDrawer`. Call it from a component rendered inside the overlay — its
+ * body or its footer — never from the page that returns the overlay, which sits outside the provider.
+ */
+export function useRouteOverlay(): RouteOverlayContextValue {
+  const value = useContext(RouteOverlayContext);
+  if (!value) {
+    throw new Error(
+      'useRouteOverlay must be used inside RouteDialog or RouteDrawer',
+    );
+  }
+  return value;
+}

package/client/config/api.ts

@@ -0,0 +1,13 @@
+import {
+  defineAppConfig,
+  resolveAppUrl,
+  type AppConfigFactory,
+} from '@nocobase/app-client';
+
+const api: AppConfigFactory<{ baseURL: string }> = defineAppConfig(
+  (_runtime) => ({
+    baseURL: resolveAppUrl('/api'),
+  }),
+);
+
+export default api;

package/client/config/app.ts

@@ -0,0 +1,8 @@
+import { defineAppConfig, type AppConfigFactory } from '@nocobase/app-client';
+
+const app: AppConfigFactory<{ title: string }> = defineAppConfig(
+  (_runtime) => ({
+    title: 'NocoBase',
+  }),
+);
+export default app;

package/client/config/auth.ts

@@ -0,0 +1,18 @@
+import { defineAppConfig, type AppConfigFactory } from '@nocobase/app-client';
+import { apiKeyClient } from '@nocobase/app-plugin-api-keys/client';
+import type { AuthConfig } from '@nocobase/app-plugin-authentication/client';
+import {
+  deviceAuthorizationClient,
+  usernameClient,
+} from 'better-auth/client/plugins';
+
+const auth: AppConfigFactory<AuthConfig> = defineAppConfig((_runtime) => ({
+  // `deviceAuthorizationClient()` serves the `/device` page (`pages/auth/device.tsx`), where people approve a CLI's sign-in.
+  plugins: [
+    usernameClient({ displayUsername: false }),
+    apiKeyClient(),
+    deviceAuthorizationClient(),
+  ],
+}));
+
+export default auth;

package/client/config/index.ts

@@ -0,0 +1,17 @@
+import app from './app.js';
+import api from './api.js';
+import { defaultAppConfigs, type AppConfigFactory } from '@nocobase/app-client';
+import type { AuthConfig } from '@nocobase/app-plugin-authentication/client';
+import auth from './auth.js';
+
+const defaultConfigs: AppConfigFactory<{
+  auth: AuthConfig;
+  app: ReturnType<typeof app>;
+  api: ReturnType<typeof api>;
+}> = defaultAppConfigs({
+  auth,
+  app,
+  api,
+});
+
+export default defaultConfigs;

package/client/extensions/nocobase-auth-forms/field-props.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export function errorId(id: string): string {
+  return `${id}-error`;
+}
+
+/** The props that mark a control invalid and point it at its error message. */
+export function invalidProps(
+  id: string,
+  error: ReactNode,
+): { 'aria-invalid'?: true; 'aria-describedby'?: string } {
+  return error ? { 'aria-describedby': errorId(id), 'aria-invalid': true } : {};
+}

package/client/extensions/nocobase-auth-forms/form-parts.tsx

@@ -0,0 +1,101 @@
+import { CircleAlert, CircleCheck } from 'lucide-react';
+import type { ReactElement, ReactNode } from 'react';
+
+import { Alert, AlertDescription } from '#components/ui/alert';
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '#components/ui/field';
+
+import { errorId } from './field-props.js';
+
+export interface AuthFieldProps {
+  readonly id: string;
+  readonly label: ReactNode;
+  /** Shown at the end of the label row, such as a "Forgot password?" link. */
+  readonly labelAside?: ReactNode;
+  /** Shown under the control and its error, at the end of the row, such as a "Forgot password?" link. It follows the control in tab order. */
+  readonly below?: ReactNode;
+  readonly error?: ReactNode;
+  readonly children: ReactNode;
+}
+
+/** A label, its control and the control's error message. The control takes `invalidProps(id, error)`. */
+export function AuthField({
+  below,
+  children,
+  error,
+  id,
+  label,
+  labelAside,
+}: AuthFieldProps): ReactElement {
+  return (
+    <Field data-invalid={error ? true : undefined}>
+      <div className='flex items-center gap-2'>
+        <FieldLabel htmlFor={id}>{label}</FieldLabel>
+        {labelAside ? (
+          <span className='ml-auto text-sm [&_a]:underline-offset-4 [&_a:hover]:underline'>
+            {labelAside}
+          </span>
+        ) : null}
+      </div>
+      {children}
+      {error ? <FieldError id={errorId(id)}>{error}</FieldError> : null}
+      {below ? (
+        <div className='flex justify-end text-sm text-muted-foreground [&_a]:underline-offset-4 [&_a:hover]:text-foreground [&_a:hover]:underline'>
+          {below}
+        </div>
+      ) : null}
+    </Field>
+  );
+}
+
+export interface AuthFormStatusProps {
+  readonly children: ReactNode;
+  readonly type: 'error' | 'success';
+}
+
+/** A message about the whole form: an alert for an error, a status for a success. */
+export function AuthFormStatus({
+  children,
+  type,
+}: AuthFormStatusProps): ReactElement {
+  const error = type === 'error';
+  return (
+    <Alert
+      role={error ? 'alert' : 'status'}
+      variant={error ? 'destructive' : 'default'}
+    >
+      {error ? (
+        <CircleAlert aria-hidden='true' />
+      ) : (
+        <CircleCheck aria-hidden='true' />
+      )}
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  );
+}
+
+export interface AuthFormSubmitProps {
+  /** The submit button. */
+  readonly children: ReactNode;
+  /** A centred line of links under the button, such as "Don't have an account? Sign up". */
+  readonly footer?: ReactNode;
+}
+
+/** The submit button and the footer line beneath it. */
+export function AuthFormSubmit({
+  children,
+  footer,
+}: AuthFormSubmitProps): ReactElement {
+  return (
+    <Field>
+      {children}
+      {footer ? (
+        <FieldDescription className='text-center'>{footer}</FieldDescription>
+      ) : null}
+    </Field>
+  );
+}

package/client/extensions/nocobase-auth-forms/password-input.tsx

@@ -0,0 +1,41 @@
+import { Eye, EyeOff } from 'lucide-react';
+import { useState, type ComponentProps, type ReactElement } from 'react';
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '#components/ui/input-group';
+
+export interface PasswordInputProps extends Omit<
+  ComponentProps<'input'>,
+  'type'
+> {
+  readonly showLabel?: string;
+  readonly hideLabel?: string;
+}
+
+/** A password input with a button that shows or hides what was typed. */
+export function PasswordInput({
+  hideLabel = 'Hide password',
+  showLabel = 'Show password',
+  ...props
+}: PasswordInputProps): ReactElement {
+  const [visible, setVisible] = useState(false);
+  return (
+    <InputGroup>
+      <InputGroupInput {...props} type={visible ? 'text' : 'password'} />
+      <InputGroupAddon align='inline-end'>
+        <InputGroupButton
+          aria-label={visible ? hideLabel : showLabel}
+          aria-pressed={visible}
+          onClick={() => setVisible((value) => !value)}
+          size='icon-xs'
+        >
+          {visible ? <EyeOff aria-hidden='true' /> : <Eye aria-hidden='true' />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}