@atproto/oauth-provider-ui 0.1.0 → 0.1.1

package/src/components/utils/link-title.tsx

@@ -1,26 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import type { LinkDefinition } from '@atproto/oauth-provider-api'
-import { MultiLangString } from './multi-lang-string.tsx'
-
-export type LinkNameProps = {
-  link: LinkDefinition
-}
-
-export function LinkTitle({ link }: LinkNameProps) {
-  return (
-    <MultiLangString
-      value={link.title}
-      fallback={
-        link.rel === 'canonical' ? (
-          <Trans>Home</Trans>
-        ) : link.rel === 'privacy-policy' ? (
-          <Trans>Privacy Policy</Trans>
-        ) : link.rel === 'terms-of-service' ? (
-          <Trans>Terms of Service</Trans>
-        ) : link.rel === 'help' ? (
-          <Trans>Support</Trans>
-        ) : undefined
-      }
-    />
-  )
-}

package/src/components/utils/multi-lang-string.tsx

@@ -1,62 +0,0 @@
-import { useLingui } from '@lingui/react/macro'
-import { ReactNode, useMemo } from 'react'
-import type { LocalizedString } from '@atproto/oauth-provider-api'
-
-export type MultiLangStringProps = {
-  value: LocalizedString
-  fallback?: ReactNode
-}
-
-export function MultiLangString({
-  value,
-  fallback,
-}: MultiLangStringProps): ReactNode {
-  const matchingString = useMatchingString(value)
-  return (
-    matchingString ?? fallback ?? (typeof value === 'string' ? value : value.en)
-  )
-}
-
-function useMatchingString(value: LocalizedString) {
-  const { i18n } = useLingui()
-  return useMemo(
-    () => findMatchingString(value, i18n.locale),
-    [value, i18n.locale],
-  )
-}
-
-/**
- * Only returns a string if it matches the desired locale.
- */
-function findMatchingString(
-  value: LocalizedString,
-  locale: string,
-): string | undefined {
-  switch (typeof value) {
-    case 'string':
-      // By convention, string values are in english
-      if (locale === 'en' || locale.startsWith('en-')) return value
-      break
-
-    case 'object': {
-      // Exact match
-      const localeMatch = value[locale]
-      if (typeof localeMatch === 'string') return localeMatch
-
-      // Fallback to language match  (e.g. "fr-BE" -> "fr")
-      const lang = locale.split('-')[0]
-      const langMatch = value[lang]
-      if (typeof langMatch === 'string') return langMatch
-
-      // Fallback to any locale from same language (e.g. "pt-PT" -> "pt-BR")
-      for (const k in value) {
-        if (k.startsWith(`${lang}-`)) {
-          const fallbackMatch = value[k]
-          if (typeof fallbackMatch === 'string') return fallbackMatch
-        }
-      }
-    }
-  }
-
-  return undefined
-}

package/src/components/utils/password-strength-label.tsx

@@ -1,37 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { JSX } from 'react'
-import { PasswordStrength, getPasswordStrength } from '../../lib/password.ts'
-import { Override } from '../../lib/util.ts'
-
-export type PasswordStrengthLabelProps = Override<
-  Omit<JSX.IntrinsicElements['span'], 'children' | 'aria-label'>,
-  {
-    password: string
-  }
->
-
-export function PasswordStrengthLabel({
-  password,
-
-  // span
-  ...props
-}: PasswordStrengthLabelProps) {
-  const { t } = useLingui()
-  const strength = getPasswordStrength(password)
-
-  return (
-    <span {...props} aria-label={t`Password strength`}>
-      {strength === PasswordStrength.extra ? (
-        <Trans>Extra</Trans>
-      ) : strength === PasswordStrength.strong ? (
-        <Trans>Strong</Trans>
-      ) : strength === PasswordStrength.moderate ? (
-        <Trans>Moderate</Trans>
-      ) : password ? (
-        <Trans>Weak</Trans>
-      ) : (
-        <Trans>Missing</Trans>
-      )}
-    </span>
-  )
-}

package/src/components/utils/password-strength-meter.tsx

