@atproto/oauth-provider-ui 0.0.2

package/src/components/forms/input-token.tsx

@@ -0,0 +1,94 @@
+import { useLingui } from '@lingui/react/macro'
+import { ChangeEvent, useState } from 'react'
+import { Override } from '../../lib/util.ts'
+import { TokenIcon } from '../utils/icons.tsx'
+import { InputText, InputTextProps } from './input-text.tsx'
+
+export type InputTokenProps = Override<
+  Omit<
+    InputTextProps,
+    | 'type'
+    | 'pattern'
+    | 'autoCapitalize'
+    | 'autoCorrect'
+    | 'autoComplete'
+    | 'spellCheck'
+    | 'minLength'
+    | 'maxLength'
+    | 'placeholder'
+    | 'dir'
+  >,
+  {
+    example?: string
+    onToken?: (code: string | null) => void
+  }
+>
+
+export const OTP_CODE_EXAMPLE = 'XXXXX-XXXXX'
+
+export function InputToken({
+  example = OTP_CODE_EXAMPLE,
+  onToken,
+
+  // InputTextProps
+  icon = <TokenIcon className="w-5" />,
+  title = example,
+  onChange,
+  value,
+  defaultValue = value,
+  ...props
+}: InputTokenProps) {
+  const { t } = useLingui()
+  const [token, setToken] = useState<string>(
+    typeof defaultValue === 'string' ? defaultValue : '',
+  )
+
+  return (
+    <InputText
+      {...props}
+      type="text"
+      autoCapitalize="none"
+      autoCorrect="off"
+      autoComplete="off"
+      spellCheck="false"
+      minLength={11}
+      maxLength={11}
+      dir="auto"
+      icon={icon}
+      pattern="^[A-Z2-7]{5}-[A-Z2-7]{5}$"
+      placeholder={t`Looks like ${example}`}
+      title={title}
+      value={token}
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        const { value, selectionEnd, selectionStart } = event.currentTarget
+
+        const fixedValue = fix(value)
+
+        event.currentTarget.value = fixedValue
+
+        // Move the cursor back where it was relative to the original value
+        const pos = selectionEnd ?? selectionStart
+        if (pos != null) {
+          const fixedSlicedValue = fix(value.slice(0, pos))
+          event.currentTarget.selectionStart =
+            event.currentTarget.selectionEnd = fixedSlicedValue.length
+        }
+
+        setToken(fixedValue)
+        onChange?.(event)
+
+        if (!event.isDefaultPrevented()) {
+          onToken?.(fixedValue.length === 11 ? fixedValue : null)
+        }
+      }}
+    />
+  )
+}
+
+function fix(value: string) {
+  const normalized = value.toUpperCase().replaceAll(/[^A-Z2-7]/g, '')
+
+  if (normalized.length <= 5) return normalized
+
+  return `${normalized.slice(0, 5)}-${normalized.slice(5, 10)}`
+}

package/src/components/forms/wizard-card.tsx

