@oxy.so/services 4.0.6 → 6.0.0

package/lib/module/ui/components/signIn/OxyAccountPicker.js

@@ -0,0 +1,106 @@
+"use strict";
+
+/**
+ * "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 { 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 } from '@oxy.so/core';
+import { useI18n } from "../../hooks/useI18n.js";
+import { AccountRow } from "../authChooser/primitives.js";
+import { authChooserStyles } from "../authChooser/styles.js";
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from "./OxyAuthScreen.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const OxyAccountPicker = ({
+  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 /*#__PURE__*/_jsxs(OxyAuthScreen, {
+    children: [/*#__PURE__*/_jsx(OxyAuthScreenHeader, {
+      title: t('signin.chooser.title'),
+      description: appName ? t('signin.chooser.subtitleToApp', {
+        app: appName
+      }) : t('signin.chooser.subtitle')
+    }), /*#__PURE__*/_jsxs(View, {
+      style: authChooserStyles.rows,
+      children: [principals.flatMap(principal => principal.contexts.map(context => /*#__PURE__*/_jsx(AccountRow, {
+        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)
+      }, context.contextId))), /*#__PURE__*/_jsxs(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",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.addGlyph, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
+          children: /*#__PURE__*/_jsx(RiUserAddLine, {
+            size: "md",
+            fill: theme.colors.textSecondary
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [authChooserStyles.rowName, styles.addLabel, {
+            color: theme.colors.text
+          }],
+          children: t('signin.chooser.useAnother')
+        }), /*#__PURE__*/_jsx(RiArrowRightSLine, {
+          size: "md",
+          fill: theme.colors.textSecondary
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(OxyAuthTerms, {})]
+  });
+};
+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
+  }
+});
+//# sourceMappingURL=OxyAccountPicker.js.map

package/lib/module/ui/components/signIn/OxyAccountPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","StyleSheet","View","RiArrowRightSLine","RiUserAddLine","useTheme","Text","showsPrincipalHeaders","useI18n","AccountRow","authChooserStyles","OxyAuthScreen","OxyAuthScreenHeader","OxyAuthTerms","jsx","_jsx","jsxs","_jsxs","OxyAccountPicker","principals","appName","onSelectContext","onUseAnother","pendingContextId","isLoading","signedOut","theme","t","namesTheOperator","children","title","description","app","style","rows","flatMap","principal","contexts","map","context","operatedBy","isDelegated","name","displayName","continueAsLabel","handle","activating","contextId","disabled","onPress","accessibilityRole","accessibilityLabel","accountRow","borderColor","colors","border","backgroundColor","card","rowDisabled","testID","styles","addGlyph","backgroundSecondary","size","fill","textSecondary","rowName","addLabel","color","text","create","width","height","borderRadius","alignItems","justifyContent","flex"],"sourceRoot":"../../../../../src","sources":["ui/components/signIn/OxyAccountPicker.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/components/signIn/OxyAuthScreen.js

@@ -0,0 +1,151 @@
+"use strict";
+
+/**
+ * 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 { 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.js";
+import { LogoIcon } from "../logo/LogoIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
+};
+const DESCRIPTION = {
+  fontSize: 18,
+  lineHeight: 28
+};
+const TERMS = {
+  fontSize: 14,
+  lineHeight: 20,
+  textAlign: 'center',
+  paddingHorizontal: 24
+};
+/** The Oxy mark over the screen's title and description. */
+export const OxyAuthScreenHeader = ({
+  title,
+  description
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(View, {
+    className: "gap-6",
+    children: [/*#__PURE__*/_jsx(LogoIcon, {
+      height: LOGO_HEIGHT
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "max-w-[90%] gap-2",
+      children: [/*#__PURE__*/_jsx(Text, {
+        accessibilityRole: "header",
+        style: [TITLE, {
+          color: theme.colors.text
+        }],
+        children: title
+      }), description != null && description !== '' ? typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        style: [DESCRIPTION, {
+          color: theme.colors.textSecondary
+        }],
+        children: description
+      }) : description : null]
+    })]
+  });
+};
+
+/** A sign-in screen's column: its blocks 24 apart. `className` extends it (the split's form column). */
+export const OxyAuthScreen = ({
+  children,
+  className
+}) => /*#__PURE__*/_jsx(View, {
+  className: `w-full max-w-[448px] self-center gap-6 ${className ?? ''}`,
+  children: children
+});
+
+/** The split card: `children` on the left and, from `md`, `aside` on the right. */
+export const OxyAuthSplit = ({
+  children,
+  aside
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(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",
+    children: [/*#__PURE__*/_jsx(View, {
+      className: "md:flex-1 md:basis-0 md:min-w-0",
+      children: /*#__PURE__*/_jsx(View, {
+        className: "md:p-8",
+        children: children
+      })
+    }), /*#__PURE__*/_jsx(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
+      },
+      children: aside
+    })]
+  });
+};
+
+/**
+ * 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 = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    className: "min-h-[300px] items-center justify-center",
+    children: /*#__PURE__*/_jsx(ActivityIndicator, {
+      size: "large",
+      color: theme.colors.primary
+    })
+  });
+};
+
+/** "By continuing, you agree to our Terms of Service and Privacy Policy." */
+export const OxyAuthTerms = () => {
+  const theme = useTheme();
+  const {
+    t
+  } = useI18n();
+  const link = {
+    color: theme.colors.text,
+    textDecorationLine: 'underline'
+  };
+  return /*#__PURE__*/_jsxs(Text, {
+    style: [TERMS, {
+      color: theme.colors.textSecondary
+    }],
+    children: [t('signin.terms.before'), ' ', /*#__PURE__*/_jsx(RNText, {
+      accessibilityRole: "link",
+      style: link,
+      onPress: () => void Linking.openURL(TERMS_URL),
+      children: t('signin.terms.termsLink')
+    }), ' ', t('signin.terms.and'), ' ', /*#__PURE__*/_jsx(RNText, {
+      accessibilityRole: "link",
+      style: link,
+      onPress: () => void Linking.openURL(PRIVACY_URL),
+      children: t('signin.terms.privacyLink')
+    }), "."]
+  });
+};
+//# sourceMappingURL=OxyAuthScreen.js.map

