@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/screens/DeviceApproval.tsx

@@ -0,0 +1,500 @@
+/** The device screen, where a signed-in user decides on a CLI's user code and key. @module */
+import { Button, Callout, IconChip, Inline, Stack, Tooltip } from '@tempoxyz/ds'
+import {
+  AlertTriangle,
+  BadgeCheck,
+  Check,
+  Clock,
+  Globe,
+  Laptop,
+  LocationPin,
+} from '@tempoxyz/ds/icons'
+import { type FormEvent, type ReactNode, useId } from 'react'
+import type * as KeyAuthorization from '../../internal/KeyAuthorization.js'
+import { CodeInput } from '../components/CodeInput.js'
+import { Grant } from '../components/Grant.js'
+import { style } from '../zyzz.config.js'
+
+/**
+ * The device screen: a code form without `request`, or the request and its key, then the outcome.
+ * Approve is disabled if approval cannot sign the key.
+ */
+export function DeviceApproval(props: DeviceApproval.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  // Several screens can share a document, such as on the flows canvas, so each derives its own IDs.
+  const id = useId()
+  const app = props.request?.app
+  const refusal = props.refusal ?? props.request?.key_authorization?.refusal
+  const description = (() => {
+    if (props.status === 'denied')
+      return 'Denied. The device was not signed in.'
+    if (!props.request) return 'Enter the code shown in your terminal.'
+    // An app without a display name could be anyone's, so the screen flags it.
+    if (!app)
+      return (
+        <>
+          Make sure this code matches the one on your device, then approve to
+          grant{' '}
+          <Tooltip.Root>
+            <Tooltip.Trigger
+              delay={150}
+              render={
+                <span {...styles.unverified()} tabIndex={0}>
+                  <AlertTriangle {...styles.warning()} />
+                  an unverified app
+                </span>
+              }
+            />
+            <Tooltip.Popup>Unverified app</Tooltip.Popup>
+          </Tooltip.Root>{' '}
+          access to your account.
+        </>
+      )
+    return (
+      <>
+        Make sure this code matches the one on your device, then approve to
+        grant <strong>{app.name}</strong>{' '}
+        <Tooltip.Root>
+          <Tooltip.Trigger
+            delay={150}
+            render={
+              <BadgeCheck
+                {...styles.verified()}
+                aria-label="Verified"
+                role="img"
+                tabIndex={0}
+              />
+            }
+          />
+          <Tooltip.Popup>Verified app</Tooltip.Popup>
+        </Tooltip.Root>{' '}
+        access to your account.
+      </>
+    )
+  })()
+
+  if (props.status === 'approved')
+    return (
+      <Stack {...styles.column()} gap="32">
+        <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+          <IconChip {...styles.avatar()} aria-hidden>
+            <Check />
+          </IconChip>
+          <Title {...styles.title()}>Authorization successful</Title>
+          <Inline
+            {...styles.success()}
+            aria-live="polite"
+            gap="8"
+            justify="center"
+            render={<p />}
+            role="status"
+          >
+            <span {...styles.check()}>
+              <Check />
+            </span>
+            You can close this tab.
+          </Inline>
+        </Stack>
+      </Stack>
+    )
+
+  return (
+    <Stack {...styles.column()} gap="32">
+      <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+        {/* Apps have no logos, so the code step and a verified app show a device in their place. */}
+        <IconChip
+          {...styles.avatar()}
+          data-verified={!props.request || Boolean(app)}
+        >
+          {!props.request || app ? <Laptop /> : <AlertTriangle />}
+        </IconChip>
+        <Title {...styles.title()}>Authorize a device</Title>
+        <p {...styles.description()}>{description}</p>
+      </Stack>
+      {(() => {
+        if (props.status === 'denied') return null
+        if (!props.request)
+          return (
+            <Stack gap="32" render={<form onSubmit={props.onSubmitCode} />}>
+              <CodeInput
+                aria-describedby={`${id}-error`}
+                aria-label="Code shown in your terminal"
+                autoComplete="off"
+                autoFocus={props.autoFocus}
+                defaultValue={props.code}
+                invalid={props.invalid}
+                length={8}
+                name="code"
+                // The field holds while the lookup runs, so a refusal clears only the code it refused.
+                readOnly={props.fetching}
+                required
+                separator={4}
+                size="medium"
+              />
+              <Button loading={props.fetching} type="submit">
+                Continue
+              </Button>
+            </Stack>
+          )
+        return (
+          <Stack gap="16">
+            <CodeInput
+              aria-label="Code"
+              defaultValue={props.request.user_code}
+              // A different request remounts the boxes, which read their value once.
+              key={props.request.user_code}
+              length={8}
+              readOnly
+              separator={4}
+              size="medium"
+            />
+            {props.request.key_authorization ? (
+              <Grant
+                heading={props.heading === 'h4' ? 'h5' : 'h2'}
+                keyAuthorization={props.request.key_authorization}
+              />
+            ) : null}
+            {props.request.challenge ? (
+              <div {...styles.challenge()} role="note">
+                <p {...styles.challengeTitle()}>
+                  This sign-in also signs a message
+                </p>
+                <p {...styles.challengeText()}>
+                  Approve only if you started this sign-in in your own terminal
+                  and expect this message.
+                </p>
+                <pre {...styles.message()}>{props.request.challenge}</pre>
+              </div>
+            ) : null}
+            <dl {...styles.details()}>
+              {props.request.device ? (
+                <Inline {...styles.row()} gap="12">
+                  <dt>
+                    <Laptop
+                      {...styles.icon()}
+                      aria-label="Device name"
+                      role="img"
+                    />
+                  </dt>
+                  <dd>
+                    {/* The CLI chooses the name, so it renders as text within the API's 64 characters, and the screen says where it comes from. */}
+                    {/* `bdi` isolates the name's direction from the label after it. */}
+                    <bdi {...styles.device()}>
+                      {props.request.device.slice(0, 64)}
+                    </bdi>{' '}
+                    <span {...styles.source()}>(as the device reports it)</span>
+                  </dd>
+                </Inline>
+              ) : null}
+              {props.request.location ? (
+                <Inline {...styles.row()} gap="12">
+                  <dt>
+                    <LocationPin
+                      {...styles.icon()}
+                      aria-label="Location"
+                      role="img"
+                    />
+                  </dt>
+                  <dd>{props.request.location}</dd>
+                </Inline>
+              ) : null}
+              <Inline {...styles.row()} gap="12">
+                <dt>
+                  <Clock {...styles.icon()} aria-label="Requested" role="img" />
+                </dt>
+                <dd>{date.format(props.request.created_at * 1000)} UTC</dd>
+              </Inline>
+              {props.request.ip ? (
+                <Inline {...styles.row()} gap="12">
+                  <dt>
+                    <Globe
+                      {...styles.icon()}
+                      aria-label="IP address"
+                      role="img"
+                    />
+                  </dt>
+                  <dd>{props.request.ip}</dd>
+                </Inline>
+              ) : null}
+            </dl>
+            <Button
+              disabled={props.denying || Boolean(refusal)}
+              loading={props.approving}
+              onClick={props.onApprove}
+            >
+              Approve
+            </Button>
+            <Button
+              disabled={props.approving}
+              loading={props.denying}
+              onClick={props.onDeny}
+              variant="text"
+            >
+              Deny
+            </Button>
+            {props.email ? (
+              <p {...styles.note()}>
+                Signed in as <strong>{props.email}</strong>.
+              </p>
+            ) : null}
+          </Stack>
+        )
+      })()}
+
+      {/* A failed decision outranks the refusal, whose only action is the denial that failed. */}
+      {(() => {
+        const error = props.error ?? (refusal ? refusals[refusal] : undefined)
+        if (!error) return null
+        return (
+          <Callout id={`${id}-error`} intent="negative">
+            <Callout.Icon />
+            <Callout.Content>{error}</Callout.Content>
+          </Callout>
+        )
+      })()}
+    </Stack>
+  )
+}
+
+export declare namespace DeviceApproval {
+  type Props = {
+    /** Whether the approval is in progress. */
+    approving: boolean
+    /** Whether the code field takes focus on mount. */
+    autoFocus?: boolean | undefined
+    /** The user code that the form starts with. */
+    code: string
+    /** Whether the denial is in progress. */
+    denying: boolean
+    /** The signed-in user's address. Absent, no account shows. */
+    email?: string | undefined
+    /** Why the read or the decision failed. */
+    error?: string | undefined
+    /** Whether the entered code's request is loading. */
+    fetching: boolean
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Whether the code matched no request, which marks the field invalid. */
+    invalid: boolean
+    /** Approves the request, which signs the CLI in. */
+    onApprove: () => void
+    /** Denies the request. */
+    onDeny: () => void
+    /** Submits the entered user code. */
+    onSubmitCode: (event: FormEvent<HTMLFormElement>) => void
+    /** Why approval cannot sign the key. Replaces the key's own `refusal`. */
+    refusal?: Refusal | undefined
+    /** The CLI's request. Absent until the code matches one. */
+    request?: Request | undefined
+    /** Absent until the user decides. */
+    status?: 'approved' | 'denied' | undefined
+  }
+
+  /** A requested key, as the device page shows it. */
+  type Key = KeyAuthorization.Description & {
+    /** The key's chain. Absent once the user decides, and on canvas samples without one. */
+    chain?:
+      | {
+          /** The chain's ID. */
+          id: number
+          /** The name that `GET /v1/chains` lists, if any. */
+          name?: string | undefined
+        }
+      | undefined
+    /** Absent if approval can sign the key. */
+    refusal?: Refusal | undefined
+  }
+
+  /**
+   * Why approval cannot sign a key: a `foreign_account`, an owner `passkey` that the page cannot
+   * use, `no_account`, or `unavailable` accounts.
+   */
+  type Refusal =
+    | 'foreign_account'
+    | 'no_account'
+    | 'passkey'
+    | 'unavailable'
+    | 'upgrade'
+
+  /** A device request, as `GET /v1/device/requests/:code` returns it. */
+  type Request = {
+    /** Absent if the app has no display name. */
+    app?: { name: string } | undefined
+    /** The message whose hash the key's signature covers. Absent if none. */
+    challenge?: string | undefined
+    /** Unix seconds. */
+    created_at: number
+    /** The name that the CLI reported, such as its hostname. Absent if none. */
+    device?: string | undefined
+    /** Absent if unknown. */
+    ip?: string | undefined
+    /** Absent if the CLI requests no key. */
+    key_authorization?: Key | undefined
+    /** The CLI's city and country. Absent if unknown. */
+    location?: string | undefined
+    /** The user code, such as `BCDF-GHJK`. */
+    user_code: string
+  }
+}
+
+/** The screen's text for each refusal. */
+const refusals: Record<DeviceApproval.Refusal, string> = {
+  foreign_account:
+    "The terminal requests a key for a Tempo Account that you do not hold. Deny the request, and start the sign-in again in the terminal as that account's owner.",
+  no_account:
+    'You have no Tempo Account for this app yet, so no account can approve the key. Deny the request, create an account, and try again.',
+  passkey:
+    'This Tempo Account signs with a passkey that this page cannot use. Deny the request, and return to the terminal.',
+  unavailable:
+    'Tempo ID cannot read your Tempo Account right now. Reload the page in a minute, or deny the request.',
+  upgrade:
+    'This Tempo Account must upgrade to a configurable wallet on this chain before it approves keys. Deny the request, upgrade the wallet on your account page, and try again.',
+}
+
+/** Formats in UTC, so the server render and the browser agree. */
+const date = new Intl.DateTimeFormat('en-US', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+  timeZone: 'UTC',
+})
+
+namespace styles {
+  // IconChip has no 64 size, so the chip sets the size of the account screen's avatar. It sits apart
+  // from the title, and an unverified app's chip takes the warning tint.
+  export const avatar = style({
+    borderRadius: 'full',
+    fontSize: '24',
+    height: '64',
+    marginBottom: '12',
+    width: '64',
+    '&[data-verified="false"]': {
+      backgroundColor: 'amber.100',
+      color: 'amber.900',
+    },
+  })
+
+  export const challenge = style({
+    backgroundColor: 'amber.100',
+    borderRadius: '16',
+    display: 'grid',
+    gap: '8',
+    padding: '16',
+  })
+
+  export const challengeText = style({
+    color: 'foreground',
+    typography: 'copy.14',
+  })
+
+  export const challengeTitle = style({
+    color: 'amber.900',
+    typography: 'label.14',
+  })
+
+  export const check = style({
+    alignItems: 'center',
+    backgroundColor: 'foreground',
+    borderRadius: 'full',
+    color: 'background.primary',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: '24',
+    justifyContent: 'center',
+    width: '24',
+  })
+
+  export const column = style({
+    maxWidth: '512',
+    width: '100% !custom',
+  })
+
+  // A narrow measure wraps the app's name onto a second line.
+  export const description = style({
+    color: 'gray.900',
+    maxWidth: '320',
+    textWrap: 'balance',
+    typography: 'copy.16',
+    '& strong': { color: 'foreground', typography: 'copy.16.strong' },
+  })
+
+  export const device = style({ typography: 'copy.14.strong' })
+
+  export const details = style({
+    backgroundColor: 'gray.100',
+    borderRadius: '16',
+    display: 'grid',
+    gap: '8',
+    margin: '0',
+    padding: '16',
+    typography: 'copy.14',
+  })
+
+  export const header = style({ textAlign: 'center' })
+
+  export const icon = style({
+    color: 'gray.900',
+    display: 'block',
+    flexShrink: 0,
+    height: '16',
+    width: '16',
+  })
+
+  export const message = style({
+    margin: '0',
+    overflowWrap: 'anywhere',
+    typography: 'copy.13.mono',
+    whiteSpace: 'pre-wrap',
+  })
+
+  export const note = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    typography: 'copy.14',
+    '& strong': { color: 'foreground', typography: 'copy.14.strong' },
+  })
+
+  export const row = style({ minWidth: '0', overflowWrap: 'anywhere' })
+
+  export const source = style({ color: 'gray.900' })
+
+  export const success = style({ typography: 'copy.16' })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+
+  export const unverified = style({
+    borderRadius: '4',
+    color: 'amber.900',
+    outline: 'none',
+    typography: 'copy.16.strong',
+    whiteSpace: 'nowrap',
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2',
+    },
+  })
+
+  export const verified = style({
+    display: 'inline',
+    height: '16',
+    outline: 'none',
+    verticalAlign: 'middle',
+    width: '16',
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2',
+    },
+  })
+
+  export const warning = style({
+    display: 'inline',
+    height: '16',
+    marginInlineEnd: '4',
+    verticalAlign: 'middle',
+    width: '16',
+  })
+}

