@atproto/oauth-provider-ui 0.0.2 → 0.1.0

package/lib/index.ts

@@ -1,72 +0,0 @@
-// This file allows exposing the result of the build of the `../src` folder as
-// assets that can be used from a backend service. Specifically, the assets map
-// bellow exposes both the asset items from their manifest, as well as a method
-// to get the stream data (as a Readable stream) of the asset.
-
-// When this library is used as a NodeJS dependency (typically from
-// node_modules), the assets will simply read on disk from the node_modules
-// directory. However, if this file is bundled (e.g. via rollup), the assets
-// need to be copied to the bundler's output directory for the code bellow to
-// work. Most bundlers support this (webpack, rollup, etc.) by re-writing `new
-// URL('./path', import.meta.url)` calls to point to the correct output
-// directory.
-
-// However, that syntax only works in ESM modules. Atproto uses CJS modules, so,
-// at the moment, the logic bellow is **not** compatible with bundlers. To allow
-// bundling this file as a CJS module, the code bellow should not be dependent
-// on reading the files on disk. This can be done by modifying the build system
-// to embed the asset bytes directly into the bundle-manifest.json (see the
-// `data` option of "@atproto-labs/rollup-plugin-bundle-manifest" in
-// rollup.config.js).
-
-// https://github.com/evanw/esbuild/issues/795
-// https://www.npmjs.com/package/@web/rollup-plugin-import-meta-assets
-
-// Note that the bundle-manifest -- being a JSON file -- can be imported
-// directly without any special handling. This is because both bundlers and
-// NodeJS, support JSON imports out of the box.
-
-import { createReadStream } from 'node:fs'
-import { join } from 'node:path'
-import { Readable } from 'node:stream'
-import type { ManifestItem } from '@atproto-labs/rollup-plugin-bundle-manifest'
-// @ts-expect-error: This file is generated at build time
-// eslint-disable-next-line import/no-unresolved
-import bundleManifest from '../assets/bundle-manifest.json'
-
-// @NOTE Not relying on ManifestItem to describe this type to avoid dependency
-// of built code on '@atproto-labs/rollup-plugin-bundle-manifest'.
-export type Asset =
-  | {
-      type: 'asset'
-      mime?: string
-      sha256: string
-      stream: () => Readable
-    }
-  | {
-      type: 'chunk'
-      mime: string
-      sha256: string
-      dynamicImports: string[]
-      isDynamicEntry: boolean
-      isEntry: boolean
-      isImplicitEntry: boolean
-      name: string
-      stream: () => Readable
-    }
-
-export const assets = new Map<string, Asset>(
-  Object.entries<ManifestItem>(bundleManifest).map(
-    ([filename, { data, ...item }]) => {
-      const buffer = data ? Buffer.from(data, 'base64') : null
-      const stream = buffer
-        ? () => Readable.from(buffer)
-        : () =>
-            // ESM version:
-            // createReadStream(new URL(`../assets/${filename}`, import.meta.url))
-            // CJS version:
-            createReadStream(join(__dirname, '..', 'assets', filename))
-      return [filename, { ...item, stream }]
-    },
-  ),
-)

package/rollup.config.js

