@dloizides/auth-web 1.4.0 → 1.5.1

package/dist/index.js

@@ -140,6 +140,21 @@ var DEFAULT_PASSKEY_SETTINGS_LABELS = {
   addHint: "Start setting up a passkey for this account",
   registeredSuccess: "Your passkey was added. You can now use it to sign in."
 };
+var DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS = {
+  title: "Preferred sign-in method",
+  description: "Pick how you usually sign in. We will show this method first on your devices.",
+  noPreference: "No preference",
+  methodPassword: "Password",
+  methodPin: "Quick PIN",
+  methodPasskey: "Passkey",
+  saving: "Saving...",
+  saveFailed: "Could not save your preference. Try again later."
+};
+var DEFAULT_PREFERRED_METHOD_HINT_LABELS = {
+  password: "You usually sign in with your password.",
+  pin: "You usually sign in with your quick PIN on this account.",
+  passkey: "You usually sign in with a passkey."
+};
 var DEFAULT_RESET_PASSWORD_LABELS = {
   title: "Reset password",
   description: "Choose a new password for your account.",
@@ -220,7 +235,14 @@ var AuthTestIds = {
   // Passkey settings card
   passkeySettings: "auth-passkey-settings",
   passkeySettingsAdd: "auth-passkey-settings-add",
-  passkeySettingsSuccess: "auth-passkey-settings-success"
+  passkeySettingsSuccess: "auth-passkey-settings-success",
+  // Preferred-method settings card (cross-device default-method picker).
+  // Each option row appends `-${method}` to `preferredMethodSettingsOption`.
+  preferredMethodSettings: "auth-preferred-method-settings",
+  preferredMethodSettingsOption: "auth-preferred-method-settings-option",
+  preferredMethodSettingsError: "auth-preferred-method-settings-error",
+  // Preferred-method login-screen hint
+  preferredMethodHint: "auth-preferred-method-hint"
 };
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
@@ -283,6 +305,11 @@ function useAuthStyles(theme) {
       primaryButton: {
         borderRadius: radii.input,
         paddingVertical: BUTTON_VERTICAL_PADDING,
+        paddingHorizontal: spacing.md,
+        // Never shrink below the label width: in a row of actions (e.g. the
+        // forgot-password modal's Cancel + submit), shrinking would clip a long
+        // label like "Send reset link" past the button's rounded edge.
+        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.xs,
@@ -325,6 +352,8 @@ function useAuthStyles(theme) {
         borderWidth: 1,
         borderColor: colors.primary,
         paddingVertical: BUTTON_VERTICAL_PADDING,
+        paddingHorizontal: spacing.md,
+        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.sm,
@@ -801,6 +830,9 @@ function useModalStyles(theme) {
         flexDirection: "row",
         justifyContent: "flex-end",
         alignItems: "center",
+        // Wrap (rather than clip) when a long submit label + Cancel can't
+        // fit a narrow modal on one line.
+        flexWrap: "wrap",
         marginTop: theme.spacing.md,
         gap: theme.spacing.sm
       },
@@ -808,6 +840,8 @@ function useModalStyles(theme) {
         borderRadius: theme.radii.input,
         paddingVertical: theme.spacing.sm,
         paddingHorizontal: theme.spacing.md,
+        // Match the submit button: never shrink below the label width.
+        flexShrink: 0,
         borderWidth: SECONDARY_BORDER_WIDTH,
         borderColor: theme.colors.border
       },
@@ -2527,6 +2561,217 @@ function PasskeySettingsCard({
     }
   );
 }
+
+// src/preferences/preferredMethodCache.ts
+var CACHE_KEY = "dloizides.auth.preferredLoginMethod";
+function safeStorage() {
+  try {
+    if (typeof localStorage === "undefined") {
+      return null;
+    }
+    return localStorage;
+  } catch {
+    return null;
+  }
+}
+function readCachedPreferredMethod() {
+  const store = safeStorage();
+  if (store === null) {
+    return null;
+  }
+  try {
+    const value = store.getItem(CACHE_KEY);
+    return value === null || value === "" ? null : value;
+  } catch {
+    return null;
+  }
+}
+function cachePreferredMethod(method) {
+  const store = safeStorage();
+  if (store === null) {
+    return;
+  }
+  try {
+    if (method === null || method === "") {
+      store.removeItem(CACHE_KEY);
+      return;
+    }
+    store.setItem(CACHE_KEY, method);
+  } catch {
+  }
+}
+function clearCachedPreferredMethod() {
+  cachePreferredMethod(null);
+}
+
+// src/preferences/usePreferredMethodSetting.ts
+function usePreferredMethodSetting({
+  client,
+  onChanged
+}) {
+  const [loading, setLoading] = react.useState(true);
+  const [saving, setSaving] = react.useState(false);
+  const [failed, setFailed] = react.useState(false);
+  const [selected, setSelected] = react.useState(null);
+  react.useEffect(() => {
+    let active = true;
+    client.getPreferredLoginMethod().then((method) => {
+      if (active) {
+        setSelected(method);
+      }
+    }).catch(() => {
+    }).finally(() => {
+      if (active) {
+        setLoading(false);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [client]);
+  const select = react.useCallback(
+    (method) => {
+      const previous = selected;
+      if (method === previous) {
+        return;
+      }
+      setFailed(false);
+      setSaving(true);
+      setSelected(method);
+      client.setPreferredLoginMethod(method).then((ok) => {
+        if (ok) {
+          cachePreferredMethod(method);
+          onChanged?.(method);
+          return;
+        }
+        setSelected(previous);
+        setFailed(true);
+      }).catch(() => {
+        setSelected(previous);
+        setFailed(true);
+      }).finally(() => {
+        setSaving(false);
+      });
+    },
+    [client, selected, onChanged]
+  );
+  return { loading, saving, failed, selected, select };
+}
+var NO_PREFERENCE = "__none__";
+function methodDisplayName(method, labels) {
+  if (method === "password") {
+    return labels.methodPassword;
+  }
+  if (method === "pin") {
+    return labels.methodPin;
+  }
+  if (method === "passkey") {
+    return labels.methodPasskey;
+  }
+  return method;
+}
+function PreferredMethodSettingsCard({
+  client,
+  availableMethods,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix,
+  onChanged
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = react.useMemo(
+    () => ({ ...DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const { loading, saving, failed, selected, select } = usePreferredMethodSetting({
+    client,
+    onChanged
+  });
+  const options = react.useMemo(
+    () => [
+      { value: null, key: NO_PREFERENCE, label: labels.noPreference },
+      ...availableMethods.map((method) => ({
+        value: method,
+        key: method,
+        label: methodDisplayName(method, labels)
+      }))
+    ],
+    [availableMethods, labels]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.preferredMethodSettings, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.description }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: theme.colors.primary, size: "small" }) : options.map((option) => {
+          const isSelected = option.value === selected;
+          const optionTestId = `${withTestIdPrefix(
+            AuthTestIds.preferredMethodSettingsOption,
+            testIdPrefix
+          )}-${option.key}`;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TouchableOpacity,
+            {
+              accessibilityHint: labels.description,
+              accessibilityLabel: option.label,
+              accessibilityRole: "radio",
+              accessibilityState: { selected: isSelected },
+              disabled: saving,
+              style: isSelected ? styles3.secondaryButton : styles3.escapeLink,
+              testID: optionTestId,
+              onPress: () => select(option.value),
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: isSelected ? styles3.secondaryButtonText : styles3.linkText, children: isSelected ? `\u2713 ${option.label}` : option.label })
+            },
+            option.key
+          );
+        }),
+        saving ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.helperText, children: labels.saving }) : null,
+        failed ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: styles3.errorText,
+            testID: withTestIdPrefix(AuthTestIds.preferredMethodSettingsError, testIdPrefix),
+            children: labels.saveFailed
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function hintFor(method, labels) {
+  if (method === "password") {
+    return labels.password;
+  }
+  if (method === "pin") {
+    return labels.pin;
+  }
+  if (method === "passkey") {
+    return labels.passkey;
+  }
+  return null;
+}
+function PreferredMethodHint({
+  method,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = react.useMemo(
+    () => ({ ...DEFAULT_PREFERRED_METHOD_HINT_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const text = hintFor(method, labels);
+  if (text === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: withTestIdPrefix(AuthTestIds.preferredMethodHint, testIdPrefix), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.helperText, children: text }) });
+}
 var EMPTY_CONFIG = {
   methods: [],
   registrationEnabled: false,
@@ -2561,6 +2806,77 @@ function useBffLoginConfig(client) {
   }, [client]);
   return { config, loading };
 }
+
+// src/preferences/preferencesClient.ts
+var CSRF_HEADER = "X-BFF-Csrf";
+var CSRF_HEADER_VALUE = "1";
+var JSON_CONTENT_TYPE = "application/json";
+var DEFAULT_TENANTS_SEGMENT = "tenants";
+var PREFERENCES_PATH = "api/v1/me/preferences";
+var LOGIN_METHOD_PREFERENCE_PATH = "api/v1/me/login-method-preference";
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function readOptionalString(record, key) {
+  const value = record[key];
+  if (typeof value !== "string" || value === "") {
+    return null;
+  }
+  return value;
+}
+function createPreferencesClient(options) {
+  const http = options.http;
+  const baseUrl = (options.baseUrl ?? "").replace(/\/$/, "");
+  const segment = options.tenantsSegment ?? DEFAULT_TENANTS_SEGMENT;
+  const proxyBase = `${baseUrl}/bff/api/${segment}`;
+  return {
+    async getPreferredLoginMethod() {
+      try {
+        const response = await http({
+          url: `${proxyBase}/${PREFERENCES_PATH}`,
+          method: "GET",
+          headers: { Accept: JSON_CONTENT_TYPE },
+          credentials: "include"
+        });
+        if (!response.ok || !isRecord(response.data)) {
+          return null;
+        }
+        return readOptionalString(response.data, "preferredLoginMethod");
+      } catch {
+        return null;
+      }
+    },
+    async setPreferredLoginMethod(method) {
+      try {
+        const response = await http({
+          url: `${proxyBase}/${LOGIN_METHOD_PREFERENCE_PATH}`,
+          method: "PUT",
+          headers: {
+            "Content-Type": JSON_CONTENT_TYPE,
+            Accept: JSON_CONTENT_TYPE,
+            [CSRF_HEADER]: CSRF_HEADER_VALUE
+          },
+          body: JSON.stringify({ method }),
+          credentials: "include"
+        });
+        return response.ok;
+      } catch {
+        return false;
+      }
+    }
+  };
+}
+
+// src/preferences/syncPreferredMethodCache.ts
+async function syncPreferredMethodFromServer(client) {
+  try {
+    const method = await client.getPreferredLoginMethod();
+    cachePreferredMethod(method);
+    return method;
+  } catch {
+    return null;
+  }
+}
 async function lazyFetchHttpClient(request) {
   const fetchImpl = typeof fetch === "function" ? fetch.bind(globalThis) : void 0;
   if (fetchImpl === void 0) {
@@ -2576,11 +2892,11 @@ function createBffAuthClient(options = {}) {
 }
 
 // src/router/resolvePostLoginRoute.ts
-function isRecord(value) {
+function isRecord2(value) {
   return typeof value === "object" && value !== null;
 }
 function readRealmAccessRoles(realmAccess) {
-  if (!isRecord(realmAccess)) {
+  if (!isRecord2(realmAccess)) {
     return [];
   }
   const roles = realmAccess.roles;
@@ -2625,6 +2941,8 @@ exports.DEFAULT_OTP_LABELS = DEFAULT_OTP_LABELS;
 exports.DEFAULT_PASSKEY_LOGIN_LABELS = DEFAULT_PASSKEY_LOGIN_LABELS;
 exports.DEFAULT_PASSKEY_SETTINGS_LABELS = DEFAULT_PASSKEY_SETTINGS_LABELS;
 exports.DEFAULT_PIN_LABELS = DEFAULT_PIN_LABELS;
+exports.DEFAULT_PREFERRED_METHOD_HINT_LABELS = DEFAULT_PREFERRED_METHOD_HINT_LABELS;
+exports.DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS = DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS;
 exports.DEFAULT_RESET_PASSWORD_LABELS = DEFAULT_RESET_PASSWORD_LABELS;
 exports.DEVICE_PIN_ALLOWED_DIGITS = DEVICE_PIN_ALLOWED_DIGITS;
 exports.DEVICE_PIN_DEFAULT_DIGITS = DEVICE_PIN_DEFAULT_DIGITS;
@@ -2647,19 +2965,26 @@ exports.PasskeyLoginButton = PasskeyLoginButton;
 exports.PasskeySettingsCard = PasskeySettingsCard;
 exports.PasswordPolicyError = PasswordPolicyError;
 exports.PinForm = PinForm;
+exports.PreferredMethodHint = PreferredMethodHint;
+exports.PreferredMethodSettingsCard = PreferredMethodSettingsCard;
 exports.ResetPasswordError = ResetPasswordError;
 exports.ResetPasswordForm = ResetPasswordForm;
+exports.cachePreferredMethod = cachePreferredMethod;
+exports.clearCachedPreferredMethod = clearCachedPreferredMethod;
 exports.collectUserRoles = collectUserRoles;
 exports.createBffAuthClient = createBffAuthClient;
+exports.createPreferencesClient = createPreferencesClient;
 exports.defaultAuthTheme = defaultAuthTheme;
 exports.isAllowedPinDigits = isAllowedPinDigits;
 exports.isPasswordValid = isPasswordValid;
 exports.isValidForgotPasswordEmail = isValidForgotPasswordEmail;
+exports.readCachedPreferredMethod = readCachedPreferredMethod;
 exports.readPasskeyError = readPasskeyError;
 exports.readPasskeyRegistered = readPasskeyRegistered;
 exports.resolvePostLoginRoute = resolvePostLoginRoute;
 exports.startPasskeyLogin = startPasskeyLogin;
 exports.startPasskeyRegistration = startPasskeyRegistration;
+exports.syncPreferredMethodFromServer = syncPreferredMethodFromServer;
 exports.useAuthTheme = useAuthTheme;
 exports.useBffAuth = useBffAuth;
 exports.useBffForgotPassword = useBffForgotPassword;
@@ -2671,6 +2996,7 @@ exports.useDevicePinUnlock = useDevicePinUnlock;
 exports.useForgotPasswordSubmit = useForgotPasswordSubmit;
 exports.useOtpLogin = useOtpLogin;
 exports.usePinLogin = usePinLogin;
+exports.usePreferredMethodSetting = usePreferredMethodSetting;
 exports.useResetPasswordForm = useResetPasswordForm;
 exports.validatePasswordPolicy = validatePasswordPolicy;
 exports.withTestIdPrefix = withTestIdPrefix;