@oxy.so/services 4.0.6 → 6.0.0

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/OxySignInPanel.tsx

@@ -0,0 +1,392 @@
+/**
+ * THE Oxy sign-in screen. The account dialog every Oxy app opens and the
+ * auth.oxy.so page render this one component; only where it is mounted
+ * differs (`host`).
+ *
+ *   picker   a returning device: "Choose an account", then "Use another account"
+ *   entry    the header, the Commons way in, and the way in for someone with no
+ *            account. On auth.oxy.so (`page`) also the username with its
+ *            Continue — a username-first passkey sign-in, which takes a
+ *            platform passkey AND a hardware security key with no resident
+ *            credential (a U2F key such as a Titan) — and "or continue with" the
+ *            discoverable passkey. From `md` that page is Bloom `AuthCard`'s
+ *            split card, with the embedded QR over its photo carousel in the
+ *            right column; below `md` it is "Continue with Oxy" at the top.
+ *            In an app's dialog on the web, "Continue with Oxy" opens that page
+ *            in a window over the app, like "Sign in with Google": the browser's
+ *            session lives on auth.oxy.so, so every Oxy app shares it. On
+ *            native it is "Continue with Oxy" ("Get Commons" without Commons).
+ *
+ * `signInMethods.ts` owns which blocks a platform gets.
+ */
+
+import type React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { Linking, Platform, Text as RNText, StyleSheet, View } from 'react-native';
+import { View as CssView } from 'react-native-css/components';
+import { AuthMediaCarousel } from '@oxy.so/bloom/auth-card';
+import { Button } from '@oxy.so/bloom/button';
+import { Divider } from '@oxy.so/bloom/divider';
+import { RiKey2Line } from '@oxy.so/bloom/icons/RiKey2Line';
+import { RiQrCodeLine } from '@oxy.so/bloom/icons/RiQrCodeLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
+import { toast } from '@oxy.so/bloom/toast';
+import { Text } from '@oxy.so/bloom/typography';
+import type { SwitcherContextRow } from '@oxy.so/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { useOxy } from '../../context/OxyContext';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+import { useDeviceSwitcher } from '../../hooks/useDeviceSwitcher';
+import { useI18n } from '../../hooks/useI18n';
+import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
+import { isWebBrowser } from '../../utils/isWebBrowser';
+import { SubtleLink } from '../authChooser/primitives';
+import { SIGN_IN_SLIDES } from './artwork';
+import { InlineCommonsQr } from './InlineCommonsQr';
+import { OxyAccountPicker } from './OxyAccountPicker';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from './OxyAuthScreen';
+import { RATE_LIMIT_SECONDS, describePasskeyError, isRateLimited } from './passkeyError';
+import { resolveSignInMethods } from './signInMethods';
+
+export interface OxySignInPanelProps {
+  /** This screen signed the origin in. */
+  onSignedIn: () => void;
+  /** "New to Oxy? Create one". */
+  onCreateAccount: () => void;
+  /** "Lost your passkey? Recover your account" — auth.oxy.so's page only. */
+  onRecover?: () => void;
+  /** A handle to pre-fill, skipping the picker (a re-authentication). */
+  loginHint?: string;
+  /** The app being continued to, when there is one. */
+  appName?: string | null;
+  /**
+   * `dialog` — inside the account dialog, which the controller closes itself
+   * once a request it runs signs in, and where a request shows in place.
+   * `page`   — a page of its own (auth.oxy.so): a request opens the dialog to
+   * show it, and its completion is reported through `onSignedIn` too.
+   */
+  host?: 'dialog' | 'page';
+}
+
+export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
+  onSignedIn,
+  onCreateAccount,
+  onRecover,
+  loginHint,
+  appName = null,
+  host = 'page',
+}) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const queryClient = useQueryClient();
+  const { accountDialogController: controller, openAccountDialog, signInWithPasskey, continueOnAuth } = useOxy();
+  const snapshot = useAccountDialogSnapshot(controller);
+  const { principals, activeContext } = useDeviceSwitcher();
+
+  const methods = resolveSignInMethods({
+    web: isWebBrowser(),
+    host,
+    commonsAvailability: snapshot.commonsAvailability,
+  });
+
+  const [showForm, setShowForm] = useState(Boolean(loginHint));
+  const [identifier, setIdentifier] = useState(loginHint ?? '');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [rateLimitSeconds, setRateLimitSeconds] = useState(0);
+  const blocked = pending || rateLimitSeconds > 0;
+
+  // The countdown after a 429: one tick a second until the person may retry.
+  useEffect(() => {
+    if (rateLimitSeconds <= 0) return;
+    const timer = setTimeout(() => setRateLimitSeconds((seconds) => Math.max(0, seconds - 1)), 1000);
+    return () => clearTimeout(timer);
+  }, [rateLimitSeconds]);
+
+  // On a page, a request the controller runs (the embedded QR, or one shown in
+  // the dialog opened over it) finishes the page's sign-in too. Only one that
+  // STARTED here: a completion already on the controller is somebody else's.
+  const [mountedAttempt] = useState(snapshot.signIn.attempt);
+  const completedHere = snapshot.signIn.phase === 'completed' && snapshot.signIn.attempt !== mountedAttempt;
+  useEffect(() => {
+    if (host === 'page' && completedHere) onSignedIn();
+  }, [host, completedHere, onSignedIn]);
+
+  /** Show the request a controller call just started — the dialog is where it lives. */
+  const showRequest = useCallback(() => {
+    if (host === 'page') openAccountDialog('qr');
+  }, [host, openAccountDialog]);
+
+  // These open a window or leave the page, so they run straight from the
+  // press, before any await.
+  const continueWithOxy = () => {
+    void controller?.signInWithOxy();
+    showRequest();
+  };
+  const signInOnOxy = () => {
+    void continueOnAuth('signin').then((result) => {
+      if (result.status === 'signed-in') onSignedIn();
+      else if (result.status === 'failed') toast.error(t('signin.errors.failed'));
+    });
+  };
+  const useAnotherDevice = () => {
+    void controller?.showQr();
+    showRequest();
+  };
+  const getCommons = () => {
+    Promise.resolve()
+      .then(() => Linking.openURL(getCommonsAcquisitionUrl(Platform.OS)))
+      .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
+  };
+
+  const runPasskey = async (username: string | undefined, failToast: string) => {
+    if (blocked) return;
+    setError(null);
+    setPending(true);
+    try {
+      await signInWithPasskey({ username });
+      onSignedIn();
+    } catch (err) {
+      if (isRateLimited(err)) {
+        setRateLimitSeconds(RATE_LIMIT_SECONDS);
+      } else {
+        const message = describePasskeyError(err, t);
+        setError(message);
+        toast.error(failToast, { description: message });
+      }
+    } finally {
+      setPending(false);
+    }
+  };
+  const submitUsername = () => {
+    const username = identifier.trim();
+    if (username) void runPasskey(username, t('signin.errors.failed'));
+    else setError(t('signin.username.required'));
+  };
+
+  // A returning device starts at WHO. Not while adding an account from inside
+  // a signed-in app: the rows are the accounts it would add.
+  const pickerAllowed = host === 'dialog' ? !snapshot.hasSession : activeContext !== null;
+  const reauthenticate = (context: SwitcherContextRow) => {
+    setIdentifier(context.handle ?? '');
+    setShowForm(true);
+  };
+  const selectContext = async (context: SwitcherContextRow) => {
+    const outcome = await controller?.chooseContext(context.contextId).catch(() => 'failed' as const);
+    switch (outcome) {
+      case 'switched':
+        // Every account-scoped query now describes somebody else.
+        void queryClient.invalidateQueries();
+        onSignedIn();
+        return;
+      case 'current':
+        onSignedIn();
+        return;
+      case 'signing-in':
+        // The request for that account is running; it shows where requests do.
+        showRequest();
+        return;
+      case 'failed':
+        // The pair could not be activated as it stands: sign in as it explicitly.
+        if (methods.passkey && context.handle) reauthenticate(context);
+        else toast.error(t('accountSwitcher.toasts.activateFailed'));
+        return;
+      default:
+        return;
+    }
+  };
+
+  const showsPicker = pickerAllowed && !showForm && principals.length > 0;
+  // auth.oxy.so's page is the split card from `md`.
+  const splits = methods.commons === 'qr';
+
+  if (showsPicker) {
+    return (
+      <OxyAccountPicker
+        principals={principals}
+        appName={appName}
+        signedOut={!snapshot.hasSession}
+        pendingContextId={snapshot.activatingContextId}
+        isLoading={snapshot.activatingContextId !== null}
+        onSelectContext={(context) => void selectContext(context)}
+        onUseAnother={() => {
+          setIdentifier('');
+          setShowForm(true);
+        }}
+      />
+    );
+  }
+
+  const shownError = rateLimitSeconds > 0 ? t('signin.errors.rateLimited', { seconds: rateLimitSeconds }) : error;
+
+  const adding = host === 'dialog' && snapshot.hasSession;
+  const title = adding ? t('signin.addAccountTitle') : t('signin.title');
+  const description = adding
+    ? t('signin.addAccountSubtitle')
+    : appName
+      ? t('signin.subtitleToApp', { app: appName })
+      : t('signin.subtitle');
+  const noAccount = (
+    <Text style={[styles.note, styles.noAccount, { color: theme.colors.textSecondary }]}>
+      {t('signin.noAccount')}{' '}
+      <RNText
+        accessibilityRole="link"
+        onPress={onCreateAccount}
+        style={[styles.noAccountLink, { color: theme.colors.text }]}
+        testID="create-account-link"
+      >
+        {t('signin.createAccount')}
+      </RNText>
+    </Text>
+  );
+  // One solid action per screen: the username's Continue when there is one.
+  const commonsAppearance = methods.passkey ? 'outline' : 'solid';
+
+  const continueWithOxyButton = (
+    <Button
+      appearance={commonsAppearance}
+      tone={commonsAppearance === 'solid' ? 'action' : 'neutral'}
+      size="lg"
+      fullWidth
+      onPress={methods.commons === 'window' ? signInOnOxy : continueWithOxy}
+      testID="continue-with-oxy"
+    >
+      {t('accountSwitcher.continueWithOxy')}
+    </Button>
+  );
+
+  const form = (
+    <OxyAuthScreen className={splits ? 'md:max-w-none' : undefined}>
+      <OxyAuthScreenHeader title={title} description={description} />
+
+      {/* Below `md` this screen is the phone a QR would be scanned with. */}
+      {splits ? <CssView className="md:hidden">{continueWithOxyButton}</CssView> : null}
+
+      {methods.commons === 'continue' || methods.commons === 'window' ? continueWithOxyButton : null}
+      {methods.commons === 'get-commons' ? (
+        <View style={styles.stack}>
+          <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{t('accountSwitcher.commonsNotInstalled')}</Text>
+          <Button appearance="solid" tone="action" size="lg" fullWidth onPress={getCommons} testID="get-commons-button">
+            {t('accountSwitcher.getCommons')}
+          </Button>
+        </View>
+      ) : null}
+
+      {methods.passkey ? (
+        <View style={styles.stack}>
+          <View style={styles.field}>
+            <TextFieldLabel nativeID="username-label">{t('signin.username.label')}</TextFieldLabel>
+            <TextField invalid={shownError !== null} disabled={blocked} radius={999} style={styles.input}>
+              <TextFieldInput
+                testID="username"
+                label={t('signin.username.label')}
+                value={identifier}
+                onValueChange={(value) => {
+                  setIdentifier(value);
+                  if (error) setError(null);
+                }}
+                placeholder={t('signin.username.placeholder')}
+                autoComplete="username"
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoFocus={Platform.OS === 'web'}
+                returnKeyType="go"
+                onSubmitEditing={submitUsername}
+                aria-required
+              />
+            </TextField>
+            {shownError ? <TextFieldHint invalid>{shownError}</TextFieldHint> : null}
+          </View>
+          {noAccount}
+          <Button
+            appearance="solid"
+            tone="action"
+            size="lg"
+            fullWidth
+            loading={pending}
+            disabled={blocked}
+            onPress={submitUsername}
+            testID="username-continue"
+          >
+            {t('signin.actions.continue')}
+          </Button>
+        </View>
+      ) : null}
+
+      {/* The alternatives to the screen's primary way in, always under it. The
+          window an app opens on the web is where they all are. */}
+      {methods.commons === 'window' ? null : <Divider>{t('signin.orContinueWith')}</Divider>}
+
+      {methods.passkey ? (
+        <Button
+          appearance="outline"
+          tone="neutral"
+          size="lg"
+          fullWidth
+          leadingIcon={RiKey2Line}
+          disabled={blocked}
+          onPress={() => void runPasskey(undefined, t('signin.errors.failed'))}
+          testID="passkey-sign-in"
+        >
+          {t('signin.methods.passkey')}
+        </Button>
+      ) : methods.commons === 'window' ? null : (
+        <Button
+          appearance="outline"
+          tone="neutral"
+          size="lg"
+          fullWidth
+          leadingIcon={RiQrCodeLine}
+          onPress={useAnotherDevice}
+          testID="scan-qr"
+        >
+          {t('accountSwitcher.scanQr')}
+        </Button>
+      )}
+
+      {methods.passkey ? null : noAccount}
+      {onRecover ? (
+        <SubtleLink label={t('signin.recoverLink')} theme={theme} onPress={onRecover} testID="recover-link" />
+      ) : null}
+      <OxyAuthTerms />
+    </OxyAuthScreen>
+  );
+
+  if (!splits) return form;
+  return (
+    <OxyAuthSplit
+      aside={
+        <>
+          <AuthMediaCarousel slides={SIGN_IN_SLIDES} style={StyleSheet.absoluteFill} />
+          <InlineCommonsQr controller={controller} />
+        </>
+      }
+    >
+      {form}
+    </OxyAuthSplit>
+  );
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    gap: 12,
+  },
+  field: {
+    gap: 6,
+  },
+  note: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  noAccount: {
+    textAlign: 'left',
+  },
+  noAccountLink: {
+    textDecorationLine: 'underline',
+  },
+  input: {
+    height: 40,
+  },
+});