@oxy.so/services 8.1.0 → 8.2.0

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

@@ -10,9 +10,12 @@
  *                 photo carousel, in the right column (the account dialog grows to
  *                 that card); below `md` it is "Continue with Oxy" at the top. On
  *                 native it is "Continue with Oxy" ("Get Commons" without Commons).
- *   check-email   one email carries a code and a link. The code is typed here (6
- *                 digits, or the 10-character long code); meanwhile the screen asks
- *                 whether the link was opened in this browser, and signs in when it was.
+ *   check-email   one email carries a code and a link. The code is typed here: 6
+ *                 digits, or — "Does your code have letters?" — the 10-character
+ *                 long code an account past its daily guessing ceiling is sent
+ *                 (the start response does not say which, by design); meanwhile
+ *                 the screen asks whether the link was opened in this browser,
+ *                 and signs in when it was.
  *   password      the alternative for an account that has one.
  *   second-factor the authenticator's code, or a backup code, when the account has one.
  *
@@ -32,6 +35,7 @@ import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
 import type { SwitcherContextRow } from '@oxy.so/core/session';
 import {
+  EMAIL_CODE_LENGTH,
   EMAIL_SIGNIN_LONG_CODE_LENGTH,
   SIGN_IN_ERROR_CODES,
   TOTP_DIGITS,
@@ -54,11 +58,12 @@ import { OxyAccountPicker } from './OxyAccountPicker';
 import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from './OxyAuthScreen';
 import {
   AccountFlowAction,
+  AccountFlowCodeField,
   AccountFlowField,
   AccountFlowNote,
+  BACKUP_CODE_LENGTH,
   describeSignInError,
   errorCode,
-  formatSignInCodeInput,
   isCompleteSignInCode,
   isRateLimited,
   retryAfterSeconds,
@@ -79,6 +84,8 @@ interface SavedSignInFlow {
   identifier: string;
   showForm: boolean;
   useBackupCode: boolean;
+  /** The code field takes the 10-character long code ("Does your code have letters?"). */
+  longCode: boolean;
   /** When "Send a new email" may be pressed again (ms). */
   resendUntil: number;
 }
@@ -139,6 +146,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   const [password, setPassword] = useState('');
   const [secondFactorCode, setSecondFactorCode] = useState('');
   const [useBackupCode, setUseBackupCode] = useState(saved?.useBackupCode ?? false);
+  const [longCode, setLongCode] = useState(saved?.longCode ?? false);
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
@@ -153,9 +161,10 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
       identifier,
       showForm,
       useBackupCode,
+      longCode,
       resendUntil: Date.now() + resendSeconds * 1000,
     } satisfies SavedSignInFlow);
-  }, [flowOwner, step, identifier, showForm, useBackupCode, resendSeconds]);
+  }, [flowOwner, step, identifier, showForm, useBackupCode, longCode, resendSeconds]);
   const blocked = pending || rateLimitSeconds > 0;
 
   // The countdown after a 429: one tick a second until the person may retry.
@@ -244,7 +253,9 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         }
         setCode('');
         setResendSeconds(EMAIL_RESEND_COOLDOWN_SECONDS);
+        // 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 });
       })
       .catch(fail)
@@ -362,6 +373,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     setError(null);
     setNotice(null);
     setCode('');
+    setLongCode(false);
     setPassword('');
     setStep({ name: 'start' });
   };
@@ -443,24 +455,34 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             title={t('signin.checkEmail.title')}
             description={t('signin.checkEmail.description', { identifier: request.identifier })}
           />
-          <AccountFlowField
+          <AccountFlowCodeField
+            key={longCode ? 'long' : 'digits'}
             label={t('signin.checkEmail.codeLabel')}
             value={code}
             onChange={(value) => {
-              const typed = formatSignInCodeInput(value);
-              setCode(typed);
+              setCode(value);
               clearError();
-              if (isCompleteSignInCode(typed)) submitCode(typed);
             }}
