@oxy.so/services 11.2.0-oxy-one.3 → 11.2.0-oxy-one.4

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

@@ -27,7 +27,11 @@ import { RiUserAddLine } from '@oxy.so/bloom/icons/RiUserAddLine';
 import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
-import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core/session';
+import {
+  showsPrincipalHeaders,
+  type SwitcherContextRow,
+  type SwitcherPrincipalRow,
+} from '@oxy.so/core/session';
 import { useI18n } from '../../hooks/useI18n';
 import { resolveAccentHex } from '../authChooser/types';
 import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
@@ -98,9 +102,16 @@ export const OxyAccountPicker: React.FC<OxyAccountPickerProps> = ({
     <OxyAuthScreen>
       <OxyAuthScreenHeader
         title={t('signin.chooser.title')}
-        description={appName ? t('signin.chooser.subtitleToApp', { app: appName }) : t('signin.chooser.subtitle')}
+        description={
+          appName
+            ? t('signin.chooser.subtitleToApp', { app: appName })
+            : t('signin.chooser.subtitle')
+        }
       />
-      <View className="bg-fill-secondary rounded-[22px] overflow-hidden" testID="account-picker-list">
+      <View
+        className="bg-fill-secondary rounded-[22px] overflow-hidden"
+        testID="account-picker-list"
+      >
         <ScrollView style={{ maxHeight: LIST_MAX_HEIGHT }} contentContainerStyle={{ padding: 8 }}>
           {rows.map(({ context, operatedBy }, index) => {
             const activating = pendingContextId === context.contextId;
@@ -124,7 +135,11 @@ export const OxyAccountPicker: React.FC<OxyAccountPickerProps> = ({
                   accessibilityState={{ selected: current, disabled, busy: activating }}
                 >
                   <View className="flex-1 min-w-0">
-                    <Text className="text-body text-text" style={{ fontWeight: '500' }} numberOfLines={1}>
+                    <Text
+                      className="text-body text-text"
+                      style={{ fontWeight: '500' }}
+                      numberOfLines={1}
+                    >
                       {context.displayName}
                     </Text>
                     {operatedBy || handle ? (

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

@@ -50,9 +50,7 @@ export const OxyAuthScreenHeader: React.FC<OxyAuthScreenHeaderProps> = ({ title,
         </Text>
         {description != null && description !== '' ? (
           typeof description === 'string' ? (
-            <Text style={[DESCRIPTION, { color: theme.colors.textSecondary }]}>
-              {description}
-            </Text>
+            <Text style={[DESCRIPTION, { color: theme.colors.textSecondary }]}>{description}</Text>
           ) : (
             description
           )
@@ -63,7 +61,10 @@ export const OxyAuthScreenHeader: React.FC<OxyAuthScreenHeaderProps> = ({ title,
 };
 
 /** 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 }) => (
+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>
 );
 
@@ -73,11 +74,11 @@ export const OxyAuthScreen: React.FC<{ children: React.ReactNode; className?: st
  * border of its own, and the right column is a rounded tile within the
  * dialog's margins.
  */
-export const OxyAuthSplit: React.FC<{ children: React.ReactNode; aside: React.ReactNode; bare?: boolean }> = ({
-  children,
-  aside,
-  bare = false,
-}) => {
+export const OxyAuthSplit: React.FC<{
+  children: React.ReactNode;
+  aside: React.ReactNode;
+  bare?: boolean;
+}> = ({ children, aside, bare = false }) => {
   const theme = useTheme();
   return (
     <View
@@ -103,7 +104,12 @@ export const OxyAuthLoading: React.FC = () => {
   const { t } = useI18n();
   return (
     <View className="min-h-[300px] items-center justify-center">
-      <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} testID="oxy-auth-loading" />
+      <Loading
+        variant="spinner"
+        size="lg"
+        accessibilityLabel={t('common.status.loading')}
+        testID="oxy-auth-loading"
+      />
     </View>
   );
 };
@@ -120,7 +126,11 @@ export const OxyAuthTerms: React.FC = () => {
         {t('signin.terms.termsLink')}
       </RNText>{' '}
       {t('signin.terms.and')}{' '}
-      <RNText accessibilityRole="link" style={link} onPress={() => void Linking.openURL(PRIVACY_URL)}>
+      <RNText
+        accessibilityRole="link"
+        style={link}
+        onPress={() => void Linking.openURL(PRIVACY_URL)}
+      >
         {t('signin.terms.privacyLink')}
       </RNText>
       .

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

@@ -68,12 +68,16 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const refresh = () => void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
+  const refresh = () =>
+    void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
 
   if (keyed) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('signInSecurity.totp.title')} description={t('linkCommons.already')} />
+        <OxyAuthScreenHeader
+          title={t('signInSecurity.totp.title')}
+          description={t('linkCommons.already')}
+        />
       </OxyAuthScreen>
     );
   }
@@ -84,8 +88,8 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
     if (pending) return;
     setError(null);
     setPending(true);
-    oxyServices
-      .auth.totp.enroll()
+    oxyServices.auth.totp
+      .enroll()
       .then((enrollment) => {
         setCode('');
         setStep({ name: 'enroll', enrollment });
@@ -113,15 +117,23 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
     case 'codes':
       return (
         <OxyAuthScreen>
-          <OxyAuthScreenHeader title={t('signInSecurity.totp.backupTitle')} description={t('signInSecurity.totp.backupDescription')} />
-          {step.enrolling ? <AccountFlowProgress steps={enrolSteps} current={1} testID="totp-progress" /> : null}
+          <OxyAuthScreenHeader
+            title={t('signInSecurity.totp.backupTitle')}
+            description={t('signInSecurity.totp.backupDescription')}
+          />
+          {step.enrolling ? (
+            <AccountFlowProgress steps={enrolSteps} current={1} testID="totp-progress" />
+          ) : null}
           {/* One code per line, with the block's own copy button (it shows a
               check once the codes are on the clipboard). */}
           <CodeBlock
             code={step.codes.join('\n')}
             filename={t('signInSecurity.totp.remaining', { count: step.codes.length })}
             lineNumbers={false}
-            labels={{ copy: t('signInSecurity.totp.copy'), copied: t('signInSecurity.totp.copied') }}
+            labels={{
+              copy: t('signInSecurity.totp.copy'),
+              copied: t('signInSecurity.totp.copied'),
+            }}
             onCopy={copyCodes}
             testID="totp-backup-codes"
           />
@@ -146,7 +158,11 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           allowPassword={hasPassword}
           totpEnabled={false}
           submitLabel={t('signInSecurity.totp.enable')}
-          validate={() => (new RegExp(`^\\d{${TOTP_DIGITS}}$`).test(code.trim()) ? null : t('signin.errors.secondFactorInvalid'))}
+          validate={() =>
+            new RegExp(`^\\d{${TOTP_DIGITS}}$`).test(code.trim())
+              ? null
+              : t('signin.errors.secondFactorInvalid')
+          }
           onSubmit={async (reauth) => {
             const codes = await oxyServices.auth.totp.confirm(code.trim(), reauth);
             refresh();
@@ -158,12 +174,23 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           <AccountFlowProgress steps={enrolSteps} current={0} testID="totp-progress" />
           <View style={styles.plateRow}>
             <View style={[styles.plate, { borderColor: theme.colors.border }]} testID="totp-qr">
-              <QRCode value={enrollment.otpauthUri} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
+              <QRCode
+                value={enrollment.otpauthUri}
+                size={QR_SIZE}
+                backgroundColor={QR_PLATE_BG}
+                color={QR_FOREGROUND}
+              />
             </View>
           </View>
           <View style={styles.secret}>
-            <Text style={[styles.secretLabel, { color: theme.colors.textSecondary }]}>{t('signInSecurity.totp.secretLabel')}</Text>
-            <Text selectable style={[styles.secretValue, { color: theme.colors.text }]} testID="totp-secret">
+            <Text style={[styles.secretLabel, { color: theme.colors.textSecondary }]}>
+              {t('signInSecurity.totp.secretLabel')}
+            </Text>
+            <Text
+              selectable
+              style={[styles.secretValue, { color: theme.colors.text }]}
+              testID="totp-secret"
+            >
               {enrollment.secret.replace(/(.{4})/g, '$1 ').trim()}
             </Text>
           </View>
@@ -220,7 +247,9 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
         <OxyAuthScreen>
           <OxyAuthScreenHeader
             title={t('signInSecurity.totp.title')}
-            description={totpEnabled ? t('signInSecurity.totp.enabled') : t('signInSecurity.totp.description')}
+            description={
+              totpEnabled ? t('signInSecurity.totp.enabled') : t('signInSecurity.totp.description')
+            }
           />
           {totpEnabled ? (
             <>
@@ -242,7 +271,12 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           ) : (
             <>
               {error ? <AccountFlowErrorLine message={error} /> : null}
-              <AccountFlowAction label={t('signInSecurity.totp.setUp')} onPress={setUp} pending={pending} testID="totp-set-up" />
+              <AccountFlowAction
+                label={t('signInSecurity.totp.setUp')}
+                onPress={setUp}
+                pending={pending}
+                testID="totp-set-up"
+              />
             </>
           )}
         </OxyAuthScreen>

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

@@ -27,7 +27,10 @@ export interface OxyDeleteAccountPanelProps {
   onCancel?: () => void;
 }
 
-export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ onDeleted, onCancel }) => {
+export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({
+  onDeleted,
+  onCancel,
+}) => {
   const { t } = useI18n();
   const { user, oxyServices, logout } = useOxy();
   const keyed = Boolean(user?.publicKey);
@@ -38,7 +41,10 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
   if (deleted) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('deleteAccount.keyless.done')} description={t('deleteAccount.keyless.doneDescription')} />
+        <OxyAuthScreenHeader
+          title={t('deleteAccount.keyless.done')}
+          description={t('deleteAccount.keyless.doneDescription')}
+        />
       </OxyAuthScreen>
     );
   }
@@ -47,7 +53,9 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
     return (
       <OxyAuthScreen>
         <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} />
-        <AccountFlowNotice testID="delete-account-keyed">{t('deleteAccount.keyless.keyed')}</AccountFlowNotice>
+        <AccountFlowNotice testID="delete-account-keyed">
+          {t('deleteAccount.keyless.keyed')}
+        </AccountFlowNotice>
       </OxyAuthScreen>
     );
   }
@@ -64,7 +72,9 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
       totpEnabled={methods.data.totpEnabled}
       submitLabel={t('deleteAccount.keyless.action')}
       destructive
-      validate={() => (confirmText.trim() === username ? null : t('deleteAccount.confirmLabel', { username }))}
+      validate={() =>
+        confirmText.trim() === username ? null : t('deleteAccount.confirmLabel', { username })
+      }
       onSubmit={async (proof) => {
         if (!proof.emailCode) throw new Error(t('reauth.errors.invalid'));
         // The last word before it is gone: the proof is ready, and nothing has

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

@@ -26,7 +26,12 @@ import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { useI18n } from '../../hooks/useI18n';
 import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
-import { AccountFlowAction, AccountFlowErrorLine, AccountFlowNote, describeSignInError } from './accountFlowParts';
+import {
+  AccountFlowAction,
+  AccountFlowErrorLine,
+  AccountFlowNote,
+  describeSignInError,
+} from './accountFlowParts';
 
 /** How often the page asks whether Commons has signed. */
 export const IDENTITY_LINK_POLL_MS = 2000;
@@ -61,8 +66,8 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
   const open = useCallback(() => {
     setError(null);
     setStep({ name: 'opening' });
-    oxyServices
-      .identity.links.create()
+    oxyServices.identity.links
+      .create()
       .then((link) => setStep({ name: 'qr', link }))
       .catch((reason: unknown) => {
         setError(describeSignInError(reason, t));
@@ -94,7 +99,11 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
         const state = await oxyServices.identity.links.get(link.linkId);
         if (stopped) return;
         if (state.status === 'signed' && state.publicKey) {
-          setStep({ name: 'matching', link, code: deriveIdentityLinkCode(link.linkId, state.publicKey) });
+          setStep({
+            name: 'matching',
+            link,
+            code: deriveIdentityLinkCode(link.linkId, state.publicKey),
+          });
           return;
         }
         if (state.status === 'cancelled') {
@@ -121,7 +130,10 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
   if (alreadyLinked) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.already')} />
+        <OxyAuthScreenHeader
+          title={t('linkCommons.title')}
+          description={t('linkCommons.already')}
+        />
       </OxyAuthScreen>
     );
   }
@@ -150,21 +162,35 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
     case 'done':
       return (
         <OxyAuthScreen>
-          <OxyAuthScreenHeader title={t('linkCommons.doneTitle')} description={t('linkCommons.done')} />
+          <OxyAuthScreenHeader
+            title={t('linkCommons.doneTitle')}
+            description={t('linkCommons.done')}
+          />
         </OxyAuthScreen>
       );
     case 'expired':
       return (
         <OxyAuthScreen>
-          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.expired')} />
+          <OxyAuthScreenHeader
+            title={t('linkCommons.title')}
+            description={t('linkCommons.expired')}
+          />
           {error ? <AccountFlowErrorLine message={error} /> : null}
-          <AccountFlowAction label={t('linkCommons.renew')} onPress={open} pending={false} testID="link-commons-renew" />
+          <AccountFlowAction
+            label={t('linkCommons.renew')}
+            onPress={open}
+            pending={false}
+            testID="link-commons-renew"
+          />
         </OxyAuthScreen>
       );
     case 'matching':
       return (
         <OxyAuthScreen>
-          <OxyAuthScreenHeader title={t('linkCommons.compareTitle')} description={t('linkCommons.compare')} />
+          <OxyAuthScreenHeader
+            title={t('linkCommons.compareTitle')}
+            description={t('linkCommons.compare')}
+          />
           <Text
             accessibilityLabel={step.code.split('').join(' ')}
             style={[styles.code, { color: theme.colors.text }]}
@@ -178,7 +204,14 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
             pending={false}
             testID="link-commons-confirm"
           />
-          <Button appearance="plain" tone="neutral" size="lg" fullWidth onPress={() => cancel(step.link)} testID="link-commons-cancel">
+          <Button
+            appearance="plain"
+            tone="neutral"
+            size="lg"
+            fullWidth
+            onPress={() => cancel(step.link)}
+            testID="link-commons-cancel"
+          >
             {t('linkCommons.cancel')}
           </Button>
         </OxyAuthScreen>
@@ -186,15 +219,33 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
     case 'qr':
       return (
         <OxyAuthScreen>
-          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
+          <OxyAuthScreenHeader
+            title={t('linkCommons.title')}
+            description={t('linkCommons.subtitle')}
+          />
           <View style={styles.plateRow}>
-            <View style={[styles.plate, { borderColor: theme.colors.border }]} testID="link-commons-qr">
-              <QRCode value={step.link.qrPayload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
+            <View
+              style={[styles.plate, { borderColor: theme.colors.border }]}
+              testID="link-commons-qr"
+            >
+              <QRCode
+                value={step.link.qrPayload}
+                size={QR_SIZE}
+                backgroundColor={QR_PLATE_BG}
+                color={QR_FOREGROUND}
+              />
             </View>
           </View>
           <AccountFlowNote>{t('linkCommons.scan')}</AccountFlowNote>
           <AccountFlowNote>{t('linkCommons.waiting')}</AccountFlowNote>
-          <Button appearance="plain" tone="neutral" size="lg" fullWidth onPress={() => cancel(step.link)} testID="link-commons-cancel">
+          <Button
+            appearance="plain"
+            tone="neutral"
+            size="lg"
+            fullWidth
+            onPress={() => cancel(step.link)}
+            testID="link-commons-cancel"
+          >
             {t('linkCommons.cancel')}
           </Button>
         </OxyAuthScreen>
@@ -202,7 +253,10 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
     default:
       return (
         <OxyAuthScreen>
-          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
+          <OxyAuthScreenHeader
+            title={t('linkCommons.title')}
+            description={t('linkCommons.subtitle')}
+          />
           <View style={styles.plateRow}>
             <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} />
           </View>

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

@@ -41,7 +41,10 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
   if (keyed) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('signInSecurity.password.title')} description={t('linkCommons.already')} />
+        <OxyAuthScreenHeader
+          title={t('signInSecurity.password.title')}
+          description={t('linkCommons.already')}
+        />
       </OxyAuthScreen>
     );
   }
@@ -51,7 +54,11 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
 
   return (
     <ReauthStep
-      title={hasPassword ? t('signInSecurity.password.changeTitle') : t('signInSecurity.password.setTitle')}
+      title={
+        hasPassword
+          ? t('signInSecurity.password.changeTitle')
+          : t('signInSecurity.password.setTitle')
+      }
       description={t('signInSecurity.password.description', { min: PASSWORD_MIN_LENGTH })}
       action="change_password"
       allowPassword={hasPassword}
@@ -64,7 +71,11 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
         return password === repeat ? null : t('signInSecurity.password.mismatch');
       }}
       onSubmit={async (reauth) => {
-        await oxyServices.auth.password.set({ newPassword: password, reauth, revokeOtherSessions: signOutOthers });
+        await oxyServices.auth.password.set({
+          newPassword: password,
+          reauth,
+          revokeOtherSessions: signOutOthers,
+        });
         void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
         toast.success(t('signInSecurity.password.saved'));
         onDone?.();
@@ -95,7 +106,11 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
       {/* The field names the switch ("Sign out everywhere else, switch, off")
           and, on web, its label toggles it. One row: label, then the switch. */}
       <Field label={t('signInSecurity.password.signOutOthers')} style={styles.row}>
-        <Switch checked={signOutOthers} onCheckedChange={setSignOutOthers} testID="password-sign-out-others" />
+        <Switch
+          checked={signOutOthers}
+          onCheckedChange={setSignOutOthers}
+          testID="password-sign-out-others"
+        />
       </Field>
     </ReauthStep>
   );