@oxy.so/services 8.3.0 → 8.4.0

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

@@ -8,7 +8,6 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { useTheme } from '@oxy.so/bloom/theme';
 import { EMAIL_CODE_LENGTH, TOTP_DIGITS, type ReauthAction, type ReauthProof } from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
 import { useI18n } from '../../hooks/useI18n';
@@ -20,6 +19,7 @@ import {
   AccountFlowErrorLine,
   AccountFlowField,
   AccountFlowNote,
+  AccountFlowNotice,
   BACKUP_CODE_LENGTH,
   describeSignInError,
 } from './accountFlowParts';
@@ -58,7 +58,6 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
   secondary,
   children,
 }) => {
-  const theme = useTheme();
   const { t } = useI18n();
   const { oxyServices } = useOxy();
   const [mode, setMode] = useState<'email' | 'password'>(allowPassword ? 'password' : 'email');
@@ -140,7 +139,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         />
       ) : verificationId ? (
         <>
-          <AccountFlowNote>{t('reauth.codeSent')}</AccountFlowNote>
+          <AccountFlowNotice testID="reauth-code-sent">{t('reauth.codeSent')}</AccountFlowNotice>
           <AccountFlowCodeField
             label={t('reauth.codeLabel')}
             value={emailCode}
@@ -171,7 +170,6 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
           />
           <SubtleLink
             label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
-            theme={theme}
             onPress={() => {
               setUseBackupCode(!useBackupCode);
               setTotpCode('');
@@ -191,12 +189,11 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         testID={needsCode ? 'reauth-send-code' : 'reauth-submit'}
       />
       {mode === 'email' && verificationId ? (
-        <SubtleLink label={t('emailCode.resend')} theme={theme} onPress={sendCode} disabled={pending} testID="reauth-resend" />
+        <SubtleLink label={t('emailCode.resend')} onPress={sendCode} disabled={pending} testID="reauth-resend" />
       ) : null}
       {allowPassword ? (
         <SubtleLink
           label={mode === 'password' ? t('reauth.useEmail') : t('reauth.usePassword')}
-          theme={theme}
           onPress={() => {
             setError(null);
             setMode(mode === 'password' ? 'email' : 'password');
@@ -206,7 +203,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         />
       ) : null}
       {secondary ? (
-        <SubtleLink label={secondary.label} theme={theme} 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

@@ -1,7 +1,7 @@
 /**
  * The pieces every Oxy sign-in and account screen shares: the error vocabulary,
  * one labelled field, one one-time-code field, the one primary action, a note,
- * and the email-code step.
+ * a notice, 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,12 +10,14 @@
 import type React from 'react';
 import { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
+import { Admonition } from '@oxy.so/bloom/admonition';
 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';
+import { WizardProgress } from '@oxy.so/bloom/wizard';
 import {
   EMAIL_CODE_LENGTH,
   EMAIL_SIGNIN_LONG_CODE_ALPHABET,
@@ -119,7 +121,11 @@ export function isCompleteSignInCode(typed: string): boolean {
 /** 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. */
+/**
+ * One labelled input, the way the sign-in screen draws its fields. A
+ * `secureTextEntry` field is always revealable: Bloom's eye button shows and
+ * hides the password, named in the locale Bloom speaks (`OxyProvider` sets it).
+ */
 export const AccountFlowField: React.FC<{
   label: string;
   value: string;
@@ -161,6 +167,7 @@ export const AccountFlowField: React.FC<{
         autoComplete={autoComplete}
         keyboardType={keyboardType}
         secureTextEntry={secureTextEntry}
+        revealable={secureTextEntry}
         autoCapitalize="none"
         autoCorrect={false}
         autoFocus={autoFocus}
@@ -257,6 +264,44 @@ export const AccountFlowNote: React.FC<{ children: React.ReactNode; testID?: str
   );
 };
 
+/**
+ * Something the person should know before acting, above the action it is
+ * about: a wait before trying again, a code that was just sent, a warning. A
+ * Bloom `Admonition`, not a field's error hint — nothing they typed is wrong.
+ */
+export const AccountFlowNotice: React.FC<{
+  children: React.ReactNode;
+  type?: 'info' | 'warning' | 'error';
+  testID?: string;
+}> = ({ children, type = 'info', testID }) => (
+  <View testID={testID}>
+    <Admonition type={type}>{children}</Admonition>
+  </View>
+);
+
+/**
+ * Where a step sits in a flow of several (sign-up, turning on the
+ * authenticator): Bloom's segmented `WizardProgress` and "Step 2 of 3". The
+ * 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,
+}) => {
+  const { t } = useI18n();
+  return (
+    <WizardProgress
+      steps={steps.map((title, index) => ({ key: String(index), title }))}
+      current={current}
+      hideTitle
+      formatStepCount={(step, total) => t('common.stepOf', { step, total })}
+      testID={testID}
+    />
+  );
+};
+
 /** Why a step failed, where it happened. */
 export const AccountFlowErrorLine: React.FC<{ message: string }> = ({ message }) => {
   const theme = useTheme();
@@ -277,11 +322,19 @@ export interface EmailCodeStepProps {
   onResend: () => Promise<void>;
   /** "Use another email" / "Back" — the step before. */
   back: { label: string; onPress: () => void };
+  /** Where this step sits in a longer flow (a `WizardProgress`), under the header. */
+  progress?: React.ReactNode;
 }
 
 /** "Check your email": the 6-digit code an email verification sent. Submits itself once complete. */
-export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verificationId, onConfirmed, onResend, back }) => {
-  const theme = useTheme();
+export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({
+  description,
+  verificationId,
+  onConfirmed,
+  onResend,
+  back,
+  progress,
+}) => {
   const { t } = useI18n();
   const { oxyServices } = useOxy();
   const [code, setCode] = useState('');
@@ -317,6 +370,7 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
   return (
     <OxyAuthScreen>
       <OxyAuthScreenHeader title={t('emailCode.title')} description={description} />
+      {progress}
       <AccountFlowCodeField
         label={t('emailCode.label')}
         value={code}
@@ -330,10 +384,10 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
         length={EMAIL_CODE_LENGTH}
         testID="email-code"
       />
-      {notice ? <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{notice}</Text> : null}
+      {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')} theme={theme} onPress={resend} disabled={pending} testID="email-code-resend" />
-      <SubtleLink label={back.label} theme={theme} onPress={back.onPress} disabled={pending} testID="email-code-back" />
+      <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/screens/AppInfoScreen.tsx

@@ -4,12 +4,12 @@ import {
     View,
     Platform,
     Dimensions,
-    Clipboard,
     ActivityIndicator,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxy.so/core';
 import { toast } from '@oxy.so/bloom/toast';
+import { copyText } from '../utils/clipboard';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -93,7 +93,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
 
     const copyToClipboard = async (text: string, label: string) => {
         try {
-            await Clipboard.setString(text);
+            await copyText(text);
             toast.success(t('appInfo.toasts.copiedToClipboard', { label }));
         } catch (error) {
             toast.error(t('appInfo.toasts.copyFailed'));

package/src/ui/utils/clipboard.native.ts

@@ -0,0 +1,20 @@
+/**
+ * Put text on the clipboard on iOS and Android, through `expo-clipboard`.
+ * React Native's own `Clipboard` is deprecated and gone from newer releases.
+ *
+ * `expo-clipboard` is an OPTIONAL peer, loaded with `import()` so an app
+ * without it (or with the JS but not the native module, before a rebuild)
+ * still bundles and boots: the copy rejects here and the caller says nothing
+ * was copied. A static import would instead fail the Metro build or throw
+ * while the root barrel evaluates.
+ *
+ * Only this NATIVE fork names the package; the default fork (`clipboard.ts`,
+ * which `tsc`, Vite and SSR resolve) names nothing, so a consumer's type graph
+ * reaches `expo-clipboard` only when it typechecks `.native` files
+ * (`moduleSuffixes`) — the case package-rules.md#package-boundaries warns
+ * about. `clipboardIsolation.test.ts` keeps it that way.
+ */
+export async function copyText(text: string): Promise<void> {
+  const clipboard = await import('expo-clipboard');
+  await clipboard.setStringAsync(text);
+}

package/src/ui/utils/clipboard.ts

@@ -0,0 +1,14 @@
+/**
+ * Put text on the clipboard: the browser's asynchronous Clipboard API. Rejects
+ * where there is none (an insecure origin, SSR, a denied permission), so the
+ * caller reports only a copy that happened.
+ *
+ * The native fork (`clipboard.native.ts`) uses `expo-clipboard`. React
+ * Native's own `Clipboard` is deprecated and gone from newer releases, so
+ * neither fork reaches for it.
+ */
+export async function copyText(text: string): Promise<void> {
+  const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
+  if (!clipboard?.writeText) throw new Error('clipboard unavailable');
+  await clipboard.writeText(text);
+}