@oxyhq/services 22.12.4 → 22.12.7

package/src/ui/components/authChooser/SignInEntryView.tsx

@@ -0,0 +1,121 @@
+/**
+ * The sign-in ENTRY (`signin` / `add` views) — ONE primary action.
+ *
+ * Issue #691, Phase 5: the normal experience presents no menu of authentication
+ * methods. The user sees "Continue with Oxy"; Oxy — not the user — then picks
+ * how the request reaches their Commons identity, and the request surface shows
+ * honest progress. Everything else (a QR from another device, a passkey on this
+ * device, getting Commons, creating an account) lives behind "Having trouble?".
+ *
+ * Existing accounts still render ABOVE the CTA: "continue as one of these" is a
+ * choice of WHO, not of HOW, so it is not one of the competing method buttons
+ * the issue removes.
+ *
+ * On web this view is transient — the container auto-starts the flow the instant
+ * the view is reached, because the request surface (QR, or "Check Commons on
+ * your phone") IS the primary route there, never something behind a tap.
+ */
+
+import type React from 'react';
+import { View } from 'react-native';
+import { Button } from '@oxyhq/bloom/button';
+import type { AccountDialogSnapshot } from '@oxyhq/core';
+import TroubleDisclosure from './TroubleDisclosure';
+import { AccountRow, Dividerish, SubtleLink } from './primitives';
+import { authChooserStyles as styles } from './styles';
+import type {
+  OxyAuthChooserHandlers,
+  OxySignInSurfaceAction,
+  SignInAlternatives,
+  Theme,
+  Translate,
+} from './types';
+
+interface SignInEntryViewProps {
+  snapshot: AccountDialogSnapshot;
+  theme: Theme;
+  t: Translate;
+  handlers: OxyAuthChooserHandlers;
+  /** The ONE primary action. Starts the flow; Oxy chooses the route from there. */
+  onContinueWithOxy: () => void;
+  alternatives: SignInAlternatives;
+}
+
+const SignInEntryView: React.FC<SignInEntryViewProps> = ({
+  snapshot,
+  theme,
+  t,
+  handlers,
+  onContinueWithOxy,
+  alternatives,
+}) => {
+  // The entry has no chosen route yet, so nothing here can have failed: the
+  // alternatives stay behind the disclosure unconditionally.
+  const troubleActions: OxySignInSurfaceAction[] = [
+    {
+      key: 'scan-qr-link',
+      label: t('accountSwitcher.scanQr'),
+      onPress: alternatives.onShowQr,
+    },
+    ...(alternatives.passkeyAvailable
+      ? [
+          {
+            key: 'passkey-signin-link',
+            label: alternatives.passkeyPending
+              ? t('accountSwitcher.passkeySigningIn')
+              : t('accountSwitcher.useIdentityOnDevice'),
+            onPress: alternatives.onSignInWithPasskey,
+            disabled: alternatives.passkeyPending,
+          },
+        ]
+      : []),
+    {
+      key: 'get-commons-link',
+      label: t('accountSwitcher.getCommons'),
+      onPress: alternatives.onGetCommons,
+    },
+  ];
+
+  return (
+    <View style={styles.signInBlock}>
+      {snapshot.accounts.length > 0 ? (
+        <View style={styles.rows}>
+          {snapshot.accounts.map((account) => (
+            <AccountRow
+              key={account.accountId}
+              account={account}
+              theme={theme}
+              switching={snapshot.switchingAccountId === account.accountId}
+              disabled={snapshot.switchingAccountId !== null}
+              onPress={() => handlers.onSwitch(account.accountId)}
+            />
+          ))}
+          <Dividerish theme={theme} label={t('signin.or')} />
+        </View>
+      ) : null}
+
+      <Button
+        variant="primary"
+        onPress={onContinueWithOxy}
+        style={styles.primaryButton}
+        testID="continue-with-oxy"
+      >
+        {t('accountSwitcher.continueWithOxy')}
+      </Button>
+
+      {/* Account CREATION is not an authentication method — it is the way in for
+          someone who has no Oxy ID yet — so it keeps its own subordinate link
+          rather than hiding behind a troubleshooting affordance. */}
+      <SubtleLink
+        label={t('signin.createAccountLink')}
+        theme={theme}
+        onPress={alternatives.onCreateAccount}
+        testID="create-account-link"
+      />
+
+      <TroubleDisclosure actions={troubleActions} revealed={false} theme={theme} t={t} />
+    </View>
+  );
+};
+
+export default SignInEntryView;

