@atproto/oauth-provider 0.3.1 → 0.5.0

package/src/assets/app/components/sign-in-form.tsx

@@ -1,337 +0,0 @@
-import { ReactNode, SyntheticEvent, useCallback, useState } from 'react'
-
-import {
-  InvalidCredentialsError,
-  SecondAuthenticationFactorRequiredError,
-} from '../lib/api'
-import { clsx } from '../lib/clsx'
-import { Override } from '../lib/util'
-import { Button } from './button'
-import { FormCard, FormCardProps } from './form-card'
-import { AtSymbolIcon } from './icons/at-symbol-icon'
-import { LockIcon } from './icons/lock-icon'
-import { InfoCard } from './info-card'
-import { InputCheckbox } from './input-checkbox'
-import { InputText } from './input-text'
-import { TokenIcon } from './icons/token-icon'
-import { Fieldset } from './fieldset'
-
-export type SignInFormOutput = {
-  username: string
-  password: string
-  remember?: boolean
-}
-
-export type SignInFormProps = Override<
-  FormCardProps,
-  {
-    onSubmit: (credentials: SignInFormOutput) => void | PromiseLike<void>
-    submitLabel?: ReactNode
-    submitAria?: string
-
-    onCancel?: () => void
-    cancelLabel?: ReactNode
-    cancelAria?: string
-
-    accountSection?: ReactNode
-    sessionSection?: ReactNode
-    secondFactorSection?: ReactNode
-
-    usernameDefault?: string
-    usernameReadonly?: boolean
-    usernameLabel?: string
-    usernamePlaceholder?: string
-    usernameAria?: string
-    usernamePattern?: string
-    usernameFormat?: string
-
-    passwordLabel?: string
-    passwordPlaceholder?: string
-    passwordWarning?: ReactNode
-    passwordAria?: string
-    passwordPattern?: string
-    passwordFormat?: string
-
-    secondFactorLabel?: string
-    secondFactorPlaceholder?: string
-    secondFactorAria?: string
-    secondFactorPattern?: string
-    secondFactorFormat?: string
-    secondFactorHint?: string
-    secondFactorParseValue?: (value: string) => string | false
-
-    rememberVisible?: boolean
-    rememberDefault?: boolean
-    rememberLabel?: string
-    rememberAria?: string
-  }
->
-
-export function SignInForm({
-  onSubmit,
-  submitAria = 'Next',
-  submitLabel = submitAria,
-
-  onCancel = undefined,
-  cancelAria = 'Cancel',
-  cancelLabel = cancelAria,
-
-  accountSection = 'Account',
-  sessionSection = 'Session',
-  secondFactorSection = '2FA Confirmation',
-
-  usernameDefault = '',
-  usernameReadonly = false,
-  usernameLabel = 'Username or email address',
-  usernameAria = usernameLabel,
-  usernamePlaceholder = usernameLabel,
-  usernamePattern = undefined,
-  usernameFormat = 'valid email address or username',
-
-  passwordLabel = 'Password',
-  passwordAria = passwordLabel,
-  passwordPlaceholder = passwordLabel,
-  passwordPattern = undefined,
-  passwordFormat = 'non empty string',
-  passwordWarning = (
-    <>
-      <p className="font-bold text-brand leading-8">Warning</p>
-      <p>
-        Please verify the domain name of the website before entering your
-        password. Never enter your password on a domain you do not trust.
-      </p>
-    </>
-  ),
-
-  secondFactorLabel = 'Confirmation code',
-  secondFactorAria = secondFactorLabel,
-  secondFactorPlaceholder = secondFactorLabel,
-  secondFactorPattern = '^[A-Z2-7]{5}-[A-Z2-7]{5}$',
-  secondFactorFormat = 'XXXXX-XXXXX',
-  secondFactorHint = 'Check your $1 email for a login code and enter it here.',
-  secondFactorParseValue = checkAndFormatEmailOtpCode,
-
-  rememberVisible = true,
-  rememberDefault = false,
-  rememberLabel = 'Remember this account on this device',
-  rememberAria = rememberLabel,
-
-  ...props
-}: SignInFormProps) {
-  const [focused, setFocused] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [secondFactor, setSecondFactor] = useState<null | {
-    type: 'emailOtp'
-    hint: string
-  }>(null)
-
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  const resetState = useCallback(() => {
-    setSecondFactor(null)
-    setErrorMessage(null)
-  }, [])
-
-  const passwordReadonly = secondFactor != null
-
-  const doSubmit = useCallback(
-    async (
-      event: SyntheticEvent<
-        HTMLFormElement & {
-          username: HTMLInputElement
-          password: HTMLInputElement
-          remember?: HTMLInputElement
-          secondFactor?: HTMLInputElement
-        },
-        SubmitEvent
-      >,
-    ) => {
-      event.preventDefault()
-
-      const credentials: SignInFormOutput = {
-        username: event.currentTarget.username.value,
-        password: event.currentTarget.password.value,
-        remember: event.currentTarget.remember?.checked,
-      }
-
-      if (secondFactor) {
-        const element = event.currentTarget.secondFactor
-        if (!element) throw new Error('Second factor input not found')
-        const value = secondFactorParseValue(element.value)
-        if (!value) {
-          setSecondFactor({
-            type: secondFactor.type,
-            hint: `Make sure to match the format: ${secondFactorFormat}`,
-          })
-          return
-        }
-        credentials[secondFactor.type] = value
-      }
-
-      setLoading(true)
-      setErrorMessage(null)
-      try {
-        await onSubmit(credentials)
-      } catch (err) {
-        if (err instanceof SecondAuthenticationFactorRequiredError) {
-          setSecondFactor({
-            type: err.type,
-            hint: err.hint,
-          })
-        } else {
-          setErrorMessage(parseErrorMessage(err))
-        }
-      } finally {
-        setLoading(false)
-      }
-    },
-    [secondFactor, onSubmit],
-  )
-
-  return (
-    <FormCard
-      onSubmit={doSubmit}
-      error={errorMessage}
-      cancel={
-        onCancel && (
-          <Button aria-label={cancelAria} onClick={onCancel}>
-            {cancelLabel}
-          </Button>
-        )
-      }
-      actions={
-        <Button
-          color="brand"
-          type="submit"
-          aria-label={submitAria}
-          loading={loading}
-        >
-          {submitLabel}
-        </Button>
-      }
-      {...props}
-    >
-      <Fieldset title={accountSection} disabled={loading}>
-        <InputText
-          icon={<AtSymbolIcon className="w-5" />}
-          name="username"
-          type="text"
-          onChange={resetState}
-          placeholder={usernamePlaceholder}
-          aria-label={usernameAria}
-          autoCapitalize="none"
-          autoCorrect="off"
-          autoComplete="username"
-          spellCheck="false"
-          dir="auto"
-          enterKeyHint="next"
-          required
-          defaultValue={usernameDefault}
-          readOnly={usernameReadonly}
-          disabled={usernameReadonly}
-          pattern={usernamePattern}
-          title={usernameFormat}
-        />
-
-        <InputText
-          icon={<LockIcon className="w-5" />}
-          name="password"
-          type="password"
-          onChange={resetState}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setTimeout(setFocused, 100, false)}
-          placeholder={passwordPlaceholder}
-          aria-label={passwordAria}
-          autoCapitalize="none"
-          autoCorrect="off"
-          autoComplete="current-password"
-          dir="auto"
-          enterKeyHint="done"
-          spellCheck="false"
-          required
-          readOnly={passwordReadonly}
-          disabled={passwordReadonly}
-          pattern={passwordPattern}
-          title={passwordFormat}
-        />
-
-        {passwordWarning && (
-          <div
-            className={clsx(
-              'transition-all delay-300 duration-300 overflow-hidden',
-              focused ? 'max-h-80' : 'max-h-0 -z-10 !mt-0',
-            )}
-          >
-            <InfoCard role="status">{passwordWarning}</InfoCard>
-          </div>
-        )}
-      </Fieldset>
-
-      {rememberVisible && (
-        <Fieldset key="remember" title={sessionSection} disabled={loading}>
-          <InputCheckbox
-            name="remember"
-            defaultChecked={rememberDefault}
-            aria-label={rememberAria}
-          >
-            {rememberLabel}
-          </InputCheckbox>
-        </Fieldset>
-      )}
-
-      {secondFactor && (
-        <Fieldset key="2fa" title={secondFactorSection} disabled={loading}>
-          <div>
-            <InputText
-              icon={<TokenIcon className="w-5" />}
-              name="secondFactor"
-              type="text"
-              placeholder={secondFactorPlaceholder}
-              aria-label={secondFactorAria}
-              autoCapitalize="none"
-              autoCorrect="off"
-              autoComplete="off"
-              spellCheck="false"
-              dir="auto"
-              enterKeyHint="done"
-              required
-              pattern={secondFactorPattern}
-              title={secondFactorFormat}
-              autoFocus={true}
-            />
-            <p className="text-slate-600 dark:text-slate-400 text-sm">
-              {secondFactorHint.replaceAll('$1', secondFactor.hint)}
-            </p>
-          </div>
-        </Fieldset>
-      )}
-    </FormCard>
-  )
-}
-
-function parseErrorMessage(err: unknown): string {
-  if (err instanceof InvalidCredentialsError) {
-    return 'Invalid username or password'
-  }
-
-  return 'An unknown error occurred'
-}
-
-export function checkAndFormatEmailOtpCode(code: string): string | false {
-  const EMAIL_CODE_REGEX = /^[A-Z2-7]{5}-[A-Z2-7]{5}$/
-
-  // Trim the reset code
-  let fixed = code.trim().toUpperCase()
-
-  // Add a dash if needed
-  if (fixed.length === 10) {
-    fixed = `${fixed.slice(0, 5)}-${fixed.slice(5, 10)}`
-  }
-
-  // Check that it is a valid format
-  if (!EMAIL_CODE_REGEX.test(fixed)) {
-    return false
-  }
-
-  return fixed
-}

