@atproto/oauth-provider-ui 0.0.2

package/src/views/authorize/sign-up/sign-up-handle-form.tsx

@@ -0,0 +1,287 @@
+import { Trans, useLingui } from '@lingui/react/macro'
+import { JSX, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  AsyncActionController,
+  FormCardAsync,
+  FormCardAsyncProps,
+} from '../../../components/forms/form-card-async.tsx'
+import { InputText } from '../../../components/forms/input-text.tsx'
+import { Admonition } from '../../../components/utils/admonition.tsx'
+import {
+  AtSymbolIcon,
+  CheckMarkIcon,
+  XMarkIcon,
+} from '../../../components/utils/icons.tsx'
+import { clsx } from '../../../lib/clsx.ts'
+import { mergeRefs } from '../../../lib/ref.ts'
+import { Override } from '../../../lib/util.ts'
+
+/**
+ * Spec limit is 63, but in practice, we've limited it to 18 in our implementations.
+ *
+ * @see {@link https://atproto.com/specs/handle | ATProto Handle Spec}
+ */
+const MAX_LENGTH = 18
+
+/**
+ * Spec limit is 1, but in practice, we've targeted at least 3 characters in handles.
+ *
+ * @see {@link https://atproto.com/specs/handle | ATProto Handle Spec}
+ */
+const MIN_LENGTH = 3
+
+/**
+ * Spec limit is 253, but in practice, we've targeted 30 characters in handles.
+ *
+ * @see {@link https://atproto.com/specs/handle | ATProto Handle Spec}
+ */
+const MAX_FULL_LENGTH = 30
+
+type ValidDomain = `.${string}`
+const isValidDomain = (domain: string): domain is ValidDomain =>
+  // Ignore domains that are so long that they would make the handle smaller
+  // than MIN_LENGTH characters
+  MIN_LENGTH + domain.length <= MAX_FULL_LENGTH &&
+  // Basic validation here
+  domain.startsWith('.') &&
+  !domain.endsWith('.')
+
+function useSegmentValidator(domain: ValidDomain) {
+  const minLen = MIN_LENGTH
+  const maxLen = Math.min(MAX_LENGTH, MAX_FULL_LENGTH - domain.length)
+
+  const validateSegment = useCallback(
+    (segment: string) => {
+      const validLength = segment.length >= minLen && segment.length <= maxLen
+      const validCharset = /^[a-z0-9][a-z0-9-]+[a-z0-9]$/g.test(segment)
+
+      return { validLength, validCharset, valid: validLength && validCharset }
+    },
+    [maxLen, minLen],
+  )
+
+  return {
+    minLength: minLen,
+    maxLength: maxLen,
+    validateSegment,
+  }
+}
+
+export type SignUpHandleFormProps = Override<
+  Omit<
+    FormCardAsyncProps,
+    'append' | 'onCancel' | 'cancelLabel' | 'onSubmit' | 'submitLabel'
+  >,
+  {
+    domains: string[]
+
+    onNext: (signal: AbortSignal) => void | PromiseLike<void>
+    nextLabel?: ReactNode
+
+    onPrev?: () => void
+    prevLabel?: ReactNode
+
+    handle?: string
+    onHandle?: (handle: string | undefined) => void
+  }
+>
+
+export function SignUpHandleForm({
+  domains: availableDomains,
+
+  onNext,
+  nextLabel,
+
+  onPrev,
+  prevLabel,
+
+  handle: handleInit,
+  onHandle,
+
+  // FormCardProps
+  invalid,
+  children,
+  ref,
+  ...props
+}: SignUpHandleFormProps) {
+  const { t } = useLingui()
+  const domains = availableDomains.filter(isValidDomain)
+
+  const formRef = useRef<AsyncActionController>(null)
+
+  const [domainIdx, setDomainIdx] = useState(() => {
+    const idx = domains.findIndex((d) => handleInit?.endsWith(d))
+    return idx === -1 ? 0 : idx
+  })
+  const [segment, setSegment] = useState(() => handleInit?.split('.')[0] || '')
+
+  // Automatically update the domain index when the list length changes
+  useEffect(() => {
+    setDomainIdx((v) => Math.min(v, domains.length - 1))
+  }, [domains.length])
+
+  const domain: ValidDomain | null = domains[domainIdx] || domains[0] || null
+
+  const { minLength, maxLength, validateSegment } = useSegmentValidator(domain)
+
+  const validity = validateSegment(segment)
+  const handle = domain && validity.valid ? `${segment}${domain}` : undefined
+  useEffect(() => {
+    // Whenever the user changes the handle, abort any pending form action
+    formRef.current?.reset()
+    onHandle?.(handle)
+  }, [onHandle, handle])
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const preview = `@${segment}${domain}`
+
+  return (
+    <FormCardAsync
+      {...props}
+      ref={mergeRefs([ref, formRef])}
+      onCancel={onPrev}
+      cancelLabel={prevLabel}
+      onSubmit={onNext}
+      submitLabel={nextLabel}
+      invalid={invalid || !handle}
+      append={children}
+    >
+      <div>
+        <ValidationMessage hasValue={!!segment} valid={validity.validLength}>
+          <Trans>
+            Between {minLength} and {maxLength} characters
+          </Trans>
+        </ValidationMessage>
+        <ValidationMessage hasValue={!!segment} valid={validity.validCharset}>
+          <Trans>Only letters, numbers, and hyphens</Trans>
+        </ValidationMessage>
+      </div>
+
+      <InputText
+        ref={inputRef}
+        icon={<AtSymbolIcon className="w-5" />}
+        name="handle"
+        type="text"
+        title={t`Type your desired username`}
+        pattern="[a-z0-9][a-z0-9\-]+[a-z0-9]"
+        minLength={minLength}
+        maxLength={maxLength}
+        autoCapitalize="none"
+        autoCorrect="off"
+        autoComplete="off"
+        dir="auto"
+        enterKeyHint="done"
+        autoFocus
+        required
+        value={segment}
+        onChange={(event) => {
+          const segment = event.target.value.toLowerCase()
+
+          // Ensure the input is always lowercase
+          const selectionStart = event.target.selectionStart
+          const selectionEnd = event.target.selectionEnd
+          event.target.value = segment
+          event.target.setSelectionRange(selectionStart, selectionEnd)
+
+          setSegment(segment)
+        }}
+        append={
+          // @TODO refactor this to a separate component
+          domains.length > 1 && (
+            <select
+              onClick={(event) => event.stopPropagation()}
+              onMouseDown={(event) => event.stopPropagation()}
+              value={domainIdx}
+              aria-label={t`Select domain`}
+              onChange={(event) => {
+                setDomainIdx(Number(event.target.value))
+                inputRef.current?.focus()
+              }}
+              className={clsx(
+                'block w-full',
+                'text-sm',
+                'rounded-lg p-2',
+                'bg-white dark:bg-slate-600',
+              )}
+            >
+              {domains.map((domain, idx) => (
+                <option key={domain} value={idx}>
+                  {domain}
+                </option>
+              ))}
+            </select>
+          )
+        }
+        bellow={
+          <Trans>
+            Your full username will be:{' '}
+            {segment.length ? (
+              <strong className="text-gray-800 dark:text-gray-200">
+                {preview}
+              </strong>
+            ) : (
+              <span
+                aria-hidden
+                className="bg-gray-300 dark:bg-slate-600 rounded-md p-2 w-24"
+              />
+            )}
+          </Trans>
+        }
+      />
+
+      <Admonition role="status">
+        <p className="text-md">
+          <Trans>
+            You can change this username to any domain name you control after
+            your account is set up.
+          </Trans>
+        </p>
+      </Admonition>
+    </FormCardAsync>
+  )
+}
+
+type ValidationMessageProps = JSX.IntrinsicElements['div'] & {
+  valid: boolean
+  hasValue: boolean
+}
+
+function ValidationMessage({
+  valid,
+  hasValue,
+
+  // div
+  children,
+  className,
+  ...props
+}: ValidationMessageProps) {
+  const { t } = useLingui()
+  return (
+    <div
+      {...props}
+      className={clsx('flex flex-row items-center gap-2', className)}
+    >
+      {hasValue ? (
+        <>
+          {valid ? (
+            <CheckMarkIcon
+              className="inline-block w-4 h-4 text-success"
+              title={t`Valid`}
+            />
+          ) : (
+            <XMarkIcon
+              className="inline-block w-4 h-4 text-error"
+              title={t`Invalid`}
+            />
+          )}
+        </>
+      ) : (
+        <div aria-hidden className="w-4 h-4 flex items-center justify-center">
+          <div className="bg-gray-300 dark:bg-slate-600 rounded-full w-2 h-2" />
+        </div>
+      )}
+      <div className="text-sm">{children}</div>
+    </div>
+  )
+}