package/src/ui/components/authChooser/SignInRequestView.tsx

@@ -0,0 +1,130 @@
+/**
+ * The ACTIVE REQUEST surface (`qr` view) as the account dialog drives it —
+ * `AccountDialogController`'s device flow bound to the shared, presentational
+ * {@link OxySignInRequestSurface} (issue #691, Phase 5).
+ *
+ * This module owns WIRING only. Every pixel comes from the shared surface, which
+ * the auth.oxy.so IdP mounts from its own OAuth-bound request; there is one
+ * implementation of the request presentation, not two. What lives here is what
+ * only the account dialog knows:
+ *
+ *  - which of the controller's facts map onto the surface's props;
+ *  - which alternatives are genuine ones for the CURRENT presentation (the
+ *    passkey ceremony is pointless once the request is already being confirmed,
+ *    and a QR link is redundant while the QR itself is the primary visual);
+ *  - the one piece of local intent the controller has no opinion on: leaving the
+ *    acquisition surface via "I have Commons on another device".
+ *
+ * Failures are NOT rendered here. The container toasts them at the point they
+ * arrive (owner mandate: no error renders inline inside the dialog); this view
+ * only reports that the request failed, so the surface can offer "Try again".
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import type { AccountDialogSnapshot } from '@oxyhq/core';
+import OxySignInRequestSurface from '../OxySignInRequestSurface';
+import type { OxySignInSurfaceAction, SignInAlternatives, Translate } from './types';
+
+interface SignInRequestViewProps {
+  snapshot: AccountDialogSnapshot;
+  t: Translate;
+  /** Restart the request after a failure. */
+  onRetry: () => void;
+  alternatives: SignInAlternatives;
+}
+
+const SignInRequestView: React.FC<SignInRequestViewProps> = ({
+  snapshot,
+  t,
+  onRetry,
+  alternatives,
+}) => {
+  const { signIn, commonsAvailability } = snapshot;
+  // Set only from the disclosure's own "I have Commons on another device" —
+  // an explicit user choice to leave the acquisition surface, never inferred.
+  const [qrRequested, setQrRequested] = useState(false);
+
+  const failed = signIn.phase === 'error';
+  // A same-device QR is a dead end without Commons, so the acquisition surface
+  // leads — until the user explicitly asks for the QR anyway.
+  const acquiring = !failed && commonsAvailability === 'unavailable' && !qrRequested;
+
+  // A ceremony is pointless once the request is already being confirmed, and a
+  // ceremony FAILURE is toasted by the container — this link never renders an
+  // error of its own (owner mandate).
+  const passkeyAction: OxySignInSurfaceAction[] =
+    alternatives.passkeyAvailable && signIn.phase !== 'authorized' && signIn.phase !== 'completed'
+      ? [
+          {
+            key: 'passkey-signin-link',
+            label: alternatives.passkeyPending
+              ? t('accountSwitcher.passkeySigningIn')
+              : t('accountSwitcher.useIdentityOnDevice'),
+            onPress: alternatives.onSignInWithPasskey,
+            disabled: alternatives.passkeyPending,
+          },
+        ]
+      : [];
+
+  const troubleActions = ((): OxySignInSurfaceAction[] => {
+    // Nothing about the chosen route is actionable any more — only the
+    // authentication alternatives are.
+    if (failed) return passkeyAction;
+    if (acquiring) {
+      return [
+        {
+          key: 'show-qr-anyway-link',
+          label: t('accountSwitcher.showQrAnyway'),
+          onPress: () => setQrRequested(true),
+        },
+        ...passkeyAction,
+      ];
+    }
+    return [
+      // Redundant while the QR already IS the primary surface.
+      ...(signIn.route === 'qr'
+        ? []
+        : [
+            {
+              key: 'scan-qr-link',
+              label: t('accountSwitcher.scanQr'),
+              onPress: alternatives.onShowQr,
+            },
+          ]),
+      ...passkeyAction,
+      {
+        key: 'get-commons-link',
+        label: t('accountSwitcher.getCommons'),
+        onPress: alternatives.onGetCommons,
+      },
+    ];
+  })();
+
+  return (
+    <OxySignInRequestSurface
+      route={signIn.route}
+      progress={signIn.progress}
+      qrPayload={signIn.qrPayload}
+      routeFailed={signIn.routeFailed}
+      failed={failed}
+      onRetry={onRetry}
+      onAcquireCommons={acquiring ? alternatives.onGetCommons : undefined}
+      subordinate={[
+        // Account CREATION is not an authentication method, and on web this
+        // surface is the FIRST one a signed-out user sees (the entry auto-starts
+        // straight through it) — so the way in for someone with no Oxy ID stays
+        // visible as a subordinate link rather than hiding behind a
+        // troubleshooting affordance.
+        {
+          key: 'create-account-link',
+          label: t('signin.createAccountLink'),
+          onPress: alternatives.onCreateAccount,
+        },
+      ]}
+      alternatives={troubleActions}
+    />
+  );
+};
+
+export default SignInRequestView;

