@oxyhq/services 14.1.0 → 16.0.0

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

@@ -11,27 +11,38 @@ var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _theme = require("@oxyhq/bloom/theme");
 var _button = require("@oxyhq/bloom/button");
 var _loading = require("@oxyhq/bloom/loading");
+var _bloom = require("@oxyhq/bloom");
+var _vectorIcons = require("@expo/vector-icons");
+var _core = require("@oxyhq/core");
 var _OxyContext = require("../context/OxyContext.js");
 var _OxyLogo = _interopRequireDefault(require("./OxyLogo.js"));
 var _AnotherDeviceQR = _interopRequireDefault(require("./AnotherDeviceQR.js"));
+var _SignInAccountChooser = _interopRequireDefault(require("./SignInAccountChooser.js"));
+var _useSwitchableAccounts = require("../hooks/useSwitchableAccounts.js");
+var _useI18n = require("../hooks/useI18n.js");
 var _useOxyAuthSession = require("../hooks/useOxyAuthSession.js");
-var _crossApex = require("../../utils/crossApex.js");
+var _usePasswordSignIn = require("../hooks/usePasswordSignIn.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
- * 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.
  */
 
 // Store for modal visibility with subscription support
@@ -63,11 +74,6 @@ const SignInModal = () => {
   const [visible, setVisible] = (0, _react.useState)(false);
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const theme = (0, _theme.useTheme)();
-  const {
-    oxyServices,
-    handleWebSession,
-    clientId
-  } = (0, _OxyContext.useOxy)();
 
   // Register the imperative visibility callback.
   (0, _react.useEffect)(() => {
@@ -78,56 +84,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__*/(0, _jsxRuntime.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
+  } = (0, _OxyContext.useOxy)();
+  const {
+    t
+  } = (0, _useI18n.useI18n)();
+  const {
+    accounts
+  } = (0, _useSwitchableAccounts.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] = (0, _react.useState)(false);
+  const [switchingId, setSwitchingId] = (0, _react.useState)(null);
+  const showChooser = !useAnother && accounts.length > 0;
   const {
     qrData,
     qrPayload,
     isLoading,
     error,
     isWaiting,
-    openAuthApproval,
     openSameDeviceApproval,
     retry
   } = (0, _useOxyAuthSession.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 = (0, _crossApex.isCrossApexWeb)();
+  // First-party password sign-in — the PRIMARY option once past the chooser.
+  const pw = (0, _usePasswordSignIn.usePasswordSignIn)({
+    onSignedIn: hideSignInModal
+  });
 
-  // Entrance animation.
+  // Entrance animation (respects reduced motion).
   const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
   const scale = (0, _reactNativeReanimated.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.
   (0, _react.useEffect)(() => {
-    opacity.value = (0, _reactNativeReanimated.withTiming)(1, {
-      duration: 250
-    });
-    scale.value = (0, _reactNativeReanimated.withTiming)(1, {
-      duration: 250
+    let cancelled = false;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(reduced => {
+      if (cancelled) return;
+      const duration = reduced ? 0 : 250;
+      opacity.value = (0, _reactNativeReanimated.withTiming)(1, {
+        duration
+      });
+      scale.value = (0, _reactNativeReanimated.withTiming)(1, {
+        duration
+      });
     });
+    return () => {
+      cancelled = true;
+    };
   }, []);
   const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: opacity.value
@@ -138,12 +159,32 @@ const SignInModalContent = ({
       scale: scale.value
     }]
   }));
-  const handleClose = (0, _react.useCallback)(() => {
-    hideSignInModal();
-  }, []);
-  const handleCreateAccount = (0, _react.useCallback)(() => {
-    _reactNative.Linking.openURL(_useOxyAuthSession.OXY_ACCOUNTS_WEB_URL);
-  }, []);
+  const handleClose = (0, _react.useCallback)(() => hideSignInModal(), []);
+  const handleCreateAccount = (0, _react.useCallback)(() => _reactNative.Linking.openURL(_useOxyAuthSession.OXY_ACCOUNTS_WEB_URL), []);
+  const handleSelectAccount = (0, _react.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 ((0, _core.isDev)()) {
+        _core.logger.warn('SignInModal: switch account failed', {
+          component: 'SignInModal'
+        }, switchError);
+      }
+      _bloom.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__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: true,
     transparent: true,
@@ -161,7 +202,7 @@ const SignInModalContent = ({
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
         style: [styles.card, {
           backgroundColor: theme.colors.card,
-          paddingTop: insets.top + 24,
+          paddingTop: insets.top + 28,
           paddingBottom: insets.bottom + 24
         }, contentStyle],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -171,72 +212,159 @@ const SignInModalContent = ({
           onPress: handleClose,
           accessibilityRole: "button",
           accessibilityLabel: "Close sign in",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.closeButtonText, {
-              color: theme.colors.textSecondary
-            }],
-            children: "\xD7"
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "close",
+            size: 22,
+            color: theme.colors.textSecondary
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.header,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
             variant: "icon",
-            size: 56
+            size: 52
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             className: "text-foreground",
             style: styles.title,
-            children: "Sign in to Oxy"
+            children: title
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             className: "text-muted-foreground",
             style: styles.subtitle,
-            children: "Continue with your Oxy identity to sign in securely"
+            children: subtitle
           })]
-        }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.loadingContainer,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
-            size: "large"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            className: "text-muted-foreground",
-            style: styles.loadingText,
-            children: "Preparing sign in..."
-          })]
-        }) : error ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.errorContainer,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            className: "text-destructive",
-            style: styles.errorText,
-            children: error
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-            variant: "primary",
-            onPress: retry,
-            style: styles.primaryButton,
-            children: "Try Again"
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-            variant: "primary",
-            onPress: openAuthApproval,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
-              variant: "icon",
-              size: 20,
-              fillColor: theme.colors.primaryForeground,
-              style: styles.buttonIcon
-            }),
-            style: styles.primaryButton,
-            children: "Continue with Oxy"
-          }), !crossApexWeb && qrPayload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-            variant: "secondary",
-            onPress: openSameDeviceApproval,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
-              variant: "icon",
-              size: 20,
-              fillColor: theme.colors.text,
-              style: styles.buttonIcon
-            }),
-            style: styles.secondaryButton,
-            children: "Sign in with the Oxy app"
-          }), isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.statusContainer,
+        }), showChooser ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+          entering: _reactNativeReanimated.FadeIn.duration(180),
+          style: styles.phase,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SignInAccountChooser.default, {
+            accounts: accounts,
+            onSelectAccount: handleSelectAccount,
+            onUseAnother: () => setUseAnother(true),
+            pendingAccountId: switchingId,
+            disabled: switchingId !== null
+          })
+        }, "chooser") : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+          entering: _reactNativeReanimated.FadeIn.duration(180),
+          style: styles.phase,
+          children: [accounts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            onPress: () => setUseAnother(false),
+            accessibilityRole: "button",
+            style: styles.backRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+              name: "chevron-back",
+              size: 18,
+              color: theme.colors.textSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.backText, {
+                color: theme.colors.textSecondary
+              }],
+              children: t('signin.chooser.title')
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.form,
+            children: [pw.step === 'identifier' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.contextText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: pw.identifier
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              className: "text-destructive",
+              style: styles.formError,
+              children: pw.error
+            }), pw.step === 'twoFactor' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: () => pw.setUseBackupCode(!pw.useBackupCode),
+              accessibilityRole: "button",
+              style: styles.linkButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.linkText, {
+                  color: theme.colors.primary
+                }],
+                children: pw.useBackupCode ? 'Use authenticator code' : 'Use a backup code'
+              })
+            }), pw.step !== 'identifier' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: pw.back,
+              accessibilityRole: "button",
+              style: styles.linkButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.linkText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: "Back"
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.dividerRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.dividerLine, {
+                backgroundColor: theme.colors.border
+              }]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.dividerText, {
+                color: theme.colors.textSecondary
+              }],
+              children: "or"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.dividerLine, {
+                backgroundColor: theme.colors.border
+              }]
+            })]
+          }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.deviceLoading,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
               size: "small",
               style: styles.statusSpinner