package/src/views/authorize/sign-up/sign-up-hcaptcha-form.tsx

@@ -0,0 +1,108 @@
+import type HCaptcha from '@hcaptcha/react-hcaptcha'
+import {
+  ForwardedRef,
+  ReactNode,
+  lazy,
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import {
+  FormCardAsync,
+  FormCardAsyncProps,
+} from '../../../components/forms/form-card-async.tsx'
+import { useBrowserColorScheme } from '../../../hooks/use-browser-color-scheme.ts'
+import { mergeRefs } from '../../../lib/ref.ts'
+import { Override } from '../../../lib/util.ts'
+
+export type SignUpHcaptchaFormProps = Override<
+  Omit<
+    FormCardAsyncProps,
+    'append' | 'onSubmit' | 'submitLabel' | 'onCancel' | 'cancelLabel'
+  >,
+  {
+    siteKey: string
+
+    token?: string
+    onToken: (token: string, ekey: string) => void
+
+    prevLabel?: ReactNode
+    onPrev?: () => void
+
+    nextLabel?: ReactNode
+    onNext: (signal: AbortSignal) => void | PromiseLike<void>
+
+    ref?: ForwardedRef<HCaptcha>
+  }
+>
+
+const HCaptchaLazy = lazy(() => import('@hcaptcha/react-hcaptcha'))
+
+export function SignUpHcaptchaForm({
+  siteKey,
+
+  token: tokenInit,
+  onToken,
+
+  prevLabel,
+  onPrev,
+
+  nextLabel,
+  onNext,
+
+  ref,
+
+  // FormCardProps
+  invalid,
+  children,
+  ...props
+}: SignUpHcaptchaFormProps) {
+  const captchaRef = useRef<HCaptcha>(null)
+  const theme = useBrowserColorScheme()
+  const [token, setToken] = useState<string | undefined>(tokenInit)
+
+  const onLoad = useCallback(() => {
+    // this reaches out to the hCaptcha JS API and runs the
+    // execute function on it. you can use other functions as
+    // documented here:
+    // https://docs.hcaptcha.com/configuration#jsapi
+    captchaRef.current?.execute()
+  }, [])
+
+  const onVerify = useCallback(
+    (token: string, ekey: string) => {
+      setToken(token)
+      onToken(token, ekey)
+    },
+    [onToken],
+  )
+
+  const doSubmit = useCallback(
+    (signal: AbortSignal) => {
+      if (token) return onNext(signal)
+      else if (captchaRef.current) captchaRef.current.execute()
+      else throw new Error('Unable to load hCaptcha')
+    },
+    [token, onNext],
+  )
+
+  return (
+    <FormCardAsync
+      {...props}
+      cancelLabel={prevLabel}
+      onCancel={onPrev}
+      submitLabel={nextLabel}
+      onSubmit={doSubmit}
+      append={children}
+      invalid={invalid || !token}
+    >
+      <HCaptchaLazy
+        theme={theme}
+        sitekey={siteKey}
+        onLoad={onLoad}
+        onVerify={onVerify}
+        ref={mergeRefs([ref, captchaRef])}
+      />
+    </FormCardAsync>
+  )
+}

package/src/views/authorize/sign-up/sign-up-view.tsx

@@ -0,0 +1,158 @@
+import { Trans, useLingui } from '@lingui/react/macro'
+import { useCallback, useState } from 'react'
+import type { CustomizationData } from '@atproto/oauth-provider-api'
+import { WizardCard } from '../../../components/forms/wizard-card.tsx'
+import {
+  LayoutTitlePage,
+  LayoutTitlePageProps,
+} from '../../../components/layouts/layout-title-page.tsx'
+import { HelpCard } from '../../../components/utils/help-card.tsx'
+import { Override } from '../../../lib/util.ts'
+import {
+  SignUpAccountForm,
+  SignUpAccountFormOutput,
+} from './sign-up-account-form.tsx'
+import { SignUpDisclaimer } from './sign-up-disclaimer.tsx'
+import { SignUpHandleForm } from './sign-up-handle-form.tsx'
+import { SignUpHcaptchaForm } from './sign-up-hcaptcha-form.tsx'
+
+export type SignUpViewProps = Override<
+  LayoutTitlePageProps,
+  {
+    customizationData?: CustomizationData
+
+    onBack?: () => void
+    onValidateNewHandle: (
+      data: { handle: string },
+      signal?: AbortSignal,
+    ) => void | PromiseLike<void>
+    onDone: (
+      data: SignUpAccountFormOutput & {
+        handle: string
+        hcaptchaToken?: string
+      },
+      signal?: AbortSignal,
+    ) => void | PromiseLike<void>
+  }
+>
+
+export function SignUpView({
+  customizationData: {
+    availableUserDomains = [],
+    hcaptchaSiteKey = undefined,
+    inviteCodeRequired = true,
+    links,
+  } = {},
+
+  onValidateNewHandle,
+  onDone,
+  onBack,
+
+  // LayoutTitlePage
+  ...props
+}: SignUpViewProps) {
+  const { t } = useLingui()
+  const [credentials, setCredentials] = useState<
+    undefined | SignUpAccountFormOutput
+  >(undefined)
+  const [handle, setHandle] = useState<undefined | string>(undefined)
+  const [hcaptcha, setHcaptcha] = useState<undefined | string>(undefined)
+
+  /**
+   * "false" indicates that the hcaptcha token is invalid (required but not provided)
+   */
+  const hcaptchaToken = hcaptchaSiteKey == null ? undefined : hcaptcha || false
+
+  const doDone = useCallback(
+    (signal: AbortSignal) => {
+      if (credentials && handle && hcaptchaToken !== false) {
+        return onDone({ ...credentials, handle, hcaptchaToken }, signal)
+      }
+    },
+    [credentials, handle, hcaptchaToken, onDone],
+  )
+
+  return (
+    <LayoutTitlePage
+      {...props}
+      title={props.title ?? t`Create Account`}
+      subtitle={
+        props.subtitle ?? <Trans>We're so excited to have you join us!</Trans>
+      }
+    >
+      <WizardCard
+        doneLabel={<Trans>Sign up</Trans>}
+        onBack={onBack}
+        onDone={doDone}
+        steps={[
+          // We use the handle input first since the "onValidateNewHandle" check
+          // will make it less likely that the actual signup call will fail, and
+          // will result in a better user experience, especially if there is an
+          // issue with the email address (e.g. already in use).
+          {
+            invalid: !handle,
+            titleRender: () => <Trans>Choose a username</Trans>,
+            contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
+              <SignUpHandleForm
+                className="flex-grow"
+                invalid={invalid}
+                domains={availableUserDomains}
+                handle={handle}
+                onHandle={setHandle}
+                prevLabel={prevLabel}
+                onPrev={prev}
+                nextLabel={nextLabel}
+                onNext={async (signal) => {
+                  if (handle) await onValidateNewHandle({ handle }, signal)
+                  if (!signal.aborted) return next(signal)
+                }}
+              >
+                <SignUpDisclaimer links={links} />
+              </SignUpHandleForm>
+            ),
+          },
+          {
+            invalid: !credentials,
+            titleRender: () => <Trans>Your account</Trans>,
+            contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
+              <SignUpAccountForm
+                className="flex-grow"
+                invalid={invalid}
+                prevLabel={prevLabel}
+                onPrev={prev}
+                nextLabel={nextLabel}
+                onNext={next}
+                inviteCodeRequired={inviteCodeRequired}
+                credentials={credentials}
+                onCredentials={setCredentials}
+              >
+                <SignUpDisclaimer links={links} />
+              </SignUpAccountForm>
+            ),
+          },
+          hcaptchaSiteKey != null && {
+            invalid: hcaptchaToken === false,
+            titleRender: () => <Trans>Verify you are human</Trans>,
+            contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
+              <SignUpHcaptchaForm
+                className="flex-grow"
+                invalid={invalid}
+                siteKey={hcaptchaSiteKey}
+                token={hcaptcha}
+                onToken={setHcaptcha}
+                prevLabel={prevLabel}
+                onPrev={prev}
+                nextLabel={nextLabel}
+                onNext={next}
+              >
+                <SignUpDisclaimer links={links} />
+              </SignUpHcaptchaForm>
+            ),
+          },
+        ]}
+      />
+
+      <HelpCard className="mt-4" links={links} />
+    </LayoutTitlePage>
+  )
+}

