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

package/client/extensions/nocobase-auth-methods/auth-methods.tsx

@@ -0,0 +1,170 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import { Button, buttonVariants } from '#components/ui/button';
+import { FieldSeparator } from '#components/ui/field';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '#components/ui/tabs';
+import { cn } from 'cn';
+
+export interface AuthMethod {
+  readonly id: string;
+  readonly label: ReactNode;
+  /** The method's form, rendered while its tab is selected. */
+  readonly content: ReactNode;
+}
+
+export interface AuthSsoProvider {
+  readonly id: string;
+  /** The provider's name. It labels the button, and names it when the group shows icons only. */
+  readonly label: string;
+  readonly icon?: ReactNode;
+  /** Renders a link instead of a button. */
+  readonly href?: string;
+  readonly onClick?: () => void;
+  readonly disabled?: boolean;
+}
+
+export interface AuthMethodsLabels {
+  /** Names the method tabs for assistive technology. */
+  readonly methods: string;
+  /** Separates the methods from the SSO providers. */
+  readonly separator: string;
+  /** The text of a provider's button; `{provider}` is replaced by its label. */
+  readonly continueWith: string;
+}
+
+const defaultAuthMethodsLabels: AuthMethodsLabels = {
+  methods: 'Sign-in methods',
+  separator: 'Or continue with',
+  continueWith: 'Continue with {provider}',
+};
+
+export interface AuthMethodsProps {
+  /** The sign-in methods. Tabs appear only when there is more than one. */
+  readonly methods?: readonly AuthMethod[];
+  /** Single sign-on providers, below the methods. */
+  readonly providers?: readonly AuthSsoProvider[];
+  /** The method selected at first; defaults to the first one. */
+  readonly defaultMethodId?: string;
+  readonly labels?: Partial<AuthMethodsLabels>;
+  readonly className?: string;
+}
+
+/** Every way to sign in on one page: method tabs, the selected method's form, and the SSO providers. */
+export function AuthMethods({
+  className,
+  defaultMethodId,
+  labels: labelOverrides,
+  methods = [],
+  providers = [],
+}: AuthMethodsProps): ReactElement {
+  const labels = { ...defaultAuthMethodsLabels, ...labelOverrides };
+  return (
+    <div className={cn('grid gap-6', className)}>
+      {methods.length > 1 ? (
+        <Tabs
+          className='gap-6'
+          defaultValue={defaultMethodId ?? methods[0]?.id}
+        >
+          <TabsList aria-label={labels.methods} className='w-full'>
+            {methods.map((method) => (
+              <TabsTrigger key={method.id} value={method.id}>
+                {method.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {methods.map((method) => (
+            <TabsContent key={method.id} value={method.id}>
+              {method.content}
+            </TabsContent>
+          ))}
+        </Tabs>
+      ) : (
+        methods[0]?.content
+      )}
+      {providers.length > 0 ? (
+        <>
+          {methods.length > 0 ? (
+            <FieldSeparator>{labels.separator}</FieldSeparator>
+          ) : null}
+          <AuthSsoButtons
+            continueWith={labels.continueWith}
+            providers={providers}
+          />
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+export interface AuthSsoButtonsProps {
+  readonly providers: readonly AuthSsoProvider[];
+  /** The text of a provider's button; `{provider}` is replaced by its label. */
+  readonly continueWith?: string;
+}
+
+/**
+ * One full-width outline button per provider. From three providers on, the group becomes a grid of icon buttons, each
+ * named by its provider; a provider without an icon keeps its text.
+ */
+export function AuthSsoButtons({
+  continueWith = defaultAuthMethodsLabels.continueWith,
+  providers,
+}: AuthSsoButtonsProps): ReactElement {
+  const compact = providers.length >= 3;
+  return (
+    <div
+      className={cn(
+        'grid gap-3',
+        compact && 'grid-cols-[repeat(auto-fit,minmax(3rem,1fr))]',
+      )}
+    >
+      {providers.map((provider) => {
+        const text = continueWith.replace('{provider}', provider.label);
+        const iconOnly = compact && Boolean(provider.icon);
+        const content = (
+          <>
+            {provider.icon ? (
+              <span aria-hidden='true' className='contents'>
+                {provider.icon}
+              </span>
+            ) : null}
+            {iconOnly ? null : <span className='truncate'>{text}</span>}
+          </>
+        );
+        const name = iconOnly ? text : undefined;
+        // A provider that signs in by navigation is a link, styled as the button it sits beside.
+        if (provider.href && !provider.disabled) {
+          return (
+            <a
+              aria-label={name}
+              className={cn(
+                buttonVariants({ size: 'lg', variant: 'outline' }),
+                'w-full',
+              )}
+              href={provider.href}
+              key={provider.id}
+              title={name}
+            >
+              {content}
+            </a>
+          );
+        }
+        return (
+          <Button
+            aria-label={name}
+            className='w-full'
+            disabled={provider.disabled}
+            key={provider.id}
+            onClick={provider.onClick}
+            size='lg'
+            title={name}
+            type='button'
+            variant='outline'
+          >
+            {content}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/client/extensions/nocobase-auth-split-layout/auth-split-layout.tsx

@@ -0,0 +1,126 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import { cn } from 'cn';
+
+export interface AuthSplitLayoutProps {
+  /** The application's mark, shown in a small tile. Pass an icon or an image sized to fill it. */
+  readonly logo?: ReactNode;
+  /** The application's name, beside the mark. */
+  readonly name?: ReactNode;
+  /** The page's heading, rendered as its `h1`. */
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  /** The form, or `AuthMethods` with several. */
+  readonly children: ReactNode;
+  /** A short line at the bottom of the form column, such as terms or a copyright. */
+  readonly footer?: ReactNode;
+  /** What fills the right half from the `xl` breakpoint up, such as a product screenshot or a few highlights. */
+  readonly aside?: ReactNode;
+  /** The accessible name of the `aside` landmark. */
+  readonly asideLabel?: string;
+  readonly className?: string;
+}
+
+/** The page around an authentication form: the form in a column on the left, the application's `aside` on the right. */
+export function AuthSplitLayout({
+  aside,
+  asideLabel,
+  children,
+  className,
+  description,
+  footer,
+  logo,
+  name,
+  title,
+}: AuthSplitLayoutProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        'grid min-h-svh bg-background text-foreground',
+        aside ? 'xl:grid-cols-2' : null,
+        className,
+      )}
+    >
+      <div className='flex flex-col gap-6 p-6 md:p-10'>
+        <AuthBrand
+          className='justify-center md:justify-start'
+          logo={logo}
+          name={name}
+        />
+        <main className='flex flex-1 items-center justify-center'>
+          <div className='w-full max-w-sm'>
+            <header className='mb-8 grid gap-1.5'>
+              <h1 className='font-heading text-2xl font-semibold tracking-tight'>
+                {title}
+              </h1>
+              {description ? (
+                <p className='text-sm text-balance text-muted-foreground'>
+                  {description}
+                </p>
+              ) : null}
+            </header>
+            {children}
+          </div>
+        </main>
+        {footer ? (
+          <div className='text-center text-xs text-muted-foreground md:text-left [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:text-foreground'>
+            {footer}
+          </div>
+        ) : null}
+      </div>
+      {aside ? (
+        <aside
+          aria-label={asideLabel}
+          className='relative isolate hidden overflow-hidden border-l bg-muted xl:block'
+        >
+          <DotPattern className='-z-10 [mask-image:linear-gradient(to_bottom,black,transparent)]' />
+          {aside}
+        </aside>
+      ) : null}
+    </div>
+  );
+}
+
+interface AuthBrandProps {
+  readonly logo?: ReactNode;
+  readonly name?: ReactNode;
+  readonly className?: string;
+}
+
+function AuthBrand({
+  className,
+  logo,
+  name,
+}: AuthBrandProps): ReactElement | null {
+  if (!logo && !name) return null;
+  return (
+    <div className={cn('flex items-center gap-2.5', className)}>
+      {logo ? (
+        <span className='flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border bg-background p-1.5 shadow-xs [&_img]:size-full [&_img]:object-contain [&_svg]:size-5'>
+          {logo}
+        </span>
+      ) : null}
+      {name ? (
+        <span className='font-heading text-base font-semibold tracking-tight'>
+          {name}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function DotPattern({
+  className,
+}: {
+  readonly className?: string;
+}): ReactElement {
+  return (
+    <div
+      aria-hidden='true'
+      className={cn(
+        'pointer-events-none absolute inset-0 bg-[radial-gradient(color-mix(in_oklch,var(--foreground)_14%,transparent)_1px,transparent_1px)] [background-size:16px_16px]',
+        className,
+      )}
+    />
+  );
+}

package/client/extensions/nocobase-device-approval/device-approval.tsx

@@ -0,0 +1,277 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { CircleAlert, CircleCheck, CircleX, Clock } from 'lucide-react';
+import {
+  useId,
+  useState,
+  type FormEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+import { Alert, AlertDescription } from '#components/ui/alert';
+import { Button } from '#components/ui/button';
+import { Field, FieldGroup, FieldLabel } from '#components/ui/field';
+import { Input } from '#components/ui/input';
+import { Spinner } from '#components/ui/spinner';
+import { cn } from 'cn';
+
+import {
+  formatUserCode,
+  useDeviceApproval,
+  type DeviceApprovalStatus,
+} from './use-device-approval.js';
+
+export interface DeviceApprovalProps {
+  /** The code from the address (`?user_code=`); without one the person types it. */
+  readonly userCode?: string | null;
+  /** Called with the code the person typed: put it in the address, so a reload keeps it. */
+  readonly onUserCodeChange: (userCode: string) => void;
+  readonly className?: string;
+}
+
+/**
+ * Approves or denies a device sign-in (RFC 8628) for the signed-in person: the code from the address, or one they
+ * type, checked against the server and shown so they can compare it with their device, then Approve or Deny. Render it
+ * on a page only signed-in people reach, inside the application's authentication layout.
+ */
+export function DeviceApproval({
+  className,
+  onUserCodeChange,
+  userCode,
+}: DeviceApprovalProps): ReactElement {
+  const { t } = useTranslation();
+  const approval = useDeviceApproval(userCode ?? undefined);
+  const { status } = approval;
+
+  if (status === 'idle')
+    return <CodeEntry className={className} onSubmit={onUserCodeChange} />;
+
+  const busy = status === 'approving' || status === 'denying';
+  const enterAnother = (
+    <Button onClick={() => onUserCodeChange('')} type='button' variant='link'>
+      {t('deviceApproval.otherCode', { defaultValue: 'Enter another code' })}
+    </Button>
+  );
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)}>
+      {status === 'checking' ? (
+        <p className='flex items-center justify-center gap-2 text-sm text-muted-foreground'>
+          <Spinner aria-hidden='true' />
+          {t('deviceApproval.checking', {
+            defaultValue: 'Checking the code…',
+          })}
+        </p>
+      ) : (
+        <CodeDisplay clientId={approval.clientId} userCode={userCode ?? ''} />
+      )}
+      {status === 'ready' || busy ? (
+        <div className='flex flex-col gap-4'>
+          <p className='text-center text-sm text-muted-foreground'>
+            {t('deviceApproval.confirm', {
+              defaultValue:
+                'Check that this code matches the one your device shows.',
+            })}
+          </p>
+          <div className='grid grid-cols-2 gap-2'>
+            <Button
+              disabled={busy}
+              onClick={() => void approval.deny()}
+              type='button'
+              variant='outline'
+            >
+              {status === 'denying'
+                ? t('deviceApproval.denying', { defaultValue: 'Denying…' })
+                : t('deviceApproval.deny', { defaultValue: 'Deny' })}
+            </Button>
+            <Button
+              disabled={busy}
+              onClick={() => void approval.approve()}
+              type='button'
+            >
+              {status === 'approving'
+                ? t('deviceApproval.approving', {
+                    defaultValue: 'Approving…',
+                  })
+                : t('deviceApproval.approve', { defaultValue: 'Approve' })}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+      <Outcome onRetry={approval.retry} status={status} />
+      {status === 'invalid' ||
+      status === 'expired' ||
+      status === 'notYours' ||
+      status === 'error' ? (
+        <div className='flex justify-center'>{enterAnother}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function CodeEntry({
+  className,
+  onSubmit,
+}: {
+  readonly className?: string | undefined;
+  readonly onSubmit: (userCode: string) => void;
+}): ReactElement {
+  const { t } = useTranslation();
+  const id = useId();
+  const [typed, setTyped] = useState('');
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    const code = typed.trim();
+    if (code) onSubmit(formatUserCode(code));
+  };
+  return (
+    <form className={cn('flex flex-col gap-6', className)} onSubmit={submit}>
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor={id}>
+            {t('deviceApproval.codeLabel', { defaultValue: 'Code' })}
+          </FieldLabel>
+          <Input
+            autoCapitalize='characters'
+            autoComplete='one-time-code'
+            autoFocus
+            className='font-mono tracking-widest uppercase'
+            id={id}
+            onChange={(event) => setTyped(event.target.value)}
+            placeholder='ABCD-EFGH'
+            spellCheck={false}
+            value={typed}
+          />
+        </Field>
+      </FieldGroup>
+      <p className='text-sm text-muted-foreground'>
+        {t('deviceApproval.enterCode', {
+          defaultValue: 'Enter the code your device shows.',
+        })}
+      </p>
+      <Button disabled={typed.trim() === ''} type='submit'>
+        {t('deviceApproval.continue', { defaultValue: 'Continue' })}
+      </Button>
+    </form>
+  );
+}
+
+function CodeDisplay({
+  clientId,
+  userCode,
+}: {
+  readonly clientId?: string | undefined;
+  readonly userCode: string;
+}): ReactElement {
+  const { t } = useTranslation();
+  return (
+    <div className='flex flex-col items-center gap-1 rounded-lg border bg-muted p-4 text-center'>
+      <span className='text-xs text-muted-foreground'>
+        {t('deviceApproval.codeLabel', { defaultValue: 'Code' })}
+      </span>
+      <span
+        className='font-mono text-2xl font-semibold tracking-widest'
+        data-user-code
+      >
+        {formatUserCode(userCode)}
+      </span>
+      {clientId ? (
+        <span className='text-sm text-muted-foreground'>
+          {t('deviceApproval.client', {
+            client: clientId,
+            defaultValue: 'Requested by {{client}}',
+          })}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function Outcome({
+  onRetry,
+  status,
+}: {
+  readonly onRetry: () => void;
+  readonly status: DeviceApprovalStatus;
+}): ReactElement | null {
+  const { t } = useTranslation();
+  const message = (
+    icon: ReactNode,
+    text: string,
+    tone: 'default' | 'destructive',
+    action?: ReactNode,
+  ) => (
+    <Alert role={tone === 'destructive' ? 'alert' : 'status'} variant={tone}>
+      {icon}
+      <AlertDescription>
+        {text}
+        {action}
+      </AlertDescription>
+    </Alert>
+  );
+  switch (status) {
+    case 'approved':
+      return message(
+        <CircleCheck aria-hidden='true' />,
+        t('deviceApproval.approved', {
+          defaultValue:
+            'Device approved. Return to your terminal to continue; you can close this page.',
+        }),
+        'default',
+      );
+    case 'denied':
+      return message(
+        <CircleX aria-hidden='true' />,
+        t('deviceApproval.denied', {
+          defaultValue:
+            'Request denied. The device was not signed in; you can close this page.',
+        }),
+        'default',
+      );
+    case 'expired':
+      return message(
+        <Clock aria-hidden='true' />,
+        t('deviceApproval.expired', {
+          defaultValue:
+            'This code has expired. Start the sign-in on your device again.',
+        }),
+        'destructive',
+      );
+    case 'invalid':
+      return message(
+        <CircleAlert aria-hidden='true' />,
+        t('deviceApproval.invalid', {
+          defaultValue:
+            'This code is not valid. Check it against your device and try again.',
+        }),
+        'destructive',
+      );
+    case 'notYours':
+      return message(
+        <CircleAlert aria-hidden='true' />,
+        t('deviceApproval.notYours', {
+          defaultValue:
+            'This code is already being approved by another account.',
+        }),
+        'destructive',
+      );
+    case 'error':
+      return message(
+        <CircleAlert aria-hidden='true' />,
+        t('deviceApproval.error', {
+          defaultValue: 'Something went wrong. Try again.',
+        }),
+        'destructive',
+        <Button
+          className='h-auto p-0'
+          onClick={onRetry}
+          type='button'
+          variant='link'
+        >
+          {t('deviceApproval.retry', { defaultValue: 'Try again' })}
+        </Button>,
+      );
+    default:
+      return null;
+  }
+}

package/client/extensions/nocobase-device-approval/locales/en-US.ts

@@ -0,0 +1,55 @@
+/** Every key the device approval looks up, so each locale is checked against the same list. */
+export interface DeviceApprovalLocale {
+  readonly 'deviceApproval.title': string;
+  readonly 'deviceApproval.description': string;
+  readonly 'deviceApproval.enterCode': string;
+  readonly 'deviceApproval.codeLabel': string;
+  readonly 'deviceApproval.continue': string;
+  readonly 'deviceApproval.checking': string;
+  readonly 'deviceApproval.confirm': string;
+  readonly 'deviceApproval.client': string;
+  readonly 'deviceApproval.approve': string;
+  readonly 'deviceApproval.approving': string;
+  readonly 'deviceApproval.deny': string;
+  readonly 'deviceApproval.denying': string;
+  readonly 'deviceApproval.approved': string;
+  readonly 'deviceApproval.denied': string;
+  readonly 'deviceApproval.expired': string;
+  readonly 'deviceApproval.invalid': string;
+  readonly 'deviceApproval.notYours': string;
+  readonly 'deviceApproval.error': string;
+  readonly 'deviceApproval.retry': string;
+  readonly 'deviceApproval.otherCode': string;
+}
+
+const enUS: DeviceApprovalLocale = {
+  'deviceApproval.title': 'Authorize a device',
+  'deviceApproval.description':
+    'A command line or another device asked to sign in as you. Approve it only if you started the sign-in yourself.',
+  'deviceApproval.enterCode': 'Enter the code your device shows.',
+  'deviceApproval.codeLabel': 'Code',
+  'deviceApproval.continue': 'Continue',
+  'deviceApproval.checking': 'Checking the code…',
+  'deviceApproval.confirm':
+    'Check that this code matches the one your device shows.',
+  'deviceApproval.client': 'Requested by {{client}}',
+  'deviceApproval.approve': 'Approve',
+  'deviceApproval.approving': 'Approving…',
+  'deviceApproval.deny': 'Deny',
+  'deviceApproval.denying': 'Denying…',
+  'deviceApproval.approved':
+    'Device approved. Return to your terminal to continue; you can close this page.',
+  'deviceApproval.denied':
+    'Request denied. The device was not signed in; you can close this page.',
+  'deviceApproval.expired':
+    'This code has expired. Start the sign-in on your device again.',
+  'deviceApproval.invalid':
+    'This code is not valid. Check it against your device and try again.',
+  'deviceApproval.notYours':
+    'This code is already being approved by another account.',
+  'deviceApproval.error': 'Something went wrong. Try again.',
+  'deviceApproval.retry': 'Try again',
+  'deviceApproval.otherCode': 'Enter another code',
+};
+
+export default enUS;

package/client/extensions/nocobase-device-approval/locales/zh-CN.ts

@@ -0,0 +1,27 @@
+import type { DeviceApprovalLocale } from './en-US.js';
+
+const zhCN: DeviceApprovalLocale = {
+  'deviceApproval.title': '授权设备',
+  'deviceApproval.description':
+    '一个命令行或其他设备请求以你的身份登录。只有在登录是你自己发起的时候才批准。',
+  'deviceApproval.enterCode': '输入设备上显示的代码。',
+  'deviceApproval.codeLabel': '代码',
+  'deviceApproval.continue': '继续',
+  'deviceApproval.checking': '正在检查代码…',
+  'deviceApproval.confirm': '确认此代码与设备上显示的一致。',
+  'deviceApproval.client': '由 {{client}} 发起',
+  'deviceApproval.approve': '批准',
+  'deviceApproval.approving': '正在批准…',
+  'deviceApproval.deny': '拒绝',
+  'deviceApproval.denying': '正在拒绝…',
+  'deviceApproval.approved': '设备已批准。回到终端继续操作，可以关闭此页面。',
+  'deviceApproval.denied': '已拒绝请求，设备没有登录。可以关闭此页面。',
+  'deviceApproval.expired': '此代码已过期。请在设备上重新发起登录。',
+  'deviceApproval.invalid': '此代码无效。请对照设备上的代码重试。',
+  'deviceApproval.notYours': '此代码已由另一个账号处理。',
+  'deviceApproval.error': '出了点问题，请重试。',
+  'deviceApproval.retry': '重试',
+  'deviceApproval.otherCode': '输入其他代码',
+};
+
+export default zhCN;