package/src/ui/components/authChooser/SignUpView.tsx

@@ -0,0 +1,174 @@
+/**
+ * Account creation (`signup` view).
+ *
+ * Commons is ALWAYS the priority path (owner mandate) and leads everywhere it
+ * appears: native shows only "Create your identity in Commons" (or "Get Commons"
+ * first, when it is not installed); web on a first-party Oxy origin leads with
+ * the SAME "Get Commons" CTA, with inline passkey creation offered UNDERNEATH as
+ * the de-emphasized "don't want to install anything" alternative — never
+ * co-equal, never a competing button. Anywhere else (a non-Oxy web origin,
+ * before the b2 hub-relay ships) shows an honest "not available here yet"
+ * handoff instead of a broken button.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { TextInput, View } from 'react-native';
+import { Button } from '@oxyhq/bloom/button';
+import { Text } from '@oxyhq/bloom/typography';
+import type { AccountDialogSnapshot, OxyServices } from '@oxyhq/core';
+import { isWebBrowser } from '../../utils/isWebBrowser';
+import { Dividerish, SubtleLink } from './primitives';
+import { authChooserStyles as styles } from './styles';
+import type { PasskeyMode, Theme, Translate } from './types';
+import { useUsernameAvailability, type UsernameStatus } from './useUsernameAvailability';
+
+interface SignUpViewProps {
+  snapshot: AccountDialogSnapshot;
+  theme: Theme;
+  t: Translate;
+  oxyServices: OxyServices;
+  passkeyMode: PasskeyMode;
+  onCreateWithPasskey: (username: string) => void;
+  createPending: boolean;
+  /** Open the auth.oxy.so hub popup (b2) — the 'hub' mode's only path. */
+  onOpenHub: () => void;
+  /** Deep-link into Commons' own identity-creation screen (installed only). */
+  onCreateIdentityInCommons: () => void;
+  /** Open the Commons store listing / landing page for this platform. */
+  onGetCommons: () => void;
+  onBackToSignIn: () => void;
+}
+
+const SignUpView: React.FC<SignUpViewProps> = ({
+  snapshot,
+  theme,
+  t,
+  oxyServices,
+  passkeyMode,
+  onCreateWithPasskey,
+  createPending,
+  onOpenHub,
+  onCreateIdentityInCommons,
+  onGetCommons,
+  onBackToSignIn,
+}) => {
+  const [username, setUsername] = useState('');
+  const { status: usernameStatus, check: checkUsername } = useUsernameAvailability(oxyServices, t);
+  const canSubmit = username.trim().length >= 3 && usernameStatus === 'available' && !createPending;
+
+  // Native — Commons owns identity creation. Deep-link straight in when it is
+  // installed, else lead with the same "Get Commons" acquisition CTA.
+  if (!isWebBrowser()) {
+    const commonsInstalled = snapshot.commonsAvailability === 'available';
+    return (
+      <View style={styles.centeredBlock}>
+        <Button
+          variant="primary"
+          onPress={commonsInstalled ? onCreateIdentityInCommons : onGetCommons}
+          style={styles.primaryButton}
+        >
+          {commonsInstalled ? t('signup.createInCommons') : t('accountSwitcher.getCommons')}
+        </Button>
+        <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onBackToSignIn} />
+      </View>
+    );
+  }
+
+  // Web, first-party Oxy origin. Commons leads with a "Get Commons" CTA; passkey
+  // creation is the de-emphasized alternative underneath for someone who doesn't
+  // want to install anything — a secondary button introduced by its own "No
+  // Commons?" framing, the same subordination the sign-in surfaces use.
+  if (passkeyMode === 'direct') {
+    return (
+      <View style={styles.signInBlock}>
+        <Text style={[styles.qrHeadline, { color: theme.colors.text }]}>
+          {t('signup.commonsHeadline')}
+        </Text>
+        <Text style={[styles.mutedText, { color: theme.colors.textSecondary }]}>
+          {t('signup.commonsExplainer')}
+        </Text>
+        <Button variant="primary" onPress={onGetCommons} style={styles.primaryButton}>
+          {t('accountSwitcher.getCommons')}
+        </Button>
+
+        <Dividerish theme={theme} label={t('signin.or')} />
+
+        <Text style={[styles.mutedText, { color: theme.colors.textSecondary }]}>
+          {t('signup.passkeyAlternative')}
+        </Text>
+        <TextInput
+          style={[styles.usernameInput, { borderColor: theme.colors.border, color: theme.colors.text }]}
+          placeholder={t('signup.usernamePlaceholder')}
+          placeholderTextColor={theme.colors.textSecondary}
+          value={username}
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoComplete="username"
+          onChangeText={(value) => {
+            setUsername(value);
+            checkUsername(value.trim());
+          }}
+          testID="signup-username-input"
+        />
+        <UsernameStatusText status={usernameStatus} theme={theme} t={t} />
+        <Button
+          variant="secondary"
+          onPress={() => onCreateWithPasskey(username.trim())}
+          disabled={!canSubmit}
+          style={styles.secondaryButton}
+          testID="signup-create-button"
+        >
+          {createPending ? t('signup.creating') : t('signup.createAccount')}
+        </Button>
+        <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onBackToSignIn} />
+      </View>
+    );
+  }
+
+  // Web, non-Oxy origin (b2): a passkey ceremony cannot run locally here — the
+  // same WebAuthn RP-ID boundary the sign-in surfaces hit — so this opens the
+  // auth.oxy.so hub popup. Completing EITHER a sign-in OR a fresh sign-up there
+  // relays the resulting session back through the SAME poll/socket engine.
+  return (
+    <View style={styles.centeredBlock}>
+      <Text style={[styles.mutedText, { color: theme.colors.textSecondary }]}>
+        {t('signup.hubExplainer')}
+      </Text>
+      <Button variant="primary" onPress={onOpenHub} style={styles.primaryButton}>
+        {t('signup.continueInWindow')}
+      </Button>
+      <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onBackToSignIn} />
+    </View>
+  );
+};
+
+/** The inline availability verdict. Network FAILURES are toasted, never shown here. */
+const UsernameStatusText: React.FC<{ status: UsernameStatus; theme: Theme; t: Translate }> = ({
+  status,
+  theme,
+  t,
+}) => {
+  if (status === 'idle') return null;
+  if (status === 'checking') {
+    return (
+      <Text style={[styles.mutedText, { color: theme.colors.textSecondary }]}>
+        {t('signup.usernameChecking')}
+      </Text>
+    );
+  }
+  if (status === 'available') {
+    return (
+      <Text style={[styles.mutedText, { color: theme.colors.success }]}>
+        {t('signup.usernameAvailable')}
+      </Text>
+    );
+  }
+  return (
+    <Text style={[styles.mutedText, { color: theme.colors.error }]}>
+      {t('signup.usernameTaken')}
+    </Text>
+  );
+};
+
+export default SignUpView;

