@atproto/oauth-provider-ui 0.0.2 → 0.1.1

package/src/views/authorize/accept/accept-view.tsx

@@ -1,70 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import type { Account, ScopeDetail } from '@atproto/oauth-provider-api'
-import type { OAuthClientMetadata } from '@atproto/oauth-types'
-import {
-  LayoutTitlePage,
-  LayoutTitlePageProps,
-} from '../../../components/layouts/layout-title-page.tsx'
-import { Override } from '../../../lib/util.ts'
-import { AcceptForm } from './accept-form.tsx'
-
-export type AcceptViewProps = Override<
-  LayoutTitlePageProps,
-  {
-    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,
-
-  // LayoutTitlePage
-  title,
-  subtitle = (
-    <Trans>
-      Grant access to your{' '}
-      <b className="text-slate-800 dark:text-slate-200">
-        {account.preferred_username || account.email || account.sub}
-      </b>{' '}
-      account
-    </Trans>
-  ),
-  ...props
-}: AcceptViewProps) {
-  const { t } = useLingui()
-
-  return (
-    <LayoutTitlePage
-      {...props}
-      title={title ?? t`Authorize`}
-      subtitle={subtitle}
-    >
-      <AcceptForm
-        clientId={clientId}
-        clientMetadata={clientMetadata}
-        clientTrusted={clientTrusted}
-        account={account}
-        scopeDetails={scopeDetails}
-        onBack={onBack}
-        onAccept={onAccept}
-        onReject={onReject}
-      />
-    </LayoutTitlePage>
-  )
-}

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

@@ -1,183 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { useEffect, useState } from 'react'
-import type {
-  AuthorizeData,
-  CustomizationData,
-} from '@atproto/oauth-provider-api'
-import {
-  LayoutTitlePage,
-  LayoutTitlePageProps,
-} from '../../components/layouts/layout-title-page.tsx'
-import { useApi } from '../../hooks/use-api.ts'
-import { useBoundDispatch } from '../../hooks/use-bound-dispatch.ts'
-import { Override } from '../../lib/util.ts'
-import { AcceptView } from './accept/accept-view.tsx'
-import { ResetPasswordView } from './reset-password/reset-password-view.tsx'
-import { SignInView } from './sign-in/sign-in-view.tsx'
-import { SignUpView } from './sign-up/sign-up-view.tsx'
-import { WelcomeView } from './welcome/welcome-view.tsx'
-
-export type AuthorizeViewProps = Override<
-  LayoutTitlePageProps,
-  {
-    customizationData?: CustomizationData
-    authorizeData: AuthorizeData
-  }
->
-
-enum View {
-  Welcome,
-  SignUp,
-  SignIn,
-  ResetPassword,
-  Accept,
-  Done,
-}
-
-export function AuthorizeView({
-  authorizeData,
-  customizationData,
-
-  // LayoutTitlePage
-  ...props
-}: AuthorizeViewProps) {
-  const { t } = useLingui()
-
-  const forceSignIn = authorizeData?.loginHint != null
-
-  const initialView = forceSignIn ? View.SignIn : View.Welcome
-  const [view, setView] = useState<View>(initialView)
-
-  const showDone = useBoundDispatch(setView, View.Done)
-  const showSignIn = useBoundDispatch(setView, View.SignIn)
-  const showResetPassword = useBoundDispatch(setView, View.ResetPassword)
-  const showSignUp = useBoundDispatch(setView, View.SignUp)
-  const showAccept = useBoundDispatch(setView, View.Accept)
-  const showWelcome = useBoundDispatch(setView, View.Welcome)
-
-  const [resetPasswordHint, setResetPasswordHint] = useState<
-    string | undefined
-  >(undefined)
-
-  const {
-    sessions,
-    selectSub,
-    doValidateNewHandle,
-    doSignUp,
-    doSignIn,
-    doInitiatePasswordReset,
-    doConfirmResetPassword,
-    doAccept,
-    doReject,
-  } = useApi({ ...authorizeData, onRedirected: showDone })
-
-  // Navigate when the user signs-in (selects a new session)
-  const session = sessions.find((s) => s.selected && !s.loginRequired)
-  useEffect(() => {
-    if (session) {
-      if (session.consentRequired) showAccept()
-      else doAccept(session.account)
-    }
-  }, [session, doAccept, showAccept])
-
-  const canSignUp =
-    Boolean(customizationData?.availableUserDomains?.length) &&
-    !authorizeData.loginHint
-
-  // Fool-proofing
-  const resetNeeded =
-    (view === View.SignUp && !canSignUp) || (view === View.Accept && !session)
-  useEffect(() => {
-    if (resetNeeded) showWelcome()
-  }, [resetNeeded, showWelcome])
-
-  if (view === View.Welcome) {
-    return (
-      <WelcomeView
-        {...props}
-        customizationData={customizationData}
-        onSignIn={showSignIn}
-        onSignUp={canSignUp ? showSignUp : undefined}
-        onCancel={doReject}
-      />
-    )
-  }
-
-  if (view === View.SignUp) {
-    return (
-      <SignUpView
-        {...props}
-        customizationData={customizationData}
-        onValidateNewHandle={doValidateNewHandle}
-        onBack={showWelcome}
-        onDone={doSignUp}
-      />
-    )
-  }
-
-  if (view === View.ResetPassword) {
-    return (
-      <ResetPasswordView
-        {...props}
-        emailDefault={resetPasswordHint}
-        onresetPasswordRequest={doInitiatePasswordReset}
-        onResetPasswordConfirm={doConfirmResetPassword}
-        onBack={forceSignIn ? showSignIn : showWelcome}
-      />
-    )
-  }
-
-  if (view === View.SignIn) {
-    return (
-      <SignInView
-        {...props}
-        loginHint={authorizeData.loginHint}
-        sessions={sessions}
-        selectSub={selectSub}
-        onSignIn={doSignIn}
-        onBack={forceSignIn ? doReject : showWelcome}
-        onForgotPassword={(email) => {
-          showResetPassword()
-          setResetPasswordHint(email)
-        }}
-      />
-    )
-  }
-
-  if (view === View.Accept) {
-    // TypeSafety: should never be null here
-    if (!session) return null
-
-    return (
-      <AcceptView
-        {...props}
-        clientId={authorizeData.clientId}
-        clientMetadata={authorizeData.clientMetadata}
-        clientTrusted={authorizeData.clientTrusted}
-        account={session.account}
-        scopeDetails={authorizeData.scopeDetails}
-        onAccept={() => doAccept(session.account)}
-        onReject={doReject}
-        onBack={
-          forceSignIn
-            ? undefined
-            : () => {
-                selectSub(null)
-                setView(sessions.length ? View.SignIn : View.Welcome)
-              }
-        }
-      />
-    )
-  }
-
-  if (view === View.Done) {
-    return (
-      <LayoutTitlePage {...props} title={props.title ?? t`Login complete`}>
-        <Trans>You are being redirected...</Trans>
-      </LayoutTitlePage>
-    )
-  }
-
-  // Fool-proofing
-  throw new Error('Unexpected application state')
-}

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="text-xl font-bold pb-2">
-            <Trans>Password updated!</Trans>
-          </h2>
-          <p className="pb-4">
-            <Trans>You can now sign in with your new password.</Trans>
-          </p>
-          <Button color="brand" onClick={onBack}>
-            <Trans>Okay</Trans>
-          </Button>
-        </center>
-      </LayoutTitlePage>
-    )
-  }
-
-  throw new Error(`Invalid view: ${view}`)
-}