package/src/views/authorize/welcome/welcome-view.tsx

@@ -0,0 +1,56 @@
+import { Trans, useLingui } from '@lingui/react/macro'
+import { Button } from '../../../components/forms/button.tsx'
+import {
+  LayoutWelcome,
+  LayoutWelcomeProps,
+} from '../../../components/layouts/layout-welcome.tsx'
+import { Override } from '../../../lib/util.ts'
+
+export type WelcomeViewParams = Override<
+  LayoutWelcomeProps,
+  {
+    onSignIn?: () => void
+    onSignUp?: () => void
+    onCancel?: () => void
+  }
+>
+
+export function WelcomeView({
+  onSignUp,
+  onSignIn,
+  onCancel,
+
+  // LayoutWelcome
+  ...props
+}: WelcomeViewParams) {
+  const { t } = useLingui()
+  return (
+    <LayoutWelcome {...props} title={props.title ?? t`Authenticate`}>
+      {onSignUp && (
+        <Button
+          className={'m-1 w-60 max-w-full min-w-min'}
+          color={onSignIn ? 'brand' : undefined}
+          onClick={onSignUp}
+        >
+          <Trans>Create a new account</Trans>
+        </Button>
+      )}
+
+      {onSignIn && (
+        <Button
+          className={'m-1 w-60 max-w-full min-w-min'}
+          color={onSignUp ? undefined : 'brand'}
+          onClick={onSignIn}
+        >
+          <Trans>Sign in</Trans>
+        </Button>
+      )}
+
+      {onCancel && (
+        <Button className="m-1 w-60 max-w-full min-w-min" onClick={onCancel}>
+          <Trans>Cancel</Trans>
+        </Button>
+      )}
+    </LayoutWelcome>
+  )
+}

