@atproto/oauth-provider-ui 0.0.2

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

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

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

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

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

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