@@ -0,0 +1,116 @@
+import { Trans } from '@lingui/react/macro'
+import { JSX, ReactNode, useCallback } from 'react'
+import { DisabledStep, Step, useStepper } from '../../hooks/use-stepper.ts'
+import { clsx } from '../../lib/clsx.ts'
+import { Override } from '../../lib/util.ts'
+
+export type DoneFn = (...a: any) => unknown
+
+export type WizardRenderProps<TDone extends DoneFn> = {
+  /**
+   * Indicates wether the render function being invoked corresponds to the step
+   * currently active. The steps titles could, for example, be rendered in a
+   * list of links, where the current step is highlighted (based on `current`).
+   *
+   * Another use for this is to render the next/previous steps in order to
+   * provide animated transitions between steps. In this case, `current` would
+   * be used to disable any form interaction with the form transitioning in/out.
+   */
+  current: boolean
+  invalid: boolean
+
+  prev?: () => void
+  prevLabel: ReactNode
+
+  // On the last step, the "next()" function will actually be the done function
+  next: (() => void) | TDone
+  nextLabel: ReactNode
+}
+
+export type WizardRenderFn<TDone extends DoneFn> = (
+  data: WizardRenderProps<TDone>,
+) => ReactNode
+
+export type WizardStep<TDone extends DoneFn> = Step & {
+  titleRender?: WizardRenderFn<TDone>
+  contentRender: WizardRenderFn<TDone>
+}
+
+export type WizardCardProps<TDone extends DoneFn> = Override<
+  Omit<JSX.IntrinsicElements['div'], 'children'>,
+  {
+    prevLabel?: ReactNode
+    nextLabel?: ReactNode
+
+    onBack?: () => void
+    backLabel?: ReactNode
+
+    onDone: TDone
+    doneLabel?: ReactNode
+
+    steps: readonly (WizardStep<TDone> | DisabledStep)[]
+  }
+>
+
+export function WizardCard<TDone extends DoneFn>({
+  prevLabel,
+  nextLabel,
+
+  onBack,
+  backLabel,
+
+  onDone,
+  doneLabel,
+
+  steps,
+  className,
+
+  ...props
+}: WizardCardProps<TDone>) {
+  const {
+    atFirst,
+    atLast,
+    count,
+    current,
+    currentPosition,
+    completed,
+    toNext,
+    toPrev,
+    toRequired,
+  } = useStepper(steps)
+
+  // Memoized to avoid re-renders in child (rendered) components
+  const onNext = useCallback(() => {
+    // If already at last step, go to the first incomplete (required) step
+    if (!toNext()) toRequired()
+  }, [toNext, toRequired])
+
+  const data: WizardRenderProps<TDone> = {
+    // The current UI only displays the current title & content.
+    current: true,
+    invalid: current ? current.invalid : false,
+
+    prevLabel: (atFirst && backLabel) || prevLabel || <Trans>Back</Trans>,
+    prev: atFirst ? onBack : toPrev,
+
+    nextLabel: (atLast && doneLabel) || nextLabel || <Trans>Next</Trans>,
+    next: atLast && completed ? onDone : onNext,
+  }
+
+  const stepTitle = current?.titleRender?.(data)
+  const stepContent = current?.contentRender?.(data)
+
+  return (
+    <div className={clsx(className, 'flex flex-col')} {...props}>
+      <p className="text-slate-500 dark:text-slate-400">
+        <Trans>
+          Step {currentPosition} of {count}
+        </Trans>
+      </p>
+
+      {stepTitle && <h2 className="font-medium text-xl mb-4">{stepTitle}</h2>}
+
+      {stepContent}
+    </div>
+  )
+}

package/src/components/layouts/layout-title-page.tsx

@@ -0,0 +1,77 @@
+import { JSX, ReactNode } from 'react'
+import { clsx } from '../../lib/clsx.ts'
+import { Override } from '../../lib/util.ts'
+import { LocaleSelector } from '../../locales/locale-selector.tsx'
+
+export type LayoutTitlePageProps = Override<
+  JSX.IntrinsicElements['div'],
+  {
+    title?: string
+    subtitle?: ReactNode
+    children?: ReactNode
+  }
+>
+
+export function LayoutTitlePage({
+  children,
+  title,
+  subtitle,
+
+  // HTMLDivElement
+  className,
+  ...props
+}: LayoutTitlePageProps) {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        className,
+        'flex flex-col items-center',
+        'md:flex md:flex-row md:justify-stretch md:items-center',
+        'min-h-screen min-w-screen',
+        'bg-white text-slate-900',
+        'dark:bg-slate-900 dark:text-slate-100',
+      )}
+    >
+      {title && <title>{title}</title>}
+
+      <div
+        className={clsx(
+          'px-6 pt-4',
+          'w-full',
+          'md:max-w-lg',
+          'flex flex-row md:flex-col',
+          'md:self-stretch',
+          'md:w-1/2 md:max-w-fix md:p-4',
+          'md:text-right',
+          'md:dark:border-r md:dark:border-slate-700',
+          'md:bg-slate-100 md:dark:bg-slate-800',
+        )}
+      >
+        <div className="flex-grow grid content-center md:justify-items-end">
+          {title && (
+            <h1
+              key="title"
+              className="text-xl md:text-2xl lg:text-5xl md:my-4 font-semibold text-brand"
+            >
+              {title}
+            </h1>
+          )}
+
+          {subtitle && (
+            <p
+              key="subtitle"
+              className="hidden md:block max-w-xs text-slate-600 dark:text-slate-400"
+            >
+              {subtitle}
+            </p>
+          )}
+        </div>
+
+        <LocaleSelector key="localeSelector" className="m-1 md:m-2" />
+      </div>
+
+      <main className="w-full p-6 md:max-w-3xl md:px-12">{children}</main>
+    </div>
+  )
+}

