@atproto/oauth-provider-ui 0.0.2 → 0.1.1

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

@@ -1,287 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,31 +0,0 @@
-/** @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

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

package/tsconfig.frontend.json

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