-            onSubmit={() => submitCode(code)}
+            onComplete={submitCode}
             error={shownError}
             disabled={blocked}
-            placeholder="000000"
-            autoComplete="one-time-code"
-            maxLength={EMAIL_SIGNIN_LONG_CODE_LENGTH + 1}
+            length={longCode ? EMAIL_SIGNIN_LONG_CODE_LENGTH : EMAIL_CODE_LENGTH}
+            type={longCode ? 'alphanumeric' : 'numeric'}
+            groupEvery={longCode ? EMAIL_SIGNIN_LONG_CODE_LENGTH / 2 : undefined}
             hint={t('signin.checkEmail.codeHint')}
             testID="signin-code"
           />
+          <SubtleLink
+            label={longCode ? t('signin.checkEmail.codeDigitsOnly') : t('signin.checkEmail.codeHasLetters')}
+            theme={theme}
+            onPress={() => {
+              setLongCode(!longCode);
+              setCode('');
+              setError(null);
+            }}
+            disabled={pending}
+            testID="signin-code-letters"
+          />
           {notice ? <AccountFlowNote testID="signin-notice">{notice}</AccountFlowNote> : null}
           <AccountFlowAction
             label={t('signin.actions.continue')}
@@ -553,28 +575,20 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             title={t('signin.secondFactor.title')}
             description={useBackupCode ? t('signin.secondFactor.backupDescription') : t('signin.secondFactor.description')}
           />