package/src/ui/components/authChooser/TroubleDisclosure.tsx

@@ -0,0 +1,73 @@
+/**
+ * The "Having trouble?" progressive disclosure (issue #691, Phase 5).
+ *
+ * The normal sign-in surface presents ONE primary action. Every alternative —
+ * scanning a QR from another device, a passkey on this device, getting Commons,
+ * creating an account — lives here, hidden until the user asks for it or the
+ * chosen primary route fails.
+ *
+ * Two renderings, deliberately not one controlled component:
+ *  - `revealed` (the primary route failed, or there IS no primary route): the
+ *    alternatives ARE the surface's content now, so they render plainly. There
+ *    is nothing left to hide them behind.
+ *  - otherwise: Bloom's own `Collapsible`, whose trigger is the small
+ *    "Having trouble?" affordance.
+ *
+ * Splitting on `revealed` is what keeps the open state where it belongs — inside
+ * Bloom's uncontrolled disclosure — instead of forcing a hand-rolled controlled
+ * copy of it here.
+ */
+
+import type React from 'react';
+import { View } from 'react-native';
+import { Collapsible } from '@oxyhq/bloom/collapsible';
+import { SubtleLink } from './primitives';
+import { authChooserStyles as styles } from './styles';
+import type { OxySignInSurfaceAction, Theme, Translate } from './types';
+
+interface TroubleDisclosureProps {
+  /** The alternative routes out of the current surface. Always subordinate links. */
+  actions: readonly OxySignInSurfaceAction[];
+  /**
+   * `true` when the primary route could not be carried out (`signIn.routeFailed`)
+   * or the surface has no working primary at all (a failed request). The
+   * alternatives are shown without asking.
+   */
+  revealed: boolean;
+  theme: Theme;
+  t: Translate;
+}
+
+const TroubleDisclosure: React.FC<TroubleDisclosureProps> = ({ actions, revealed, theme, t }) => {
+  if (actions.length === 0) return null;
+
+  const links = (
+    <View style={styles.troubleActions}>
+      {actions.map((action) => (
+        <SubtleLink
+          key={action.key}
+          label={action.label}
+          theme={theme}
+          onPress={action.onPress}
+          disabled={action.disabled}
+          testID={action.key}
+        />
+      ))}
+    </View>
+  );
+
+  if (revealed) return links;
+
+  return (
+    <Collapsible
+      title={t('accountSwitcher.havingTrouble')}
+      style={styles.troubleTrigger}
+      titleStyle={[styles.linkText, { color: theme.colors.textSecondary }]}
+      testID="trouble-disclosure"
+    >
+      {links}
+    </Collapsible>
+  );
+};
+
+export default TroubleDisclosure;

