@atproto/oauth-provider 0.3.1 → 0.5.0

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

@@ -1,106 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import type { AuthorizeData, CustomizationData } from '../backend-data'
-import { LayoutTitlePage } from '../components/layout-title-page'
-import { useApi } from '../hooks/use-api'
-import { useBoundDispatch } from '../hooks/use-bound-dispatch'
-import { AcceptView } from './accept-view'
-import { SignInView } from './sign-in-view'
-import { SignUpView } from './sign-up-view'
-import { WelcomeView } from './welcome-view'
-
-export type AuthorizeViewProps = {
-  authorizeData: AuthorizeData
-  customizationData?: CustomizationData
-}
-
-export function AuthorizeView({
-  authorizeData,
-  customizationData,
-}: AuthorizeViewProps) {
-  const forceSignIn = authorizeData?.loginHint != null
-
-  const [view, setView] = useState<
-    'welcome' | 'sign-in' | 'sign-up' | 'accept' | 'done'
-  >(forceSignIn ? 'sign-in' : 'welcome')
-
-  const showDone = useBoundDispatch(setView, 'done')
-  const showSignIn = useBoundDispatch(setView, 'sign-in')
-  // const showSignUp = useBoundDispatch(setView, 'sign-up')
-  const showAccept = useBoundDispatch(setView, 'accept')
-  const showWelcome = useBoundDispatch(setView, 'welcome')
-
-  const { sessions, setSession, doAccept, doReject, doSignIn, doSignUp } =
-    useApi(authorizeData, { onRedirected: showDone })
-
-  const session = sessions.find((s) => s.selected && !s.loginRequired)
-  useEffect(() => {
-    if (session) {
-      if (session.consentRequired) showAccept()
-      else doAccept(session.account)
-    }
-  }, [session, doAccept, showAccept])
-
-  if (view === 'welcome') {
-    return (
-      <WelcomeView
-        name={customizationData?.name}
-        logo={customizationData?.logo}
-        links={customizationData?.links}
-        onSignIn={showSignIn}
-        // onSignUp={showSignUp}
-        onCancel={doReject}
-      />
-    )
-  }
-
-  if (view === 'sign-up') {
-    return (
-      <SignUpView
-        links={customizationData?.links}
-        onSignUp={doSignUp}
-        onBack={showWelcome}
-      />
-    )
-  }
-
-  if (view === 'sign-in') {
-    return (
-      <SignInView
-        loginHint={authorizeData.loginHint}
-        sessions={sessions}
-        setSession={setSession}
-        onSignIn={doSignIn}
-        onBack={forceSignIn ? doReject : showWelcome}
-      />
-    )
-  }
-
-  if (view === 'accept' && session) {
-    return (
-      <AcceptView
-        clientId={authorizeData.clientId}
-        clientMetadata={authorizeData.clientMetadata}
-        clientTrusted={authorizeData.clientTrusted}
-        account={session.account}
-        scopeDetails={authorizeData.scopeDetails}
-        onAccept={() => doAccept(session.account)}
-        onReject={doReject}
-        onBack={
-          forceSignIn
-            ? undefined
-            : () => {
-                setSession(null)
-                setView(sessions.length ? 'sign-in' : 'welcome')
-              }
-        }
-      />
-    )
-  }
-
-  return (
-    <LayoutTitlePage title="Login complete">
-      You are being redirected...
-    </LayoutTitlePage>
-  )
-}

package/src/assets/app/views/error-view.tsx

