@oxyhq/services 14.1.0 → 16.0.0

package/lib/module/ui/components/SignInModal.js

@@ -1,33 +1,43 @@
 "use strict";
 
 /**
- * SignInModal - Web-first centered sign-in modal (Continue with Oxy)
+ * SignInModal — web-first centered sign-in modal.
  *
- * A semi-transparent full-screen modal whose primary action is the one-tap
- * "Continue with Oxy" approval flow. The QR code is demoted to a collapsed
- * "Sign in on another device" disclosure (you can't scan your own screen).
+ * Two phases, Google-style:
+ *  1. Account chooser (FRONT screen, shown when the device/user already has
+ *     accounts): pick an account to continue as — one tap switches through the
+ *     SAME `switchToAccount` path the account switcher uses — or "Use another
+ *     account" to reveal the sign-in options.
+ *  2. Sign-in options: the first-party password flow (identifier → password →
+ *     optional 2FA, `usePasswordSignIn`) as the PRIMARY action, with the
+ *     cross-app device flow (same-device deep-link + "sign in on another device"
+ *     QR) as a SECONDARY option below an "or" divider.
  *
- * ALL of the auth-session machinery (session-token creation, QR data, socket +
- * polling, waiting/error/retry state, the open-auth handler, deep-link return,
- * and cleanup) lives in the shared `useOxyAuthSession` hook, which the native
- * `OxyAuthScreen` also consumes — neither container re-implements the transport.
- *
- * Animates with a fade + scale effect.
+ * When there are no accounts the modal opens straight on the sign-in options.
+ * The device-flow machinery lives in the shared `useOxyAuthSession` hook (the
+ * native `OxyAuthScreen` consumes it too — neither container re-implements the
+ * transport). Animates with a fade + scale; per-phase content cross-fades and
+ * respects reduced motion.
  */
 
 import { useState, useEffect, useCallback } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Modal } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Modal, Linking, AccessibilityInfo } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, FadeIn } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { Loading } from '@oxyhq/bloom/loading';
-import { Linking } from 'react-native';
+import { toast } from '@oxyhq/bloom';
+import { Ionicons } from '@expo/vector-icons';
+import { isDev, logger as loggerUtil } from '@oxyhq/core';
 import { useOxy } from "../context/OxyContext.js";
 import OxyLogo from "./OxyLogo.js";
 import AnotherDeviceQR from "./AnotherDeviceQR.js";
+import SignInAccountChooser from "./SignInAccountChooser.js";
+import { useSwitchableAccounts } from "../hooks/useSwitchableAccounts.js";
+import { useI18n } from "../hooks/useI18n.js";
 import { useOxyAuthSession, OXY_ACCOUNTS_WEB_URL } from "../hooks/useOxyAuthSession.js";