@@ -1,58 +0,0 @@
-import { useLingui } from '@lingui/react/macro'
-import { clsx } from 'clsx'
-import { JSX } from 'react'
-import { PasswordStrength, getPasswordStrength } from '../../lib/password.ts'
-import { Override } from '../../lib/util.ts'
-
-export type PasswordStrengthMeterProps = Override<
-  Omit<
-    JSX.IntrinsicElements['div'],
-    | 'children'
-    | 'role'
-    | 'aria-label'
-    | 'aria-valuemin'
-    | 'aria-valuemax'
-    | 'aria-valuenow'
-  >,
-  {
-    password: string
-  }
->
-
-export function PasswordStrengthMeter({
-  password,
-
-  // div
-  className,
-  ...props
-}: PasswordStrengthMeterProps) {
-  const { t } = useLingui()
-  const strength = password ? getPasswordStrength(password) : 0
-
-  const colorBg = 'bg-gray-300 dark:bg-slate-500'
-  const color =
-    strength === PasswordStrength.extra || strength === PasswordStrength.strong
-      ? 'bg-success'
-      : strength === PasswordStrength.moderate
-        ? 'bg-warning'
-        : 'bg-error'
-
-  return (
-    <div
-      {...props}
-      className={clsx('flex h-1 w-full space-x-2', className)}
-      role="meter"
-      aria-label={t`Password strength indicator`}
-      aria-valuemin={0}
-      aria-valuemax={PasswordStrength.extra}
-      aria-valuenow={strength}
-    >
-      {Array.from({ length: 4 }, (_, i) => (
-        <div
-          key={i}
-          className={`h-1 w-1/4 rounded-sm ${strength > i ? color : colorBg}`}
-        />
-      ))}
-    </div>
-  )
-}

package/src/components/utils/url-viewer.tsx

@@ -1,73 +0,0 @@
-import { JSX, useMemo } from 'react'
-import { Override } from '../../lib/util.ts'
-
-export type UrlPartRenderingOptions = {
-  faded?: boolean
-  bold?: boolean
-}
-
-export type UrlRendererProps = {
-  url: string | URL
-  proto?: boolean | UrlPartRenderingOptions
-  host?: boolean | UrlPartRenderingOptions
-  path?: boolean | UrlPartRenderingOptions
-  query?: boolean | UrlPartRenderingOptions
-  hash?: boolean | UrlPartRenderingOptions
-  as?: string
-}
-
-export function UrlViewer<As extends keyof JSX.IntrinsicElements = 'span'>({
-  url,
-  proto = false,
-  host = true,
-  path = false,
-  query = false,
-  hash = false,
-  as: As = 'span',
-
-  // Element
-  ...props
-}: Override<JSX.IntrinsicElements[As], UrlRendererProps>) {
-  const urlObj = useMemo(() => (url instanceof URL ? url : new URL(url)), [url])
-
-  return (
-    <As {...props}>
-      {proto && (
-        <UrlPartViewer
-          value={`${urlObj.protocol}//`}
-          {...(proto === true ? null : proto)}
-        />
-      )}
-      {host && (
-        <UrlPartViewer
-          value={urlObj.host}
-          {...(host === true ? { faded: false, bold: true } : host)}
-        />
-      )}
-      {path && (
-        <UrlPartViewer
-          value={urlObj.pathname}
-          {...(path === true ? null : path)}
-        />
-      )}
-      {query && (
-        <UrlPartViewer
-          value={urlObj.search}
-          {...(query === true ? null : query)}
-        />
-      )}
-      {hash && (
-        <UrlPartViewer value={urlObj.hash} {...(hash === true ? null : hash)} />
-      )}
-    </As>
-  )
-}
-
-function UrlPartViewer({
-  value,
-  faded = true,
-  bold = false,
-}: { value: string } & UrlPartRenderingOptions) {
-  const Comp = bold ? 'b' : 'span'
-  return <Comp className={faded ? 'opacity-50' : ''}>{value}</Comp>
-}

package/src/error-page.tsx