package/src/components/layouts/layout-welcome.tsx

@@ -0,0 +1,73 @@
+import { JSX } from 'react'
+import type { CustomizationData } from '@atproto/oauth-provider-api'
+import { clsx } from '../../lib/clsx.ts'
+import { Override } from '../../lib/util.ts'
+import { LocaleSelector } from '../../locales/locale-selector.tsx'
+import { LinkAnchor } from '../utils/link-anchor.tsx'
+
+export type LayoutWelcomeProps = Override<
+  JSX.IntrinsicElements['div'],
+  {
+    customizationData: CustomizationData | undefined
+    title?: string
+  }
+>
+
+export function LayoutWelcome({
+  customizationData: { logo, name, links } = {},
+  title = name,
+
+  // div
+  className,
+  children,
+  ...props
+}: LayoutWelcomeProps) {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        'min-h-screen w-full',
+        'flex items-center justify-center flex-col',
+        'bg-white text-slate-900',
+        'dark:bg-slate-900 dark:text-slate-100',
+        className,
+      )}
+    >
+      {title && <title>{title}</title>}
+
+      <main className="w-full overflow-hidden flex-grow flex flex-col items-center justify-center p-6">
+        {logo && (
+          <img
+            src={logo}
+            alt={name || `Logo`}
+            aria-hidden
+            className="w-16 h-16 md:w-24 md:h-24 mb-4 md:mb-8"
+          />
+        )}
+
+        {name && (
+          <h1 className="text-2xl md:text-4xl mb-4 md:mb-8 mx-4 text-center font-bold">
+            {name}
+          </h1>
+        )}
+
+        {children}
+      </main>
+
+      <nav className="w-full overflow-hidden border-t border-t-slate-200 dark:border-t-slate-700 flex flex-wrap justify-center content-center">
+        {links?.map((link, i) => (
+          <LinkAnchor
+            key={i}
+            link={link}
+            className="m-2 md:m-4 text-xs md:text-sm text-brand hover:underline"
+          />
+        ))}
+
+        <LocaleSelector
+          className="m-1 md:m-2 text-xs md:text-sm"
+          key="localeSelector"
+        />
+      </nav>
+    </div>
+  )
+}

package/src/components/utils/account-identifier.tsx

@@ -0,0 +1,23 @@
+import { JSX } from 'react'
+import type { Account } from '@atproto/oauth-provider-api'
+import { Override } from '../../lib/util.ts'
+
+export type AccountIdentifierProps = Override<
+  Omit<JSX.IntrinsicElements['b'], 'children'>,
+  {
+    account: Account
+  }
+>
+
+export function AccountIdentifier({
+  account,
+
+  // b
+  ...props
+}: AccountIdentifierProps) {
+  return (
+    <b {...props}>
+      {account.preferred_username || account.email || account.sub}
+    </b>
+  )
+}

package/src/components/utils/account-image.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+import { AccountIcon } from './icons.tsx'
+
+export type AccountIconProps = {
+  src?: string
+  alt: string
+}
+
+export function AccountImage({ src, alt }: AccountIconProps) {
+  const [errored, setErrored] = useState(false)
+
+  useEffect(() => {
+    setErrored(false)
+  }, [src])
+
+  return src && !errored ? (
+    <img
+      aria-hidden
+      crossOrigin="anonymous"
+      src={src}
+      alt={alt}
+      className="-ml-1 w-6 h-6 rounded-full"
+      onError={() => setErrored(true)}
+    />
+  ) : (
+    <div
+      aria-hidden
+      className="h-6 w-6 text-white bg-brand rounded-full border-solid border-2 border-brand overflow-hidden"
+    >
+      <AccountIcon className="-mx-1 -mb-1" />
+    </div>
+  )
+}

package/src/components/utils/admonition.tsx