package/src/ui/components/authChooser/primitives.tsx

@@ -0,0 +1,144 @@
+/**
+ * The small presentational building blocks shared across the auth chooser's
+ * views. One responsibility each, no controller access, no side effects — they
+ * take props and render.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { Text } from '@oxyhq/bloom/typography';
+import { BloomColorScope } from '@oxyhq/bloom/theme';
+import type { SwitchableAccount } from '@oxyhq/core';
+import { authChooserStyles as styles } from './styles';
+import { resolveAccentHex, toPreset, type Theme } from './types';
+
+/** Diameter of a row avatar (the sign-in view's account rows). */
+const ROW_AVATAR_SIZE = 40;
+
+type HoverPressableProps = Omit<React.ComponentProps<typeof Pressable>, 'className'> & {
+  baseClassName: string;
+  hoverClassName: string;
+};
+
+/**
+ * A `Pressable` that appends a hover-tint NativeWind token while pointer-hovered.
+ * The Metro web pipeline here does NOT emit NativeWind `hover:` variants, so hover
+ * is driven by RN's cross-platform `onHoverIn`/`onHoverOut` (they fire only on web
+ * via react-native-web; a no-op on native) toggling a plain background token —
+ * the tint stays a NativeWind class, only the trigger is JS.
+ */
+export const HoverPressable: React.FC<HoverPressableProps> = ({
+  baseClassName,
+  hoverClassName,
+  ...rest
+}) => {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <Pressable
+      {...rest}
+      className={hovered ? `${baseClassName} ${hoverClassName}` : baseClassName}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    />
+  );
+};
+
+/**
+ * A SUBORDINATE action: a small centred text link, never a button.
+ *
+ * This is the single visual grammar for everything that is not the surface's one
+ * primary action (issue #691) — the sign-up entry, and every alternative revealed
+ * behind "Having trouble?". Keeping them all on one component is what stops an
+ * alternative from quietly growing into a co-equal button again.
+ */
+export const SubtleLink: React.FC<{
+  label: string;
+  theme: Theme;
+  onPress: () => void;
+  disabled?: boolean;
+  testID?: string;
+}> = ({ label, theme, onPress, disabled, testID }) => (
+  <Pressable
+    onPress={onPress}
+    disabled={disabled}
+    accessibilityRole="button"
+    accessibilityLabel={label}
+    style={styles.footerLink}
+    testID={testID}
+  >
+    <Text style={[styles.linkText, { color: theme.colors.textSecondary }]}>{label}</Text>
+  </Pressable>
+);
+
+/** A labelled hairline separating two blocks ("or"). */
+export const Dividerish: React.FC<{ theme: Theme; label: string }> = ({ theme, label }) => (
+  <View style={styles.dividerRow}>
+    <View style={[styles.dividerLine, { backgroundColor: theme.colors.border }]} />
+    <Text style={[styles.dividerText, { color: theme.colors.textSecondary }]}>{label}</Text>
+    <View style={[styles.dividerLine, { backgroundColor: theme.colors.border }]} />
+  </View>
+);
+
+/**
+ * An account row on the sign-in entry — "continue as one of these" rather than a
+ * choice of authentication METHOD, which is why it stays above the primary CTA
+ * instead of behind the trouble disclosure.
+ */
+export const AccountRow: React.FC<{
+  account: SwitchableAccount;
+  theme: Theme;
+  switching: boolean;
+  disabled: boolean;
+  onPress: () => void;
+}> = ({ account, theme, switching, disabled, onPress }) => {
+  const accent = resolveAccentHex(account.color, theme.colors.primary);
+
+  return (
+    <BloomColorScope colorPreset={toPreset(account.color)} asChild>
+      <Pressable
+        style={[
+          styles.accountRow,
+          {
+            borderColor: account.isCurrent ? accent : theme.colors.border,
+            backgroundColor: theme.colors.card,
+          },
+          disabled && !switching ? styles.rowDisabled : null,
+        ]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ selected: account.isCurrent, disabled }}
+        accessibilityLabel={account.displayName}
+      >
+        <View style={[styles.avatarRing, { borderColor: account.isCurrent ? accent : 'transparent' }]}>
+          <Avatar
+            source={account.avatarUrl ?? undefined}
+            variant="thumb"
+            name={account.displayName}
+            size={ROW_AVATAR_SIZE}
+          />
+        </View>
+        <View style={styles.rowMeta}>
+          <Text style={[styles.rowName, { color: theme.colors.text }]} numberOfLines={1}>
+            {account.displayName}
+          </Text>
+          {account.email ? (
+            <Text style={[styles.rowHandle, { color: theme.colors.textSecondary }]} numberOfLines={1}>
+              {account.email}
+            </Text>
+          ) : null}
+        </View>
+        {switching ? (
+          <MaterialCommunityIcons name="loading" size={20} color={accent} />
+        ) : account.isCurrent ? (
+          <MaterialCommunityIcons name="check-circle" size={20} color={accent} />
+        ) : (
+          <MaterialCommunityIcons name="chevron-right" size={20} color={theme.colors.textSecondary} />
+        )}
+      </Pressable>
+    </BloomColorScope>
+  );
+};