@@ -1,23 +0,0 @@
-import './style.css'
-
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import type { HydrationData } from './hydration-data.d.ts'
-import { LocaleProvider } from './locales/locale-provider.tsx'
-import { ErrorView } from './views/error/error-view.tsx'
-
-const {
-  //
-  __errorData: errorData,
-  __customizationData: customizationData,
-} = window as typeof window & HydrationData['error-page']
-
-const container = document.getElementById('root')!
-
-createRoot(container).render(
-  <StrictMode>
-    <LocaleProvider>
-      <ErrorView error={errorData} customizationData={customizationData} />
-    </LocaleProvider>
-  </StrictMode>,
-)

package/src/hooks/use-api.ts

@@ -1,202 +0,0 @@
-import { useLingui } from '@lingui/react/macro'
-import { useCallback, useState } from 'react'
-import { useErrorBoundary } from 'react-error-boundary'
-import type {
-  Account,
-  ConfirmResetPasswordInput,
-  InitiatePasswordResetInput,
-  Session,
-  SignInInput,
-  SignUpInput,
-  VerifyHandleAvailabilityInput,
-} from '@atproto/oauth-provider-api'
-import { Api, UnknownRequestUriError } from '../lib/api.ts'
-import { upsert } from '../lib/util.ts'
-
-/**
- * Any function wrapped with this helper will automatically show the error
- * boundary when an `UnknownRequestUriError` is thrown. This typically happens
- * in development, or if the user left its browser session open for a (very)
- * long time.
- *
- * @note Requires an error boundary to be present in the component tree.
- */
-function useSafeCallback<F extends (...a: any) => any>(fn: F, deps: unknown[]) {
-  const { showBoundary } = useErrorBoundary<UnknownRequestUriError>()
-
-  return useCallback(
-    async (...args: Parameters<F>): Promise<Awaited<ReturnType<F>>> => {
-      try {
-        return await fn(...args)
-      } catch (error) {
-        if (error instanceof UnknownRequestUriError) showBoundary(error)
-        throw error
-      }
-    },
-    deps.concat(showBoundary),
-  )
-}
-
-export type SessionWithToken = Session & {
-  ephemeralToken?: string
-}
-
-export function useApi({
-  sessions: sessionsInit = [],
-  onRedirected,
-}: {
-  sessions?: readonly Session[]
-  onRedirected?: () => void
-}) {
-  const [api] = useState(() => new Api())
-  const [sessions, setSessions] =
-    useState<readonly SessionWithToken[]>(sessionsInit)
-
-  const { i18n } = useLingui()
-  const { locale } = i18n
-
-  const selectSub = useCallback(
-    (sub: string | null) => {
-      setSessions((sessions) =>
-        sub === (sessions.find((s) => s.selected)?.account.sub || null)
-          ? sessions
-          : sessions.map((s) => ({ ...s, selected: s.account.sub === sub })),
-      )
-    },
-    [setSessions],
-  )
-
-  const upsertSession = useCallback(
-    ({
-      account,
-      ephemeralToken,
-      // The server will tell us if the user needs to consent to the
-      // authorization. Defaults to true in case of sign-ups
-      consentRequired = true,
-      // When a new session is inserted, assume that the user intends to use
-      // it, and therefore, it is selected by default.
-      selected = true,
-      // When a new session is inserted, it is assumed that the user just
-      // created the session, and therefore, login is not required.
-      loginRequired = false,
-    }: { account: Account } & Partial<SessionWithToken>) => {
-      const session: SessionWithToken = {
-        account,
-        ephemeralToken,
-        selected,
-        loginRequired,
-        consentRequired,
-      }
-
-      setSessions((sessions) =>
-        upsert(sessions, session, (s) => s.account.sub === account.sub).map(
-          // Make sure to de-select any other selected session (if selected is
-          // true)
-          (s) =>
-            !selected || s === session || !s.selected
-              ? s
-              : { ...s, selected: false },
-        ),
-      )
-    },
-    [setSessions],
-  )
-
-  const performRedirect = useCallback(
-    (url: string | URL) => {
-      // @TODO At this point, the request cannot be accepted/rejected anymore.
-      // We should probably change the app's state to something that indicates
-      // that in order to improve UX in case the user comes back to the app.
-      // This is currently ensured by the backend (through back-forward cache
-      // busting) but handling it here would provide a better UX.
-
-      window.location.href = String(url)
-      if (onRedirected) setTimeout(onRedirected)
-    },
-    [onRedirected],
-  )
-
-  const doSignIn = useSafeCallback(
-    async (data: Omit<SignInInput, 'locale'>, signal?: AbortSignal) => {
-      const response = await api.fetch(
-        'POST',
-        '/sign-in',
-        { ...data, locale },
-        { signal },
-      )
-      upsertSession(response)
-    },
-    [api, locale, upsertSession],
-  )
-
-  const doInitiatePasswordReset = useSafeCallback(
-    async (
-      data: Omit<InitiatePasswordResetInput, 'locale'>,
-      signal?: AbortSignal,
-    ) => {
-      await api.fetch(
-        'POST',
-        '/reset-password-request',
-        { ...data, locale },
-        { signal },
-      )
-    },
-    [api, locale],
-  )
-
-  const doConfirmResetPassword = useSafeCallback(
-    async (data: ConfirmResetPasswordInput, signal?: AbortSignal) => {
-      await api.fetch('POST', '/reset-password-confirm', data, { signal })
-    },
-    [api],
-  )
-
-  const doValidateNewHandle = useSafeCallback(
-    async (data: VerifyHandleAvailabilityInput, signal?: AbortSignal) => {
-      await api.fetch('POST', '/verify-handle-availability', data, { signal })
-    },
-    [api],
-  )
-
-  const doSignUp = useSafeCallback(
-    async (data: Omit<SignUpInput, 'locale'>, signal?: AbortSignal) => {
-      const response = await api.fetch(
-        'POST',
-        '/sign-up',
-        { ...data, locale },
-        { signal },
-      )
-      upsertSession(response)
-    },
-    [api, locale, upsertSession],
-  )
-
-  const doAccept = useSafeCallback(
-    async (sub: string) => {
-      // If "remember me" was unchecked, we need to use the ephemeral token to
-      // authenticate the request.
-      const bearer = sessions.find((s) => s.account.sub === sub)?.ephemeralToken
-      const { url } = await api.fetch('POST', '/accept', { sub }, { bearer })
-      performRedirect(url)
-    },
-    [api, sessions, performRedirect],
-  )
-
-  const doReject = useSafeCallback(async () => {
-    const { url } = await api.fetch('POST', '/reject', {})
-    performRedirect(url)
-  }, [api, performRedirect])
-
-  return {
-    sessions,
-    selectSub,
-
-    doSignIn,
-    doInitiatePasswordReset,
-    doConfirmResetPassword,
-    doValidateNewHandle,
-    doSignUp,
-    doAccept,
-    doReject,
-  }
-}

