@dloizides/auth-web 1.10.0 → 1.11.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { StyleSheet, View, Text, TextInput, TouchableOpacity, ActivityIndicator, Pressable } from 'react-native';
+import { StyleSheet, Platform, 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';
@@ -261,6 +261,14 @@ var DEFAULT_PREFERRED_METHOD_HINT_LABELS = {
   pin: "You usually sign in with your quick PIN on this account.",
   passkey: "You usually sign in with a passkey."
 };
+var DEFAULT_DEMO_CREDENTIALS_HINT_LABELS = {
+  title: "Demo access",
+  description: "Explore the full product with our shared demo account.",
+  usernameLabel: "Username",
+  passwordLabel: "Password",
+  useCredentials: "Use these credentials",
+  useCredentialsHint: "Fill the sign-in form with the demo username and password"
+};
 var DEFAULT_RESET_PASSWORD_LABELS = {
   title: "Reset password",
   description: "Choose a new password for your account.",
@@ -349,7 +357,12 @@ var AuthTestIds = {
   preferredMethodSettingsOption: "auth-preferred-method-settings-option",
   preferredMethodSettingsError: "auth-preferred-method-settings-error",
   // Preferred-method login-screen hint
-  preferredMethodHint: "auth-preferred-method-hint"
+  preferredMethodHint: "auth-preferred-method-hint",
+  // Public-demo credentials panel
+  demoCredentialsHint: "auth-demo-credentials-hint",
+  demoCredentialsUsername: "auth-demo-credentials-username",
+  demoCredentialsPassword: "auth-demo-credentials-password",
+  demoCredentialsUseButton: "auth-demo-credentials-use"
 };
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
@@ -480,6 +493,21 @@ function useAuthStyles(theme) {
     });
   }, [theme]);
 }
+function useLoginPrefill({
+  initialUsername,
+  initialPassword,
+  prefillNonce
+}) {
+  const [username, setUsername] = useState(initialUsername ?? "");
+  const [password, setPassword] = useState(initialPassword ?? "");
+  const [appliedNonce, setAppliedNonce] = useState(prefillNonce);
+  if (prefillNonce !== appliedNonce) {
+    setAppliedNonce(prefillNonce);
+    setUsername(initialUsername ?? "");
+    setPassword(initialPassword ?? "");
+  }
+  return { username, password, setUsername, setPassword };
+}
 var BffAuthStatus = /* @__PURE__ */ ((BffAuthStatus2) => {
   BffAuthStatus2["Loading"] = "loading";
   BffAuthStatus2["Authenticated"] = "authenticated";
@@ -591,7 +619,10 @@ function LoginForm({
   onForgotPassword,
   onSignUp,
   testIdPrefix,
-  chromeless = false
+  chromeless = false,
+  initialUsername,
+  initialPassword,
+  prefillNonce
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -600,8 +631,11 @@ function LoginForm({
     [labelsProp]
   );
   const { login, isSubmitting } = useBffAuth({ client, probeOnMount: false });
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+  const { username, password, setUsername, setPassword } = useLoginPrefill({
+    initialUsername,
+    initialPassword,
+    prefillNonce
+  });
   const [errorText, setErrorText] = useState(null);
   const runLogin = useCallback(async () => {
     setErrorText(null);
@@ -3131,6 +3165,156 @@ function PreferredMethodHint({
   }
   return /* @__PURE__ */ jsx(View, { testID: withTestIdPrefix(AuthTestIds.preferredMethodHint, testIdPrefix), children: /* @__PURE__ */ jsx(Text, { style: styles3.helperText, children: text }) });
 }
+var PANEL_BORDER_WIDTH = 1;
+var ACCENT_RAIL_WIDTH = 3;
+var TITLE_LETTER_SPACING = 0.8;
+var DESCRIPTION_LINE_HEIGHT_RATIO = 1.45;
+var HALF = 2;
+var MONOSPACE_FONT = Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+  default: "monospace"
+});
+function useDemoCredentialsStyles(theme) {
+  return useMemo(() => {
+    const { colors, radii, spacing, typography } = theme;
+    return StyleSheet.create({
+      panel: {
+        borderWidth: PANEL_BORDER_WIDTH,
+        borderLeftWidth: ACCENT_RAIL_WIDTH,
+        borderRadius: radii.card,
+        borderColor: colors.border,
+        borderLeftColor: colors.primary,
+        padding: spacing.md,
+        marginBottom: spacing.md,
+        backgroundColor: colors.background
+      },
+      title: {
+        fontSize: typography.caption,
+        fontWeight: "700",
+        letterSpacing: TITLE_LETTER_SPACING,
+        textTransform: "uppercase",
+        color: colors.primary
+      },
+      description: {
+        fontSize: typography.caption,
+        lineHeight: typography.caption * DESCRIPTION_LINE_HEIGHT_RATIO,
+        marginTop: spacing.xs / HALF,
+        marginBottom: spacing.sm,
+        color: colors.textSecondary
+      },
+      row: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginTop: spacing.xs / HALF
+      },
+      rowLabel: {
+        fontSize: typography.caption,
+        color: colors.textSecondary
+      },
+      rowValue: {
+        fontFamily: MONOSPACE_FONT,
+        fontSize: typography.caption,
+        fontWeight: "600",
+        borderWidth: PANEL_BORDER_WIDTH,
+        borderRadius: radii.input,
+        borderColor: colors.border,
+        paddingVertical: spacing.xs / HALF,
+        paddingHorizontal: spacing.xs,
+        // Never let a long password squeeze the label off the row.
+        flexShrink: 1,
+        backgroundColor: colors.surface,
+        color: colors.text
+      }
+    });
+  }, [theme]);
+}
+
+// src/demo/resolveDemoCredentials.ts
+function resolveDemoCredentials(credentials) {
+  if (credentials === void 0 || credentials === null) {
+    return null;
+  }
+  const username = typeof credentials.username === "string" ? credentials.username.trim() : "";
+  const password = typeof credentials.password === "string" ? credentials.password : "";
+  const isUnusable = username.length === 0 || password.length === 0;
+  if (isUnusable) {
+    return null;
+  }
+  return { username, password };
+}
+function DemoCredentialsHint({
+  credentials,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix,
+  onUse
+}) {
+  const theme = useAuthTheme(themeProp);
+  const authStyles = useAuthStyles(theme);
+  const styles3 = useDemoCredentialsStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const resolved = useMemo(() => resolveDemoCredentials(credentials), [credentials]);
+  const handleUse = useCallback(() => {
+    if (resolved !== null && onUse !== void 0) {
+      onUse(resolved);
+    }
+  }, [resolved, onUse]);
+  if (resolved === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles3.panel,
+      testID: withTestIdPrefix(AuthTestIds.demoCredentialsHint, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.description, children: labels.description }),
+        /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles3.rowLabel, children: labels.usernameLabel }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              selectable: true,
+              style: styles3.rowValue,
+              testID: withTestIdPrefix(AuthTestIds.demoCredentialsUsername, testIdPrefix),
+              children: resolved.username
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles3.rowLabel, children: labels.passwordLabel }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              selectable: true,
+              style: styles3.rowValue,
+              testID: withTestIdPrefix(AuthTestIds.demoCredentialsPassword, testIdPrefix),
+              children: resolved.password
+            }
+          )
+        ] }),
+        onUse !== void 0 ? /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            accessibilityHint: labels.useCredentialsHint,
+            accessibilityLabel: labels.useCredentials,
+            accessibilityRole: "button",
+            style: authStyles.secondaryButton,
+            testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
+            onPress: handleUse,
+            children: /* @__PURE__ */ jsx(Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+          }
+        ) : null
+      ]
+    }
+  );
+}
 var EMPTY_CONFIG = {
   methods: [],
   registrationEnabled: false,
@@ -3236,6 +3420,34 @@ async function syncPreferredMethodFromServer(client) {
     return null;
   }
 }