@@ -0,0 +1,52 @@
+import { JSX, memo } from 'react'
+import { clsx } from '../../lib/clsx.ts'
+import { Override } from '../../lib/util.ts'
+import { AlertIcon, EyeIcon } from './icons.tsx'
+
+export type AdmonitionProps = Override<
+  JSX.IntrinsicElements['div'],
+  {
+    role: 'alert' | 'status' | 'info'
+  }
+>
+
+export const Admonition = memo(function Admonition({
+  role = 'alert',
+  children,
+  className,
+  ...props
+}: AdmonitionProps) {
+  return (
+    <div
+      {...props}
+      role={role}
+      className={clsx(
+        'flex flex-row',
+        'gap-2',
+        'p-3',
+        'rounded-lg',
+        'border',
+        'border-gray-300 dark:border-gray-700',
+        role === 'alert' && 'bg-error text-error-c',
+        className,
+      )}
+    >
+      {role === 'info' ? (
+        <EyeIcon
+          aria-hidden
+          className={clsx('fill-current h-6 w-6', 'text-brand')}
+        />
+      ) : (
+        <AlertIcon
+          aria-hidden
+          className={clsx(
+            'fill-current h-6 w-6',
+            role === 'alert' ? 'text-inherit' : 'text-brand',
+          )}
+        />
+      )}
+
+      <div className="flex flex-1 flex-col">{children}</div>
+    </div>
+  )
+})

package/src/components/utils/client-name.tsx

@@ -0,0 +1,45 @@
+import { Trans } from '@lingui/react/macro'
+import { JSX } from 'react'
+import type { OAuthClientMetadata } from '@atproto/oauth-types'
+import { Override } from '../../lib/util.ts'
+import { UrlViewer } from './url-viewer.tsx'
+
+export type ClientNameProps = Override<
+  Omit<JSX.IntrinsicElements['span'], 'children'>,
+  {
+    clientId: string
+    clientMetadata: OAuthClientMetadata
+    clientTrusted: boolean
+  }
+>
+
+export function ClientName({
+  clientId,
+  clientMetadata,
+  clientTrusted,
+
+  // span
+  ...attrs
+}: ClientNameProps) {
+  if (clientTrusted && clientMetadata.client_name) {
+    return <span {...attrs}>{clientMetadata.client_name}</span>
+  }
+
+  // @NOTE: not using isOAuthClientIdLoopback & isOAuthClientIdDiscoverable from
+  // @atproto/oauth-types here because 1) we don't need to validate here and 2)
+  // we prefer not to import un-necessary code to improve bundle size.
+
+  if (clientId.startsWith('http://')) {
+    return (
+      <span {...attrs}>
+        <Trans>An application on your device</Trans>
+      </span>
+    )
+  }
+
+  if (clientId.startsWith('https://')) {
+    return <UrlViewer {...attrs} url={clientId} path />
+  }
+
+  return <span {...attrs}>{clientId}</span>
+}

package/src/components/utils/error-card.tsx