package/src/assets/app/components/sign-up-account-form.tsx

@@ -1,194 +0,0 @@
-import {
-  FormHTMLAttributes,
-  ReactNode,
-  SyntheticEvent,
-  useCallback,
-  useState,
-} from 'react'
-
-import { Button } from './button'
-import { FormCard, FormCardProps } from './form-card'
-import { Override } from '../lib/util'
-import { Fieldset } from './fieldset'
-
-export type SignUpAccountFormOutput = {
-  username: string
-  password: string
-}
-
-export type SignUpAccountFormProps = Override<
-  FormCardProps,
-  {
-    onSubmit: (credentials: SignUpAccountFormOutput) => void | PromiseLike<void>
-    submitLabel?: ReactNode
-    submitAria?: string
-
-    onCancel?: () => void
-    cancelLabel?: ReactNode
-    cancelAria?: string
-
-    username?: string
-    usernamePlaceholder?: string
-    usernameLabel?: string
-    usernameAria?: string
-    usernamePattern?: string
-    usernameTitle?: string
-
-    passwordPlaceholder?: string
-    passwordLabel?: string
-    passwordAria?: string
-    passwordPattern?: string
-    passwordTitle?: string
-  }
->
-
-export function SignUpAccountForm({
-  onSubmit,
-  submitAria = 'Next',
-  submitLabel = submitAria,
-
-  onCancel = undefined,
-  cancelAria = 'Cancel',
-  cancelLabel = cancelAria,
-
-  username: defaultUsername = '',
-  usernameLabel = 'Username',
-  usernameAria = usernameLabel,
-  usernamePlaceholder = usernameLabel,
-  usernamePattern,
-  usernameTitle,
-
-  passwordLabel = 'Password',
-  passwordAria = passwordLabel,
-  passwordPlaceholder = passwordLabel,
-  passwordPattern,
-  passwordTitle,
-
-  children,
-  ...props
-}: SignUpAccountFormProps &
-  Omit<FormHTMLAttributes<HTMLFormElement>, keyof SignUpAccountFormProps>) {
-  const [loading, setLoading] = useState(false)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  const doSubmit = useCallback(
-    async (
-      event: SyntheticEvent<
-        HTMLFormElement & {
-          username: HTMLInputElement
-          password: HTMLInputElement
-        },
-        SubmitEvent
-      >,
-    ) => {
-      event.preventDefault()
-
-      const credentials = {
-        username: event.currentTarget.username.value,
-        password: event.currentTarget.password.value,
-      }
-
-      setLoading(true)
-      setErrorMessage(null)
-      try {
-        await onSubmit(credentials)
-      } catch (err) {
-        setErrorMessage(parseErrorMessage(err))
-      } finally {
-        setLoading(false)
-      }
-    },
-    [onSubmit, setErrorMessage, setLoading],
-  )
-
-  return (
-    <FormCard
-      append={children}
-      error={errorMessage}
-      onSubmit={doSubmit}
-      cancel={
-        onCancel && (
-          <Button aria-label={cancelAria} onClick={onCancel}>
-            {cancelLabel}
-          </Button>
-        )
-      }
-      actions={
-        <Button
-          color="brand"
-          type="submit"
-          aria-label={submitAria}
-          disabled={loading}
-        >
-          {submitLabel}
-        </Button>
-      }
-      {...props}
-    >
-      <Fieldset disabled={loading}>
-        <label className="text-sm font-medium block">
-          <p>{usernameLabel}</p>
-
-          <div className="relative flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100">
-            <span className="w-6 ml-1 text-center text-base">@</span>
-            <input
-              name="username"
-              type="text"
-              onChange={() => setErrorMessage(null)}
-              className="relative m-1 block w-[1px] min-w-0 flex-auto leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100 disabled:text-gray-500"
-              placeholder={usernamePlaceholder}
-              aria-label={usernameAria}
-              autoCapitalize="none"
-              autoCorrect="off"
-              autoComplete="username"
-              spellCheck="false"
-              dir="auto"
-              enterKeyHint="next"
-              required
-              defaultValue={defaultUsername}
-              pattern={usernamePattern}
-              title={usernameTitle}
-            />
-          </div>
-        </label>
-
-        <label className="text-sm font-medium block">
-          <p>{passwordLabel}</p>
-
-          <div className="relative flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100">
-            <span className="w-6 ml-1 text-center text-2xl font-light -mb-2">
-              *
-            </span>
-            <input
-              name="password"
-              type="password"
-              onChange={() => setErrorMessage(null)}
-              className="relative m-1 block w-[1px] min-w-0 flex-auto leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100"
-              placeholder={passwordPlaceholder}
-              aria-label={passwordAria}
-              autoCapitalize="none"
-              autoCorrect="off"
-              autoComplete="new-password"
-              dir="auto"
-              enterKeyHint="done"
-              spellCheck="false"
-              required
-              pattern={passwordPattern}
-              title={passwordTitle}
-            />
-          </div>
-        </label>
-      </Fieldset>
-    </FormCard>
-  )
-}
-
-function parseErrorMessage(err: unknown): string {
-  switch ((err as any)?.message) {
-    case 'Invalid credentials':
-      return 'Invalid username or password'
-    default:
-      console.error(err)
-      return 'An unknown error occurred'
-  }
-}

