@oxy.so/services 4.0.7 → 6.1.0

package/src/ui/components/signIn/InlineCommonsQr.tsx

@@ -0,0 +1,135 @@
+/**
+ * The sign-in entry's embedded QR, over the split card's photo carousel: scan
+ * it with Commons on a phone and this screen is signed in.
+ *
+ * It owns one QR-only request (`controller.startInlineQr()`): started the
+ * first time the block is actually laid out on screen — never while its column
+ * is hidden below `md` — renewed when it expires, and withdrawn when the block
+ * goes away while it is still approvable. It never pushes to a phone or opens Commons —
+ * the person did not ask for either by opening the screen. Any other sign-in
+ * they choose supersedes it like any new attempt.
+ *
+ * Anti-phishing: the plate encodes `signIn.qrPayload` and renders nothing
+ * derived from it; the approver resolves the app server-side.
+ */
+
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import { Button } from '@oxy.so/bloom/button';
+import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
+import { RiRefreshLine } from '@oxy.so/bloom/icons/RiRefreshLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import type { AccountDialogController } from '@oxy.so/core';
+import { useI18n } from '../../hooks/useI18n';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+
+/** High-contrast, un-themed on purpose: scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 112;
+const PLATE_PADDING = 8;
+const PLATE_SIZE = QR_SIZE + PLATE_PADDING * 2;
+
+export const InlineCommonsQr: React.FC<{ controller: AccountDialogController | null }> = ({ controller }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { signIn } = useAccountDialogSnapshot(controller);
+  const live = signIn.inline && (signIn.phase === 'starting' || signIn.phase === 'waiting');
+  const expired = signIn.inline && signIn.phase === 'error' && signIn.failure === 'expired';
+
+  // Laid out with a size only where its column shows (`display: none` below
+  // `md` lays out empty), so that is when a request is worth having.
+  const [shown, setShown] = useState(false);
+
+  // One request for as long as the block is on screen. Withdrawn on the way
+  // out only while it is still ours and still approvable: an attempt the
+  // person started meanwhile (a passkey window, "Continue with Oxy") is theirs.
+  useEffect(() => {
+    if (!controller || !shown) return;
+    const { signIn: current } = controller.getSnapshot();
+    if (!(current.inline && (current.phase === 'starting' || current.phase === 'waiting'))) {
+      void controller.startInlineQr();
+    }
+    return () => {
+      const { signIn: last } = controller.getSnapshot();
+      if (last.inline && (last.phase === 'starting' || last.phase === 'waiting')) controller.cancelSignIn();
+    };
+  }, [controller, shown]);
+
+  // A code only lives a few minutes; an expired one is replaced, not reported.
+  useEffect(() => {
+    if (controller && expired) void controller.startInlineQr();
+  }, [controller, expired]);
+
+  let plate: React.ReactNode;
+  if (signIn.inline && signIn.progress === 'identity-confirmed') {
+    plate = <RiCheckboxCircleLine size="3xl" fill={theme.colors.success} />;
+  } else if (live && signIn.qrPayload && signIn.progress !== 'confirming-identity') {
+    plate = <QRCode value={signIn.qrPayload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />;
+  } else if (live || expired || (signIn.inline && signIn.phase === 'completed')) {
+    plate = <ActivityIndicator size="large" color={QR_FOREGROUND} />;
+  } else {
+    // Failed for a reason renewing will not fix by itself, or superseded and
+    // then withdrawn: one press for a new code.
+    plate = (
+      <Button
+        appearance="plain"
+        tone="neutral"
+        size="sm"
+        iconOnly
+        leadingIcon={RiRefreshLine}
+        accessibilityLabel={t('signin.qr.renew')}
+        onPress={() => void controller?.startInlineQr()}
+        testID="inline-qr-renew"
+      />
+    );
+  }
+
+  return (
+    <View
+      style={styles.block}
+      testID="inline-commons-qr"
+      onLayout={(event) => {
+        if (event.nativeEvent.layout.width > 0) setShown(true);
+      }}
+    >
+      <View style={[styles.plate, { borderColor: theme.colors.border }]}>{plate}</View>
+      <Text style={[styles.caption, styles.captionOnMedia]}>
+        {t('signin.qr.caption')}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  block: {
+    width: PLATE_SIZE,
+    alignItems: 'center',
+    gap: 6,
+  },
+  plate: {
+    width: PLATE_SIZE,
+    height: PLATE_SIZE,
+    padding: PLATE_PADDING,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    backgroundColor: QR_PLATE_BG,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    textAlign: 'center',
+  },
+  captionOnMedia: {
+    color: '#FFFFFF',
+    fontWeight: '500',
+    textShadowColor: 'rgba(0, 0, 0, 0.6)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 4,
+  },
+});

package/src/ui/components/signIn/OxyAccountPicker.tsx

@@ -0,0 +1,129 @@
+/**
+ * "Choose an account" — every `principal acting as account` pair on this
+ * device, then "Use another account".
+ *
+ * The front screen of sign-in on a returning device, in the account dialog and
+ * on every auth.oxy.so page that asks WHO (sign-in, OAuth authorize, device
+ * approval, MCP linking). Presentational: the host decides what choosing a row
+ * means — a switch, a "Continue as" sign-in, or activating the pair before an
+ * OAuth consent — and passes the pair back, never an account id, which cannot
+ * say whose route was chosen.
+ */
+
+import type React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { RiArrowRightSLine } from '@oxy.so/bloom/icons/RiArrowRightSLine';
+import { RiUserAddLine } from '@oxy.so/bloom/icons/RiUserAddLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core';
+import { useI18n } from '../../hooks/useI18n';
+import { AccountRow } from '../authChooser/primitives';
+import { authChooserStyles } from '../authChooser/styles';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+
+export interface OxyAccountPickerProps {
+  /** The device's people, each with the accounts they may act as (`useDeviceSwitcher`). */
+  principals: SwitcherPrincipalRow[];
+  /** The app being continued to, when there is one. */
+  appName?: string | null;
+  onSelectContext: (context: SwitcherContextRow) => void;
+  /** "Use another account" — the host reveals its sign-in. */
+  onUseAnother: () => void;
+  /** The pair being activated, whose row shows it is busy. */
+  pendingContextId?: string | null;
+  /** Disables every row while a choice is in flight. */
+  isLoading?: boolean;
+  /**
+   * This origin holds no session. A row then reads "Continue as @handle" and
+   * never as the current account: the device can list an identity as active
+   * while nobody is signed in HERE.
+   */
+  signedOut?: boolean;
+}
+
+export const OxyAccountPicker: React.FC<OxyAccountPickerProps> = ({
+  principals,
+  appName,
+  onSelectContext,
+  onUseAnother,
+  pendingContextId = null,
+  isLoading = false,
+  signedOut = false,
+}) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  // Whose route a row is only needs naming once someone holds more than one
+  // account here — the same rule the account menu's group headers follow.
+  const namesTheOperator = showsPrincipalHeaders(principals);
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader
+        title={t('signin.chooser.title')}
+        description={appName ? t('signin.chooser.subtitleToApp', { app: appName }) : t('signin.chooser.subtitle')}
+      />
+      <View style={authChooserStyles.rows}>
+        {principals.flatMap((principal) =>
+          principal.contexts.map((context) => (
+            <AccountRow
+              key={context.contextId}
+              context={context}
+              operatedBy={
+                namesTheOperator && context.isDelegated
+                  ? t('accountSwitcher.context.operatedBy', { name: principal.displayName })
+                  : null
+              }
+              continueAsLabel={
+                signedOut
+                  ? t('signin.chooser.continueAs', {
+                      name: context.handle ? `@${context.handle}` : context.displayName,
+                    })
+                  : null
+              }
+              theme={theme}
+              activating={pendingContextId === context.contextId}
+              disabled={isLoading}
+              onPress={() => onSelectContext(context)}
+            />
+          )),
+        )}
+        <Pressable
+          onPress={onUseAnother}
+          disabled={isLoading}
+          accessibilityRole="button"
+          accessibilityLabel={t('signin.chooser.useAnother')}
+          style={[
+            authChooserStyles.accountRow,
+            { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
+            isLoading ? authChooserStyles.rowDisabled : null,
+          ]}
+          testID="use-another-account"
+        >
+          <View style={[styles.addGlyph, { backgroundColor: theme.colors.backgroundSecondary }]}>
+            <RiUserAddLine size="md" fill={theme.colors.textSecondary} />
+          </View>
+          <Text style={[authChooserStyles.rowName, styles.addLabel, { color: theme.colors.text }]}>
+            {t('signin.chooser.useAnother')}
+          </Text>
+          <RiArrowRightSLine size="md" fill={theme.colors.textSecondary} />
+        </Pressable>
+      </View>
+      <OxyAuthTerms />
+    </OxyAuthScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Matches `AccountRow`'s 40px avatar plus its 2px ring and 1px gap.
+  addGlyph: {
+    width: 46,
+    height: 46,
+    borderRadius: 23,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  addLabel: {
+    flex: 1,
+  },
+});

