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

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

@@ -125,7 +125,12 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   const theme = useTheme();
   const { t } = useI18n();
   const queryClient = useQueryClient();
-  const { accountDialogController: controller, openAccountDialog, oxyServices, handleWebSession } = useOxy();
+  const {
+    accountDialogController: controller,
+    openAccountDialog,
+    oxyServices,
+    handleWebSession,
+  } = useOxy();
   const snapshot = useAccountDialogSnapshot(controller);
   const { principals, activeContext } = useDeviceSwitcher();
 
@@ -170,7 +175,10 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   // 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);
+    const timer = setTimeout(
+      () => setRateLimitSeconds((seconds) => Math.max(0, seconds - 1)),
+      1000,
+    );
     return () => clearTimeout(timer);
   }, [rateLimitSeconds]);
 
@@ -185,7 +193,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   // 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;
+  const completedHere =
+    snapshot.signIn.phase === 'completed' && snapshot.signIn.attempt !== mountedAttempt;
   useEffect(() => {
     if (host === 'page' && completedHere) onSignedIn();
   }, [host, completedHere, onSignedIn]);
@@ -244,8 +253,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     setError(null);
     setNotice(null);
     setPending(true);
-    oxyServices
-      .auth.email.start(name)
+    oxyServices.auth.email
+      .start(name)
       .then((started) => {
         if (started.retryLater) {
           setError(t('signin.checkEmail.retryLater'));
@@ -256,7 +265,12 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         // A resend keeps the field as the person set it; a new request starts at 6 digits.
         if (step.name === 'check-email') setNotice(t('signin.checkEmail.resent'));
         else setLongCode(false);
-        setStep({ name: 'check-email', identifier: name, requestId: started.requestId, requestSecret: started.requestSecret });
+        setStep({
+          name: 'check-email',
+          identifier: name,
+          requestId: started.requestId,
+          requestSecret: started.requestSecret,
+        });
       })
       .catch(fail)
       .finally(() => setPending(false));
@@ -281,8 +295,12 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     setError(null);
     setNotice(null);
     setPending(true);
-    oxyServices
-      .auth.email.confirm({ requestId: request.requestId, requestSecret: request.requestSecret, code: typed.trim() })
+    oxyServices.auth.email
+      .confirm({
+        requestId: request.requestId,
+        requestSecret: request.requestSecret,
+        code: typed.trim(),
+      })
       .then((result) => finish(result, request.identifier))
       .catch((reason: unknown) => {
         setCode('');
@@ -300,8 +318,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     const name = step.identifier;
     setError(null);
     setPending(true);
-    oxyServices
-      .auth.password.signIn({ identifier: name, password })
+    oxyServices.auth.password
+      .signIn({ identifier: name, password })
       .then((result) => finish(result, name))
       .catch(fail)
       .finally(() => setPending(false));
@@ -317,8 +335,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     const challenge = step;
     setError(null);
     setPending(true);
-    oxyServices
-      .auth.completeSecondFactor({ challengeId: challenge.challengeId, code: value })
+    oxyServices.auth
+      .completeSecondFactor({ challengeId: challenge.challengeId, code: value })
       .then((session) => finish(session, challenge.identifier))
       .catch((reason: unknown) => {
         setSecondFactorCode('');
@@ -388,7 +406,9 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   // a signed-in app: the rows are the accounts it would add.
   const pickerAllowed = host === 'dialog' ? !snapshot.hasSession : activeContext !== null;
   const selectContext = async (context: SwitcherContextRow) => {
-    const outcome = await controller?.chooseContext(context.contextId).catch(() => 'failed' as const);
+    const outcome = await controller
+      ?.chooseContext(context.contextId)
+      .catch(() => 'failed' as const);
     switch (outcome) {
       case 'switched':
         // Every account-scoped query now describes somebody else.
@@ -480,7 +500,11 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             testID="signin-code"
           />
           <SubtleLink
-            label={longCode ? t('signin.checkEmail.codeDigitsOnly') : t('signin.checkEmail.codeHasLetters')}
+            label={
+              longCode
+                ? t('signin.checkEmail.codeDigitsOnly')
+                : t('signin.checkEmail.codeHasLetters')
+            }
             onPress={() => {
               setLongCode(!longCode);
               setCode('');
@@ -530,7 +554,10 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
       const request = step;
       form = (
         <OxyAuthScreen className={splits ? 'md:max-w-none' : undefined}>
-          <OxyAuthScreenHeader title={t('signin.password.title')} description={request.identifier} />
+          <OxyAuthScreenHeader
+            title={t('signin.password.title')}
+            description={request.identifier}
+          />
           <AccountFlowField
             label={t('signin.password.label')}
             value={password}
@@ -576,11 +603,17 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         <OxyAuthScreen className={splits ? 'md:max-w-none' : undefined}>
           <OxyAuthScreenHeader
             title={t('signin.secondFactor.title')}
-            description={useBackupCode ? t('signin.secondFactor.backupDescription') : t('signin.secondFactor.description')}
+            description={
+              useBackupCode
+                ? t('signin.secondFactor.backupDescription')
+                : t('signin.secondFactor.description')
+            }
           />
           <AccountFlowCodeField
             key={useBackupCode ? 'backup' : 'totp'}
-            label={useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')}
+            label={
+              useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')
+            }
             value={secondFactorCode}
             onChange={(value) => {
               setSecondFactorCode(value);
@@ -604,7 +637,11 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           />
           <View style={styles.links}>
             <SubtleLink
-              label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
+              label={
+                useBackupCode
+                  ? t('signin.secondFactor.useAuthenticator')
+                  : t('signin.secondFactor.useBackup')
+              }
               onPress={() => {
                 setUseBackupCode(!useBackupCode);
                 setSecondFactorCode('');
@@ -633,7 +670,14 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           : t('signin.subtitle');
 
       const continueWithOxyButton = (
-        <Button appearance="outline" tone="neutral" size="lg" fullWidth onPress={continueWithOxy} testID="continue-with-oxy">
+        <Button
+          appearance="outline"
+          tone="neutral"
+          size="lg"
+          fullWidth
+          onPress={continueWithOxy}
+          testID="continue-with-oxy"
+        >
           {t('accountSwitcher.continueWithOxy')}
         </Button>
       );
@@ -660,8 +704,17 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           ) : null}
           {methods.commons === 'get-commons' ? (
             <View style={styles.stack}>
-              <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{t('accountSwitcher.commonsNotInstalled')}</Text>
-              <Button appearance="outline" tone="neutral" size="lg" fullWidth onPress={getCommons} testID="get-commons-button">
+              <Text style={[styles.note, { color: theme.colors.textSecondary }]}>
+                {t('accountSwitcher.commonsNotInstalled')}
+              </Text>
+              <Button
+                appearance="outline"
+                tone="neutral"
+                size="lg"
+                fullWidth
+                onPress={getCommons}
+                testID="get-commons-button"
+              >
                 {t('accountSwitcher.getCommons')}
               </Button>
               {divider}

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

@@ -15,7 +15,11 @@ import type React from 'react';
 import { useEffect, useState } from 'react';
 import { Linking, Platform } from 'react-native';
 import { toast } from '@oxy.so/bloom/toast';
-import { SIGN_IN_ERROR_CODES, emailAddressSchema, type EmailVerificationConfirmResponse } from '@oxy.so/contracts';
+import {
+  SIGN_IN_ERROR_CODES,
+  emailAddressSchema,
+  type EmailVerificationConfirmResponse,
+} from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
 import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
 import { useI18n } from '../../hooks/useI18n';
@@ -60,7 +64,11 @@ interface SavedSignUpFlow {
 }
 const SIGN_UP_FLOW_KEY = 'signup';
 
-export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSignIn, host = 'page' }) => {
+export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({
+  onSignedIn,
+  onSignIn,
+  host = 'page',
+}) => {
   const { t } = useI18n();
   const { oxyServices, handleWebSession, accountDialogController } = useOxy();
   const snapshot = useAccountDialogSnapshot(accountDialogController);
@@ -73,7 +81,11 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    writeSignInFlow(flowOwner, SIGN_UP_FLOW_KEY, { step, username, email } satisfies SavedSignUpFlow);
+    writeSignInFlow(flowOwner, SIGN_UP_FLOW_KEY, {
+      step,
+      username,
+      email,
+    } satisfies SavedSignUpFlow);
   }, [flowOwner, step, username, email]);
 
   const run = (work: () => Promise<void>) => {
@@ -83,7 +95,11 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
     work()
       .catch((reason: unknown) => {
         if (isTicketExpired(reason)) setStep({ name: 'email' });
-        setError(reason instanceof UsernameTakenError ? t('signup.username.taken') : describeSignInError(reason, t));
+        setError(
+          reason instanceof UsernameTakenError
+            ? t('signup.username.taken')
+            : describeSignInError(reason, t),
+        );
       })
       .finally(() => setPending(false));
   };
@@ -102,7 +118,10 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
   };
 
   const sendCode = async (address: string) => {
-    const { verificationId } = await oxyServices.auth.email.startVerification({ purpose: 'signup', email: address });
+    const { verificationId } = await oxyServices.auth.email.startVerification({
+      purpose: 'signup',
+      email: address,
+    });
     setStep({ name: 'code', verificationId });
   };
 
@@ -119,7 +138,11 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
   // The code step reports this promise's failure in place.
   const createAccount = async ({ ticket }: EmailVerificationConfirmResponse): Promise<void> => {
     try {
-      const session = await oxyServices.auth.signUp({ username: username.trim(), email, emailTicket: ticket });
+      const session = await oxyServices.auth.signUp({
+        username: username.trim(),
+        email,
+        emailTicket: ticket,
+      });
       await handleWebSession(session);
       writeSignInFlow(flowOwner, SIGN_UP_FLOW_KEY, undefined);
     } catch (reason) {
@@ -169,7 +192,10 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
     case 'email':
       return (
         <OxyAuthScreen>
-          <OxyAuthScreenHeader title={t('signup.email.title')} description={t('signup.email.subtitle')} />
+          <OxyAuthScreenHeader
+            title={t('signup.email.title')}
+            description={t('signup.email.subtitle')}
+          />
           {progress(1)}
           <AccountFlowField
             label={t('signup.email.label')}
@@ -187,8 +213,17 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
             testID="signup-email"
           />
           <AccountFlowNote>{t('signup.laterNote')}</AccountFlowNote>
-          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitEmail} pending={pending} testID="signup-email-continue" />
-          <SubtleLink label={t('signin.actions.back')} onPress={() => setStep({ name: 'username' })} testID="signup-back" />
+          <AccountFlowAction
+            label={t('signin.actions.continue')}
+            onPress={submitEmail}
+            pending={pending}
+            testID="signup-email-continue"
+          />
+          <SubtleLink
+            label={t('signin.actions.back')}
+            onPress={() => setStep({ name: 'username' })}
+            testID="signup-back"
+          />
           <OxyAuthTerms />
         </OxyAuthScreen>
       );
@@ -211,9 +246,22 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
             autoComplete="username"
             testID="signup-username"
           />
-          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitUsername} pending={pending} testID="signup-username-continue" />
-          <SubtleLink label={t('signup.createInCommons')} onPress={createInCommons} testID="signup-commons-instead" />
-          <SubtleLink label={t('signup.backToSignInLink')} onPress={onSignIn} testID="back-to-sign-in" />
+          <AccountFlowAction
+            label={t('signin.actions.continue')}
+            onPress={submitUsername}
+            pending={pending}
+            testID="signup-username-continue"
+          />
+          <SubtleLink
+            label={t('signup.createInCommons')}
+            onPress={createInCommons}
+            testID="signup-commons-instead"
+          />
+          <SubtleLink
+            label={t('signup.backToSignInLink')}
+            onPress={onSignIn}
+            testID="back-to-sign-in"
+          />
           <OxyAuthTerms />
         </OxyAuthScreen>
       );

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

@@ -8,7 +8,12 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { EMAIL_CODE_LENGTH, TOTP_DIGITS, type ReauthAction, type ReauthProof } from '@oxy.so/contracts';
+import {
+  EMAIL_CODE_LENGTH,
+  TOTP_DIGITS,
+  type ReauthAction,
+  type ReauthProof,
+} from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
 import { useI18n } from '../../hooks/useI18n';
 import { SubtleLink } from '../authChooser/primitives';
@@ -157,7 +162,9 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         <>
           <AccountFlowCodeField
             key={useBackupCode ? 'backup' : 'totp'}
-            label={useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')}
+            label={
+              useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')
+            }
             value={totpCode}
             onChange={setTotpCode}
             error={null}
@@ -169,7 +176,11 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
             testID="reauth-totp"
           />
           <SubtleLink
-            label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
+            label={
+              useBackupCode
+                ? t('signin.secondFactor.useAuthenticator')
+                : t('signin.secondFactor.useBackup')
+            }
             onPress={() => {
               setUseBackupCode(!useBackupCode);
               setTotpCode('');
@@ -189,7 +200,12 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         testID={needsCode ? 'reauth-send-code' : 'reauth-submit'}
       />
       {mode === 'email' && verificationId ? (
-        <SubtleLink label={t('emailCode.resend')} onPress={sendCode} disabled={pending} testID="reauth-resend" />
+        <SubtleLink
+          label={t('emailCode.resend')}
+          onPress={sendCode}
+          disabled={pending}
+          testID="reauth-resend"
+        />
       ) : null}
       {allowPassword ? (
         <SubtleLink
@@ -203,7 +219,12 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         />
       ) : null}
       {secondary ? (
-        <SubtleLink label={secondary.label} onPress={secondary.onPress} disabled={pending} testID="reauth-cancel" />
+        <SubtleLink
+          label={secondary.label}
+          onPress={secondary.onPress}
+          disabled={pending}
+          testID="reauth-cancel"
+        />
       ) : null}
     </OxyAuthScreen>
   );

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

@@ -57,7 +57,8 @@ export function isRateLimited(error: unknown): boolean {
 
 /** How long to wait after a 429, from the API's `retryAfterSeconds` when it sent one. */
 export function retryAfterSeconds(error: unknown): number {
-  const seconds = (error as { details?: { retryAfterSeconds?: unknown } } | undefined)?.details?.retryAfterSeconds;
+  const seconds = (error as { details?: { retryAfterSeconds?: unknown } } | undefined)?.details
+    ?.retryAfterSeconds;
   return typeof seconds === 'number' && seconds > 0 ? Math.ceil(seconds) : RATE_LIMIT_SECONDS;
 }
 
@@ -94,7 +95,8 @@ export function describeSignInError(error: unknown, t: Translate): string {
     case EMAIL_VERIFICATION_ERROR_CODES.unavailable:
       return t('emailCode.errors.unavailable');
     default:
-      if (isRateLimited(error)) return t('signin.errors.rateLimited', { seconds: retryAfterSeconds(error) });
+      if (isRateLimited(error))
+        return t('signin.errors.rateLimited', { seconds: retryAfterSeconds(error) });
       return t('signin.errors.generic');
   }
 }
@@ -102,11 +104,16 @@ export function describeSignInError(error: unknown, t: Translate): string {
 /** Whether the confirmation this flow holds is gone and it must start again. */
 export function isTicketExpired(error: unknown): boolean {
   const code = errorCode(error);
-  return code === EMAIL_VERIFICATION_ERROR_CODES.ticketInvalid || code === EMAIL_VERIFICATION_ERROR_CODES.ticketRequired;
+  return (
+    code === EMAIL_VERIFICATION_ERROR_CODES.ticketInvalid ||
+    code === EMAIL_VERIFICATION_ERROR_CODES.ticketRequired
+  );
 }
 
 const SIX_DIGITS = new RegExp(`^\\d{${EMAIL_CODE_LENGTH}}$`);
-const LONG_CODE = new RegExp(`^[${EMAIL_SIGNIN_LONG_CODE_ALPHABET}]{${EMAIL_SIGNIN_LONG_CODE_LENGTH}}$`);
+const LONG_CODE = new RegExp(
+  `^[${EMAIL_SIGNIN_LONG_CODE_ALPHABET}]{${EMAIL_SIGNIN_LONG_CODE_LENGTH}}$`,
+);
 
 /**
  * Whether a typed sign-in code is complete: 6 digits, or the 10-character long
@@ -176,7 +183,11 @@ export const AccountFlowField: React.FC<{
         aria-required
       />
     </TextField>
-    {error ? <TextFieldHint invalid>{error}</TextFieldHint> : hint ? <TextFieldHint>{hint}</TextFieldHint> : null}
+    {error ? (
+      <TextFieldHint invalid>{error}</TextFieldHint>
+    ) : hint ? (
+      <TextFieldHint>{hint}</TextFieldHint>
+    ) : null}
   </View>
 );
 
@@ -255,7 +266,10 @@ export const AccountFlowAction: React.FC<{
 );
 
 /** A line of body copy under the header. */
-export const AccountFlowNote: React.FC<{ children: React.ReactNode; testID?: string }> = ({ children, testID }) => {
+export const AccountFlowNote: React.FC<{ children: React.ReactNode; testID?: string }> = ({
+  children,
+  testID,
+}) => {
   const theme = useTheme();
   return (
     <Text style={[styles.note, { color: theme.colors.textSecondary }]} testID={testID}>
@@ -285,11 +299,11 @@ export const AccountFlowNotice: React.FC<{
  * screen's own header names the step, so the progress draws no title; the
  * titles still name the bar for assistive technology.
  */
-export const AccountFlowProgress: React.FC<{ steps: readonly string[]; current: number; testID?: string }> = ({
-  steps,
-  current,
-  testID,
-}) => {
+export const AccountFlowProgress: React.FC<{
+  steps: readonly string[];
+  current: number;
+  testID?: string;
+}> = ({ steps, current, testID }) => {
   const { t } = useI18n();
   return (
     <WizardProgress
@@ -351,8 +365,8 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({
     }
     setError(null);
     setPending(true);
-    oxyServices
-      .auth.email.confirmVerification(verificationId, digits)
+    oxyServices.auth.email
+      .confirmVerification(verificationId, digits)
       .then(onConfirmed)
       .catch((reason: unknown) => setError(describeSignInError(reason, t)))
       .finally(() => setPending(false));
@@ -385,9 +399,24 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({
         testID="email-code"
       />
       {notice ? <AccountFlowNotice testID="email-code-notice">{notice}</AccountFlowNotice> : null}
-      <AccountFlowAction label={t('signin.actions.continue')} onPress={() => confirm(code)} pending={pending} testID="email-code-continue" />
-      <SubtleLink label={t('emailCode.resend')} onPress={resend} disabled={pending} testID="email-code-resend" />
-      <SubtleLink label={back.label} onPress={back.onPress} disabled={pending} testID="email-code-back" />
+      <AccountFlowAction
+        label={t('signin.actions.continue')}
+        onPress={() => confirm(code)}
+        pending={pending}
+        testID="email-code-continue"
+      />
+      <SubtleLink
+        label={t('emailCode.resend')}
+        onPress={resend}
+        disabled={pending}
+        testID="email-code-resend"
+      />
+      <SubtleLink
+        label={back.label}
+        onPress={back.onPress}
+        disabled={pending}
+        testID="email-code-back"
+      />
     </OxyAuthScreen>
   );
 };

package/src/ui/components/signIn/artwork.ts

@@ -10,4 +10,6 @@ import slide2 from '../../../assets/signIn/slide-2.jpg';
 import slide3 from '../../../assets/signIn/slide-3.jpg';
 import slide4 from '../../../assets/signIn/slide-4.jpg';
 
-export const SIGN_IN_SLIDES: AuthMediaSlide[] = [slide1, slide2, slide3, slide4].map((source) => ({ source }));
+export const SIGN_IN_SLIDES: AuthMediaSlide[] = [slide1, slide2, slide3, slide4].map((source) => ({
+  source,
+}));

package/src/ui/components/signIn/signInFlowStore.ts

@@ -21,7 +21,11 @@ export function readSignInFlow<T>(owner: object | null | undefined, key: string)
 }
 
 /** Save the state of flow `key`; `undefined` drops it. */
-export function writeSignInFlow(owner: object | null | undefined, key: string, value: unknown): void {
+export function writeSignInFlow(
+  owner: object | null | undefined,
+  key: string,
+  value: unknown,
+): void {
   if (!owner) return;
   let saved = flows.get(owner);
   if (value === undefined) {