@atproto/oauth-provider-ui 0.1.0 → 0.1.1

package/src/views/authorize/reset-password/reset-password-confirm-form.tsx

@@ -1,88 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { useRef, useState } from 'react'
-import { Fieldset } from '../../../components/forms/fieldset.tsx'
-import {
-  FormCardAsync,
-  FormCardAsyncProps,
-} from '../../../components/forms/form-card-async.tsx'
-import { InputNewPassword } from '../../../components/forms/input-new-password.tsx'
-import { InputToken } from '../../../components/forms/input-token.tsx'
-import { Admonition } from '../../../components/utils/admonition.tsx'
-import { useRandomString } from '../../../hooks/use-random-string.ts'
-import { Override } from '../../../lib/util.ts'
-
-export type ResetPasswordConfirmFormProps = Override<
-  FormCardAsyncProps,
-  {
-    onSubmit: (
-      data: {
-        token: string
-        password: string
-      },
-      signal: AbortSignal,
-    ) => void | PromiseLike<void>
-
-    tokenPattern?: string
-    tokenFormat?: string
-    tokenParseValue?: (value: string) => string | false
-  }
->
-
-export function ResetPasswordConfirmForm({
-  onSubmit,
-
-  // FormCardAsyncProps
-  invalid,
-  ...props
-}: ResetPasswordConfirmFormProps) {
-  const tokenAriaId = useRandomString({ prefix: 'reset-pwd-email-' })
-  const passwordRef = useRef<HTMLInputElement>(null)
-
-  const [token, setToken] = useState<string | null>(null)
-  const [password, setPassword] = useState<string | undefined>(undefined)
-
-  return (
-    <FormCardAsync
-      {...props}
-      onSubmit={(signal) => {
-        if (token && password) return onSubmit({ token, password }, signal)
-      }}
-      invalid={invalid || !token || !password}
-    >
-      <Admonition role="info">
-        <p id={tokenAriaId} className="text-md">
-          <Trans>
-            You will receive an email with a "reset code". Enter that code here
-            then enter your new password.
-          </Trans>
-        </p>
-      </Admonition>
-
-      <Fieldset label={<Trans>Reset code</Trans>}>
-        <InputToken
-          name="code"
-          aria-labelledby={tokenAriaId}
-          enterKeyHint="next"
-          required
-          autoFocus={true}
-          onToken={(token) => {
-            setToken(token)
-            // Auto-focus next field when token is complete
-            if (token) passwordRef.current?.focus()
-          }}
-        />
-      </Fieldset>
-
-      <Fieldset label={<Trans>New password</Trans>}>
-        <InputNewPassword
-          ref={passwordRef}
-          name="password"
-          enterKeyHint="done"
-          required
-          password={password}
-          onPassword={setPassword}
-        />
-      </Fieldset>
-    </FormCardAsync>
-  )
-}

package/src/views/authorize/reset-password/reset-password-request-form.tsx

