@atproto/oauth-provider-ui 0.1.0 → 0.1.1

package/src/views/authorize/sign-up/sign-up-hcaptcha-form.tsx

@@ -1,108 +0,0 @@
-import type HCaptcha from '@hcaptcha/react-hcaptcha'
-import {
-  ForwardedRef,
-  ReactNode,
-  lazy,
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
-import {
-  FormCardAsync,
-  FormCardAsyncProps,
-} from '../../../components/forms/form-card-async.tsx'
-import { useBrowserColorScheme } from '../../../hooks/use-browser-color-scheme.ts'
-import { mergeRefs } from '../../../lib/ref.ts'
-import { Override } from '../../../lib/util.ts'
-
-export type SignUpHcaptchaFormProps = Override<
-  Omit<
-    FormCardAsyncProps,
-    'append' | 'onSubmit' | 'submitLabel' | 'onCancel' | 'cancelLabel'
-  >,
-  {
-    siteKey: string
-
-    token?: string
-    onToken: (token: string, ekey: string) => void
-
-    prevLabel?: ReactNode
-    onPrev?: () => void
-
-    nextLabel?: ReactNode
-    onNext: (signal: AbortSignal) => void | PromiseLike<void>
-
-    ref?: ForwardedRef<HCaptcha>
-  }
->
-
-const HCaptchaLazy = lazy(() => import('@hcaptcha/react-hcaptcha'))
-
-export function SignUpHcaptchaForm({
-  siteKey,
-
-  token: tokenInit,
-  onToken,
-
-  prevLabel,
-  onPrev,
-
-  nextLabel,
-  onNext,
-
-  ref,
-
-  // FormCardProps
-  invalid,
-  children,
-  ...props
-}: SignUpHcaptchaFormProps) {
-  const captchaRef = useRef<HCaptcha>(null)
-  const theme = useBrowserColorScheme()
-  const [token, setToken] = useState<string | undefined>(tokenInit)
-
-  const onLoad = useCallback(() => {
-    // this reaches out to the hCaptcha JS API and runs the
-    // execute function on it. you can use other functions as
-    // documented here:
-    // https://docs.hcaptcha.com/configuration#jsapi
-    captchaRef.current?.execute()
-  }, [])
-
-  const onVerify = useCallback(
-    (token: string, ekey: string) => {
-      setToken(token)
-      onToken(token, ekey)
-    },
-    [onToken],
-  )
-
-  const doSubmit = useCallback(
-    (signal: AbortSignal) => {
-      if (token) return onNext(signal)
-      else if (captchaRef.current) captchaRef.current.execute()
-      else throw new Error('Unable to load hCaptcha')
-    },
-    [token, onNext],
-  )
-
-  return (
-    <FormCardAsync
-      {...props}
-      cancelLabel={prevLabel}
-      onCancel={onPrev}
-      submitLabel={nextLabel}
-      onSubmit={doSubmit}
-      append={children}
-      invalid={invalid || !token}
-    >
-      <HCaptchaLazy
-        theme={theme}
-        sitekey={siteKey}
-        onLoad={onLoad}
-        onVerify={onVerify}
-        ref={mergeRefs([ref, captchaRef])}
-      />
-    </FormCardAsync>
-  )
-}

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

@@ -1,158 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { useCallback, useState } from 'react'
-import type { CustomizationData } from '@atproto/oauth-provider-api'
-import { WizardCard } from '../../../components/forms/wizard-card.tsx'
-import {
-  LayoutTitlePage,
-  LayoutTitlePageProps,
-} from '../../../components/layouts/layout-title-page.tsx'
-import { HelpCard } from '../../../components/utils/help-card.tsx'
-import { Override } from '../../../lib/util.ts'
-import {
-  SignUpAccountForm,
-  SignUpAccountFormOutput,
-} from './sign-up-account-form.tsx'
-import { SignUpDisclaimer } from './sign-up-disclaimer.tsx'
-import { SignUpHandleForm } from './sign-up-handle-form.tsx'
-import { SignUpHcaptchaForm } from './sign-up-hcaptcha-form.tsx'
-
-export type SignUpViewProps = Override<
-  LayoutTitlePageProps,
-  {
-    customizationData?: CustomizationData
-
-    onBack?: () => void
-    onValidateNewHandle: (
-      data: { handle: string },
-      signal?: AbortSignal,
-    ) => void | PromiseLike<void>
-    onDone: (
-      data: SignUpAccountFormOutput & {
-        handle: string
-        hcaptchaToken?: string
-      },
-      signal?: AbortSignal,
-    ) => void | PromiseLike<void>
-  }
->
-
-export function SignUpView({
-  customizationData: {
-    availableUserDomains = [],
-    hcaptchaSiteKey = undefined,
-    inviteCodeRequired = true,
-    links,
-  } = {},
-
-  onValidateNewHandle,
-  onDone,
-  onBack,
-
-  // LayoutTitlePage
-  ...props
-}: SignUpViewProps) {
-  const { t } = useLingui()
-  const [credentials, setCredentials] = useState<
-    undefined | SignUpAccountFormOutput
-  >(undefined)
-  const [handle, setHandle] = useState<undefined | string>(undefined)
-  const [hcaptcha, setHcaptcha] = useState<undefined | string>(undefined)
-
-  /**
-   * "false" indicates that the hcaptcha token is invalid (required but not provided)
-   */
-  const hcaptchaToken = hcaptchaSiteKey == null ? undefined : hcaptcha || false
-
-  const doDone = useCallback(
-    (signal: AbortSignal) => {
-      if (credentials && handle && hcaptchaToken !== false) {
-        return onDone({ ...credentials, handle, hcaptchaToken }, signal)
-      }
-    },
-    [credentials, handle, hcaptchaToken, onDone],
-  )
-
-  return (
-    <LayoutTitlePage
-      {...props}
-      title={props.title ?? t`Create Account`}
-      subtitle={
-        props.subtitle ?? <Trans>We're so excited to have you join us!</Trans>
-      }
-    >
-      <WizardCard
-        doneLabel={<Trans>Sign up</Trans>}
-        onBack={onBack}
-        onDone={doDone}
-        steps={[
-          // We use the handle input first since the "onValidateNewHandle" check
-          // will make it less likely that the actual signup call will fail, and
-          // will result in a better user experience, especially if there is an
-          // issue with the email address (e.g. already in use).
-          {
-            invalid: !handle,
-            titleRender: () => <Trans>Choose a username</Trans>,
-            contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
-              <SignUpHandleForm
-                className="grow"
-                invalid={invalid}
-                domains={availableUserDomains}
-                handle={handle}
-                onHandle={setHandle}
-                prevLabel={prevLabel}
-                onPrev={prev}
-                nextLabel={nextLabel}
-                onNext={async (signal) => {
-                  if (handle) await onValidateNewHandle({ handle }, signal)
-                  if (!signal.aborted) return next(signal)
-                }}
-              >
-                <SignUpDisclaimer links={links} />
-              </SignUpHandleForm>
-            ),
-          },
-          {
-            invalid: !credentials,
-            titleRender: () => <Trans>Your account</Trans>,
-            contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
-              <SignUpAccountForm
-                className="grow"
-                invalid={invalid}
-                prevLabel={prevLabel}
-                onPrev={prev}
-                nextLabel={nextLabel}
-                onNext={next}
-                inviteCodeRequired={inviteCodeRequired}
-                credentials={credentials}
-                onCredentials={setCredentials}
-              >
-                <SignUpDisclaimer links={links} />
-              </SignUpAccountForm>
-            ),
-          },
-          hcaptchaSiteKey != null && {
-            invalid: hcaptchaToken === false,
-            titleRender: () => <Trans>Verify you are human</Trans>,
-            contentRender: ({ prev, prevLabel, next, nextLabel, invalid }) => (
-              <SignUpHcaptchaForm
-                className="grow"
-                invalid={invalid}
-                siteKey={hcaptchaSiteKey}
-                token={hcaptcha}
-                onToken={setHcaptcha}
-                prevLabel={prevLabel}
-                onPrev={prev}
-                nextLabel={nextLabel}
-                onNext={next}
-              >
-                <SignUpDisclaimer links={links} />
-              </SignUpHcaptchaForm>
-            ),
-          },
-        ]}
-      />
-
-      <HelpCard className="mt-4" links={links} />
-    </LayoutTitlePage>
-  )
-}

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