-import { isCrossApexWeb } from "../../utils/crossApex.js";
+import { usePasswordSignIn } from "../hooks/usePasswordSignIn.js";
 
 // Store for modal visibility with subscription support
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -55,11 +65,6 @@ const SignInModal = () => {
   const [visible, setVisible] = useState(false);
   const insets = useSafeAreaInsets();
   const theme = useTheme();
-  const {
-    oxyServices,
-    handleWebSession,
-    clientId
-  } = useOxy();
 
   // Register the imperative visibility callback.
   useEffect(() => {
@@ -70,56 +75,71 @@ const SignInModal = () => {
   }, []);
   if (!visible) return null;
 
-  // The hook owns the whole auth-session lifecycle. Mounting it only while the
-  // modal is visible matches the previous behavior (session created on open,
-  // cleaned up on close) — the inner component is unmounted when `visible`
-  // flips false, which runs the hook's unmount cleanup.
+  // Mounting the content only while visible preserves the session-created-on-open
+  // / cleaned-up-on-close behaviour and resets the phase state on every reopen.
   return /*#__PURE__*/_jsx(SignInModalContent, {
     theme: theme,
-    insets: insets,
-    oxyServices: oxyServices,
-    handleWebSession: handleWebSession,
-    clientId: clientId
+    insets: insets
   });
 };
 const SignInModalContent = ({
   theme,
-  insets,
-  oxyServices,
-  handleWebSession,
-  clientId
+  insets
 }) => {
+  const {
+    oxyServices,
+    handleWebSession,
+    clientId,
+    switchToAccount
+  } = useOxy();
+  const {
+    t
+  } = useI18n();
+  const {
+    accounts
+  } = useSwitchableAccounts();
+
+  // Phase: the chooser is the front screen whenever accounts exist AND the user
+  // has not tapped "Use another account" this session.
+  const [useAnother, setUseAnother] = useState(false);
+  const [switchingId, setSwitchingId] = useState(null);
+  const showChooser = !useAnother && accounts.length > 0;
   const {
     qrData,
     qrPayload,
     isLoading,
     error,
     isWaiting,
-    openAuthApproval,
     openSameDeviceApproval,
     retry
   } = useOxyAuthSession(oxyServices, clientId, handleWebSession, {
     onSignedIn: hideSignInModal
   });
 
-  // On a cross-apex web RP, only the "Continue with Oxy" IdP popup establishes
-  // a durable `fedcm_session`. The Commons-app handoffs (same-device deep-link
-  // + cross-device QR) approve OUTSIDE the browser, so they leave no IdP
-  // session and the user would be logged out on reload — hide them there.
-  const crossApexWeb = isCrossApexWeb();
+  // First-party password sign-in — the PRIMARY option once past the chooser.
+  const pw = usePasswordSignIn({
+    onSignedIn: hideSignInModal
+  });
 
-  // Entrance animation.
+  // Entrance animation (respects reduced motion).
   const opacity = useSharedValue(0);
   const scale = useSharedValue(0.96);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: opacity/scale are Reanimated SharedValues (stable refs) and must not be listed as deps; this runs once on mount to play the entrance.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: opacity/scale are Reanimated SharedValues (stable refs), not deps; runs once on mount.
   useEffect(() => {
-    opacity.value = withTiming(1, {
-      duration: 250
-    });
-    scale.value = withTiming(1, {
-      duration: 250
+    let cancelled = false;
+    AccessibilityInfo.isReduceMotionEnabled().then(reduced => {
+      if (cancelled) return;
+      const duration = reduced ? 0 : 250;
+      opacity.value = withTiming(1, {
+        duration
+      });
+      scale.value = withTiming(1, {
+        duration
+      });
     });
+    return () => {
+      cancelled = true;
+    };
   }, []);
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: opacity.value
@@ -130,12 +150,32 @@ const SignInModalContent = ({
       scale: scale.value
     }]
   }));
-  const handleClose = useCallback(() => {
-    hideSignInModal();
-  }, []);
-  const handleCreateAccount = useCallback(() => {
-    Linking.openURL(OXY_ACCOUNTS_WEB_URL);
-  }, []);
+  const handleClose = useCallback(() => hideSignInModal(), []);
+  const handleCreateAccount = useCallback(() => Linking.openURL(OXY_ACCOUNTS_WEB_URL), []);
+  const handleSelectAccount = useCallback(async account => {
+    // The active account is already signed in — selecting it just continues.
+    if (account.isCurrent) {
+      hideSignInModal();
+      return;
+    }
+    if (switchingId) return;
+    setSwitchingId(account.accountId);
+    try {
+      await switchToAccount(account.accountId);
+      hideSignInModal();
+    } catch (switchError) {
+      if (isDev()) {
+        loggerUtil.warn('SignInModal: switch account failed', {
+          component: 'SignInModal'
+        }, switchError);
+      }
+      toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
+    } finally {
+      setSwitchingId(null);
+    }
+  }, [switchingId, switchToAccount, t]);
+  const title = showChooser ? t('signin.chooser.title') : 'Sign in to Oxy';
+  const subtitle = showChooser ? t('signin.chooser.subtitle') : 'Continue with your Oxy identity to sign in securely.';
   return /*#__PURE__*/_jsx(Modal, {
     visible: true,
     transparent: true,
@@ -153,7 +193,7 @@ const SignInModalContent = ({
       }), /*#__PURE__*/_jsxs(Animated.View, {
         style: [styles.card, {
           backgroundColor: theme.colors.card,
-          paddingTop: insets.top + 24,
+          paddingTop: insets.top + 28,
           paddingBottom: insets.bottom + 24
         }, contentStyle],
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
@@ -163,72 +203,159 @@ const SignInModalContent = ({
           onPress: handleClose,
           accessibilityRole: "button",
           accessibilityLabel: "Close sign in",
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.closeButtonText, {
-              color: theme.colors.textSecondary
-            }],
-            children: "\xD7"
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: "close",
+            size: 22,
+            color: theme.colors.textSecondary
           })
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.header,
           children: [/*#__PURE__*/_jsx(OxyLogo, {
             variant: "icon",
-            size: 56
+            size: 52
           }), /*#__PURE__*/_jsx(Text, {
             className: "text-foreground",
             style: styles.title,
-            children: "Sign in to Oxy"
+            children: title
           }), /*#__PURE__*/_jsx(Text, {
             className: "text-muted-foreground",
             style: styles.subtitle,
-            children: "Continue with your Oxy identity to sign in securely"
+            children: subtitle
           })]
-        }), isLoading ? /*#__PURE__*/_jsxs(View, {
-          style: styles.loadingContainer,
-          children: [/*#__PURE__*/_jsx(Loading, {
-            size: "large"
-          }), /*#__PURE__*/_jsx(Text, {
-            className: "text-muted-foreground",
-            style: styles.loadingText,
-            children: "Preparing sign in..."
-          })]
-        }) : error ? /*#__PURE__*/_jsxs(View, {
-          style: styles.errorContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            className: "text-destructive",
-            style: styles.errorText,
-            children: error
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "primary",
-            onPress: retry,
-            style: styles.primaryButton,
-            children: "Try Again"
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Button, {
-            variant: "primary",
-            onPress: openAuthApproval,
-            icon: /*#__PURE__*/_jsx(OxyLogo, {
-              variant: "icon",
-              size: 20,
-              fillColor: theme.colors.primaryForeground,
-              style: styles.buttonIcon
-            }),
-            style: styles.primaryButton,
-            children: "Continue with Oxy"
-          }), !crossApexWeb && qrPayload && /*#__PURE__*/_jsx(Button, {
-            variant: "secondary",
-            onPress: openSameDeviceApproval,
-            icon: /*#__PURE__*/_jsx(OxyLogo, {
-              variant: "icon",
-              size: 20,
-              fillColor: theme.colors.text,
-              style: styles.buttonIcon
-            }),
-            style: styles.secondaryButton,
-            children: "Sign in with the Oxy app"
-          }), isWaiting && /*#__PURE__*/_jsxs(View, {
-            style: styles.statusContainer,
+        }), showChooser ? /*#__PURE__*/_jsx(Animated.View, {
+          entering: FadeIn.duration(180),
+          style: styles.phase,
+          children: /*#__PURE__*/_jsx(SignInAccountChooser, {
+            accounts: accounts,
+            onSelectAccount: handleSelectAccount,
+            onUseAnother: () => setUseAnother(true),
+            pendingAccountId: switchingId,
+            disabled: switchingId !== null
+          })
+        }, "chooser") : /*#__PURE__*/_jsxs(Animated.View, {
+          entering: FadeIn.duration(180),
+          style: styles.phase,
+          children: [accounts.length > 0 && /*#__PURE__*/_jsxs(TouchableOpacity, {
+            onPress: () => setUseAnother(false),
+            accessibilityRole: "button",
+            style: styles.backRow,
+            children: [/*#__PURE__*/_jsx(Ionicons, {
+              name: "chevron-back",
+              size: 18,
+              color: theme.colors.textSecondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.backText, {
+                color: theme.colors.textSecondary
+              }],
+              children: t('signin.chooser.title')
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.form,
+            children: [pw.step === 'identifier' && /*#__PURE__*/_jsx(TextInput, {
+              style: [styles.input, {
+                borderColor: theme.colors.border,
+                color: theme.colors.text,
+                backgroundColor: theme.colors.backgroundSecondary
+              }],
+              value: pw.identifier,
+              onChangeText: pw.setIdentifier,
+              onSubmitEditing: pw.submitIdentifier,
+              placeholder: "Username or email",
+              placeholderTextColor: theme.colors.textSecondary,
+              autoCapitalize: "none",
+              autoCorrect: false,
+              keyboardType: "email-address",
+              returnKeyType: "next",
+              accessibilityLabel: "Username or email"
+            }), pw.step === 'password' && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.contextText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: pw.identifier
+              }), /*#__PURE__*/_jsx(TextInput, {
+                style: [styles.input, {
+                  borderColor: theme.colors.border,
+                  color: theme.colors.text,
+                  backgroundColor: theme.colors.backgroundSecondary
+                }],
+                value: pw.password,
+                onChangeText: pw.setPassword,
+                onSubmitEditing: pw.submitPassword,
+                placeholder: "Password",
+                placeholderTextColor: theme.colors.textSecondary,
+                secureTextEntry: true,
+                autoCapitalize: "none",
+                autoCorrect: false,
+                returnKeyType: "go",
+                accessibilityLabel: "Password"
+              })]
+            }), pw.step === 'twoFactor' && /*#__PURE__*/_jsx(TextInput, {
+              style: [styles.input, {
+                borderColor: theme.colors.border,
+                color: theme.colors.text,
+                backgroundColor: theme.colors.backgroundSecondary
+              }],
+              value: pw.code,
+              onChangeText: pw.setCode,
+              onSubmitEditing: pw.submitTwoFactor,
+              placeholder: pw.useBackupCode ? 'Backup code' : '6-digit code',
+              placeholderTextColor: theme.colors.textSecondary,
+              autoCapitalize: "none",
+              autoCorrect: false,
+              keyboardType: pw.useBackupCode ? 'default' : 'number-pad',
+              returnKeyType: "go",
+              accessibilityLabel: pw.useBackupCode ? 'Backup code' : 'Two-factor code'
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "primary",
+              onPress: pw.step === 'identifier' ? pw.submitIdentifier : pw.step === 'password' ? pw.submitPassword : pw.submitTwoFactor,
+              loading: pw.isSubmitting,
+              disabled: pw.isSubmitting,
+              style: styles.primaryButton,
+              children: pw.step === 'identifier' ? 'Continue' : pw.step === 'password' ? 'Sign in' : 'Verify'
+            }), pw.error && /*#__PURE__*/_jsx(Text, {
+              className: "text-destructive",
+              style: styles.formError,
+              children: pw.error
+            }), pw.step === 'twoFactor' && /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => pw.setUseBackupCode(!pw.useBackupCode),
+              accessibilityRole: "button",
+              style: styles.linkButton,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.linkText, {
+                  color: theme.colors.primary
+                }],
+                children: pw.useBackupCode ? 'Use authenticator code' : 'Use a backup code'
+              })
+            }), pw.step !== 'identifier' && /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: pw.back,
+              accessibilityRole: "button",
+              style: styles.linkButton,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.linkText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: "Back"
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.dividerRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.dividerLine, {
+                backgroundColor: theme.colors.border
+              }]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.dividerText, {
+                color: theme.colors.textSecondary
+              }],
+              children: "or"
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.dividerLine, {
+                backgroundColor: theme.colors.border
+              }]
+            })]
+          }), isLoading ? /*#__PURE__*/_jsxs(View, {
+            style: styles.deviceLoading,
             children: [/*#__PURE__*/_jsx(Loading, {
               size: "small",
               style: styles.statusSpinner
@@ -236,16 +363,52 @@ const SignInModalContent = ({
               style: [styles.statusText, {
                 color: theme.colors.textSecondary
               }],
-              children: "Waiting for authorization..."
+              children: "Preparing sign in\u2026"
+            })]
+          }) : error ? /*#__PURE__*/_jsxs(View, {
+            style: styles.errorContainer,
+            children: [/*#__PURE__*/_jsx(Text, {
+              className: "text-destructive",
+              style: styles.errorText,
+              children: error
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "secondary",
+              onPress: retry,
+              style: styles.secondaryButton,
+              children: "Try Again"
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [qrPayload && /*#__PURE__*/_jsx(Button, {
+              variant: "secondary",
+              onPress: openSameDeviceApproval,
+              icon: /*#__PURE__*/_jsx(OxyLogo, {
+                variant: "icon",
+                size: 20,
+                fillColor: theme.colors.text,
+                style: styles.buttonIcon
+              }),
+              style: styles.secondaryButton,
+              children: "Sign in with the Oxy app"
+            }), isWaiting && /*#__PURE__*/_jsxs(View, {
+              style: styles.statusContainer,
+              children: [/*#__PURE__*/_jsx(Loading, {
+                size: "small",
+                style: styles.statusSpinner
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.statusText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: "Waiting for authorization\u2026"
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.qrSection,
+              children: /*#__PURE__*/_jsx(AnotherDeviceQR, {
+                qrData: qrData,
+                qrPayload: qrPayload
+              })
             })]
-          }), !crossApexWeb && /*#__PURE__*/_jsx(View, {
-            style: styles.qrSection,
-            children: /*#__PURE__*/_jsx(AnotherDeviceQR, {
-              qrData: qrData,
-              qrPayload: qrPayload
-            })
           })]
-        }), /*#__PURE__*/_jsxs(View, {
+        }, "signIn"), /*#__PURE__*/_jsxs(View, {
           style: styles.footer,
           children: [/*#__PURE__*/_jsxs(Text, {
             style: styles.footerText,
@@ -273,42 +436,54 @@ const styles = StyleSheet.create({
   },
   card: {
     width: '100%',
-    maxWidth: 400,
+    maxWidth: 420,
     alignItems: 'center',
     paddingHorizontal: 24,
-    borderRadius: 24
+    borderRadius: 28
   },
   closeButton: {
     position: 'absolute',
     top: 16,
     right: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 10
   },
-  closeButtonText: {
-    fontSize: 28,
-    fontWeight: '300',
-    lineHeight: 32
-  },
   header: {
     alignItems: 'center',
-    marginBottom: 28
+    marginBottom: 24
   },
   title: {
     fontSize: 26,
-    fontWeight: 'bold',
+    fontWeight: '800',
+    letterSpacing: -0.5,
     marginTop: 16,
     textAlign: 'center'
   },
   subtitle: {
     fontSize: 15,
+    lineHeight: 21,
     marginTop: 8,
     textAlign: 'center'
   },
+  phase: {
+    width: '100%'
+  },
+  backRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    alignSelf: 'flex-start',
+    paddingVertical: 6,
+    marginBottom: 8
+  },
+  backText: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
   primaryButton: {
     width: '100%',
     borderRadius: 12
@@ -321,6 +496,57 @@ const styles = StyleSheet.create({
   buttonIcon: {
     marginRight: 10
   },
+  form: {
+    width: '100%'
+  },
+  input: {
+    width: '100%',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 13,
+    fontSize: 15,
+    marginBottom: 12
+  },
+  contextText: {
+    fontSize: 14,
+    textAlign: 'center',
+    marginBottom: 12
+  },
+  formError: {
+    fontSize: 14,
+    textAlign: 'center',
+    marginTop: 12
+  },
+  linkButton: {
+    alignSelf: 'center',
+    paddingVertical: 8,
+    marginTop: 8
+  },
+  linkText: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  dividerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    marginVertical: 20
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1
+  },
+  dividerText: {
+    marginHorizontal: 12,
+    fontSize: 13
+  },
+  deviceLoading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12
+  },
   statusContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -337,14 +563,6 @@ const styles = StyleSheet.create({
     width: '100%',
     marginTop: 24
   },
-  loadingContainer: {
-    alignItems: 'center',
-    paddingVertical: 40
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 14
-  },
   errorContainer: {
     alignItems: 'center',
     paddingVertical: 20,