package/src/assets/app/components/sign-up-disclaimer.tsx

@@ -1,44 +0,0 @@
-import { HTMLAttributes } from 'react'
-import { LinkDefinition } from '../backend-data'
-import { clsx } from '../lib/clsx'
-
-export type SignUpDisclaimerProps = {
-  links?: readonly LinkDefinition[]
-}
-
-export function SignUpDisclaimer({
-  links,
-
-  className,
-  ...attrs
-}: SignUpDisclaimerProps &
-  Omit<
-    HTMLAttributes<HTMLParagraphElement>,
-    keyof SignUpDisclaimerProps | 'children'
-  >) {
-  const relevantLinks = links?.filter(
-    (l) => l.rel === 'privacy-policy' || l.rel === 'terms-of-service',
-  )
-
-  return (
-    <p className={clsx('text-sm text-slate-500', className)} {...attrs}>
-      By creating an account you agree to the{' '}
-      {relevantLinks && relevantLinks.length
-        ? relevantLinks.map((l, i, a) => (
-            <span key={i}>
-              {i > 0 && (i < a.length - 1 ? ', ' : ' and ')}
-              <a
-                href={l.href}
-                rel={l.rel}
-                target="_blank"
-                className="text-brand underline"
-              >
-                {l.title}
-              </a>
-            </span>
-          ))
-        : 'Terms of Service and Privacy Policy'}
-      .
-    </p>
-  )
-}