@@ -0,0 +1,93 @@
+import { Trans } from '@lingui/react/macro'
+import { memo, useEffect, useMemo, useState } from 'react'
+import { useRandomString } from '../../hooks/use-random-string.ts'
+import { Api } from '../../lib/api.ts'
+import { JsonErrorResponse } from '../../lib/json-client.ts'
+import { Override } from '../../lib/util.ts'
+import { Admonition, AdmonitionProps } from './admonition.tsx'
+import { ErrorMessage } from './error-message.tsx'
+
+export type ErrorCardProps = Override<
+  Omit<AdmonitionProps, 'role'>,
+  {
+    error: unknown
+  }
+>
+export const ErrorCard = memo(function ErrorCard({
+  error,
+
+  // Admonition
+  children,
+  onClick,
+  onKeyDown,
+  ...props
+}: ErrorCardProps) {
+  const [inputCount, setInputCount] = useState(0)
+  // Every 5th input will toggle showing the details
+  const showDetails = ((inputCount / 5) | 0) % 2 === 1
+
+  const detailsDivId = useRandomString('error-card-')
+
+  const parsedError = useMemo(
+    () =>
+      error instanceof JsonErrorResponse
+        ? // Already parsed:
+          error
+        : // If "error" is a json object, try parsing it as a JsonErrorResponse:
+          Api.parseError(error) ?? error,
+    [error],
+  )
+
+  useEffect(() => {
+    // For debugging purposes
+    console.warn('Displayed error details:', parsedError)
+
+    // Reset the input count when the error changes
+    setInputCount(0)
+  }, [parsedError])
+
+  return (
+    <Admonition
+      role="alert"
+      aria-controls={detailsDivId}
+      tabIndex={0}
+      onKeyDown={(event) => {
+        onKeyDown?.(event)
+        if (!event.defaultPrevented) {
+          setInputCount((c) => c + 1)
+        }
+      }}
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) {
+          setInputCount((c) => c + 1)
+        }
+      }}
+      {...props}
+    >
+      <ErrorMessage error={parsedError} />
+
+      {children && <div className="mt-2">{children}</div>}
+
+      <div hidden={!showDetails} id={detailsDivId} aria-hidden={!showDetails}>
+        {parsedError instanceof JsonErrorResponse ? (
+          <dl className="mt-2 grid grid-cols-[auto,1fr] gap-x-2 text-sm">
+            <dt className="font-semibold">
+              <Trans>Code</Trans>
+            </dt>
+            <dd>
+              <code>{parsedError.error}</code>
+            </dd>
+
+            <dt className="font-semibold">
+              <Trans>Description</Trans>
+            </dt>
+            <dd>{parsedError.description}</dd>
+          </dl>
+        ) : (
+          <pre className="text-xs">{JSON.stringify(parsedError, null, 2)}</pre>
+        )}
+      </div>
+    </Admonition>
+  )
+})

package/src/components/utils/error-message.tsx

@@ -0,0 +1,88 @@
+import { Trans } from '@lingui/react/macro'
+import { ReactNode, memo } from 'react'
+import {
+  AccessDeniedError,
+  EmailTakenError,
+  HandleUnavailableError,
+  InvalidCredentialsError,
+  InvalidInviteCodeError,
+  InvalidRequestError,
+  RequestExpiredError,
+  SecondAuthenticationFactorRequiredError,
+  UnknownRequestUriError,
+} from '../../lib/api.ts'
+import { JsonErrorResponse } from '../../lib/json-client.ts'
+
+export type ApiErrorMessageProps = {
+  error: unknown
+}
+
+export const ErrorMessage = memo(function ErrorMessage({
+  error,
+}: ApiErrorMessageProps): ReactNode {
+  // Matches the order of the error checks in the API's parseError method (must
+  // be from most specific to least specific to avoid unreachable code paths).
+
+  if (error instanceof SecondAuthenticationFactorRequiredError) {
+    return <Trans>A second authentication factor is required</Trans>
+  }
+
+  if (error instanceof InvalidCredentialsError) {
+    return <Trans>Wrong identifier or password</Trans>
+  }
+
+  if (error instanceof InvalidInviteCodeError) {
+    return <Trans>The invite code is not valid</Trans>
+  }
+
+  if (error instanceof HandleUnavailableError) {
+    switch (error.reason) {
+      case 'syntax':
+        return <Trans>The handle is invalid</Trans>
+      case 'domain':
+        return <Trans>The domain name is not allowed</Trans>
+      case 'slur':
+        return <Trans>The handle contains inappropriate language</Trans>
+      case 'taken':
+        if (error.description === 'Reserved handle') {
+          return <Trans>This handle is reserved</Trans>
+        }
+        return <Trans>The handle is already in use</Trans>
+      default:
+        return <Trans>That handle cannot be used</Trans>
+    }
+  }
+
+  if (error instanceof EmailTakenError) {
+    return <Trans>This email is already used</Trans>
+  }
+
+  if (
+    error instanceof UnknownRequestUriError ||
+    error instanceof RequestExpiredError
+  ) {
+    return <Trans>This sign-in session has expired</Trans>
+  }
+
+  if (error instanceof InvalidRequestError) {
+    return (
+      <Trans>
+        The data you submitted is invalid. Please check the form and try again.
+      </Trans>
+    )
+  }
+
+  if (error instanceof AccessDeniedError) {
+    return (
+      <Trans>
+        This authorization request has been denied. Please try again.
+      </Trans>
+    )
+  }
+
+  if (error instanceof JsonErrorResponse) {
+    return <Trans>Unexpected server response</Trans>
+  }
+
+  return <Trans>An unknown error occurred</Trans>
+})