@@ -1,102 +0,0 @@
-/* eslint-env node */
-
-const { default: commonjs } = require('@rollup/plugin-commonjs')
-const {
-  default: dynamicImportVars,
-} = require('@rollup/plugin-dynamic-import-vars')
-const { default: nodeResolve } = require('@rollup/plugin-node-resolve')
-const { default: swc } = require('@rollup/plugin-swc')
-const {
-  default: manifest,
-} = require('@atproto-labs/rollup-plugin-bundle-manifest')
-const postcss = ((m) => m.default || m)(require('rollup-plugin-postcss'))
-
-/**
- * @type {import('rollup').RollupOptionsFunction}
- */
-module.exports = (commandLineArguments) => {
-  const NODE_ENV =
-    process.env['NODE_ENV'] ??
-    (commandLineArguments.watch ? 'development' : 'production')
-
-  const devMode = NODE_ENV === 'development'
-
-  return {
-    input: [`src/authorization-page.tsx`, `src/error-page.tsx`],
-    output: {
-      manualChunks: undefined,
-      sourcemap: true,
-      dir: 'dist/assets',
-      format: 'module',
-      entryFileNames: devMode ? '[name]-[hash].js' : '[hash].js',
-    },
-    plugins: [
-      {
-        name: 'resolve-swc-helpers',
-        resolveId(src) {
-          // For some reason, "nodeResolve" doesn't resolve these:
-          if (src.startsWith('@swc/helpers/')) return require.resolve(src)
-        },
-      },
-      nodeResolve({
-        preferBuiltins: false,
-        browser: true,
-        exportConditions: ['browser', 'module', 'import', 'default'],
-      }),
-      commonjs(),
-      postcss({ config: true, extract: true, minimize: !devMode }),
-      swc({
-        swc: {
-          swcrc: false,
-          configFile: false,
-          sourceMaps: true,
-          minify: !devMode,
-          jsc: {
-            experimental: {
-              // @NOTE Because of the experimental nature of SWC plugins, A
-              // very particular version of @swc/core needs to be used. The
-              // link below allows to determine with version of @swc/core is
-              // compatible based on the version of @lingui/swc-plugin used
-              // (click on the swc_core version in the right column to see
-              // which version of the @swc/core is compatible)
-              //
-              // https://github.com/lingui/swc-plugin?tab=readme-ov-file#compatibility
-              plugins: [['@lingui/swc-plugin', {}]],
-            },
-            minify: {
-              compress: true,
-              mangle: true,
-            },
-            externalHelpers: true,
-            target: 'es2020',
-            parser: { syntax: 'typescript', tsx: true },
-            transform: {
-              useDefineForClassFields: true,
-              react: { runtime: 'automatic' },
-              optimizer: {
-                simplify: true,
-                globals: {
-                  vars: {
-                    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
-                  },
-                },
-              },
-            },
-          },
-        },
-      }),
-      dynamicImportVars({ errorWhenNoFilesFound: true }),
-
-      // Change `data` to `true` to include assets data in the manifest,
-      // allowing for easier bundling of the backend code (eg. using esbuild) as
-      // bundlers know how to bundle JSON files but not how to bundle assets
-      // referenced at runtime.
-      manifest({ data: false }),
-    ],
-    onwarn(warning, warn) {
-      // 'use client' directives are fine
-      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return
-      warn(warning)
-    },
-  }
-}

package/src/backend-data.ts

@@ -1,35 +0,0 @@
-import type {
-  AuthorizeData,
-  AvailableLocales,
-  CustomizationData,
-  ErrorData,
-} from '@atproto/oauth-provider-api'
-
-function readBackendData<T>(key: string, required: true): T
-function readBackendData<T>(key: string, requires?: false): T | undefined
-function readBackendData<T>(key: string, required = false): T | undefined {
-  const value = window[key] as T | undefined
-  delete window[key] // Prevent accidental usage / potential leaks to dependencies
-  if (required && value === undefined) {
-    throw new TypeError(`Backend data "${key}" is missing`)
-  }
-  return value
-}
-
-// These values are injected by the backend when it builds the
-// page HTML. See "declareBackendData()" in the backend.
-
-/** @deprecated Do not import directly. Only import this from main.tsx */
-export const availableLocales = readBackendData<AvailableLocales>(
-  '__availableLocales',
-  true,
-)
-/** @deprecated Do not import directly. Only import this from main.tsx */
-export const customizationData = readBackendData<CustomizationData>(
-  '__customizationData',
-  true,
-)
-/** @deprecated Do not import directly. Only import this from main.tsx */
-export const errorData = readBackendData<ErrorData>('__errorData')
-/** @deprecated Do not import directly. Only import this from main.tsx */
-export const authorizeData = readBackendData<AuthorizeData>('__authorizeData')

package/src/hooks/use-csrf-token.ts

@@ -1,5 +0,0 @@
-import { cookies } from '../cookies.ts'
-
-export function useCsrfToken(cookieName: string) {
-  return cookies[cookieName]
-}

package/src/lib/backend-data.ts

@@ -1,6 +0,0 @@
-export function readBackendData<T>(key: string): T {
-  const value = window[key] as T | undefined
-  delete window[key] // Prevent accidental usage / potential leaks to dependencies
-  if (value !== undefined) return value
-  throw new TypeError(`Backend data "${key}" is missing`)
-}

