@dloizides/auth-web 1.10.0 → 1.11.0

package/dist/index.js

@@ -262,6 +262,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.",
@@ -350,7 +358,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}`;
@@ -481,6 +494,21 @@ function useAuthStyles(theme) {
     });
   }, [theme]);
 }
+function useLoginPrefill({
+  initialUsername,
+  initialPassword,
+  prefillNonce
+}) {
+  const [username, setUsername] = react.useState(initialUsername ?? "");
+  const [password, setPassword] = react.useState(initialPassword ?? "");
+  const [appliedNonce, setAppliedNonce] = react.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";
@@ -592,7 +620,10 @@ function LoginForm({
   onForgotPassword,
   onSignUp,
   testIdPrefix,
-  chromeless = false
+  chromeless = false,
+  initialUsername,
+  initialPassword,
+  prefillNonce
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -601,8 +632,11 @@ function LoginForm({
     [labelsProp]
   );
   const { login, isSubmitting } = useBffAuth({ client, probeOnMount: false });
-  const [username, setUsername] = react.useState("");
-  const [password, setPassword] = react.useState("");
+  const { username, password, setUsername, setPassword } = useLoginPrefill({
+    initialUsername,
+    initialPassword,
+    prefillNonce
+  });
   const [errorText, setErrorText] = react.useState(null);
   const runLogin = react.useCallback(async () => {
     setErrorText(null);
@@ -3132,6 +3166,156 @@ function PreferredMethodHint({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: withTestIdPrefix(AuthTestIds.preferredMethodHint, testIdPrefix), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.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 = reactNative.Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+  default: "monospace"
+});
+function useDemoCredentialsStyles(theme) {
+  return react.useMemo(() => {
+    const { colors, radii, spacing, typography } = theme;
+    return reactNative.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 = react.useMemo(
+    () => ({ ...DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const resolved = react.useMemo(() => resolveDemoCredentials(credentials), [credentials]);
+  const handleUse = react.useCallback(() => {
+    if (resolved !== null && onUse !== void 0) {
+      onUse(resolved);
+    }
+  }, [resolved, onUse]);
+  if (resolved === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: styles3.panel,
+      testID: withTestIdPrefix(AuthTestIds.demoCredentialsHint, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.description, children: labels.description }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.usernameLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              selectable: true,
+              style: styles3.rowValue,
+              testID: withTestIdPrefix(AuthTestIds.demoCredentialsUsername, testIdPrefix),
+              children: resolved.username
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.passwordLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              selectable: true,
+              style: styles3.rowValue,
+              testID: withTestIdPrefix(AuthTestIds.demoCredentialsPassword, testIdPrefix),
+              children: resolved.password
+            }
+          )
+        ] }),
+        onUse !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.TouchableOpacity,
+          {
+            accessibilityHint: labels.useCredentialsHint,
+            accessibilityLabel: labels.useCredentials,
+            accessibilityRole: "button",
+            style: authStyles.secondaryButton,
+            testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
+            onPress: handleUse,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+          }
+        ) : null
+      ]
+    }
+  );
+}
 var EMPTY_CONFIG = {
   methods: [],
   registrationEnabled: false,
@@ -3237,6 +3421,34 @@ async function syncPreferredMethodFromServer(client) {
     return null;
   }
 }
+function useDemoCredentials({
+  credentials,
+  prefillOnMount = false
+} = {}) {
+  const resolved = react.useMemo(() => resolveDemoCredentials(credentials), [credentials]);
+  const [filled, setFilled] = react.useState(
+    prefillOnMount ? resolved : null
+  );
+  const [prefillNonce, setPrefillNonce] = react.useState(0);
+  const handleUse = react.useCallback((next) => {
+    setFilled(next);
+    setPrefillNonce((current) => current + 1);
+  }, []);
+  return react.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) {
@@ -3336,6 +3548,7 @@ exports.AuthTestIds = AuthTestIds;
 exports.AuthThemeProvider = AuthThemeProvider;
 exports.BffAuthStatus = BffAuthStatus;
 exports.DEFAULT_AUTH_CARD_MAX_WIDTH = DEFAULT_AUTH_CARD_MAX_WIDTH;
+exports.DEFAULT_DEMO_CREDENTIALS_HINT_LABELS = DEFAULT_DEMO_CREDENTIALS_HINT_LABELS;
 exports.DEFAULT_DEVICE_PIN_ENROLL_LABELS = DEFAULT_DEVICE_PIN_ENROLL_LABELS;
 exports.DEFAULT_DEVICE_PIN_SETTINGS_LABELS = DEFAULT_DEVICE_PIN_SETTINGS_LABELS;
 exports.DEFAULT_DEVICE_PIN_UNLOCK_LABELS = DEFAULT_DEVICE_PIN_UNLOCK_LABELS;
@@ -3351,6 +3564,7 @@ exports.DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS = DEFAULT_PREFERRED_METHOD_SETT
 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;
+exports.DemoCredentialsHint = DemoCredentialsHint;
 exports.DevicePinEnrollErrorKey = DevicePinEnrollErrorKey;
 exports.DevicePinEnrollForm = DevicePinEnrollForm;
 exports.DevicePinErrorKey = DevicePinErrorKey;
@@ -3390,6 +3604,7 @@ exports.readCachedPreferredMethod = readCachedPreferredMethod;
 exports.readPasskeyError = readPasskeyError;
 exports.readPasskeyRegistered = readPasskeyRegistered;
 exports.resolveAccessibleRoutes = resolveAccessibleRoutes;
+exports.resolveDemoCredentials = resolveDemoCredentials;
 exports.resolvePostLoginRoute = resolvePostLoginRoute;
 exports.startPasskeyLogin = startPasskeyLogin;
 exports.startPasskeyRegistration = startPasskeyRegistration;
@@ -3399,6 +3614,7 @@ exports.useBffAuth = useBffAuth;
 exports.useBffForgotPassword = useBffForgotPassword;
 exports.useBffLoginConfig = useBffLoginConfig;
 exports.useBffResetPassword = useBffResetPassword;
+exports.useDemoCredentials = useDemoCredentials;
 exports.useDevicePinDisable = useDevicePinDisable;
 exports.useDevicePinEnroll = useDevicePinEnroll;
 exports.useDevicePinUnlock = useDevicePinUnlock;