package/src/ui/components/signIn/OxyAuthScreen.tsx

@@ -0,0 +1,123 @@
+/**
+ * The shell every Oxy sign-in screen shares — the in-app account dialog and
+ * every page of the auth.oxy.so IdP render these, so the two cannot drift:
+ *
+ *   header   the Oxy mark (56), then the title (48/800, tight) and a 18px
+ *            description, 8 apart
+ *   screen   blocks 24 apart, at most 448 wide
+ *   split    from `md`, Bloom `AuthCard`'s split base — max 880, radius 24,
+ *            1px border, two equal columns, the right one on the secondary
+ *            surface; below `md` the right column is dropped, not stacked
+ *   loading  an indeterminate spinner holding the screen's height
+ *   terms    one centred caption linking the Terms of Service and Privacy Policy
+ *
+ * Layout is NativeWind `className` (breakpoints included). Type stays on
+ * Bloom `Text`'s own ramp through `style` — a `className` there drops its
+ * default family — and colours come from the Bloom theme.
+ */
+
+import type React from 'react';
+import { ActivityIndicator, Linking, Text as RNText } from 'react-native';
+import { View } from 'react-native-css/components';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { useI18n } from '../../hooks/useI18n';
+import { LogoIcon } from '../logo/LogoIcon';
+
+const LOGO_HEIGHT = 56;
+const TERMS_URL = 'https://oxy.so/company/transparency/policies/terms-of-service';
+const PRIVACY_URL = 'https://oxy.so/company/transparency/policies/privacy';
+
+const TITLE = { fontSize: 48, lineHeight: 48, fontWeight: '800', letterSpacing: -1.2 } as const;
+const DESCRIPTION = { fontSize: 18, lineHeight: 28 } as const;
+const TERMS = { fontSize: 14, lineHeight: 20, textAlign: 'center', paddingHorizontal: 24 } as const;
+
+export interface OxyAuthScreenHeaderProps {
+  title: string;
+  description?: React.ReactNode;
+}
+
+/** The Oxy mark over the screen's title and description. */
+export const OxyAuthScreenHeader: React.FC<OxyAuthScreenHeaderProps> = ({ title, description }) => {
+  const theme = useTheme();
+  return (
+    <View className="gap-6">
+      <LogoIcon height={LOGO_HEIGHT} />
+      <View className="max-w-[90%] gap-2">
+        <Text accessibilityRole="header" style={[TITLE, { color: theme.colors.text }]}>
+          {title}
+        </Text>
+        {description != null && description !== '' ? (
+          typeof description === 'string' ? (
+            <Text style={[DESCRIPTION, { color: theme.colors.textSecondary }]}>
+              {description}
+            </Text>
+          ) : (
+            description
+          )
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+/** A sign-in screen's column: its blocks 24 apart. `className` extends it (the split's form column). */
+export const OxyAuthScreen: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className }) => (
+  <View className={`w-full max-w-[448px] self-center gap-6 ${className ?? ''}`}>{children}</View>
+);
+
+/** The split card: `children` on the left and, from `md`, `aside` on the right. */
+export const OxyAuthSplit: React.FC<{ children: React.ReactNode; aside: React.ReactNode }> = ({ children, aside }) => {
+  const theme = useTheme();
+  return (
+    <View
+      className="w-full self-center md:max-w-[880px] md:flex-row md:rounded-3xl md:border md:border-border md:bg-card md:overflow-hidden"
+    >
+      {/* Padding on an inner box: a padded flex item cannot shrink its base
+          size below its padding, which breaks the two equal tracks. */}
+      <View className="md:flex-1 md:basis-0 md:min-w-0">
+        <View className="md:p-8">{children}</View>
+      </View>
+      <View
+        className="hidden md:flex md:flex-1 md:basis-0 md:min-w-0 items-center justify-center overflow-hidden p-8"
+        style={{ backgroundColor: theme.colors.backgroundSecondary }}
+      >
+        {aside}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * The screen while there is nothing to show yet. React Native's own indicator:
+ * `@oxy.so/bloom/loading` can tree-shake to `undefined` in a rolldown-vite
+ * production bundle when co-imported with `@oxy.so/bloom/button`.
+ */
+export const OxyAuthLoading: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <View className="min-h-[300px] items-center justify-center">
+      <ActivityIndicator size="large" color={theme.colors.primary} />
+    </View>
+  );
+};
+
+/** "By continuing, you agree to our Terms of Service and Privacy Policy." */
+export const OxyAuthTerms: React.FC = () => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const link = { color: theme.colors.text, textDecorationLine: 'underline' as const };
+  return (
+    <Text style={[TERMS, { color: theme.colors.textSecondary }]}>
+      {t('signin.terms.before')}{' '}
+      <RNText accessibilityRole="link" style={link} onPress={() => void Linking.openURL(TERMS_URL)}>
+        {t('signin.terms.termsLink')}
+      </RNText>{' '}
+      {t('signin.terms.and')}{' '}
+      <RNText accessibilityRole="link" style={link} onPress={() => void Linking.openURL(PRIVACY_URL)}>
+        {t('signin.terms.privacyLink')}
+      </RNText>
+      .
+    </Text>
+  );
+};

package/src/ui/components/signIn/OxyCreateAccountPanel.tsx

@@ -0,0 +1,207 @@
+/**
+ * Creating an Oxy account on the web (ADR 0029 D3), auth.oxy.so's `/signup`:
+ *
+ *   username → recovery email → the code sent to it → passkey → signed in
+ *
+ * A web account is a username, a passkey and a recovery email — no password, no
+ * phrase, no key. The email is confirmed before the account exists, and is
+ * used only to get back in (`OxyRecoverAccountPanel`). Commons stays the way to
+ * hold your own key: the first step says so, and linking Commons later makes
+ * the account self-custodied and deletes the email.
+ *
+ * Only on auth.oxy.so: the passkey belongs to that origin (RP ID `oxy.so`,
+ * asserted only there), and an app's dialog opens this page in a window
+ * (`OxySignUpPanel`'s `onCreateOnWeb`).
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { Linking, Platform } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { toast } from '@oxy.so/bloom/toast';
+import { DeviceManager } from '@oxy.so/core';
+import { emailAddressSchema } from '@oxy.so/contracts';
+import { useOxy } from '../../context/OxyContext';
+import { runPasskeyRegisterSignIn } from '../../context/passkeyFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
+import { isPasskeySupported, runRegistrationCeremony } from '../../../webauthn/passkeyClient';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+import {
+  AccountFlowAction,
+  AccountFlowErrorLine,
+  AccountFlowField,
+  EmailCodeStep,
+  describeAccountFlowError,
+  isTicketExpired,
+} from './accountFlowParts';
+
+type Step =
+  | { name: 'username' }
+  | { name: 'email' }
+  | { name: 'code'; verificationId: string }
+  | { name: 'passkey'; emailTicket: string };
+
+export interface OxyCreateAccountPanelProps {
+  /** The account exists and this origin is signed in as it. */
+  onSignedIn: () => void;
+  /** "Already have an account? Sign in". */
+  onSignIn: () => void;
+}
+
+export const OxyCreateAccountPanel: React.FC<OxyCreateAccountPanelProps> = ({ onSignedIn, onSignIn }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { oxyServices, handleWebSession } = useOxy();
+  const [step, setStep] = useState<Step>({ name: 'username' });
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = (work: () => Promise<void>) => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    work()
+      .catch((reason: unknown) => {
+        if (isTicketExpired(reason)) setStep({ name: 'email' });
+        setError(describeAccountFlowError(reason, t));
+      })
+      .finally(() => setPending(false));
+  };
+
+  const submitUsername = () => {
+    const handle = username.trim();
+    if (!handle) {
+      setError(t('signup.username.required'));
+      return;
+    }
+    run(async () => {
+      const { available } = await oxyServices.checkUsernameAvailability(handle);
+      if (!available) throw new Error(t('signup.username.taken'));
+      setStep({ name: 'email' });
+    });
+  };
+
+  const sendCode = async (address: string) => {
+    const { verificationId } = await oxyServices.startEmailVerification({ purpose: 'signup', email: address });
+    setStep({ name: 'code', verificationId });
+  };
+
+  const submitEmail = () => {
+    const parsed = emailAddressSchema.safeParse(email);
+    if (!parsed.success) {
+      setError(t('signup.email.invalid'));
+      return;
+    }
+    setEmail(parsed.data);
+    run(() => sendCode(parsed.data));
+  };
+
+  // The ceremony opens the browser's passkey prompt, so it starts from the press.
+  const createPasskey = (emailTicket: string) =>
+    run(() =>
+      runPasskeyRegisterSignIn({
+        isSupported: isPasskeySupported,
+        getRegisterOptions: () => oxyServices.webauthnRegisterOptions({ username: username.trim() }),
+        runCeremony: runRegistrationCeremony,
+        registerVerify: (response) =>
+          oxyServices.webauthnRegisterVerify(response, {
+            username: username.trim(),
+            email,
+            emailTicket,
+            deviceFingerprint: JSON.stringify(DeviceManager.getDeviceFingerprint()),
+          }),
+        commit: async (session) => {
+          await handleWebSession(session);
+          onSignedIn();
+        },
+      }),
+    );
+
+  const getCommons = () => {
+    Promise.resolve()
+      .then(() => Linking.openURL(getCommonsAcquisitionUrl(Platform.OS)))
+      .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
+  };
+
+  switch (step.name) {
+    case 'code':
+      return (
+        <EmailCodeStep
+          description={t('emailCode.sentTo', { email })}
+          verificationId={step.verificationId}
+          onConfirmed={({ ticket }) => {
+            setError(null);
+            setStep({ name: 'passkey', emailTicket: ticket });
+          }}
+          onResend={() => sendCode(email)}
+          back={{ label: t('emailCode.changeEmail'), onPress: () => setStep({ name: 'email' }) }}
+        />
+      );
+    case 'passkey':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.passkey.title')} description={t('signup.passkey.subtitle')} />
+          {error ? <AccountFlowErrorLine message={error} /> : null}
+          <AccountFlowAction
+            label={t('signup.passkey.action')}
+            onPress={() => createPasskey(step.emailTicket)}
+            pending={pending}
+            testID="signup-create-passkey"
+          />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+    case 'email':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.email.title')} description={t('signup.email.subtitle')} />
+          <AccountFlowField
+            label={t('signup.email.label')}
+            value={email}
+            onChange={(value) => {
+              setEmail(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitEmail}
+            error={error}
+            disabled={pending}
+            placeholder={t('signup.email.placeholder')}
+            autoComplete="email"
+            keyboardType="email-address"
+            testID="signup-email"
+          />
+          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitEmail} pending={pending} testID="signup-email-continue" />
+          <SubtleLink label={t('signin.actions.back')} theme={theme} onPress={() => setStep({ name: 'username' })} testID="signup-back" />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.title')} description={t('signup.webSubtitle')} />
+          <AccountFlowField
+            label={t('signup.username.label')}
+            value={username}
+            onChange={(value) => {
+              setUsername(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitUsername}
+            error={error}
+            disabled={pending}
+            placeholder={t('signup.username.placeholder')}
+            autoComplete="username"
+            testID="signup-username"
+          />
+          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitUsername} pending={pending} testID="signup-username-continue" />
+          <SubtleLink label={t('signup.commonsInstead')} theme={theme} onPress={getCommons} testID="signup-commons-instead" />
+          <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+  }
+};