@oxyhq/services 22.12.5 → 22.13.0

package/src/ui/components/authChooser/signInProgress.ts

@@ -0,0 +1,54 @@
+/**
+ * The sign-in status line's copy (issue #691, Phase 5).
+ *
+ * One responsibility: map the controller's DERIVED `signIn.progress` — plus the
+ * chosen route, which only disambiguates the generic waiting step — onto a
+ * sentence. Pure and total, with no clock and no state of its own: the line can
+ * therefore only advance when the controller observed a real signal, never on a
+ * timer and never optimistically.
+ *
+ * The ladder the user sees:
+ *
+ *     Preparing request
+ *     Check Commons on your phone
+ *     Opened in Commons
+ *     Confirming identity
+ *     Identity confirmed
+ */
+
+import type { CommonsDeliveryRoute, SignInProgress } from '@oxyhq/core';
+import type { Translate } from './types';
+
+/**
+ * The status sentence for the active request, or `null` when there is nothing
+ * honest to say (no live request, or a terminal error — which is toasted, never
+ * rendered inline).
+ */
+export function signInProgressLabel(
+  progress: SignInProgress,
+  route: CommonsDeliveryRoute | null,
+  t: Translate,
+): string | null {
+  switch (progress) {
+    case 'idle':
+      return null;
+    case 'preparing':
+      return t('accountSwitcher.progress.preparing');
+    case 'awaiting-approval':
+      // The only step whose copy depends on the route: waiting means something
+      // different when the user is holding a QR than when Commons was opened
+      // for them. `await-push` never reaches here — a chosen push route is
+      // itself a confirmed dispatch, so it derives to `delivered-to-commons`.
+      if (route === 'qr') return t('accountSwitcher.progress.scanWithCommons');
+      if (route === 'open-commons') return t('accountSwitcher.progress.continueInCommons');
+      return t('accountSwitcher.progress.awaitingApproval');
+    case 'delivered-to-commons':
+      return t('accountSwitcher.progress.checkCommons');
+    case 'opened-in-commons':
+      return t('accountSwitcher.progress.openedInCommons');
+    case 'confirming-identity':
+      return t('accountSwitcher.progress.confirming');
+    case 'identity-confirmed':
+      return t('accountSwitcher.progress.confirmed');
+  }
+}

package/src/ui/components/{oxyAuthChooserStyles.ts → authChooser/styles.ts}