package/src/lib/clsx.ts

@@ -1,6 +0,0 @@
-type ClsxArg = string | false | undefined
-
-export function clsx(...args: [ClsxArg, ...ClsxArg[]]): string | undefined {
-  const filtered = args.filter(Boolean) as string[]
-  return filtered.length > 0 ? filtered.join(' ') : undefined
-}

package/src/locales/locale-context.ts

@@ -1,19 +0,0 @@
-import { createContext, useContext } from 'react'
-// @NOTE run "pnpm run po:compile" to compile the messages from the PO files
-import { KnownLocale } from './locales.ts'
-
-export type LocaleContextValue = {
-  locale: string
-  locales: Partial<Record<KnownLocale, { name: string; flag?: string }>>
-  setLocale: (locale: KnownLocale) => void
-}
-
-export const LocaleContext = createContext<LocaleContextValue | null>(null)
-
-export function useLocaleContext(): LocaleContextValue {
-  const context = useContext(LocaleContext)
-  if (!context) {
-    throw new Error('useLocaleContext must be used within a LocaleProvider')
-  }
-  return context
-}

package/src/styles.css

@@ -1,33 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/*
- * These are the default branding variables for the oauth authorization page.
- * The colors below are in the R G B format, with values ranging from 0 to 255.
- *
- * The variables defined here are typically overridden by the backend, based on
- * the provided branding colors configuration, if any, by injecting a <style>
- * tag into the head of the document. Any missing color from the branding config
- * will result in the values defined here to be used.
- *
- * The variables suffixed with "-c" are the contrasting colors for the
- * corresponding color name. The backend will automatically compute & inject
- * those values for defined branding configuration colors.
- *
- * The colors names used here match those defined in tailwind.config.js,
- * allowing to use these color names with tailwind classes (e.g. `bg-brand
- * text-brand-c`).
- */
-@layer base {
-  :root {
-    --color-brand: 255 115 179;
-    --color-brand-c: 0 0 0;
-    --color-error: 218 44 67;
-    --color-error-c: 255 255 255;
-    --color-warning: 255 201 73;
-    --color-warning-c: 0 0 0;
-    --color-success: 0 191 165;
-    --color-success-c: 255 255 255;
-  }
-}

package/tailwind.config.js

@@ -1,31 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    fontFamily: {
-      sans: [
-        '-apple-system',
-        'BlinkMacSystemFont',
-        '"Segoe UI"',
-        'Roboto',
-        'Helvetica',
-        'Arial',
-        'sans-serif',
-      ],
-      mono: ['Monaco', 'mono'],
-    },
-    extend: {
-      colors: {
-        brand: 'rgb(var(--color-brand) / <alpha-value>)',
-        'brand-c': 'rgb(var(--color-brand-c) / <alpha-value>)',
-        error: 'rgb(var(--color-error) / <alpha-value>)',
-        'error-c': 'rgb(var(--color-error-c) / <alpha-value>)',
-        warning: 'rgb(var(--color-warning) / <alpha-value>)',
-        'warning-c': 'rgb(var(--color-warning-c) / <alpha-value>)',
-        success: 'rgb(var(--color-success) / <alpha-value>)',
-        'success-c': 'rgb(var(--color-success-c) / <alpha-value>)',
-      },
-    },
-  },
-  plugins: [],
-}

package/tsconfig.backend.json

@@ -1,8 +0,0 @@
-{
-  "extends": ["../../../tsconfig/nodenext.json"],
-  "compilerOptions": {
-    "outDir": "dist/lib",
-    "rootDir": "lib"
-  },
-  "include": ["lib/**/*.ts"]
-}

package/tsconfig.frontend.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/backend-data.ts","./src/cookies.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-csrf-token.ts","./src/hooks/use-random-string.ts","./src/hooks/use-stepper.ts","./src/lib/api.ts","./src/lib/backend-data.ts","./src/lib/clsx.ts","./src/lib/json-client.ts","./src/lib/password.ts","./src/lib/ref.ts","./src/lib/util.ts","./src/locales/load.ts","./src/locales/locale-context.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.6.3"}