package/src/app/screens/NotFound.tsx

@@ -0,0 +1,62 @@
+/** The not-found screen, with a link to the account page. @module */
+import { Link } from '@tanstack/react-router'
+import { Button, IconChip, Stack } from '@tempoxyz/ds'
+import { Compass } from '@tempoxyz/ds/icons'
+import type { ReactNode } from 'react'
+import { style } from '../zyzz.config.js'
+
+/** The not-found screen. */
+export function NotFound(props: NotFound.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  return (
+    <Stack {...styles.column()} gap="32">
+      <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+        <IconChip {...styles.avatar()} aria-hidden>
+          <Compass />
+        </IconChip>
+        <Title {...styles.title()}>Page not found</Title>
+        <p {...styles.description()}>
+          Tempo ID has no page at this address. Check the address, or go to your
+          account.
+        </p>
+      </Stack>
+      <Button.Link render={<Link to="/" />}>Go to your account</Button.Link>
+    </Stack>
+  )
+}
+
+export declare namespace NotFound {
+  type Props = {
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+  }
+}
+
+namespace styles {
+  // IconChip has no 64 size, so the header chip sets the size of the account screen's avatar.
+  export const avatar = style({
+    borderRadius: 'full',
+    fontSize: '24',
+    height: '64',
+    marginBottom: '12',
+    width: '64',
+  })
+
+  export const column = style({
+    maxWidth: '384',
+    width: '100% !custom',
+  })
+
+  export const description = style({
+    color: 'gray.900',
+    textWrap: 'balance',
+    typography: 'copy.16',
+  })
+
+  export const header = style({ textAlign: 'center' })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+}