@@ -244,16 +372,52 @@ const SignInModalContent = ({
               style: [styles.statusText, {
                 color: theme.colors.textSecondary
               }],
-              children: "Waiting for authorization..."
+              children: "Preparing sign in\u2026"
+            })]
+          }) : error ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.errorContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              className: "text-destructive",
+              style: styles.errorText,
+              children: error
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+              variant: "secondary",
+              onPress: retry,
+              style: styles.secondaryButton,
+              children: "Try Again"
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [qrPayload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+              variant: "secondary",
+              onPress: openSameDeviceApproval,
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
+                variant: "icon",
+                size: 20,
+                fillColor: theme.colors.text,
+                style: styles.buttonIcon
+              }),
+              style: styles.secondaryButton,
+              children: "Sign in with the Oxy app"
+            }), isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.statusContainer,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
+                size: "small",
+                style: styles.statusSpinner
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.statusText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: "Waiting for authorization\u2026"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.qrSection,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnotherDeviceQR.default, {
+                qrData: qrData,
+                qrPayload: qrPayload
+              })
             })]
-          }), !crossApexWeb && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.qrSection,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnotherDeviceQR.default, {
-              qrData: qrData,
-              qrPayload: qrPayload
-            })
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        }, "signIn"), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.footer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: styles.footerText,
@@ -281,42 +445,54 @@ const styles = _reactNative.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
@@ -329,6 +505,57 @@ const styles = _reactNative.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',
@@ -345,14 +572,6 @@ const styles = _reactNative.StyleSheet.create({
     width: '100%',
     marginTop: 24
   },
-  loadingContainer: {
-    alignItems: 'center',
-    paddingVertical: 40
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 14
-  },
   errorContainer: {
     alignItems: 'center',
     paddingVertical: 20,