-          <AccountFlowField
+          <AccountFlowCodeField
             key={useBackupCode ? 'backup' : 'totp'}
             label={useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')}
             value={secondFactorCode}
             onChange={(value) => {
-              if (useBackupCode) {
-                setSecondFactorCode(value);
-                clearError();
-                return;
-              }
-              const digits = value.replace(/\D/g, '').slice(0, TOTP_DIGITS);
-              setSecondFactorCode(digits);
+              setSecondFactorCode(value);
               clearError();
-              if (digits.length === TOTP_DIGITS) submitSecondFactor(digits);
             }}
-            onSubmit={() => submitSecondFactor(secondFactorCode)}
+            onComplete={submitSecondFactor}
             error={shownError}
             disabled={blocked}
-            placeholder={useBackupCode ? 'xxxxx-xxxxx' : '000000'}
-            autoComplete="one-time-code"
-            keyboardType={useBackupCode ? 'default' : 'number-pad'}
-            maxLength={useBackupCode ? 11 : TOTP_DIGITS}
+            length={useBackupCode ? BACKUP_CODE_LENGTH : TOTP_DIGITS}
+            type={useBackupCode ? 'alphanumeric' : 'numeric'}
+            groupEvery={useBackupCode ? BACKUP_CODE_LENGTH / 2 : undefined}
             testID="signin-second-factor"
           />
           <AccountFlowAction

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

@@ -9,16 +9,18 @@
 import type React from 'react';
 import { useState } from 'react';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { EMAIL_CODE_LENGTH, 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';
 import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import {
   AccountFlowAction,
+  AccountFlowCodeField,
   AccountFlowErrorLine,
   AccountFlowField,
   AccountFlowNote,
+  BACKUP_CODE_LENGTH,
   describeSignInError,
 } from './accountFlowParts';
 
@@ -64,6 +66,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
   const [emailCode, setEmailCode] = useState('');
   const [password, setPassword] = useState('');
   const [totpCode, setTotpCode] = useState('');
+  const [useBackupCode, setUseBackupCode] = useState(false);
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -138,17 +141,13 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
       ) : verificationId ? (
         <>
           <AccountFlowNote>{t('reauth.codeSent')}</AccountFlowNote>
-          <AccountFlowField
+          <AccountFlowCodeField
             label={t('reauth.codeLabel')}
             value={emailCode}
-            onChange={(value) => setEmailCode(value.replace(/\D/g, '').slice(0, EMAIL_CODE_LENGTH))}
-            onSubmit={submit}
+            onChange={setEmailCode}
             error={null}
             disabled={pending}
-            placeholder="000000"
-            autoComplete="one-time-code"
-            keyboardType="number-pad"
-            maxLength={EMAIL_CODE_LENGTH}
+            length={EMAIL_CODE_LENGTH}
             testID="reauth-code"
           />
         </>
@@ -156,19 +155,32 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         <AccountFlowNote>{t('reauth.emailDescription')}</AccountFlowNote>
       )}
       {totpEnabled && !needsCode ? (
-        <AccountFlowField
-          label={t('reauth.totpLabel')}
-          value={totpCode}
-          onChange={setTotpCode}
-          onSubmit={submit}
-          error={null}
-          disabled={pending}
-          placeholder="000000"
-          autoComplete="one-time-code"
-          autoFocus={false}
-          maxLength={11}
-          testID="reauth-totp"
-        />
+        <>
+          <AccountFlowCodeField
+            key={useBackupCode ? 'backup' : 'totp'}
+            label={useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')}
+            value={totpCode}
+            onChange={setTotpCode}
+            error={null}
+            disabled={pending}
+            length={useBackupCode ? BACKUP_CODE_LENGTH : TOTP_DIGITS}
+            type={useBackupCode ? 'alphanumeric' : 'numeric'}
+            groupEvery={useBackupCode ? BACKUP_CODE_LENGTH / 2 : undefined}
+            autoFocus={false}
+            testID="reauth-totp"
+          />
+          <SubtleLink
+            label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
+            theme={theme}
+            onPress={() => {
+              setUseBackupCode(!useBackupCode);
+              setTotpCode('');
+              setError(null);
+            }}
+            disabled={pending}
+            testID="reauth-toggle-backup"
+          />
+        </>
       ) : null}
       {error ? <AccountFlowErrorLine message={error} /> : null}
       <AccountFlowAction

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

@@ -1,6 +1,7 @@
 /**
  * The pieces every Oxy sign-in and account screen shares: the error vocabulary,
- * one labelled field, the one primary action, a note, and the email-code step.
+ * one labelled field, one one-time-code field, the one primary action, a note,
+ * and the email-code step.
  * Each screen is built from the same shell as `OxySignInPanel`
  * (`OxyAuthScreen`), so they read as one product in the account dialog, in an
  * app's settings and on auth.oxy.so.
@@ -10,6 +11,8 @@ import type React from 'react';
 import { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Button } from '@oxy.so/bloom/button';
+import { Field } from '@oxy.so/bloom/field';
+import { InputOtp } from '@oxy.so/bloom/input-otp';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
 import { Text } from '@oxy.so/bloom/typography';
@@ -105,9 +108,7 @@ const LONG_CODE = new RegExp(`^[${EMAIL_SIGNIN_LONG_CODE_ALPHABET}]{${EMAIL_SIGN
 
 /**
  * Whether a typed sign-in code is complete: 6 digits, or the 10-character long
- * code (`XXXXX-XXXXX`, any case, with or without its dash). Six digits count
- * only when typed without a separator: the long code is shown with its dash
- * after the fifth character, so a long code being typed never reads as 6 digits.
+ * code (`XXXXX-XXXXX`, any case, with or without its dash) in its own alphabet.
  */
 export function isCompleteSignInCode(typed: string): boolean {
   const trimmed = typed.trim();
@@ -115,10 +116,8 @@ export function isCompleteSignInCode(typed: string): boolean {
   return LONG_CODE.test(normalizeEmailSignInCode(trimmed));
 }
 
-/** A typed sign-in code as it shows in its field: upper-case, the long code's dash kept. */
-export function formatSignInCodeInput(typed: string): string {
-  return typed.toUpperCase().replace(/[^0-9A-Z-\s]/g, '').slice(0, EMAIL_SIGNIN_LONG_CODE_LENGTH + 1);
-}
+/** Characters in a backup code (`xxxxx-xxxxx`, its dash not counted). */
+export const BACKUP_CODE_LENGTH = 10;
 
 /** One labelled input, the way the sign-in screen draws its fields. */
 export const AccountFlowField: React.FC<{
@@ -129,11 +128,10 @@ export const AccountFlowField: React.FC<{
   error: string | null;
   disabled?: boolean;
   placeholder?: string;
-  autoComplete?: 'username' | 'email' | 'one-time-code' | 'off' | 'current-password' | 'new-password';
-  keyboardType?: 'default' | 'email-address' | 'number-pad';
+  autoComplete?: 'username' | 'email' | 'off' | 'current-password' | 'new-password';
+  keyboardType?: 'default' | 'email-address';
   secureTextEntry?: boolean;
   autoFocus?: boolean;
-  maxLength?: number;
   hint?: string;
   testID: string;
 }> = ({
@@ -148,7 +146,6 @@ export const AccountFlowField: React.FC<{
   keyboardType,
   secureTextEntry,
   autoFocus = true,
-  maxLength,
   hint,
   testID,
 }) => (
@@ -164,7 +161,6 @@ export const AccountFlowField: React.FC<{
         autoComplete={autoComplete}
         keyboardType={keyboardType}
         secureTextEntry={secureTextEntry}
-        maxLength={maxLength}
         autoCapitalize="none"
         autoCorrect={false}
         autoFocus={autoFocus}
@@ -177,6 +173,57 @@ export const AccountFlowField: React.FC<{
   </View>
 );
 
+/**
+ * A one-time code: Bloom's `InputOtp`, one box per character, named by the
+ * field's label (the boxes are the field's `multiple` case). `numeric` codes
+ * are the email's 6 digits and the authenticator's; `alphanumeric` ones are
+ * the long sign-in code and a backup code, both `XXXXX-XXXXX` — upper-cased,
+ * the dash dropped, so a pasted code fills every box.
+ */
+export const AccountFlowCodeField: React.FC<{
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  /** Every box is filled. */
+  onComplete?: (value: string) => void;
+  error: string | null;
+  disabled?: boolean;
+  length: number;
+  type?: 'numeric' | 'alphanumeric';
+  groupEvery?: number;
+  autoFocus?: boolean;
+  hint?: string;
+  testID: string;
+}> = ({
+  label,
+  value,
+  onChange,
+  onComplete,
+  error,
+  disabled,
+  length,
+  type = 'numeric',
+  groupEvery,
+  autoFocus = true,
+  hint,
+  testID,
+}) => (
+  <Field label={label} multiple description={hint} error={error} disabled={disabled}>
+    <InputOtp
+      length={length}
+      type={type}
+      groupEvery={groupEvery}
+      value={value}
+      onChange={onChange}
+      onComplete={onComplete}
+      invalid={error !== null}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      testID={testID}
+    />
+  </Field>
+);
+
 /** The screen's one primary action. */
 export const AccountFlowAction: React.FC<{
   label: string;
@@ -270,22 +317,17 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
   return (
     <OxyAuthScreen>
       <OxyAuthScreenHeader title={t('emailCode.title')} description={description} />
-      <AccountFlowField
+      <AccountFlowCodeField
         label={t('emailCode.label')}
         value={code}
         onChange={(value) => {
-          const digits = value.replace(/\D/g, '').slice(0, EMAIL_CODE_LENGTH);
-          setCode(digits);
+          setCode(value);
           if (error) setError(null);
-          if (digits.length === EMAIL_CODE_LENGTH) confirm(digits);
         }}
-        onSubmit={() => confirm(code)}
+        onComplete={confirm}
         error={error}
         disabled={pending}
-        placeholder="000000"
-        autoComplete="one-time-code"
-        keyboardType="number-pad"
-        maxLength={EMAIL_CODE_LENGTH}
+        length={EMAIL_CODE_LENGTH}
         testID="email-code"
       />
       {notice ? <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{notice}</Text> : null}