@@ -1,80 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { useCallback, 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 { Admonition } from '../../../components/utils/admonition.tsx'
-import { useRandomString } from '../../../hooks/use-random-string.ts'
-import { mergeRefs } from '../../../lib/ref.ts'
-import { Override } from '../../../lib/util.ts'
-
-export type ResetPasswordRequestFormProps = Override<
-  Omit<FormCardAsyncProps, 'children'>,
-  {
-    emailDefault?: string
-    onSubmit: (
-      data: { email: string },
-      signal: AbortSignal,
-    ) => void | PromiseLike<void>
-  }
->
-
-export function ResetPasswordRequestForm({
-  emailDefault,
-  onSubmit,
-
-  // FormCardAsyncProps
-  invalid,
-  ref,
-  ...props
-}: ResetPasswordRequestFormProps) {
-  const { t } = useLingui()
-  const emailAriaId = useRandomString({ prefix: 'reset-pwd-email-' })
-  const [email, setEmail] = useState(emailDefault)
-
-  const ctrlRef = useRef<AsyncActionController>(null)
-
-  const doSubmit = useCallback(
-    (signal: AbortSignal) => {
-      if (email) return onSubmit({ email }, signal)
-    },
-    [email, onSubmit],
-  )
-
-  return (
-    <FormCardAsync
-      {...props}
-      ref={mergeRefs([ref, ctrlRef])}
-      invalid={invalid || !email}
-      onSubmit={doSubmit}
-    >
-      <Fieldset label={<Trans>Email address</Trans>}>
-        <InputEmailAddress
-          name="email"
-          placeholder={t`Enter your email address`}
-          aria-labelledby={emailAriaId}
-          title={t`Email address`}
-          required
-          autoFocus={true}
-          value={email}
-          onEmail={(email) => {
-            ctrlRef.current?.reset()
-            setEmail(email)
-          }}
-        />
-        <Admonition role="info">
-          <p id={emailAriaId} className="">
-            <Trans>
-              Enter the email you used to create your account. We'll send you a
-              "reset code" so you can set a new password.
-            </Trans>
-          </p>
-        </Admonition>
-      </Fieldset>
-    </FormCardAsync>
-  )
-}

package/src/views/authorize/reset-password/reset-password-view.tsx

@@ -1,127 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { useState } from 'react'
-import { Button } from '../../../components/forms/button.tsx'
-import {
-  LayoutTitlePage,
-  LayoutTitlePageProps,
-} from '../../../components/layouts/layout-title-page.tsx'
-import { Override } from '../../../lib/util.ts'
-import { ResetPasswordConfirmForm } from './reset-password-confirm-form.tsx'
-import { ResetPasswordRequestForm } from './reset-password-request-form.tsx'
-
-export type ResetPasswordViewProps = Override<
-  LayoutTitlePageProps,
-  {
-    emailDefault?: string
-    onresetPasswordRequest: (
-      data: { email: string },
-      signal: AbortSignal,
-    ) => void | PromiseLike<void>
-    onResetPasswordConfirm: (
-      data: {
-        token: string
-        password: string
-      },
-      signal: AbortSignal,
-    ) => void | PromiseLike<void>
-    onBack: () => void
-  }
->
-
-enum View {
-  RequestReset,
-  ConfirmReset,
-  PasswordUpdated,
-}
-
-export function ResetPasswordView({
-  emailDefault,
-  onresetPasswordRequest,
-  onResetPasswordConfirm,
-  onBack,
-
-  // LayoutTitlePage
-  ...props
-}: ResetPasswordViewProps) {
-  const { t } = useLingui()
-  const [view, setView] = useState<View>(View.RequestReset)
-
-  if (view === View.RequestReset) {
-    return (
-      <LayoutTitlePage
-        {...props}
-        title={props.title || t`Forgot Password`}
-        subtitle={
-          props.subtitle || <Trans>Let's get your password reset!</Trans>
-        }
-      >
-        <ResetPasswordRequestForm
-          emailDefault={emailDefault}
-          submitLabel={<Trans>Next</Trans>}
-          onSubmit={async (data, signal) => {
-            await onresetPasswordRequest(data, signal)
-            if (!signal.aborted) setView(View.ConfirmReset)
-          }}
-          cancelLabel={<Trans>Back</Trans>}
-          onCancel={onBack}
-        />
-        <hr className="my-5 border-gray-300 dark:border-gray-700" />
-        <center>
-          <Button transparent onClick={() => setView(View.ConfirmReset)}>
-            <Trans>Already have a code?</Trans>
-          </Button>
-        </center>
-      </LayoutTitlePage>
-    )
-  }
-
-  if (view === View.ConfirmReset) {
-    return (
-      <LayoutTitlePage
-        {...props}
-        title={props.title || t`Reset Password`}
-        subtitle={
-          props.subtitle || (
-            <Trans>Enter the code you received to reset your password.</Trans>
-          )
-        }
-      >
-        <ResetPasswordConfirmForm
-          submitLabel={<Trans>Next</Trans>}
-          onSubmit={async (data, signal) => {
-            await onResetPasswordConfirm(data, signal)
-            if (!signal.aborted) setView(View.PasswordUpdated)
-          }}
-          cancelLabel={<Trans>Back</Trans>}
-          onCancel={onBack}
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  if (view === View.PasswordUpdated) {
-    return (
-      <LayoutTitlePage
-        {...props}
-        title={props.title || t`Password Updated`}
-        subtitle={
-          props.subtitle || <Trans>Your password has been updated!</Trans>
-        }
-      >
-        <center>
-          <h2 className="pb-2 text-xl font-bold">
-            <Trans>Password updated!</Trans>
-          </h2>
-          <p className="pb-4">
-            <Trans>You can now sign in with your new password.</Trans>
-          </p>
-          <Button color="primary" onClick={onBack}>
-            <Trans>Okay</Trans>
-          </Button>
-        </center>
-      </LayoutTitlePage>
-    )
-  }
-
-  throw new Error(`Invalid view: ${view}`)
-}

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

@@ -1,240 +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>Identifier</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>
-
-      <Fieldset disabled={loading} label={<Trans>Password</Trans>}>
-        <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
-        />
-      </Fieldset>
-
-      <Admonition role="status">
-        <p className="text-md text-primary pb-1 font-bold">
-          <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>
-
-      <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>
-
-      {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-sm text-slate-600 dark:text-slate-400">
-              <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-sm font-medium text-slate-600 dark:text-slate-400">
-        <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="mr-2 truncate font-medium" arial-label={t`Name`}>
-                {name}
-              </span>
-              {identifier && (
-                <span
-                  className="truncate text-sm text-neutral-500 dark:text-neutral-400"
-                  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>
-  )
-}