@atproto/oauth-provider-ui 0.0.2

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

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

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

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

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

@@ -0,0 +1,51 @@
+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>
+  )
+}