@atproto/oauth-provider-ui 0.0.2 → 0.1.1

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

@@ -1,242 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { useCallback, useRef, useState } from 'react'
-import { Button } from '../../../components/forms/button.tsx'
-import { Fieldset } from '../../../components/forms/fieldset.tsx'
-import {
-  FormCardAsync,
-  FormCardAsyncProps,
-} from '../../../components/forms/form-card-async.tsx'
-import { InputCheckbox } from '../../../components/forms/input-checkbox.tsx'
-import { InputPassword } from '../../../components/forms/input-password.tsx'
-import { InputText } from '../../../components/forms/input-text.tsx'
-import { InputToken } from '../../../components/forms/input-token.tsx'
-import { Admonition } from '../../../components/utils/admonition.tsx'
-import { AtSymbolIcon } from '../../../components/utils/icons.tsx'
-import { AsyncActionController } from '../../../hooks/use-async-action.ts'
-import {
-  InvalidCredentialsError,
-  SecondAuthenticationFactorRequiredError,
-} from '../../../lib/api.ts'
-import { mergeRefs } from '../../../lib/ref.ts'
-import { Override } from '../../../lib/util.ts'
-
-export type SignInFormOutput = {
-  username: string
-  password: string
-  remember?: boolean
-}
-
-export type SignInFormProps = Override<
-  Omit<FormCardAsyncProps, 'append' | 'onCancel'>,
-  {
-    usernameDefault?: string
-    usernameReadonly?: boolean
-    rememberDefault?: boolean
-
-    onBack?: () => void
-    onForgotPassword?: (emailHint?: string) => void
-    onSubmit: (
-      credentials: SignInFormOutput,
-      signal: AbortSignal,
-    ) => void | PromiseLike<void>
-  }
->
-
-export function SignInForm({
-  usernameDefault = '',
-  usernameReadonly = false,
-  rememberDefault = false,
-
-  onSubmit,
-  onBack,
-  onForgotPassword,
-
-  // FormCardAsync
-  ref,
-  invalid,
-  children,
-  ...props
-}: SignInFormProps) {
-  const { t } = useLingui()
-
-  const [username, setUsername] = useState<string>(usernameDefault)
-  const [password, setPassword] = useState<string>('')
-  const [remember, setRemember] = useState<boolean>(rememberDefault)
-  const [otp, setOtp] = useState<string | null>(null)
-
-  const [secondFactor, setSecondFactor] =
-    useState<null | SecondAuthenticationFactorRequiredError>(null)
-
-  const [loading, setLoading] = useState(false)
-
-  const formRef = useRef<AsyncActionController>(null)
-
-  const clearSecondFactor = useCallback(() => {
-    setOtp(null)
-    setSecondFactor(null)
-  }, [setOtp, setSecondFactor])
-
-  const resetState = useCallback(() => {
-    clearSecondFactor()
-    formRef.current?.reset()
-  }, [clearSecondFactor, formRef])
-
-  const doSubmit = useCallback(
-    async (signal: AbortSignal) => {
-      try {
-        await onSubmit(
-          {
-            username,
-            password,
-            remember,
-            ...(secondFactor ? { [secondFactor.type]: otp } : {}),
-          },
-          signal,
-        )
-      } catch (err) {
-        if (signal.aborted) {
-          // If the action was aborted, ignore the error
-          return
-        }
-
-        if (err instanceof SecondAuthenticationFactorRequiredError) {
-          setSecondFactor(err)
-
-          // Do not re-throw 2FA required error to prevent the form from from
-          // displaying it. Instead, we handle the error by showing the second
-          // factor form.
-          return
-        }
-
-        if (err instanceof InvalidCredentialsError) {
-          // If the username/password are not valid, clear the second factor
-          // as valid credentials are a pre-requisite for 2FA.
-          clearSecondFactor()
-        }
-
-        // Any thrown err will be displayed through the form's errorRender
-        throw err
-      }
-    },
-    [username, password, remember, secondFactor, otp, onSubmit],
-  )
-
-  return (
-    <FormCardAsync
-      {...props}
-      ref={mergeRefs([ref, formRef])}
-      onLoading={setLoading}
-      onCancel={onBack}
-      cancelLabel={t`Back`}
-      append={children}
-      invalid={
-        invalid || !username || !password || (secondFactor != null && !otp)
-      }
-      submitLabel={secondFactor ? t`Confirm` : t`Sign in`}
-      onSubmit={doSubmit}
-    >
-      <Fieldset disabled={loading} label={<Trans>Account</Trans>}>
-        <InputText
-          icon={<AtSymbolIcon className="w-5" />}
-          name="username"
-          type="text"
-          title={t`Username or email address`}
-          autoCapitalize="none"
-          autoCorrect="off"
-          autoComplete="username"
-          spellCheck="false"
-          dir="auto"
-          enterKeyHint="next"
-          required
-          readOnly={usernameReadonly}
-          disabled={usernameReadonly}
-          autoFocus
-          value={username}
-          onChange={(event) => {
-            resetState()
-            setUsername(event.target.value)
-          }}
-        />
-      </Fieldset>
-
-      <InputPassword
-        name="password"
-        onChange={(event) => {
-          resetState()
-          setPassword(event.target.value)
-        }}
-        append={
-          onForgotPassword && (
-            <Button
-              className="text-sm"
-              type="button"
-              onClick={() => {
-                onForgotPassword(username?.includes('@') ? username : undefined)
-              }}
-              aria-label={t`Reset your password`}
-            >
-              <Trans>Forgot?</Trans>
-            </Button>
-          )
-        }
-        enterKeyHint={secondFactor ? 'next' : 'done'}
-        disabled={loading}
-        required
-      />
-
-      <Admonition role="status">
-        <p className="font-bold text-md text-brand pb-1">
-          <Trans>Warning</Trans>
-        </p>
-        <p className="text-sm">
-          <Trans>
-            Please verify the domain name of the website before entering your
-            password. Never enter your password on a domain you do not trust.
-          </Trans>
-        </p>
-      </Admonition>
-
-      <Fieldset
-        key="remember"
-        disabled={loading}
-        label={<Trans>Session</Trans>}
-      >
-        <InputCheckbox
-          name="remember"
-          title={t`Remember this account on this device`}
-          enterKeyHint={secondFactor ? 'next' : 'done'}
-          checked={remember}
-          onChange={(event) => setRemember(event.target.checked)}
-        >
-          <Trans>Remember this account on this device</Trans>
-        </InputCheckbox>
-      </Fieldset>
-
-      {secondFactor && (
-        <Fieldset
-          key="2fa"
-          disabled={loading}
-          label={<Trans>2FA Confirmation</Trans>}
-        >
-          <div>
-            <InputToken
-              title={t`Confirmation code`}
-              enterKeyHint="done"
-              required
-              autoFocus={true}
-              value={otp ?? ''}
-              onToken={setOtp}
-            />
-
-            <p className="text-slate-600 dark:text-slate-400 text-sm">
-              <Trans>
-                Check your {secondFactor.hint} email for a login code and enter
-                it here.
-              </Trans>
-            </p>
-          </div>
-        </Fieldset>
-      )}
-    </FormCardAsync>
-  )
-}

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

