@tempoxyz/id 0.0.0-pr-187.sha-eed04d3

package/src/app/screens/DeviceApproval.tsx

@@ -0,0 +1,480 @@
+/**
+ * The device screen, where a signed-in user enters a CLI's user code and approves or denies it, with
+ * the key that the CLI requests. The layout follows the device screen of the WorkOS implementation.
+ * @module
+ */
+import { type FormEvent, type ReactNode, useId } from 'react'
+import BadgeCheck from '~icons/lucide/badge-check'
+import Check from '~icons/lucide/check'
+import Clock from '~icons/lucide/clock'
+import LaptopMinimal from '~icons/lucide/laptop-minimal'
+import MapPin from '~icons/lucide/map-pin'
+import Network from '~icons/lucide/network'
+import TriangleAlert from '~icons/lucide/triangle-alert'
+import type * as KeyAuthorization from '../../internal/KeyAuthorization.js'
+import { Button } from '../components/Button.js'
+import { CodeInput } from '../components/CodeInput.js'
+import { ErrorMessage } from '../components/ErrorMessage.js'
+import { Grant } from '../components/Grant.js'
+import { Tooltip } from '../components/Tooltip.js'
+import { style } from '../zyzz.config.js'
+
+/**
+ * The device screen. Without `request` it asks for the code that the terminal shows. With one it
+ * shows what the CLI requested, with any key and the message that the key signs, for approval, and
+ * then the outcome. A key that approval cannot sign holds the approval, and the screen states why.
+ */
+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 (
+        <>
+          Enter the code from your device to grant{' '}
+          <Tooltip label="Unverified app">
+            <span {...styles.unverified()} tabIndex={0}>
+              <TriangleAlert {...styles.warning()} aria-hidden />
+              an unverified app
+            </span>
+          </Tooltip>{' '}
+          access to your account.
+        </>
+      )
+    return (
+      <>
+        Enter the code from your device to grant <strong>
+          {app.name}
+        </strong>{' '}
+        <Tooltip label="Verified app">
+          <BadgeCheck
+            {...styles.verified()}
+            aria-label="Verified"
+            role="img"
+            tabIndex={0}
+          />
+        </Tooltip>{' '}
+        access to your account.
+      </>
+    )
+  })()
+
+  if (props.status === 'approved')
+    return (
+      <div {...styles.column()}>
+        <header {...styles.header()}>
+          <Title {...styles.title()}>Authorization successful</Title>
+          <p {...styles.success()} aria-live="polite" role="status">
+            <span {...styles.check()}>
+              <Check aria-hidden />
+            </span>
+            You can close this tab.
+          </p>
+        </header>
+      </div>
+    )
+
+  return (
+    <div {...styles.column()}>
+      <header {...styles.header()}>
+        {props.request ? (
+          // Apps have no logos, so a verified app shows a device in their place.
+          <span {...styles.avatar()} data-verified={Boolean(app)}>
+            {app ? (
+              <LaptopMinimal {...styles.avatarIcon()} aria-hidden />
+            ) : (
+              <TriangleAlert {...styles.avatarIcon()} aria-hidden />
+            )}
+          </span>
+        ) : null}
+        <Title {...styles.title()}>Authorize a device</Title>
+        <p {...styles.description()}>{description}</p>
+      </header>
+      {(() => {
+        if (props.status === 'denied') return null
+        if (!props.request)
+          return (
+            <form {...styles.stack()} onSubmit={props.onSubmitCode}>
+              <CodeInput
+                aria-describedby={`${id}-error`}
+                aria-invalid={props.invalid}
+                aria-label="Code shown in your terminal"
+                autoComplete="off"
+                autoFocus={props.autoFocus}
+                defaultValue={props.code}
+                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}
+              />
+              <Button loading={props.fetching} type="submit">
+                Continue
+              </Button>
+            </form>
+          )
+        return (
+          <div {...styles.stack()}>
+            <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}
+            />
+            {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 ? (
+                <div {...styles.row()}>
+                  <dt>
+                    <LaptopMinimal
+                      {...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>
+                </div>
+              ) : null}
+              {props.request.location ? (
+                <div {...styles.row()}>
+                  <dt>
+                    <MapPin
+                      {...styles.icon()}
+                      aria-label="Location"
+                      role="img"
+                    />
+                  </dt>
+                  <dd>{props.request.location}</dd>
+                </div>
+              ) : null}
+              <div {...styles.row()}>
+                <dt>
+                  <Clock {...styles.icon()} aria-label="Requested" role="img" />
+                </dt>
+                <dd>{date.format(props.request.created_at * 1000)} UTC</dd>
+              </div>
+              {props.request.ip ? (
+                <div {...styles.row()}>
+                  <dt>
+                    <Network
+                      {...styles.icon()}
+                      aria-label="IP address"
+                      role="img"
+                    />
+                  </dt>
+                  <dd>{props.request.ip}</dd>
+                </div>
+              ) : 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="tertiary"
+            >
+              Deny
+            </Button>
+          </div>
+        )
+      })()}
+
+      {/* A failed decision outranks the refusal, whose only action is the denial that failed. */}
+      <ErrorMessage align="center" id={`${id}-error`}>
+        {props.error ?? (refusal ? refusals[refusal] : undefined)}
+      </ErrorMessage>
+    </div>
+  )
+}
+
+export declare namespace DeviceApproval {
+  type Props = {
+    /** Whether the approval is in progress. */
+    approving: boolean
+    /** Whether the code field takes focus. */
+    autoFocus?: boolean | undefined
+    /** The user code that the form starts with. */
+    code: string
+    /** Whether the denial is in progress. */
+    denying: boolean
+    /** Why reading, approving, or denying the request failed. */
+    error?: string | undefined
+    /** Whether the request for the entered code is loading. */
+    fetching: boolean
+    /** The level of the screen's title: `h1` by default, or `h4` on the flows canvas, below the canvas's own headings. */
+    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, which holds the approval. Takes the place of the key's own
+     * `refusal`, such as after an approval that the API refused.
+     */
+    refusal?: Refusal | undefined
+    /** What the CLI behind the code requested, once the code matches one. */
+    request?: Request | undefined
+    /** The request's outcome, once it has one. */
+    status?: 'approved' | 'denied' | undefined
+  }
+
+  /** A key that the CLI requests, as the device page shows it. */
+  type Key = KeyAuthorization.Description & {
+    /** Why approval cannot sign the key. Absent when it can. */
+    refusal?: Refusal | undefined
+  }
+
+  /**
+   * Why approval cannot sign a key: the key names an account that the user does not hold, a passkey
+   * that the page cannot use owns the account, the user holds no account, or the user's accounts
+   * could not be read.
+   */
+  type Refusal = 'foreign_account' | 'no_account' | 'passkey' | 'unavailable'
+
+  /** A device request, as `GET /v1/device/requests/:code` returns it. */
+  type Request = {
+    /** The app that requested the code. Absent when the app has no display name. */
+    app?: { name: string } | undefined
+    /** The message whose hash the key's signature covers. Absent when the CLI sent none. */
+    challenge?: string | undefined
+    /** When the CLI requested the code, in Unix seconds. */
+    created_at: number
+    /** The name that the CLI reported, such as its hostname. Absent when it reported none. */
+    device?: string | undefined
+    /** The CLI's IP address. Absent when it is unknown. */
+    ip?: string | undefined
+    /** The key that the CLI requests. Absent when it requests none. */
+    key_authorization?: Key | undefined
+    /** The CLI's city and country. Absent when they are unknown. */
+    location?: string | undefined
+    /** The user code, such as `BCDF-GHJK`. */
+    user_code: string
+  }
+}
+
+/** Why approval cannot sign a key, as the screen states it. */
+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.',
+}
+
+/** UTC, so the server render and the browser agree. */
+const date = new Intl.DateTimeFormat('en-US', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+  timeZone: 'UTC',
+})
+
+namespace styles {
+  export const avatar = style({
+    alignItems: 'center',
+    backgroundColor: 'background.surface',
+    border: '1px solid',
+    borderColor: 'gray.400',
+    borderRadius: 'full',
+    boxShadow: 'sm',
+    color: 'foreground',
+    display: 'flex',
+    height: 14,
+    justifyContent: 'center',
+    marginBottom: 3,
+    width: 14,
+    '&[data-verified="false"]': {
+      backgroundColor: 'amber.100',
+      borderColor: 'amber.400',
+      color: 'amber.900',
+    },
+  })
+
+  export const avatarIcon = style({ height: 6, width: 6 })
+
+  export const challenge = style({
+    backgroundColor: 'amber.100',
+    borderRadius: '2xl',
+    display: 'grid',
+    gap: 2,
+    padding: 4,
+  })
+
+  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: 6,
+    justifyContent: 'center',
+    width: 6,
+  })
+
+  export const column = style({
+    display: 'grid',
+    gap: 8,
+    maxWidth: 'lg',
+    width: 'full',
+  })
+
+  // A narrow measure wraps the app's name onto a second line.
+  export const description = style({
+    color: 'gray.900',
+    maxWidth: 'xs',
+    textWrap: 'balance',
+    typography: 'copy.16',
+    '& strong': { color: 'foreground', fontWeight: 'medium' },
+  })
+
+  export const device = style({ fontWeight: 'medium' })
+
+  export const details = style({
+    backgroundColor: 'gray.100',
+    borderRadius: '2xl',
+    display: 'grid',
+    gap: 2,
+    margin: 0,
+    padding: 4,
+    typography: 'copy.14',
+  })
+
+  export const header = style({
+    display: 'grid',
+    gap: 2,
+    justifyItems: 'center',
+    textAlign: 'center',
+  })
+
+  export const icon = style({
+    color: 'gray.900',
+    display: 'block',
+    flexShrink: 0,
+    height: 4,
+    width: 4,
+  })
+
+  export const message = style({
+    margin: 0,
+    overflowWrap: 'anywhere',
+    typography: 'copy.13.mono',
+    whiteSpace: 'pre-wrap',
+  })
+
+  export const row = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: 3,
+    minWidth: 0,
+    overflowWrap: 'anywhere',
+  })
+
+  export const source = style({ color: 'gray.900' })
+
+  export const stack = style({ display: 'grid', gap: 4 })
+
+  export const success = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: 2,
+    justifyContent: 'center',
+    typography: 'copy.16',
+  })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+
+  export const unverified = style({
+    borderRadius: 'sm',
+    color: 'amber.900',
+    fontWeight: 'semibold',
+    outline: 'none',
+    whiteSpace: 'nowrap',
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+  })
+
+  export const verified = style({
+    display: 'inline',
+    height: 4,
+    outline: 'none',
+    verticalAlign: 'middle',
+    width: 4,
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+  })
+
+  export const warning = style({
+    display: 'inline',
+    height: 4,
+    marginInlineEnd: 1,
+    verticalAlign: 'middle',
+    width: 4,
+  })
+}