@@ -1,36 +0,0 @@
-import { CustomizationData, ErrorData } from '../backend-data'
-import { InfoCard } from '../components/info-card'
-import { LayoutWelcome, LayoutWelcomeProps } from '../components/layout-welcome'
-import { Override } from '../lib/util'
-
-export type ErrorViewProps = Override<
-  Omit<LayoutWelcomeProps, keyof CustomizationData>,
-  {
-    customizationData?: CustomizationData
-    errorData?: ErrorData
-  }
->
-
-export function ErrorView({
-  errorData,
-  customizationData,
-  ...props
-}: ErrorViewProps) {
-  return (
-    <LayoutWelcome {...customizationData} {...props}>
-      <InfoCard role="alert">{getUserFriendlyMessage(errorData)}</InfoCard>
-    </LayoutWelcome>
-  )
-}
-
-function getUserFriendlyMessage(errorData?: ErrorData) {
-  const desc = errorData?.error_description
-  if (
-    desc === 'This request has expired' ||
-    desc?.startsWith('Unknown request_uri') // Request was removed from database
-  ) {
-    return 'This sign-in session has expired'
-  } else {
-    return desc || 'An unknown error occurred'
-  }
-}

package/src/assets/app/views/sign-in-view.tsx

@@ -1,111 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { Session } from '../backend-data'
-import { AccountPicker } from '../components/account-picker'
-import { LayoutTitlePage } from '../components/layout-title-page'
-import { SignInForm, SignInFormOutput } from '../components/sign-in-form'
-
-export type SignInViewProps = {
-  sessions: readonly Session[]
-  setSession: (sub: string | null) => void
-  loginHint?: string
-
-  onSignIn: (credentials: SignInFormOutput) => void | PromiseLike<void>
-  onBack?: () => void
-}
-
-export function SignInView({
-  loginHint,
-  sessions,
-  setSession,
-
-  onSignIn,
-  onBack,
-}: SignInViewProps) {
-  const session = useMemo(() => sessions.find((s) => s.selected), [sessions])
-  const clearSession = useCallback(() => setSession(null), [setSession])
-  const accounts = useMemo(() => sessions.map((s) => s.account), [sessions])
-  const [showSignInForm, setShowSignInForm] = useState(sessions.length === 0)
-
-  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
-        title="Sign in"
-        subtitle="Confirm your password to continue"
-      >
-        <SignInForm
-          onSubmit={onSignIn}
-          onCancel={clearSession}
-          cancelAria="Back" // to account picker
-          usernameDefault={
-            session.account.preferred_username || session.account.sub
-          }
-          usernameReadonly={true}
-          rememberDefault={true}
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  if (loginHint) {
-    return (
-      <LayoutTitlePage title="Sign in" subtitle="Enter your password">
-        <SignInForm
-          onSubmit={onSignIn}
-          onCancel={onBack}
-          cancelAria="Back"
-          usernameDefault={loginHint}
-          usernameReadonly={true}
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  if (sessions.length === 0) {
-    return (
-      <LayoutTitlePage
-        title="Sign in"
-        subtitle="Enter your username and password"
-      >
-        <SignInForm onSubmit={onSignIn} onCancel={onBack} cancelAria="Back" />
-      </LayoutTitlePage>
-    )
-  }
-
-  if (showSignInForm) {
-    return (
-      <LayoutTitlePage
-        title="Sign in"
-        subtitle="Enter your username and password"
-      >
-        <SignInForm
-          onSubmit={onSignIn}
-          onCancel={() => setShowSignInForm(false)}
-          cancelAria="Back" // to account picker
-        />
-      </LayoutTitlePage>
-    )
-  }
-
-  return (
-    <LayoutTitlePage title="Sign in" subtitle="Select from an existing account">
-      <AccountPicker
-        accounts={accounts}
-        onAccount={(a) => setSession(a.sub)}
-        onOther={() => setShowSignInForm(true)}
-        onBack={onBack}
-        backAria="Back" // to previous view
-      />
-    </LayoutTitlePage>
-  )
-}

package/src/assets/app/views/sign-up-view.tsx

@@ -1,86 +0,0 @@
-import { ReactNode, useCallback, useState } from 'react'
-
-import { LinkDefinition } from '../backend-data'
-import { HelpCard } from '../components/help-card'
-import { LayoutTitlePage } from '../components/layout-title-page'
-import {
-  SignUpAccountForm,
-  SignUpAccountFormOutput,
-} from '../components/sign-up-account-form'
-import { SignUpDisclaimer } from '../components/sign-up-disclaimer'
-import { Button } from '../components/button'
-
-export type SignUpViewProps = {
-  stepName?: (step: number, total: number) => ReactNode
-  stepTitle?: (step: number, total: number) => ReactNode
-
-  links?: LinkDefinition[]
-  onSignUp: (data: {
-    username: string
-    password: string
-    extra?: Record<string, string>
-  }) => void | PromiseLike<void>
-  onBack?: () => void
-}
-
-export function SignUpView({
-  stepName = (step, total) => `Step ${step} of ${total}`,
-  stepTitle = (step, total) => {
-    switch (step) {
-      case 1:
-        return 'Your account'
-      default:
-        return null
-    }
-  },
-
-  links,
-
-  onSignUp,
-  onBack,
-}: SignUpViewProps) {
-  const [_credentials, setCredentials] =
-    useState<null | SignUpAccountFormOutput>(null)
-  const [step, setStep] = useState<1 | 2>(1)
-
-  const stepCount = 2
-
-  const doSubmitAccount = useCallback(
-    (credentials: SignUpAccountFormOutput) => {
-      setCredentials(credentials)
-      setStep(2)
-    },
-    [onSignUp, setCredentials, setStep],
-  )
-
-  return (
-    <LayoutTitlePage
-      title="Create Account"
-      subtitle="We're so excited to have you join us!"
-    >
-      <div className="flex flex-col">
-        <p className="mt-4 text-slate-400 dark:text-slate-600">
-          {stepName(step, stepCount)}
-        </p>
-        <h2 className="font-medium text-xl mb-4">
-          {stepTitle(step, stepCount)}
-        </h2>
-
-        {step === 1 && (
-          <SignUpAccountForm
-            className="flex-grow"
-            onSubmit={doSubmitAccount}
-            onCancel={onBack}
-            cancelLabel="Back"
-          >
-            <SignUpDisclaimer links={links} />
-          </SignUpAccountForm>
-        )}
-
-        {step === 2 && <Button onClick={() => setStep(1)}>Back</Button>}
-
-        <HelpCard className="mb-4" links={links} />
-      </div>
-    </LayoutTitlePage>
-  )
-}

package/src/assets/app/views/welcome-view.tsx

@@ -1,54 +0,0 @@
-import { Button } from '../components/button'
-import { LayoutWelcome, LayoutWelcomeProps } from '../components/layout-welcome'
-
-export type WelcomeViewParams = LayoutWelcomeProps & {
-  onSignIn?: () => void
-  signInLabel?: string
-
-  onSignUp?: () => void
-  signUpLabel?: string
-
-  onCancel?: () => void
-  cancelLabel?: string
-}
-
-export function WelcomeView({
-  onSignUp,
-  signUpLabel = 'Create a new account',
-  onSignIn,
-  signInLabel = 'Sign in',
-  onCancel,
-  cancelLabel = 'Cancel',
-
-  ...props
-}: WelcomeViewParams) {
-  return (
-    <LayoutWelcome {...props}>
-      {onSignUp && (
-        <Button
-          className={'m-1 w-60 max-w-full'}
-          color={onSignIn ? 'brand' : undefined}
-          onClick={onSignUp}
-        >
-          {signUpLabel}
-        </Button>
-      )}
-
-      {onSignIn && (
-        <Button
-          className={'m-1 w-60 max-w-full'}
-          color={onSignUp ? undefined : 'brand'}
-          onClick={onSignIn}
-        >
-          {signInLabel}
-        </Button>
-      )}
-
-      {onCancel && (
-        <Button className="m-1 w-60 max-w-full" onClick={onCancel}>
-          {cancelLabel}
-        </Button>
-      )}
-    </LayoutWelcome>
-  )
-}

package/src/output/customization.ts

@@ -1,118 +0,0 @@
-// Matches colors defined in tailwind.config.js
-const colorNames = ['brand', 'error', 'warning'] as const
-type ColorName = (typeof colorNames)[number]
-const isColorName = (name: string): name is ColorName =>
-  (colorNames as readonly string[]).includes(name)
-
-export type Customization = {
-  name?: string
-  logo?: string
-  colors?: { [_ in ColorName]?: string }
-  links?: Array<{
-    href: string
-    title: string
-    rel?: string
-  }>
-}
-
-export function buildCustomizationData({
-  name,
-  logo,
-  links,
-}: Customization = {}) {
-  return {
-    name,
-    logo,
-    links,
-  }
-}
-
-export function buildCustomizationCss(customization?: Customization) {
-  const vars = Array.from(buildCustomizationVars(customization))
-  if (vars.length) return `:root { ${vars.join(' ')} }`
-
-  return ''
-}
-
-export function* buildCustomizationVars(customization?: Customization) {
-  if (customization?.colors) {
-    for (const [name, value] of Object.entries(customization.colors)) {
-      if (!isColorName(name)) {
-        throw new TypeError(`Invalid color name: ${name}`)
-      }
-
-      // Skip undefined values
-      if (value === undefined) continue
-
-      const { r, g, b, a } = parseColor(value)
-
-      // Tailwind does not apply alpha values to base colors
-      if (a !== undefined) throw new TypeError('Alpha not supported')
-
-      yield `--color-${name}: ${r} ${g} ${b};`
-    }
-  }
-}
-
-type RgbaColor = { r: number; g: number; b: number; a?: number }
-function parseColor(color: unknown): RgbaColor {
-  if (typeof color !== 'string') {
-    throw new TypeError(`Invalid color value: ${typeof color}`)
-  }
-
-  if (color.startsWith('#')) {
-    if (color.length === 4 || color.length === 5) {
-      const r = parseUi8Hex(color.slice(1, 2))
-      const g = parseUi8Hex(color.slice(2, 3))
-      const b = parseUi8Hex(color.slice(3, 4))
-      const a = color.length > 4 ? parseUi8Hex(color.slice(4, 5)) : undefined
-      return { r, g, b, a }
-    }
-
-    if (color.length === 7 || color.length === 9) {
-      const r = parseUi8Hex(color.slice(1, 3))
-      const g = parseUi8Hex(color.slice(3, 5))
-      const b = parseUi8Hex(color.slice(5, 7))
-      const a = color.length > 8 ? parseUi8Hex(color.slice(7, 9)) : undefined
-      return { r, g, b, a }
-    }
-
-    throw new TypeError(`Invalid hex color: ${color}`)
-  }
-
-  const rgbMatch = color.match(
-    /^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,
-  )
-  if (rgbMatch) {
-    const r = parseUi8Dec(rgbMatch[1])
-    const g = parseUi8Dec(rgbMatch[2])
-    const b = parseUi8Dec(rgbMatch[3])
-    return { r, g, b }
-  }
-
-  const rgbaMatch = color.match(
-    /^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,
-  )
-  if (rgbaMatch) {
-    const r = parseUi8Dec(rgbaMatch[1])
-    const g = parseUi8Dec(rgbaMatch[2])
-    const b = parseUi8Dec(rgbaMatch[3])
-    const a = parseUi8Dec(rgbaMatch[4])
-    return { r, g, b, a }
-  }
-
-  throw new TypeError(`Unsupported color format: ${color}`)
-}
-
-function parseUi8Hex(v: string) {
-  return asUi8(parseInt(v, 16))
-}
-
-function parseUi8Dec(v: string) {
-  return asUi8(parseInt(v, 10))
-}
-
-function asUi8(v: number) {
-  if (v >= 0 && v <= 255 && v === (v | 0)) return v
-  throw new TypeError(`Invalid color component: ${v}`)
-}