package/src/views/error/error-view.tsx

@@ -0,0 +1,31 @@
+import { useLingui } from '@lingui/react/macro'
+import { memo } from 'react'
+import {
+  LayoutWelcome,
+  LayoutWelcomeProps,
+} from '../../components/layouts/layout-welcome.tsx'
+import { ErrorCard } from '../../components/utils/error-card.tsx'
+import { Override } from '../../lib/util.ts'
+
+export type ErrorViewProps = Override<
+  LayoutWelcomeProps,
+  {
+    error: unknown
+  }
+>
+
+export const ErrorView = memo(function ErrorView({
+  error,
+
+  // LayoutWelcome
+  title,
+  ...props
+}: ErrorViewProps) {
+  const { t } = useLingui()
+
+  return (
+    <LayoutWelcome {...props} title={title ?? t`Error`}>
+      <ErrorCard error={error} />
+    </LayoutWelcome>
+  )
+})

package/tailwind.config.js

@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    fontFamily: {
+      sans: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        'Helvetica',
+        'Arial',
+        'sans-serif',
+      ],
+      mono: ['Monaco', 'mono'],
+    },
+    extend: {
+      colors: {
+        brand: 'rgb(var(--color-brand) / <alpha-value>)',
+        'brand-c': 'rgb(var(--color-brand-c) / <alpha-value>)',
+        error: 'rgb(var(--color-error) / <alpha-value>)',
+        'error-c': 'rgb(var(--color-error-c) / <alpha-value>)',
+        warning: 'rgb(var(--color-warning) / <alpha-value>)',
+        'warning-c': 'rgb(var(--color-warning-c) / <alpha-value>)',
+        success: 'rgb(var(--color-success) / <alpha-value>)',
+        'success-c': 'rgb(var(--color-success-c) / <alpha-value>)',
+      },
+    },
+  },
+  plugins: [],
+}

package/tsconfig.backend.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["../../../tsconfig/nodenext.json"],
+  "compilerOptions": {
+    "outDir": "dist/lib",
+    "rootDir": "lib"
+  },
+  "include": ["lib/**/*.ts"]
+}

package/tsconfig.frontend.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "../../../tsconfig/browser.json",
+    "../../../tsconfig/bundler.json"
+  ],
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}