@dloizides/auth-web 1.5.0 → 1.6.0

package/dist/index.mjs

@@ -1,11 +1,117 @@
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
 import { StyleSheet, View, Text, TextInput, TouchableOpacity, ActivityIndicator, Pressable } from 'react-native';
+import { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMutation } from '@tanstack/react-query';
 import { BffAuthClient, createFetchHttpClient } from '@dloizides/auth-client';
 export { BffAuthClient, createFetchHttpClient } from '@dloizides/auth-client';
 
-// src/components/LoginForm.tsx
+// src/components/AuthScreen.tsx
+var FULL_WIDTH = "100%";
+var CARD_BORDER_WIDTH = 1;
+function useAuthScreenStyles(theme) {
+  return useMemo(() => {
+    const { colors, radii, spacing, typography } = theme;
+    return StyleSheet.create({
+      screen: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: spacing.md,
+        backgroundColor: colors.background
+      },
+      card: {
+        width: FULL_WIDTH,
+        borderRadius: radii.card,
+        borderWidth: CARD_BORDER_WIDTH,
+        borderColor: colors.border,
+        padding: spacing.xl,
+        backgroundColor: colors.surface
+      },
+      title: {
+        fontSize: typography.title,
+        fontWeight: "bold",
+        marginBottom: spacing.xs,
+        color: colors.text
+      },
+      subtitle: {
+        fontSize: typography.subtitle,
+        marginBottom: spacing.lg,
+        color: colors.textSecondary
+      },
+      footer: {
+        marginTop: spacing.lg,
+        width: FULL_WIDTH,
+        alignItems: "center"
+      }
+    });
+  }, [theme]);
+}
+
+// src/theme/AuthTheme.ts
+var defaultAuthTheme = {
+  colors: {
+    background: "#f5f5f7",
+    surface: "#ffffff",
+    text: "#1a1a1a",
+    textSecondary: "#6b6b6b",
+    border: "#d0d0d5",
+    primary: "#2563eb",
+    onPrimary: "#ffffff",
+    danger: "#d33333",
+    success: "#1f7a3d"
+  },
+  radii: {
+    input: 8,
+    card: 12
+  },
+  spacing: {
+    xs: 8,
+    sm: 12,
+    md: 20,
+    lg: 32,
+    xl: 24
+  },
+  typography: {
+    title: 28,
+    subtitle: 16,
+    label: 14,
+    body: 16,
+    caption: 12
+  }
+};
+var AuthThemeContext = createContext(defaultAuthTheme);
+function AuthThemeProvider({
+  theme,
+  children
+}) {
+  return /* @__PURE__ */ jsx(AuthThemeContext.Provider, { value: theme, children });
+}
+function useAuthTheme(themeProp) {
+  const contextTheme = useContext(AuthThemeContext);
+  return useMemo(() => themeProp ?? contextTheme, [themeProp, contextTheme]);
+}
+var DEFAULT_AUTH_CARD_MAX_WIDTH = 420;
+function AuthScreen({
+  children,
+  theme: themeProp,
+  testID,
+  cardTestID,
+  maxWidth = DEFAULT_AUTH_CARD_MAX_WIDTH,
+  title,
+  subtitle,
+  footer
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthScreenStyles(theme);
+  return /* @__PURE__ */ jsxs(View, { style: styles3.screen, testID, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles3.card, { maxWidth }], testID: cardTestID, children: [
+      title !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles3.title, children: title }) : null,
+      subtitle !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: subtitle }) : null,
+      children
+    ] }),
+    footer !== void 0 ? /* @__PURE__ */ jsx(View, { style: [styles3.footer, { maxWidth }], children: footer }) : null
+  ] });
+}
 
 // src/components/labels.ts
 var DEFAULT_LOGIN_LABELS = {
@@ -246,7 +352,7 @@ var AuthTestIds = {
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
 }
-var FULL_WIDTH = "100%";
+var FULL_WIDTH2 = "100%";
 var CARD_MAX_WIDTH = 420;
 var BUTTON_VERTICAL_PADDING = 14;
 function useAuthStyles(theme) {
@@ -261,7 +367,7 @@ function useAuthStyles(theme) {
         backgroundColor: colors.background
       },
       card: {
-        width: FULL_WIDTH,
+        width: FULL_WIDTH2,
         maxWidth: CARD_MAX_WIDTH,
         borderRadius: radii.card,
         padding: spacing.xl,
@@ -468,50 +574,6 @@ function useBffAuth(options) {
     [session.user, session.status, isSubmitting, error, login, logout, refresh]
   );
 }
-
-// src/theme/AuthTheme.ts
-var defaultAuthTheme = {
-  colors: {
-    background: "#f5f5f7",
-    surface: "#ffffff",
-    text: "#1a1a1a",
-    textSecondary: "#6b6b6b",
-    border: "#d0d0d5",
-    primary: "#2563eb",
-    onPrimary: "#ffffff",
-    danger: "#d33333",
-    success: "#1f7a3d"
-  },
-  radii: {
-    input: 8,
-    card: 12
-  },
-  spacing: {
-    xs: 8,
-    sm: 12,
-    md: 20,
-    lg: 32,
-    xl: 24
-  },
-  typography: {
-    title: 28,
-    subtitle: 16,
-    label: 14,
-    body: 16,
-    caption: 12
-  }
-};
-var AuthThemeContext = createContext(defaultAuthTheme);
-function AuthThemeProvider({
-  theme,
-  children
-}) {
-  return /* @__PURE__ */ jsx(AuthThemeContext.Provider, { value: theme, children });
-}
-function useAuthTheme(themeProp) {
-  const contextTheme = useContext(AuthThemeContext);
-  return useMemo(() => themeProp ?? contextTheme, [themeProp, contextTheme]);
-}
 function LoginForm({
   client,
   theme: themeProp,
@@ -519,7 +581,8 @@ function LoginForm({
   onSuccess,
   onForgotPassword,
   onSignUp,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -550,7 +613,7 @@ function LoginForm({
     void runLogin();
   }, [runLogin]);
   const submitButtonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
-  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsxs(View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix), children: [
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
     /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.subtitle }),
     /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
@@ -639,7 +702,16 @@ function LoginForm({
         children: /* @__PURE__ */ jsx(Text, { style: styles3.linkText, children: labels.signUp })
       }
     ) : null
-  ] }) });
+  ] });
+  const card = /* @__PURE__ */ jsx(
+    View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsx(View, { style: styles3.screen, children: card });
 }
 function useBffForgotPassword(options) {
   const { client, ...rest } = options;
@@ -1489,7 +1561,8 @@ function OtpForm({
   theme: themeProp,
   labels: labelsProp,
   onSuccess,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -1510,7 +1583,7 @@ function OtpForm({
     otp.reset();
   }, [otp]);
   const errorText = localError ?? transportErrorFor(otp.step, otp.error, labels);
-  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsx(View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix), children: otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsx(
+  const content = otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsx(
     OtpRequestStep,
     {
       errorText,
@@ -1535,7 +1608,16 @@ function OtpForm({
       onResend: handleResend,
       onSubmit: handleVerify
     }
-  ) }) });
+  );
+  const card = /* @__PURE__ */ jsx(
+    View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsx(View, { style: styles3.screen, children: card });
 }
 function toError3(value) {
   return value instanceof Error ? value : new Error(String(value));
@@ -1614,7 +1696,8 @@ function PinForm({
   theme: themeProp,
   labels: labelsProp,
   onSuccess,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -1628,7 +1711,7 @@ function PinForm({
   const handleSubmit = useSubmitHandler(pin, labels, setLocalError, onSuccess);
   const errorText = localError ?? transportErrorFor2(pin.error, labels);
   const buttonStyle = pin.isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
-  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsxs(View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix), children: [
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
     /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.description }),
     /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
@@ -1673,7 +1756,16 @@ function PinForm({
         children: pin.isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
       }
     )
-  ] }) });
+  ] });
+  const card = /* @__PURE__ */ jsx(
+    View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsx(View, { style: styles3.screen, children: card });
 }
 var DOT_SIZE = 18;
 var DOT_BORDER_WIDTH = 2;