@@ -1,116 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import type { Account } from '@atproto/oauth-provider-api'
-import { Button } from '../../../components/forms/button.tsx'
-import {
-  FormCard,
-  FormCardProps,
-} from '../../../components/forms/form-card.tsx'
-import { InputContainer } from '../../../components/forms/input-container.tsx'
-import { AccountImage } from '../../../components/utils/account-image.tsx'
-import {
-  AtSymbolIcon,
-  CaretRightIcon,
-} from '../../../components/utils/icons.tsx'
-import { Override } from '../../../lib/util.ts'
-
-export type SignInPickerProps = Override<
-  Omit<FormCardProps, 'cancel' | 'actions' | 'append'>,
-  {
-    accounts: readonly Account[]
-
-    onAccount: (account: Account) => void
-    onOther?: () => void
-    onBack?: () => void
-  }
->
-
-export function SignInPicker({
-  accounts,
-
-  onAccount,
-  onOther = undefined,
-  onBack,
-
-  // FormCard
-  children,
-  ...props
-}: SignInPickerProps) {
-  const { t } = useLingui()
-  return (
-    <FormCard
-      {...props}
-      append={children}
-      actions={null}
-      cancel={
-        onBack && (
-          <Button onClick={onBack}>
-            <Trans>Back</Trans>
-          </Button>
-        )
-      }
-    >
-      <p className="text-slate-600 dark:text-slate-400 text-sm font-medium">
-        <Trans>Sign in as...</Trans>
-      </p>
-
-      {accounts.map((account) => {
-        const [name, identifier] = [
-          account.name,
-          account.preferred_username,
-          account.email,
-          account.sub,
-        ].filter(Boolean) as [string, string?]
-
-        return (
-          <InputContainer
-            tabIndex={0}
-            key={account.sub}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                onAccount(account)
-              }
-            }}
-            onClick={() => onAccount(account)}
-            role="button"
-            aria-label={t`Sign in as ${account.name}`}
-            icon={<AccountImage src={account.picture} alt={name} />}
-            append={<CaretRightIcon aria-hidden className="h-4" />}
-          >
-            <span className="flex flex-wrap items-center">
-              <span className="font-medium truncate mr-2" arial-label={t`Name`}>
-                {name}
-              </span>
-              {identifier && (
-                <span
-                  className="text-sm text-neutral-500 dark:text-neutral-400 truncate"
-                  arial-label={t`Identifier`}
-                >
-                  {identifier}
-                </span>
-              )}
-            </span>
-          </InputContainer>
-        )
-      })}
-
-      {onOther && (
-        <InputContainer
-          key="other"
-          tabIndex={0}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter' || event.key === ' ') onOther()
-          }}
-          onClick={onOther}
-          aria-label={t`Login to account that is not listed`}
-          role="button"
-          append={<CaretRightIcon aria-hidden className="h-4" />}
-          icon={<AtSymbolIcon aria-hidden className="h-4" />}
-        >
-          <span className="truncate text-slate-700 dark:text-slate-400">
-            <Trans>Another account</Trans>
-          </span>
-        </InputContainer>
-      )}
-    </FormCard>
-  )
-}

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 { JSX } from 'react'
-import type { LinkDefinition } from '@atproto/oauth-provider-api'
-import { LinkAnchor } from '../../../components/utils/link-anchor.tsx'
-import { clsx } from '../../../lib/clsx.ts'
-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-brand underline" link={tosLink}>
-            <Trans>Terms of Service</Trans>
-          </LinkAnchor>
-        ) : (
-          <Trans>Terms of Service</Trans>
-        )}
-        {' and the '}
-        {ppLink ? (
-          <LinkAnchor className="text-brand underline" link={ppLink}>
-            <Trans>Privacy Policy</Trans>
-          </LinkAnchor>
-        ) : (
-          <Trans>Privacy Policy</Trans>
-        )}{' '}
-        of this service.
-      </Trans>
-    </p>
-  )
-}