package/src/hooks/use-async-action.ts

@@ -1,120 +0,0 @@
-import {
-  ForwardedRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-
-export type AsyncActionController = {
-  reset: () => void
-}
-
-export type UseAsyncActionOptions = {
-  ref?: ForwardedRef<AsyncActionController>
-  onLoading?: (loading: boolean) => void
-  onError?: (error: Error | undefined) => void
-}
-
-export function useAsyncAction(
-  fn: (signal: AbortSignal) => void | PromiseLike<void>,
-  { ref, onLoading, onError }: UseAsyncActionOptions = {},
-) {
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<Error | undefined>()
-
-  const doSetError = useCallback(
-    (error: Error | undefined) => {
-      setError(error)
-      onError?.(error)
-    },
-    [onError],
-  )
-
-  const doSetLoading = useCallback(
-    (loading: boolean) => {
-      setLoading(loading)
-      onLoading?.(loading)
-    },
-    [onLoading],
-  )
-
-  const controllerRef = useRef<AbortController>(null)
-
-  const resetRef = useRef<() => void>(null)
-  useEffect(() => {
-    resetRef.current = () => {
-      controllerRef.current?.abort()
-      controllerRef.current = null
-      doSetError(undefined)
-      doSetLoading(false)
-    }
-    return () => {
-      resetRef.current = null
-    }
-  }, [doSetError, doSetLoading])
-
-  useImperativeHandle(
-    ref,
-    (): AsyncActionController => ({
-      reset: () => resetRef.current?.(),
-    }),
-    [],
-  )
-
-  // Cancel pending action when unmounted
-  useEffect(() => {
-    return () => {
-      controllerRef.current?.abort()
-      controllerRef.current = null
-    }
-  }, [])
-
-  const run = useCallback(async (): Promise<void> => {
-    // Cancel previous run
-    controllerRef.current?.abort()
-
-    doSetLoading(true)
-    doSetError(undefined)
-
-    const controller = new AbortController()
-    const { signal } = controller
-
-    controllerRef.current = controller
-
-    try {
-      await fn(signal)
-    } catch (err) {
-      if (controller === controllerRef.current) {
-        doSetError(err instanceof Error ? err : new Error(String(err)))
-      } else {
-        if (!isAbortReason(signal, err)) {
-          console.warn('Async action error after abort', err)
-        }
-      }
-    } finally {
-      if (controller === controllerRef.current) {
-        controllerRef.current = null
-        doSetLoading(false)
-      }
-
-      controller.abort()
-    }
-  }, [fn, doSetLoading, doSetError])
-
-  return {
-    loading,
-    error,
-    run,
-  }
-}
-
-function isAbortReason(signal: AbortSignal, err: unknown): boolean {
-  return (
-    signal.aborted &&
-    (signal.reason === err ||
-      signal.reason === err?.['cause'] ||
-      (err instanceof DOMException && err.name === 'AbortError'))
-  )
-}

package/src/hooks/use-bound-dispatch.ts

@@ -1,5 +0,0 @@
-import { Dispatch, useCallback } from 'react'
-
-export function useBoundDispatch<A>(dispatch: Dispatch<A>, value: A) {
-  return useCallback(() => dispatch(value), [dispatch, value])
-}

package/src/hooks/use-browser-color-scheme.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const query =
-  typeof window === 'undefined'
-    ? null
-    : window.matchMedia('(prefers-color-scheme: dark)')
-
-export function useBrowserColorScheme() {
-  const [theme, setTheme] = useState<'light' | 'dark'>(
-    query?.matches ? 'dark' : 'light',
-  )
-
-  useEffect(() => {
-    if (!query) return
-
-    const listener = () => {
-      setTheme(query.matches ? 'dark' : 'light')
-    }
-
-    query.addEventListener('change', listener)
-
-    return () => {
-      query.removeEventListener('change', listener)
-    }
-
-    // @NOTE "query" is a global constant and does not need to be part of the
-    // array bellow:
-  }, [])
-
-  return theme
-}

package/src/hooks/use-random-string.ts

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
-export const LOWER = UPPER.toLowerCase() as Lowercase<typeof UPPER>
-export const DIGITS = '0123456789'
-
-export const ALPHANUMERIC = `${UPPER}${LOWER}${DIGITS}` as const
-
-export type UseRandomStringOptions = BuildRandomStringOptions & {
-  prefix?: string
-  suffix?: string
-}
-
-export function useRandomString(options?: UseRandomStringOptions) {
-  const [state, setState] = useState(() => buildRandomString(options))
-  useEffect(() => {
-    setState(buildRandomString(options))
-  }, [options?.length, options?.alphabet])
-
-  return `${options?.prefix ?? ''}${state}${options?.suffix ?? ''}`
-}
-
-type BuildRandomStringOptions = {
-  length?: number
-  alphabet?: string
-}
-
-function buildRandomString({
-  length = 16,
-  alphabet = ALPHANUMERIC,
-}: BuildRandomStringOptions = {}) {
-  return Array.from({ length }, () => getRandomCharFrom(alphabet)).join('')
-}
-
-function getRandomCharFrom(alphabet: string) {
-  return alphabet.charAt((Math.random() * alphabet.length) | 0)
-}