@@ -1,56 +0,0 @@
-import { Trans, useLingui } from '@lingui/react/macro'
-import { Button } from '../../../components/forms/button.tsx'
-import {
-  LayoutWelcome,
-  LayoutWelcomeProps,
-} from '../../../components/layouts/layout-welcome.tsx'
-import { Override } from '../../../lib/util.ts'
-
-export type WelcomeViewParams = Override<
-  LayoutWelcomeProps,
-  {
-    onSignIn?: () => void
-    onSignUp?: () => void
-    onCancel?: () => void
-  }
->
-
-export function WelcomeView({
-  onSignUp,
-  onSignIn,
-  onCancel,
-
-  // LayoutWelcome
-  ...props
-}: WelcomeViewParams) {
-  const { t } = useLingui()
-  return (
-    <LayoutWelcome {...props} title={props.title ?? t`Authenticate`}>
-      {onSignUp && (
-        <Button
-          className={'m-1 w-60 min-w-min max-w-full'}
-          color={onSignIn ? 'primary' : undefined}
-          onClick={onSignUp}
-        >
-          <Trans>Create a new account</Trans>
-        </Button>
-      )}
-
-      {onSignIn && (
-        <Button
-          className={'m-1 w-60 min-w-min max-w-full'}
-          color={onSignUp ? undefined : 'primary'}
-          onClick={onSignIn}
-        >
-          <Trans>Sign in</Trans>
-        </Button>
-      )}
-
-      {onCancel && (
-        <Button className="m-1 w-60 min-w-min max-w-full" onClick={onCancel}>
-          <Trans>Cancel</Trans>
-        </Button>
-      )}
-    </LayoutWelcome>
-  )
-}

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

