@atproto/oauth-provider 0.1.0 → 0.1.1

package/src/assets/app/components/account-picker.tsx

@@ -1,21 +1,30 @@
-import type { HTMLAttributes, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { Account } from '../backend-data'
-import { clsx } from '../lib/clsx'
+import { Override } from '../lib/util'
+import { Button } from './button'
+import { FormCard, FormCardProps } from './form-card'
+import { AtSymbolIcon } from './icons/at-symbol-icon'
+import { CaretRightIcon } from './icons/caret-right-icon'
+import { InputContainer } from './input-container'
+import { Fieldset } from './fieldset'
 
-export type AccountPickerProps = {
-  accounts: readonly Account[]
+export type AccountPickerProps = Override<
+  FormCardProps,
+  {
+    accounts: readonly Account[]
 
-  onAccount: (account: Account) => void
-  accountAria?: (account: Account) => string
+    onAccount: (account: Account) => void
+    accountAria?: (account: Account) => string
 
-  onOther?: () => void
-  otherLabel?: ReactNode
-  otherAria?: string
+    onOther?: () => void
+    otherLabel?: ReactNode
+    otherAria?: string
 
-  onBack?: () => void
-  backLabel?: ReactNode
-  backAria?: string
-}
+    onBack?: () => void
+    backLabel?: ReactNode
+    backAria?: string
+  }
+>
 
 export function AccountPicker({
   accounts,
@@ -24,85 +33,95 @@ export function AccountPicker({
   accountAria = (a) => `Sign in as ${a.name}`,
 
   onOther = undefined,
-  otherLabel = 'Other account',
+  otherLabel = 'Another account',
   otherAria = 'Login to account that is not listed',
 
   onBack,
   backAria,
   backLabel = backAria,
 
-  className,
-  ...attrs
-}: AccountPickerProps & HTMLAttributes<HTMLDivElement>) {
+  ...props
+}: AccountPickerProps) {
   return (
-    <div {...attrs} className={clsx('flex flex-col', className)}>
-      <p className="font-medium p-4">Sign in as...</p>
-
-      {accounts.map((account) => {
-        const [name, identifier] = [
-          account.name,
-          account.preferred_username,
-          account.email,
-          account.sub,
-        ].filter(Boolean) as [string, string?]
+    <FormCard
+      {...props}
+      cancel={
+        onBack && (
+          <Button onClick={onBack} aria-label={backAria}>
+            {backLabel}
+          </Button>
+        )
+      }
+    >
+      <Fieldset title="Sign in as...">
+        {accounts.map((account) => {
+          const [name, identifier] = [
+            account.name,
+            account.preferred_username,
+            account.email,
+            account.sub,
+          ].filter(Boolean) as [string, string?]
 
-        return (
-          <button
-            key={account.sub}
-            className="cursor-pointer text-start flex items-center justify-between py-2 px-6 border-t border-b -mb-px hover:bg-slate-100 border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900"
-            onClick={() => onAccount(account)}
-            role="button"
-            aria-label={accountAria(account)}
-          >
-            <div className="pr-2 flex items-center justify-start max-w-full overflow-hidden">
-              {account.picture && (
-                <img
-                  crossOrigin="anonymous"
-                  src={account.picture}
-                  alt={name}
-                  className="w-8 h-8 mr-2 rounded-full"
-                />
-              )}
-              <div className="min-w-0 my-2 flex-auto truncate">
-                <span className="font-semibold">{name}</span>
+          return (
+            <InputContainer
+              key={account.sub}
+              onClick={() => onAccount(account)}
+              role="button"
+              aria-label={accountAria(account)}
+              icon={
+                account.picture ? (
+                  <img
+                    crossOrigin="anonymous"
+                    src={account.picture}
+                    alt={name}
+                    className="-ml-1 w-6 h-6 rounded-full"
+                  />
+                ) : (
+                  <svg
+                    className="-ml-1 w-6 h-6"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="none"
+                  >
+                    <circle cx="12" cy="12" r="12" fill="#0070ff"></circle>
+                    <circle cx="12" cy="9.5" r="3.5" fill="#fff"></circle>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      fill="#fff"
+                      d="M 12.058 22.784 C 9.422 22.784 7.007 21.836 5.137 20.262 C 5.667 17.988 8.534 16.25 11.99 16.25 C 15.494 16.25 18.391 18.036 18.864 20.357 C 17.01 21.874 14.64 22.784 12.058 22.784 Z"
+                    ></path>
+                  </svg>
+                )
+              }
+              append={<CaretRightIcon className="h-4" />}
+            >
+              <span className="flex flex-wrap items-center">
+                <span className="font-medium truncate mr-2">{name}</span>
                 {identifier && (
-                  <span className="ml-2 text-sm text-neutral-500 dark:text-neutral-400">
+                  <span className="text-sm text-neutral-500 dark:text-neutral-400 truncate">
                     {identifier}
                   </span>
                 )}
-              </div>
-            </div>
-            <span className="scale-x-50 font-semibold text-xl">&gt;</span>
-          </button>
-        )
-      })}
-      {onOther && (
-        <button
-          className="cursor-pointer text-start flex items-center justify-between py-2 px-6 border-t border-b hover:bg-slate-100 border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900"
-          onClick={onOther}
-          aria-label={otherAria}
-          role="button"
-        >
-          <div className="min-w-0 my-2 flex-auto truncate">{otherLabel}</div>
-
-          <span className="scale-x-50 font-semibold text-xl">&gt;</span>
-        </button>
-      )}
-
-      <div className="flex-auto" />
+              </span>
+            </InputContainer>
+          )
+        })}
 
-      {onBack && (
-        <div className="p-4 flex flex-wrap items-center justify-between">
-          <button
-            type="button"
-            onClick={() => onBack()}
-            className="py-2 bg-transparent text-primary rounded-md font-light"
-            aria-label={backAria}
+        {onOther && (
+          <InputContainer
+            onClick={onOther}
+            aria-label={otherAria}
+            role="button"
+            append={<CaretRightIcon className="h-4" />}
+            icon={<AtSymbolIcon className="h-4" />}
           >
-            {backLabel}
-          </button>
-        </div>
-      )}
-    </div>
+            <span className="truncate text-gray-700 dark:text-gray-400">
+              {otherLabel}
+            </span>
+          </InputContainer>
+        )}
+      </Fieldset>
+    </FormCard>
   )
 }

package/src/assets/app/components/button.tsx

@@ -0,0 +1,34 @@
+import { ButtonHTMLAttributes } from 'react'
+import { clsx } from '../lib/clsx'
+
+export function Button({
+  children,
+  className,
+  type = 'button',
+  role = 'Button',
+  color = 'grey',
+  disabled = false,
+  loading = undefined,
+  ...props
+}: {
+  color?: 'brand' | 'grey'
+  loading?: boolean
+} & ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      role={role}
+      type={type}
+      disabled={disabled || loading === true}
+      {...props}
+      className={clsx(
+        'py-2 px-6 rounded-lg truncate cursor-pointer touch-manipulation tracking-wide overflow-hidden',
+        color === 'brand'
+          ? 'bg-brand text-white'
+          : 'bg-slate-100 hover:bg-slate-200 text-slate-600 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-300',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}

package/src/assets/app/components/client-identifier.tsx

@@ -1,4 +1,8 @@
-import { OAuthClientMetadata } from '@atproto/oauth-types'
+import {
+  isOAuthClientIdDiscoverable,
+  isOAuthClientIdLoopback,
+  OAuthClientMetadata,
+} from '@atproto/oauth-types'
 import { HTMLAttributes } from 'react'
 
 import { UrlViewer } from './url-viewer'
@@ -15,18 +19,13 @@ export function ClientIdentifier({
   as: As = 'span',
   ...attrs
 }: ClientIdentifierProps & HTMLAttributes<Element>) {
-  if (clientMetadata.client_uri) {
-    return (
-      <UrlViewer
-        as={As}
-        {...attrs}
-        url={clientMetadata.client_uri}
-        proto
-        path
-      />
-    )
+  if (isOAuthClientIdLoopback(clientId)) {
+    return <As {...attrs}>An application on your device</As>
   }
 
-  // Fallback to the client ID
-  return <As {...attrs}>{clientId}</As>
+  if (isOAuthClientIdDiscoverable(clientId)) {
+    return <UrlViewer as={As} {...attrs} url={clientId} proto path />
+  }
+
+  return <As {...attrs}>{clientMetadata.client_name || clientId}</As>
 }

package/src/assets/app/components/fieldset.tsx

@@ -0,0 +1,26 @@
+import { FieldsetHTMLAttributes, forwardRef, ReactNode } from 'react'
+import { Override } from '../lib/util'
+
+export type FieldsetCardProps = Override<
+  FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  {
+    title?: ReactNode
+  }
+>
+
+export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetCardProps>(
+  ({ title, children, ...props }, ref) => (
+    <fieldset ref={ref} {...props}>
+      {title && (
+        <p
+          key="title"
+          className="mb-1 text-slate-600 dark:text-slate-400 text-sm font-medium"
+        >
+          {title}
+        </p>
+      )}
+
+      <div className="flex flex-col space-y-4">{children}</div>
+    </fieldset>
+  ),
+)

package/src/assets/app/components/form-card.tsx

@@ -0,0 +1,47 @@
+import { FormHTMLAttributes, forwardRef, ReactNode } from 'react'
+import { InfoCard } from './info-card'
+import { clsx } from '../lib/clsx'
+import { Override } from '../lib/util'
+
+export type FormCardProps = Override<
+  FormHTMLAttributes<HTMLFormElement>,
+  {
+    append?: ReactNode
+    error?: ReactNode
+    cancel?: ReactNode
+    actions?: ReactNode
+  }
+>
+
+export const FormCard = forwardRef<HTMLFormElement, FormCardProps>(
+  ({ actions, cancel, append, className, children, error, ...props }, ref) => {
+    return (
+      <form
+        ref={ref}
+        className={clsx('flex flex-col py-4 space-y-4', className)}
+        {...props}
+      >
+        <div className="space-y-4">{children}</div>
+
+        {append && <div key="append">{append}</div>}
+
+        {error && (
+          <InfoCard key="error" role="alert">
+            {error}
+          </InfoCard>
+        )}
+
+        {(actions || cancel) && (
+          <div
+            key="buttons"
+            className="flex flex-wrap flex-row-reverse items-center justify-end space-x-reverse space-x-2"
+          >
+            {actions}
+            <div className="flex-auto" />
+            {cancel}
+          </div>
+        )}
+      </form>
+    )
+  },
+)

package/src/assets/app/components/help-card.tsx

@@ -33,7 +33,7 @@ export function HelpCard({
         href={helpLink.href}
         rel={helpLink.rel}
         target="_blank"
-        className="text-primary"
+        className="text-brand"
       >
         Contact {helpLink.title}
       </a>

package/src/assets/app/components/icons/alert-icon.tsx

@@ -0,0 +1,5 @@
+import { makeSvgComponent } from './util'
+
+export const AlertIcon = makeSvgComponent(
+  'M11.14 4.494a.995.995 0 0 1 1.72 0l7.001 12.008a.996.996 0 0 1-.86 1.498H4.999a.996.996 0 0 1-.86-1.498L11.14 4.494Zm3.447-1.007c-1.155-1.983-4.019-1.983-5.174 0L2.41 15.494C1.247 17.491 2.686 20 4.998 20h14.004c2.312 0 3.751-2.509 2.587-4.506L14.587 3.487ZM13 9.019a1 1 0 1 0-2 0v2.994a1 1 0 1 0 2 0V9.02Zm-1 4.731a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z',
+)

package/src/assets/app/components/icons/at-symbol-icon.tsx

@@ -0,0 +1,5 @@
+import { makeSvgComponent } from './util'
+
+export const AtSymbolIcon = makeSvgComponent(
+  'M12 4a8 8 0 1 0 4.21 14.804 1 1 0 0 1 1.054 1.7A9.958 9.958 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 1.104-.27 2.31-.949 3.243-.716.984-1.849 1.6-3.331 1.465a4.207 4.207 0 0 1-2.93-1.585c-.94 1.21-2.388 1.94-3.985 1.715-2.53-.356-4.04-2.91-3.682-5.458.358-2.547 2.514-4.586 5.044-4.23.905.127 1.68.536 2.286 1.126a1 1 0 0 1 1.964.368l-.515 3.545v.002a2.222 2.222 0 0 0 1.999 2.526c.75.068 1.212-.21 1.533-.65.358-.493.566-1.245.566-2.067a8 8 0 0 0-8-8Zm-.112 5.13c-1.195-.168-2.544.819-2.784 2.529-.24 1.71.784 3.03 1.98 3.198 1.195.168 2.543-.819 2.784-2.529.24-1.71-.784-3.03-1.98-3.198Z',
+)

package/src/assets/app/components/icons/caret-right-icon.tsx

@@ -0,0 +1,5 @@
+import { makeSvgComponent } from './util'
+
+export const CaretRightIcon = makeSvgComponent(
+  'M8.293 3.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 0-1.414Z',
+)

package/src/assets/app/components/icons/lock-icon.tsx

@@ -0,0 +1,5 @@
+import { makeSvgComponent } from './util'
+
+export const LockIcon = makeSvgComponent(
+  'M7 7a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h1V7Zm-1 4v9h12v-9H6Zm9-2H9V7a3 3 0 1 1 6 0v2Zm-3 4a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z',
+)

package/src/assets/app/components/icons/token-icon.tsx

@@ -0,0 +1,5 @@
+import { makeSvgComponent } from './util'
+
+export const TokenIcon = makeSvgComponent(
+  'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z',
+)

package/src/assets/app/components/icons/util.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+export const makeSvgComponent = (path: string) =>
+  function (
+    props: Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'children' | 'xmlns'>,
+  ) {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d={path}
+        ></path>
+      </svg>
+    )
+  }

package/src/assets/app/components/info-card.tsx

@@ -0,0 +1,45 @@
+import { clsx } from '../lib/clsx'
+import { Override } from '../lib/util'
+import { AlertIcon } from './icons/alert-icon'
+import { InputLayout, InputLayoutProps } from './input-layout'
+
+export type InfoCardProps = Override<
+  InputLayoutProps,
+  {
+    role: 'alert' | 'status'
+  }
+>
+
+export function InfoCard({
+  children,
+  className,
+  role = 'alert',
+  ...props
+}: InfoCardProps) {
+  return (
+    <InputLayout
+      className={clsx(
+        role === 'alert' ? 'bg-error' : 'bg-gray-100 dark:bg-slate-800',
+        className,
+      )}
+      icon={
+        <AlertIcon
+          className={clsx(
+            'fill-current h-4 w-4',
+            role === 'alert' ? 'text-white' : 'text-brand',
+          )}
+        />
+      }
+      {...props}
+    >
+      <div
+        className={clsx(
+          'py-2 overflow-hidden',
+          role === 'alert' ? 'text-white' : undefined,
+        )}
+      >
+        {children}
+      </div>
+    </InputLayout>
+  )
+}

package/src/assets/app/components/input-checkbox.tsx

@@ -0,0 +1,47 @@
+import { InputHTMLAttributes, useRef, useState } from 'react'
+import { InputContainer } from './input-container'
+
+const generateUniqueId = () => Math.random().toString(36).slice(2)
+
+export type InputCheckboxProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'type'
+>
+
+export function InputCheckbox({
+  id,
+  children,
+  className,
+  ...props
+}: InputCheckboxProps) {
+  const [htmlFor] = useState(generateUniqueId)
+  const ref = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <InputContainer
+      id={id}
+      ref={ref}
+      icon={
+        <input
+          {...props}
+          ref={inputRef}
+          id={htmlFor}
+          className="text-brand outline-none"
+          type="checkbox"
+        />
+      }
+      className={className}
+      onClick={(event) => {
+        if (event.target === ref.current && !event.defaultPrevented) {
+          inputRef.current?.click()
+          inputRef.current?.focus()
+        }
+      }}
+    >
+      <label htmlFor={htmlFor} className="block w-full leading-[1.6]">
+        {children}
+      </label>
+    </InputContainer>
+  )
+}

package/src/assets/app/components/input-container.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, useState } from 'react'
+import { clsx } from '../lib/clsx'
+import { InputLayout, InputLayoutProps } from './input-layout'
+
+export type InputContainerProps = InputLayoutProps
+
+export const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(
+  ({ className, onFocus, icon, onBlur, ...props }, ref) => {
+    const [focused, setFocused] = useState(false)
+
+    return (
+      <InputLayout
+        ref={ref}
+        className={clsx(
+          // Background
+          'bg-gray-100 has-[:focus]:bg-slate-200',
+          'dark:bg-slate-800 dark:has-[:focus]:bg-slate-700',
+          // Border
+          'outline-none',
+          'border-solid border-2 border-transparent hover:border-gray-400 has-[:focus]:border-brand hover:has-[:focus]:border-brand',
+          'dark:hover:border-gray-500',
+          className,
+        )}
+        onFocus={(event) => {
+          onFocus?.(event)
+          if (!event.defaultPrevented) setFocused(true)
+        }}
+        onBlur={(event) => {
+          onBlur?.(event)
+          if (!event.defaultPrevented) setFocused(false)
+        }}
+        icon={<div className={focused ? 'text-brand' : undefined}>{icon}</div>}
+        {...props}
+      />
+    )
+  },
+)

package/src/assets/app/components/input-layout.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import { clsx } from '../lib/clsx'
+import { Override } from '../lib/util'
+
+export type InputLayoutProps = Override<
+  HTMLAttributes<HTMLDivElement>,
+  {
+    icon?: ReactNode
+    append?: ReactNode
+  }
+>
+
+export const InputLayout = forwardRef<HTMLDivElement, InputLayoutProps>(
+  ({ className, icon, append, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          // Layout
+          'pl-1 pr-2', // Less padding on the left because icon will provide some
+          'min-h-12',
+          'flex items-center justify-stretch',
+          // Border
+          'rounded-lg',
+          // Font
+          'text-gray-700',
+          'dark:text-gray-100',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className={clsx(
+            'self-start shrink-0 grow-0',
+            'w-8 h-12',
+            'flex items-center justify-center',
+            'text-gray-500',
+          )}
+        >
+          {icon}
+        </div>
+        <div className="flex-auto relative">{children}</div>
+        {append && <div className="grow-0 shrink-0">{append}</div>}
+      </div>
+    )
+  },
+)

package/src/assets/app/components/input-text.tsx

@@ -0,0 +1,69 @@
+import {
+  forwardRef,
+  InputHTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import { InputContainer } from './input-container'
+
+export const InputText = forwardRef<
+  HTMLInputElement,
+  {
+    icon?: ReactNode
+  } & InputHTMLAttributes<HTMLInputElement>
+>(({ className, icon, children, onFocus, onBlur, ...props }, ref) => {
+  const [focused, setFocused] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useImperativeHandle(ref, () => inputRef.current!, [])
+
+  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (event) => {
+      if (inputRef.current !== event.target) {
+        event.preventDefault()
+        event.stopPropagation()
+        inputRef.current?.focus()
+      }
+    },
+    [],
+  )
+
+  const handleMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (event) => {
+      if (focused && event.target !== inputRef.current) {
+        // Prevent "blur" event from firing when clicking outside the input
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+    [focused],
+  )
+
+  return (
+    <InputContainer
+      icon={icon}
+      className={className}
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+    >
+      <input
+        ref={inputRef}
+        className="w-full bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder-gray-500"
+        onFocus={(event) => {
+          setFocused(true)
+          onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          setFocused(false)
+          onBlur?.(event)
+        }}
+        {...props}
+      />
+      {children}
+    </InputContainer>
+  )
+})