@@ -2907,6 +2999,6 @@ function resolvePostLoginRoute(user, table) {
   return table.fallback ?? null;
 }
 
-export { AuthTestIds, AuthThemeProvider, BffAuthStatus, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, DevicePinEnrollErrorKey, DevicePinEnrollForm, DevicePinErrorKey, DevicePinInput, DevicePinLengthPicker, DevicePinOffer, DevicePinSettingsCard, DevicePinUnlockScreen, ForgotPasswordFields, ForgotPasswordForm, LoginForm, OtpForm, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyLoginButton, PasskeySettingsCard, PasswordPolicyError, PinForm, PreferredMethodHint, PreferredMethodSettingsCard, ResetPasswordError, ResetPasswordForm, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
+export { AuthScreen, AuthTestIds, AuthThemeProvider, BffAuthStatus, DEFAULT_AUTH_CARD_MAX_WIDTH, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, DevicePinEnrollErrorKey, DevicePinEnrollForm, DevicePinErrorKey, DevicePinInput, DevicePinLengthPicker, DevicePinOffer, DevicePinSettingsCard, DevicePinUnlockScreen, ForgotPasswordFields, ForgotPasswordForm, LoginForm, OtpForm, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyLoginButton, PasskeySettingsCard, PasswordPolicyError, PinForm, PreferredMethodHint, PreferredMethodSettingsCard, ResetPasswordError, ResetPasswordForm, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map