@@ -1,31 +0,0 @@
-import { useLingui } from '@lingui/react/macro'
-import { memo } from 'react'
-import {
-  LayoutWelcome,
-  LayoutWelcomeProps,
-} from '../../components/layouts/layout-welcome.tsx'
-import { ErrorCard } from '../../components/utils/error-card.tsx'
-import { Override } from '../../lib/util.ts'
-
-export type ErrorViewProps = Override<
-  LayoutWelcomeProps,
-  {
-    error: unknown
-  }
->
-
-export const ErrorView = memo(function ErrorView({
-  error,
-
-  // LayoutWelcome
-  title,
-  ...props
-}: ErrorViewProps) {
-  const { t } = useLingui()
-
-  return (
-    <LayoutWelcome {...props} title={title ?? t`Error`}>
-      <ErrorCard error={error} />
-    </LayoutWelcome>
-  )
-})

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "include": [],
-  "references": [
-    { "path": "./tsconfig.src.json" },
-    { "path": "./tsconfig.tools.json" }
-  ]
-}

package/tsconfig.src.json

@@ -1,13 +0,0 @@
-{
-  "extends": [
-    "../../../tsconfig/browser.json",
-    "../../../tsconfig/bundler.json"
-  ],
-  "compilerOptions": {
-    "rootDir": "src",
-    "paths": {
-      "#/*": ["./src/*"]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
-}

package/tsconfig.src.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/hydration-data.d.ts","./src/hooks/use-api.ts","./src/hooks/use-async-action.ts","./src/hooks/use-bound-dispatch.ts","./src/hooks/use-browser-color-scheme.ts","./src/hooks/use-random-string.ts","./src/hooks/use-stepper.ts","./src/lib/api.ts","./src/lib/cookies.ts","./src/lib/json-client.ts","./src/lib/password.ts","./src/lib/ref.ts","./src/lib/util.ts","./src/locales/load.ts","./src/locales/locales.ts","./src/locales/an/messages.ts","./src/locales/ast/messages.ts","./src/locales/ca/messages.ts","./src/locales/da/messages.ts","./src/locales/de/messages.ts","./src/locales/el/messages.ts","./src/locales/en/messages.ts","./src/locales/en-GB/messages.ts","./src/locales/es/messages.ts","./src/locales/eu/messages.ts","./src/locales/fi/messages.ts","./src/locales/fr/messages.ts","./src/locales/ga/messages.ts","./src/locales/gl/messages.ts","./src/locales/hi/messages.ts","./src/locales/hu/messages.ts","./src/locales/ia/messages.ts","./src/locales/id/messages.ts","./src/locales/it/messages.ts","./src/locales/ja/messages.ts","./src/locales/km/messages.ts","./src/locales/ko/messages.ts","./src/locales/ne/messages.ts","./src/locales/nl/messages.ts","./src/locales/pl/messages.ts","./src/locales/pt-BR/messages.ts","./src/locales/ro/messages.ts","./src/locales/ru/messages.ts","./src/locales/sv/messages.ts","./src/locales/th/messages.ts","./src/locales/tr/messages.ts","./src/locales/uk/messages.ts","./src/locales/vi/messages.ts","./src/locales/zh-CN/messages.ts","./src/locales/zh-HK/messages.ts","./src/locales/zh-TW/messages.ts","./src/authorization-page.tsx","./src/error-page.tsx","./src/components/forms/button-toggle-visibility.tsx","./src/components/forms/button.tsx","./src/components/forms/fieldset.tsx","./src/components/forms/form-card-async.tsx","./src/components/forms/form-card.tsx","./src/components/forms/input-checkbox.tsx","./src/components/forms/input-container.tsx","./src/components/forms/input-email-address.tsx","./src/components/forms/input-new-password.tsx","./src/components/forms/input-password.tsx","./src/components/forms/input-text.tsx","./src/components/forms/input-token.tsx","./src/components/forms/wizard-card.tsx","./src/components/layouts/layout-title-page.tsx","./src/components/layouts/layout-welcome.tsx","./src/components/utils/account-identifier.tsx","./src/components/utils/account-image.tsx","./src/components/utils/admonition.tsx","./src/components/utils/client-name.tsx","./src/components/utils/error-card.tsx","./src/components/utils/error-message.tsx","./src/components/utils/help-card.tsx","./src/components/utils/icons.tsx","./src/components/utils/link-anchor.tsx","./src/components/utils/link-title.tsx","./src/components/utils/multi-lang-string.tsx","./src/components/utils/password-strength-label.tsx","./src/components/utils/password-strength-meter.tsx","./src/components/utils/url-viewer.tsx","./src/locales/locale-provider.tsx","./src/locales/locale-selector.tsx","./src/views/authorize/authorize-view.tsx","./src/views/authorize/accept/accept-form.tsx","./src/views/authorize/accept/accept-view.tsx","./src/views/authorize/reset-password/reset-password-confirm-form.tsx","./src/views/authorize/reset-password/reset-password-request-form.tsx","./src/views/authorize/reset-password/reset-password-view.tsx","./src/views/authorize/sign-in/sign-in-form.tsx","./src/views/authorize/sign-in/sign-in-picker.tsx","./src/views/authorize/sign-in/sign-in-view.tsx","./src/views/authorize/sign-up/sign-up-account-form.tsx","./src/views/authorize/sign-up/sign-up-disclaimer.tsx","./src/views/authorize/sign-up/sign-up-handle-form.tsx","./src/views/authorize/sign-up/sign-up-hcaptcha-form.tsx","./src/views/authorize/sign-up/sign-up-view.tsx","./src/views/authorize/welcome/welcome-view.tsx","./src/views/error/error-view.tsx"],"version":"5.8.2"}

package/tsconfig.tools.json

@@ -1,8 +0,0 @@
-{
-  "extends": ["../../../tsconfig/nodenext.json"],
-  "compilerOptions": {
-    "rootDir": ".",
-    "noEmit": true
-  },
-  "include": ["./*.js", "./*.cjs", "./*.mjs", "./*.ts", "./*.cts", "./*.mts"]
-}

package/tsconfig.tools.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./vite.config.mjs"],"version":"5.8.2"}

package/vite.config.mjs

@@ -1,47 +0,0 @@
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { lingui } from '@lingui/vite-plugin'
-import tailwindcss from '@tailwindcss/vite'
-import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
-import { bundleManifest } from '@atproto-labs/rollup-plugin-bundle-manifest'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      '#': resolve(__dirname, './src'),
-    },
-  },
-  plugins: [
-    react({
-      plugins: [['@lingui/swc-plugin', {}]],
-    }),
-    lingui(),
-    tailwindcss(),
-  ],
-  build: {
-    emptyOutDir: false,
-    outDir: './dist',
-    sourcemap: true,
-    rollupOptions: {
-      input: ['./src/authorization-page.tsx', './src/error-page.tsx'],
-      output: {
-        manualChunks: undefined,
-        format: 'module',
-        entryFileNames: '[name]-[hash].js',
-        chunkFileNames: '[name]-[hash].js',
-        assetFileNames: '[name]-[hash][extname]',
-      },
-      plugins: [bundleManifest()],
-    },
-    commonjsOptions: {
-      include: [/node_modules/, /oauth-provider-api/],
-    },
-  },
-  optimizeDeps: {
-    // Needed because this is a monorepo and it exposes CommonJS
-    include: ['@atproto/oauth-provider-api'],
-  },
-})