package/lib/module/ui/components/signIn/OxyAuthScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ActivityIndicator","Linking","Text","RNText","View","useTheme","useI18n","LogoIcon","jsx","_jsx","jsxs","_jsxs","LOGO_HEIGHT","TERMS_URL","PRIVACY_URL","TITLE","fontSize","lineHeight","fontWeight","letterSpacing","DESCRIPTION","TERMS","textAlign","paddingHorizontal","OxyAuthScreenHeader","title","description","theme","className","children","height","accessibilityRole","style","color","colors","text","textSecondary","OxyAuthScreen","OxyAuthSplit","aside","backgroundColor","backgroundSecondary","OxyAuthLoading","size","primary","OxyAuthTerms","t","link","textDecorationLine","onPress","openURL"],"sourceRoot":"../../../../../src","sources":["ui/components/signIn/OxyAuthScreen.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/components/signIn/OxySignInPanel.js

@@ -0,0 +1,366 @@
+"use strict";
+
+/**
+ * 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 { 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 { useQueryClient } from '@tanstack/react-query';
+import { useOxy } from "../../context/OxyContext.js";
+import { useAccountDialogSnapshot } from "../../hooks/accountDialogSnapshot.js";
+import { useDeviceSwitcher } from "../../hooks/useDeviceSwitcher.js";
+import { useI18n } from "../../hooks/useI18n.js";
+import { getCommonsAcquisitionUrl } from "../../utils/commonsStoreLinks.js";
+import { isWebBrowser } from "../../utils/isWebBrowser.js";
+import { SubtleLink } from "../authChooser/primitives.js";
+import { SIGN_IN_SLIDES } from "./artwork.js";
+import { InlineCommonsQr } from "./InlineCommonsQr.js";
+import { OxyAccountPicker } from "./OxyAccountPicker.js";
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from "./OxyAuthScreen.js";
+import { RATE_LIMIT_SECONDS, describePasskeyError, isRateLimited } from "./passkeyError.js";
+import { resolveSignInMethods } from "./signInMethods.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const OxySignInPanel = ({
+  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(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, failToast) => {
+    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 => {
+    setIdentifier(context.handle ?? '');
+    setShowForm(true);
+  };
+  const selectContext = async context => {
+    const outcome = await controller?.chooseContext(context.contextId).catch(() => 'failed');
+    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 /*#__PURE__*/_jsx(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 = /*#__PURE__*/_jsxs(Text, {
+    style: [styles.note, styles.noAccount, {
+      color: theme.colors.textSecondary
+    }],
+    children: [t('signin.noAccount'), ' ', /*#__PURE__*/_jsx(RNText, {
+      accessibilityRole: "link",
+      onPress: onCreateAccount,
+      style: [styles.noAccountLink, {
+        color: theme.colors.text
+      }],
+      testID: "create-account-link",
+      children: t('signin.createAccount')
+    })]
+  });
+  // One solid action per screen: the username's Continue when there is one.
+  const commonsAppearance = methods.passkey ? 'outline' : 'solid';
+  const continueWithOxyButton = /*#__PURE__*/_jsx(Button, {
+    appearance: commonsAppearance,
+    tone: commonsAppearance === 'solid' ? 'action' : 'neutral',
+    size: "lg",
+    fullWidth: true,
+    onPress: methods.commons === 'window' ? signInOnOxy : continueWithOxy,
+    testID: "continue-with-oxy",
+    children: t('accountSwitcher.continueWithOxy')
+  });
+  const form = /*#__PURE__*/_jsxs(OxyAuthScreen, {
+    className: splits ? 'md:max-w-none' : undefined,
+    children: [/*#__PURE__*/_jsx(OxyAuthScreenHeader, {
+      title: title,
+      description: description
+    }), splits ? /*#__PURE__*/_jsx(CssView, {
+      className: "md:hidden",
+      children: continueWithOxyButton
+    }) : null, methods.commons === 'continue' || methods.commons === 'window' ? continueWithOxyButton : null, methods.commons === 'get-commons' ? /*#__PURE__*/_jsxs(View, {
+      style: styles.stack,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.note, {
+          color: theme.colors.textSecondary
+        }],
+        children: t('accountSwitcher.commonsNotInstalled')
+      }), /*#__PURE__*/_jsx(Button, {
+        appearance: "solid",
+        tone: "action",
+        size: "lg",
+        fullWidth: true,
+        onPress: getCommons,
+        testID: "get-commons-button",
+        children: t('accountSwitcher.getCommons')
+      })]
+    }) : null, methods.passkey ? /*#__PURE__*/_jsxs(View, {
+      style: styles.stack,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.field,
+        children: [/*#__PURE__*/_jsx(TextFieldLabel, {
+          nativeID: "username-label",
+          children: t('signin.username.label')
+        }), /*#__PURE__*/_jsx(TextField, {
+          invalid: shownError !== null,
+          disabled: blocked,
+          radius: 999,
+          style: styles.input,
+          children: /*#__PURE__*/_jsx(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": true
+          })
+        }), shownError ? /*#__PURE__*/_jsx(TextFieldHint, {
+          invalid: true,
+          children: shownError
+        }) : null]
+      }), noAccount, /*#__PURE__*/_jsx(Button, {
+        appearance: "solid",
+        tone: "action",
+        size: "lg",
+        fullWidth: true,
+        loading: pending,
+        disabled: blocked,
+        onPress: submitUsername,
+        testID: "username-continue",
+        children: t('signin.actions.continue')
+      })]
+    }) : null, methods.commons === 'window' ? null : /*#__PURE__*/_jsx(Divider, {
+      children: t('signin.orContinueWith')
+    }), methods.passkey ? /*#__PURE__*/_jsx(Button, {
+      appearance: "outline",
+      tone: "neutral",
+      size: "lg",
+      fullWidth: true,
+      leadingIcon: RiKey2Line,
+      disabled: blocked,
+      onPress: () => void runPasskey(undefined, t('signin.errors.failed')),
+      testID: "passkey-sign-in",
+      children: t('signin.methods.passkey')
+    }) : methods.commons === 'window' ? null : /*#__PURE__*/_jsx(Button, {
+      appearance: "outline",
+      tone: "neutral",
+      size: "lg",
+      fullWidth: true,
+      leadingIcon: RiQrCodeLine,
+      onPress: useAnotherDevice,
+      testID: "scan-qr",
+      children: t('accountSwitcher.scanQr')
+    }), methods.passkey ? null : noAccount, onRecover ? /*#__PURE__*/_jsx(SubtleLink, {
+      label: t('signin.recoverLink'),
+      theme: theme,
+      onPress: onRecover,
+      testID: "recover-link"
+    }) : null, /*#__PURE__*/_jsx(OxyAuthTerms, {})]
+  });
+  if (!splits) return form;
+  return /*#__PURE__*/_jsx(OxyAuthSplit, {
+    aside: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(AuthMediaCarousel, {
+        slides: SIGN_IN_SLIDES,
+        style: StyleSheet.absoluteFill
+      }), /*#__PURE__*/_jsx(InlineCommonsQr, {
+        controller: controller
+      })]
+    }),
+    children: form
+  });
+};
+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
+  }
+});
+//# sourceMappingURL=OxySignInPanel.js.map