@atproto/oauth-provider-ui 0.1.0 → 0.1.1

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

@@ -1,145 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import type { Session } from '@atproto/oauth-provider-api'
-import {
-  LayoutTitlePage,
-  LayoutTitlePageProps,
-} from '../../../components/layouts/layout-title-page.tsx'
-import { Override } from '../../../lib/util.ts'
-import { SignInForm, SignInFormOutput } from './sign-in-form.tsx'
-import { SignInPicker } from './sign-in-picker.tsx'
-
-export type SignInViewProps = Override<
-  LayoutTitlePageProps,
-  {
-    sessions: readonly Session[]
-    selectSub: (sub: string | null) => void
-    loginHint?: string
-
-    onSignIn: (
-      credentials: SignInFormOutput,
-      signal: AbortSignal,
-    ) => void | PromiseLike<void>
-    onForgotPassword?: (emailHint?: string) => void
-    onBack?: () => void
-  }
->
-
-export function SignInView({
-  loginHint,
-  sessions,
-  selectSub,
-
-  onSignIn,
-  onForgotPassword,
-  onBack,
-
-  // LayoutTitlePage
-  title,
-  subtitle,
-  ...props
-}: SignInViewProps) {
-  const { t } = useLingui()
-  const session = useMemo(() => sessions.find((s) => s.selected), [sessions])
-  const clearSession = useCallback(() => selectSub(null), [selectSub])
-  const accounts = useMemo(() => sessions.map((s) => s.account), [sessions])
-  const [showSignInForm, setShowSignInForm] = useState(sessions.length === 0)
-
-  title ??= t`Sign in`
-
-  useEffect(() => {
-    // Make sure the "back" action shows the account picker instead of the
-    // sign-in form (since the account was added to the list of current
-    // sessions).
-    if (session) setShowSignInForm(false)
-  }, [session])
-
-  if (session) {
-    // All set (parent view will handle the redirect)
-    if (!session.loginRequired) return null
-
-    return (
-      <LayoutTitlePage
-        {...props}
-        title={title}
-        subtitle={subtitle ?? <Trans>Confirm your password to continue</Trans>}
-      >
-        <SignInForm
-          onSubmit={onSignIn}
-          onForgotPassword={onForgotPassword}
-          onBack={clearSession}
-          usernameDefault={
-            session.account.preferred_username || session.account.sub
-          }
-          usernameReadonly={true}
-          rememberDefault={true}
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  if (loginHint) {
-    return (
-      <LayoutTitlePage
-        {...props}
-        title={title}
-        subtitle={subtitle ?? <Trans>Enter your password</Trans>}
-      >
-        <SignInForm
-          onSubmit={onSignIn}
-          onForgotPassword={onForgotPassword}
-          onBack={onBack}
-          usernameDefault={loginHint}
-          usernameReadonly={true}
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  if (sessions.length === 0) {
-    return (
-      <LayoutTitlePage
-        {...props}
-        title={title}
-        subtitle={subtitle ?? <Trans>Enter your username and password</Trans>}
-      >
-        <SignInForm
-          onSubmit={onSignIn}
-          onForgotPassword={onForgotPassword}
-          onBack={onBack}
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  if (showSignInForm) {
-    return (
-      <LayoutTitlePage
-        {...props}
-        title={title}
-        subtitle={subtitle ?? <Trans>Enter your username and password</Trans>}
-      >
-        <SignInForm
-          onSubmit={onSignIn}
-          onForgotPassword={onForgotPassword}
-          onBack={() => setShowSignInForm(false)}
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  return (
-    <LayoutTitlePage
-      {...props}
-      title={title}
-      subtitle={subtitle ?? <Trans>Select from an existing account</Trans>}
-    >
-      <SignInPicker
-        accounts={accounts}
-        onAccount={(a) => selectSub(a.sub)}
-        onOther={() => setShowSignInForm(true)}
-        onBack={onBack}
-      />
-    </LayoutTitlePage>
-  )
-}

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

@@ -1,142 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
-import { Fieldset } from '../../../components/forms/fieldset.tsx'
-import {
-  AsyncActionController,
-  FormCardAsync,
-  FormCardAsyncProps,
-} from '../../../components/forms/form-card-async.tsx'
-import { InputEmailAddress } from '../../../components/forms/input-email-address.tsx'
-import { InputNewPassword } from '../../../components/forms/input-new-password.tsx'
-import { InputText } from '../../../components/forms/input-text.tsx'
-import { TokenIcon } from '../../../components/utils/icons.tsx'
-import { mergeRefs } from '../../../lib/ref.ts'
-import { Override } from '../../../lib/util.ts'
-
-export type SignUpAccountFormOutput = {
-  email: string
-  password: string
-  inviteCode?: string
-}
-
-export type SignUpAccountFormProps = Override<
-  Omit<
-    FormCardAsyncProps,
-    'append' | 'onCancel' | 'onSubmit' | 'submitLabel' | 'cancelLabel'
-  >,
-  {
-    inviteCodeRequired?: boolean
-
-    credentials?: SignUpAccountFormOutput
-    onCredentials?: (credentials?: SignUpAccountFormOutput) => void
-
-    onNext: (signal: AbortSignal) => void | PromiseLike<void>
-    nextLabel?: ReactNode
-
-    onPrev?: () => void
-    prevLabel?: ReactNode
-  }
->
-
-export function SignUpAccountForm({
-  inviteCodeRequired = true,
-
-  credentials: creds,
-  onCredentials,
-
-  onNext,
-  nextLabel,
-
-  onPrev,
-  prevLabel,
-
-  // FormCardAsyncProps
-  children,
-  ref,
-  invalid,
-  ...props
-}: SignUpAccountFormProps) {
-  const { t } = useLingui()
-
-  const [email, setEmail] = useState(creds?.email)
-  const [password, setPassword] = useState(creds?.password)
-  const [inviteCode, setInviteCode] = useState(creds?.inviteCode)
-
-  const formRef = useRef<AsyncActionController>(null)
-  const resetForm = () => formRef.current?.reset()
-
-  const credentials = useMemo(
-    () =>
-      email && password && (!inviteCodeRequired || inviteCode)
-        ? {
-            email,
-            password,
-            inviteCode: inviteCodeRequired ? inviteCode : undefined,
-          }
-        : undefined,
-    [email, password, inviteCode, inviteCodeRequired],
-  )
-
-  useEffect(() => {
-    onCredentials?.(credentials)
-  }, [credentials, onCredentials])
-
-  return (
-    <FormCardAsync
-      {...props}
-      ref={mergeRefs([ref, formRef])}
-      invalid={invalid || !credentials}
-      onCancel={onPrev}
-      cancelLabel={prevLabel}
-      onSubmit={onNext}
-      submitLabel={nextLabel}
-      append={children}
-    >
-      {inviteCodeRequired && (
-        <Fieldset label={<Trans>Invite code</Trans>}>
-          <InputText
-            icon={<TokenIcon className="w-5" />}
-            autoFocus
-            name="inviteCode"
-            title={t`Invite code`}
-            placeholder={t`example-com-xxxxx-xxxxx`}
-            required
-            value={inviteCode || ''}
-            onChange={(event) => {
-              setInviteCode(event.target.value || undefined)
-              resetForm()
-            }}
-            enterKeyHint="next"
-          />
-        </Fieldset>
-      )}
-
-      <Fieldset label={<Trans>Email</Trans>}>
-        <InputEmailAddress
-          autoFocus={!inviteCodeRequired}
-          name="email"
-          enterKeyHint="next"
-          required
-          defaultValue={email}
-          onEmail={(email) => {
-            setEmail(email)
-            resetForm()
-          }}
-        />
-      </Fieldset>
-
-      <Fieldset label={<Trans>Password</Trans>}>
-        <InputNewPassword
-          name="password"
-          enterKeyHint="next"
-          required
-          password={password}
-          onPassword={(value) => {
-            setPassword(value)
-            resetForm()
-          }}
-        />
-      </Fieldset>
-    </FormCardAsync>
-  )
-}

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

@@ -1,51 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { clsx } from 'clsx'
-import { JSX } from 'react'
-import type { LinkDefinition } from '@atproto/oauth-provider-api'
-import { LinkAnchor } from '../../../components/utils/link-anchor.tsx'
-import { Override } from '../../../lib/util.ts'
-
-export type SignUpDisclaimerProps = Override<
-  Omit<JSX.IntrinsicElements['p'], 'children'>,
-  {
-    links?: readonly LinkDefinition[]
-  }
->
-
-export function SignUpDisclaimer({
-  links,
-
-  // p
-  className,
-  ...attrs
-}: SignUpDisclaimerProps) {
-  const tosLink = links?.find((l) => l.rel === 'terms-of-service')
-  const ppLink = links?.find((l) => l.rel === 'privacy-policy')
-
-  return (
-    <p
-      className={clsx('text-sm text-slate-500 dark:text-slate-400', className)}
-      {...attrs}
-    >
-      <Trans>
-        By creating an account you agree to the{' '}
-        {tosLink ? (
-          <LinkAnchor className="text-primary underline" link={tosLink}>
-            <Trans>Terms of Service</Trans>
-          </LinkAnchor>
-        ) : (
-          <Trans>Terms of Service</Trans>
-        )}
-        {' and the '}
-        {ppLink ? (
-          <LinkAnchor className="text-primary underline" link={ppLink}>
-            <Trans>Privacy Policy</Trans>
-          </LinkAnchor>
-        ) : (
-          <Trans>Privacy Policy</Trans>
-        )}{' '}
-        of this service.
-      </Trans>
-    </p>
-  )
-}

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

@@ -1,287 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { clsx } from 'clsx'
-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 { 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="w-24 rounded-md bg-gray-300 p-2 dark:bg-slate-600"
-              />
-            )}
-          </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="text-success inline-block h-4 w-4"
-              title={t`Valid`}
-            />
-          ) : (
-            <XMarkIcon
-              className="text-error inline-block h-4 w-4"
-              title={t`Invalid`}
-            />
-          )}
-        </>
-      ) : (
-        <div aria-hidden className="flex h-4 w-4 items-center justify-center">
-          <div className="h-2 w-2 rounded-full bg-gray-300 dark:bg-slate-600" />
-        </div>
-      )}
-      <div className="text-sm">{children}</div>
-    </div>
-  )
-}