package/src/assets/app/views/accept-view.tsx

@@ -1,55 +0,0 @@
-import { OAuthClientMetadata } from '@atproto/oauth-types'
-
-import { Account, ScopeDetail } from '../backend-data'
-import { AcceptForm } from '../components/accept-form'
-import { LayoutTitlePage } from '../components/layout-title-page'
-
-export type AcceptViewProps = {
-  clientId: string
-  clientMetadata: OAuthClientMetadata
-  clientTrusted: boolean
-
-  account: Account
-  scopeDetails?: ScopeDetail[]
-
-  onAccept: () => void
-  onReject: () => void
-  onBack?: () => void
-}
-
-export function AcceptView({
-  clientId,
-  clientMetadata,
-  clientTrusted,
-  account,
-  scopeDetails,
-  onAccept,
-  onReject,
-  onBack,
-}: AcceptViewProps) {
-  return (
-    <LayoutTitlePage
-      title="Authorize"
-      subtitle={
-        <>
-          Grant access to your{' '}
-          <b className="text-black dark:text-white">
-            {account.preferred_username || account.email || account.sub}
-          </b>{' '}
-          account
-        </>
-      }
-    >
-      <AcceptForm
-        clientId={clientId}
-        clientMetadata={clientMetadata}
-        clientTrusted={clientTrusted}
-        account={account}
-        scopeDetails={scopeDetails}
-        onBack={onBack}
-        onAccept={onAccept}
-        onReject={onReject}
-      />
-    </LayoutTitlePage>
-  )
-}