@@ -7,6 +7,10 @@ const QR_PLATE_BG = '#FFFFFF';
  * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialogScreen`
  * so both the Dialog-wrapped host and any bare host (e.g. a future
  * auth.oxy.so hub page) render identically without duplicating a StyleSheet.
+ *
+ * Only what NativeWind cannot express lives here: the animated collapse, the
+ * fixed-contrast QR plate, per-account accent rings, and the small subordinate
+ * text-link rhythm every view's fallback affordances share.
  */
 export const authChooserStyles = StyleSheet.create({
   rows: {
@@ -192,4 +196,18 @@ export const authChooserStyles = StyleSheet.create({
     borderRadius: 16,
     backgroundColor: QR_PLATE_BG,
   },
+  /**
+   * The revealed "Having trouble?" alternatives — a tight stack of subordinate
+   * text links. They share `footerLink`'s rhythm, so the stack itself only has
+   * to stop them drifting apart.
+   */
+  troubleActions: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  /** The disclosure trigger, aligned with the subordinate links it reveals. */
+  troubleTrigger: {
+    alignSelf: 'center',
+    marginTop: 12,
+  },
 });

package/src/ui/components/authChooser/types.ts

@@ -0,0 +1,101 @@
+/**
+ * Shared types + per-account color resolution for the auth chooser's views.
+ *
+ * One responsibility: the vocabulary every view module in this folder speaks
+ * (theme/translate aliases, the container-supplied action bundles, and the
+ * account accent). No JSX, no state, no I/O — so a view can import it without
+ * dragging any other view in.
+ */
+
+import { APP_COLOR_NAMES, APP_COLOR_PRESETS, type AppColorName, type useTheme } from '@oxyhq/bloom/theme';
+import type { useI18n } from '../../hooks/useI18n';
+
+export type Theme = ReturnType<typeof useTheme>;
+export type Translate = ReturnType<typeof useI18n>['t'];
+
+/** The account-row actions the container wires for the switcher + menu views. */
+export interface OxyAuthChooserHandlers {
+  onSwitch: (accountId: string) => void;
+  onAdd: () => void;
+  onManage: () => void;
+  /**
+   * Change the current account's photo — opens the avatar-change flow. Because
+   * the account menu lives in the AccountDialog surface, this MORPHS that surface
+   * into `ChangeAvatar` (via `openAvatarPicker` → `openWithinOrPresent`), the same
+   * flow ManageAccount's avatar uses; it never stacks a new dialog.
+   */
+  onEditAvatar: () => void;
+}
+
+/** Used/total storage bytes for the "Oxy storage" block, or `null` when unknown. */
+export interface AccountStorageModel {
+  usedBytes: number;
+  limitBytes: number;
+}
+
+/** The account-menu row actions the container wires (deep-links / sheets / sign-out). */
+export interface AccountsMenuActions {
+  onOpenSettings: () => void;
+  onOpenData: () => void;
+  onManageStorage: () => void;
+  onUpgradeStorage: () => void;
+  onHelp: () => void;
+  onPrivacy: () => void;
+  onTerms: () => void;
+  onSignOut: () => void;
+}
+
+/**
+ * Where a WebAuthn ceremony can run from the current origin.
+ *
+ * A credential minted for `oxy.so` can only be ASSERTED there (or a loopback
+ * dev host) — a hard, browser-enforced RP-ID boundary, not feature detection.
+ * `'direct'` = a first-party Oxy web origin, the ceremony runs here.
+ * `'hub'`    = any other web origin; it runs in the auth.oxy.so popup instead.
+ * `'none'`   = native, where Commons owns identity.
+ */
+export type PasskeyMode = 'direct' | 'hub' | 'none';
+
+/**
+ * Everything that is NOT the sign-in surface's one primary action.
+ *
+ * The container wires these once; each view decides which of them are genuine
+ * alternatives to ITS primary surface and hands those to `TroubleDisclosure`
+ * (issue #691: fallbacks stay hidden until the user asks or the primary route
+ * fails). A view never renders one of these as a button.
+ */
+export interface SignInAlternatives {
+  /** Whether a WebAuthn ceremony is reachable from this origin at all. */
+  passkeyAvailable: boolean;
+  /**
+   * `true` while a DIRECT ceremony is in flight. The hub-popup variant reports
+   * its progress through `snapshot.signIn` instead, so it never sets this.
+   */
+  passkeyPending: boolean;
+  onSignInWithPasskey: () => void;
+  /** Fall back to the cross-device QR handoff (restarts the request). */
+  onShowQr: () => void;
+  /** Open the Commons store listing / landing page for this platform. */
+  onGetCommons: () => void;
+  /** Enter the account-creation view. */
+  onCreateAccount: () => void;
+}
+
+/**
+ * Resolve an account's stored color (a named Bloom preset, e.g. `'purple'`) to
+ * a concrete brand hex for the row accent. Falls back to the theme primary when
+ * the account has no color or the value is not a recognized preset, so the accent
+ * renders in EVERY consumer regardless of NativeWind availability.
+ */
+export function resolveAccentHex(color: string | null, fallback: string): string {
+  const preset = toPreset(color);
+  return preset ? APP_COLOR_PRESETS[preset].hex : fallback;
+}
+
+/** Narrow a stored color string to a known `AppColorName`, or `undefined`. */
+export function toPreset(color: string | null): AppColorName | undefined {
+  if (!color) return undefined;
+  return (APP_COLOR_NAMES as readonly string[]).includes(color)
+    ? (color as AppColorName)
+    : undefined;
+}

package/src/ui/components/authChooser/useUsernameAvailability.ts

@@ -0,0 +1,60 @@
+/**
+ * Debounced username-availability check over the existing SDK method.
+ *
+ * One responsibility: turn keystrokes into an `idle | checking | available |
+ * taken` verdict without racing. A sequence guard drops superseded responses,
+ * and a NETWORK failure resets the (now stale) verdict and toasts — it never
+ * paints an inline error inside the dialog (owner mandate).
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { toast } from '@oxyhq/bloom';
+import type { OxyServices } from '@oxyhq/core';
+import type { Translate } from './types';
+
+export type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken';
+
+/** Keystrokes settle for this long before a check is issued. */
+const DEBOUNCE_MS = 400;
+/** Shorter than this and there is nothing worth asking the server about. */
+const MIN_USERNAME_LENGTH = 3;
+
+export function useUsernameAvailability(
+  oxyServices: OxyServices,
+  t: Translate,
+): {
+  status: UsernameStatus;
+  check: (value: string) => void;
+} {
+  const [status, setStatus] = useState<UsernameStatus>('idle');
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const requestSeqRef = useRef(0);
+
+  const check = useCallback(
+    (value: string) => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      const seq = ++requestSeqRef.current;
+      if (!value || value.length < MIN_USERNAME_LENGTH) {
+        setStatus('idle');
+        return;
+      }
+      setStatus('checking');
+      timerRef.current = setTimeout(() => {
+        void oxyServices
+          .checkUsernameAvailability(value)
+          .then((result) => {
+            if (seq !== requestSeqRef.current) return; // superseded by a newer check
+            setStatus(result.available ? 'available' : 'taken');
+          })
+          .catch(() => {
+            if (seq !== requestSeqRef.current) return;
+            setStatus('idle');
+            toast.error(t('accounts.create.username.checkFailed'));
+          });
+      }, DEBOUNCE_MS);
+    },
+    [oxyServices, t],
+  );
+
+  return { status, check };
+}