+function useDemoCredentials({
+  credentials,
+  prefillOnMount = false
+} = {}) {
+  const resolved = useMemo(() => resolveDemoCredentials(credentials), [credentials]);
+  const [filled, setFilled] = useState(
+    prefillOnMount ? resolved : null
+  );
+  const [prefillNonce, setPrefillNonce] = useState(0);
+  const handleUse = useCallback((next) => {
+    setFilled(next);
+    setPrefillNonce((current) => current + 1);
+  }, []);
+  return useMemo(
+    () => ({
+      loginFormProps: {
+        initialUsername: filled?.username,
+        initialPassword: filled?.password,
+        prefillNonce
+      },
+      // `credentials` is passed through unresolved on purpose: the hint applies
+      // `resolveDemoCredentials` itself, so it fails closed even when it is used
+      // standalone, without this hook.
+      hintProps: { credentials, onUse: handleUse }
+    }),
+    [filled, prefillNonce, credentials, handleUse]
+  );
+}
 async function lazyFetchHttpClient(request) {
   const fetchImpl = typeof fetch === "function" ? fetch.bind(globalThis) : void 0;
   if (fetchImpl === void 0) {
@@ -3322,6 +3534,6 @@ async function performBffLogout(options) {
   runGuarded(onRedirect, onError);
 }
 
-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, PasskeyCeremonyMode, PasskeyCeremonyStatus, PasskeyLoginButton, PasskeySettingsCard, PasswordPolicyError, PinForm, PreferredMethodHint, PreferredMethodSettingsCard, ResetPasswordError, ResetPasswordForm, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, performBffLogout, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolveAccessibleRoutes, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePasskeyCeremony, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
+export { AuthScreen, AuthTestIds, AuthThemeProvider, BffAuthStatus, DEFAULT_AUTH_CARD_MAX_WIDTH, DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, 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, DemoCredentialsHint, DevicePinEnrollErrorKey, DevicePinEnrollForm, DevicePinErrorKey, DevicePinInput, DevicePinLengthPicker, DevicePinOffer, DevicePinSettingsCard, DevicePinUnlockScreen, ForgotPasswordFields, ForgotPasswordForm, LoginForm, OtpForm, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyCeremonyMode, PasskeyCeremonyStatus, PasskeyLoginButton, PasskeySettingsCard, PasswordPolicyError, PinForm, PreferredMethodHint, PreferredMethodSettingsCard, ResetPasswordError, ResetPasswordForm, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, performBffLogout, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolveAccessibleRoutes, resolveDemoCredentials, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDemoCredentials, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePasskeyCeremony, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map