@dloizides/auth-web 1.12.0 → 1.13.0

package/dist/index.js

@@ -114,7 +114,7 @@ function AuthScreen({
   ] });
 }
 
-// src/components/labels.ts
+// src/components/labels/loginLabels.ts
 var DEFAULT_LOGIN_LABELS = {
   title: "Sign in",
   subtitle: "Welcome back",
@@ -129,6 +129,8 @@ var DEFAULT_LOGIN_LABELS = {
   invalidCredentials: "Incorrect username or password.",
   missingFields: "Enter both your username and password."
 };
+
+// src/components/labels/forgotPasswordLabels.ts
 var DEFAULT_FORGOT_PASSWORD_LABELS = {
   title: "Forgot password",
   description: "Enter your email and we will send you a reset link.",
@@ -145,6 +147,8 @@ var DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS = {
   cancel: "Cancel",
   close: "Close"
 };
+
+// src/components/labels/otpLabels.ts
 var DEFAULT_OTP_LABELS = {
   requestTitle: "Sign in with a code",
   requestDescription: "Enter your email and we will send you a one-time code.",
@@ -165,6 +169,8 @@ var DEFAULT_OTP_LABELS = {
   resending: "Resending...",
   changeEmail: "Use a different email"
 };
+
+// src/components/labels/pinLabels.ts
 var DEFAULT_PIN_LABELS = {
   title: "Enter your event PIN",
   description: "Enter the PIN for this event to sign in.",
@@ -175,6 +181,8 @@ var DEFAULT_PIN_LABELS = {
   missingPin: "Enter your event PIN.",
   invalidPin: "That PIN is incorrect, has expired, or is locked out."
 };
+
+// src/components/labels/devicePinLabels.ts
 var DEFAULT_DEVICE_PIN_UNLOCK_LABELS = {
   title: "Welcome back, {name}",
   titleNoName: "Welcome back",
@@ -232,6 +240,8 @@ var DEFAULT_DEVICE_PIN_SETTINGS_LABELS = {
   disabling: "Disabling...",
   disableFailed: "Could not disable PIN sign-in. Try again later."
 };
+
+// src/components/labels/passkeyLabels.ts
 var DEFAULT_PASSKEY_LOGIN_LABELS = {
   signInButton: "Sign in with a passkey",
   signInHint: "Use your fingerprint, face, or security key to sign in",
@@ -247,6 +257,8 @@ 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."
 };
+
+// src/components/labels/preferredMethodLabels.ts
 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.",
@@ -262,14 +274,20 @@ 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."
 };
+
+// src/components/labels/demoLabels.ts
 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"
+  useCredentialsHint: "Fill the sign-in form with the demo username and password",
+  toggle: "Try the demo",
+  toggleHint: "Show the demo account username and password"
 };
+
+// src/components/labels/resetPasswordLabels.ts
 var DEFAULT_RESET_PASSWORD_LABELS = {
   title: "Reset password",
   description: "Choose a new password for your account.",
@@ -363,7 +381,9 @@ var AuthTestIds = {
   demoCredentialsHint: "auth-demo-credentials-hint",
   demoCredentialsUsername: "auth-demo-credentials-username",
   demoCredentialsPassword: "auth-demo-credentials-password",
-  demoCredentialsUseButton: "auth-demo-credentials-use"
+  demoCredentialsUseButton: "auth-demo-credentials-use",
+  // The collapsed disclosure trigger (`disclosure` variant only).
+  demoCredentialsToggle: "auth-demo-credentials-toggle"
 };
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
@@ -523,6 +543,35 @@ function useLoginPrefill({
   }
   return { username, password, setUsername, setPassword };
 }
+function useLoginSubmit({
+  username,
+  password,
+  login,
+  onSuccess,
+  missingFieldsLabel,
+  invalidCredentialsLabel
+}) {
+  const [errorText, setErrorText] = react.useState(null);
+  const runLogin = react.useCallback(async () => {
+    setErrorText(null);
+    const trimmedUsername = username.trim();
+    const hasMissingField = trimmedUsername.length === 0 || password.length === 0;
+    if (hasMissingField) {
+      setErrorText(missingFieldsLabel);
+      return;
+    }
+    try {
+      const user = await login({ username: trimmedUsername, password });
+      onSuccess(user);
+    } catch {
+      setErrorText(invalidCredentialsLabel);
+    }
+  }, [username, password, login, onSuccess, missingFieldsLabel, invalidCredentialsLabel]);
+  const handleSubmit = react.useCallback(() => {
+    void runLogin();
+  }, [runLogin]);
+  return { errorText, handleSubmit };
+}
 var BffAuthStatus = /* @__PURE__ */ ((BffAuthStatus2) => {
   BffAuthStatus2["Loading"] = "loading";
   BffAuthStatus2["Authenticated"] = "authenticated";
@@ -653,25 +702,14 @@ function LoginForm({
     prefillNonce,
     prefillIntent
   });
-  const [errorText, setErrorText] = react.useState(null);
-  const runLogin = react.useCallback(async () => {
-    setErrorText(null);
-    const trimmedUsername = username.trim();
-    const hasMissingField = trimmedUsername.length === 0 || password.length === 0;
-    if (hasMissingField) {
-      setErrorText(labels.missingFields);
-      return;
-    }
-    try {
-      const user = await login({ username: trimmedUsername, password });
-      onSuccess(user);
-    } catch {
-      setErrorText(labels.invalidCredentials);
-    }
-  }, [username, password, login, onSuccess, labels.missingFields, labels.invalidCredentials]);
-  const handleSubmit = react.useCallback(() => {
-    void runLogin();
-  }, [runLogin]);
+  const { errorText, handleSubmit } = useLoginSubmit({
+    username,
+    password,
+    login,
+    onSuccess,
+    missingFieldsLabel: labels.missingFields,
+    invalidCredentialsLabel: labels.invalidCredentials
+  });
   const submitButtonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
@@ -3182,7 +3220,62 @@ function PreferredMethodHint({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: withTestIdPrefix(AuthTestIds.preferredMethodHint, testIdPrefix), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.helperText, children: text }) });
 }
+function DemoCredentialsBody({
+  credentials,
+  labels,
+  styles: styles3,
+  authStyles,
+  testIdPrefix,
+  onUse
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
+    /* @__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: credentials.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: credentials.password
+        }
+      )
+    ] }),
+    onUse !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TouchableOpacity,
+      {
+        accessibilityHint: labels.useCredentialsHint,
+        accessibilityLabel: labels.useCredentials,
+        accessibilityRole: "button",
+        style: [authStyles.secondaryButton, styles3.useButton],
+        testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
+        onPress: onUse,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+      }
+    ) : null
+  ] });
+}
+
+// src/components/DemoCredentialsHintVariant.ts
+var DemoCredentialsHintVariant = /* @__PURE__ */ ((DemoCredentialsHintVariant2) => {
+  DemoCredentialsHintVariant2["Panel"] = "panel";
+  DemoCredentialsHintVariant2["Disclosure"] = "disclosure";
+  return DemoCredentialsHintVariant2;
+})(DemoCredentialsHintVariant || {});
 var PANEL_BORDER_WIDTH = 1;
+var TRIGGER_MIN_HEIGHT = 32;
 var ACCENT_RAIL_WIDTH = 3;
 var TITLE_LETTER_SPACING = 0.8;
 var DESCRIPTION_LINE_HEIGHT_RATIO = 1.45;
@@ -3243,6 +3336,40 @@ function useDemoCredentialsStyles(theme) {
         flexShrink: 1,
         backgroundColor: colors.surface,
         color: colors.text
+      },
+      // ── Disclosure variant ──────────────────────────────────────────────
+      // No panel fill, no border, no brand rail: the collapsed state is one
+      // line of text and nothing else, so on a page a real customer uses it
+      // reads as a footnote rather than as a second call to action.
+      disclosure: {
+        marginTop: spacing.md,
+        alignSelf: "stretch"
+      },
+      disclosureTrigger: {
+        alignSelf: "center",
+        justifyContent: "center",
+        minHeight: TRIGGER_MIN_HEIGHT,
+        paddingHorizontal: spacing.xs
+      },
+      disclosureTriggerText: {
+        fontSize: typography.caption,
+        textDecorationLine: "underline",
+        // `textSecondary`, NOT a dimmed `text`. This is the same token the rest
+        // of the helper copy uses, so it inherits whatever AA contrast the
+        // consuming app already guarantees. Discretion here is carried by the
+        // caption size, the centred placement below the form, and the absence
+        // of any fill or border — never by fading the text toward the
+        // background, which is how "discreet" quietly becomes a contrast bug.
+        color: colors.textSecondary
+      },
+      disclosureBody: {
+        marginTop: spacing.sm,
+        paddingTop: spacing.sm,
+        borderTopWidth: PANEL_BORDER_WIDTH,
+        borderTopColor: colors.border
+      },
+      useButton: {
+        alignSelf: "stretch"
       }
     });
   }, [theme]);
@@ -3263,6 +3390,7 @@ function resolveDemoCredentials(credentials) {
 }
 function DemoCredentialsHint({
   credentials,
+  variant = "disclosure" /* Disclosure */,
   theme: themeProp,
   labels: labelsProp,
   testIdPrefix,
@@ -3271,6 +3399,7 @@ function DemoCredentialsHint({
   const theme = useAuthTheme(themeProp);
   const authStyles = useAuthStyles(theme);
   const styles3 = useDemoCredentialsStyles(theme);
+  const [expanded, setExpanded] = react.useState(false);
   const labels = react.useMemo(
     () => ({ ...DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, ...labelsProp }),
     [labelsProp]
@@ -3281,53 +3410,57 @@ function DemoCredentialsHint({
       onUse(resolved);
     }
   }, [resolved, onUse]);
+  const handleToggle = react.useCallback(() => {
+    setExpanded((current) => !current);
+  }, []);
   if (resolved === null) {
     return null;
   }
+  const body = /* @__PURE__ */ jsxRuntime.jsx(
+    DemoCredentialsBody,
+    {
+      authStyles,
+      credentials: resolved,
+      labels,
+      styles: styles3,
+      testIdPrefix,
+      onUse: onUse === void 0 ? void 0 : handleUse
+    }
+  );
+  if (variant === "panel" /* Panel */) {
+    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 }),
+          body
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
-      style: styles3.panel,
+      style: styles3.disclosure,
       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(
+        /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TouchableOpacity,
           {
-            accessibilityHint: labels.useCredentialsHint,
-            accessibilityLabel: labels.useCredentials,
+            accessibilityHint: labels.toggleHint,
+            accessibilityLabel: labels.toggle,
             accessibilityRole: "button",
-            style: authStyles.secondaryButton,
-            testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
-            onPress: handleUse,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+            accessibilityState: { expanded },
+            style: styles3.disclosureTrigger,
+            testID: withTestIdPrefix(AuthTestIds.demoCredentialsToggle, testIdPrefix),
+            onPress: handleToggle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.disclosureTriggerText, children: labels.toggle })
           }
-        ) : null
+        ),
+        expanded ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.disclosureBody, children: body }) : null
       ]
     }
   );
@@ -3603,6 +3736,7 @@ 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.DemoCredentialsHintVariant = DemoCredentialsHintVariant;
 exports.DevicePinEnrollErrorKey = DevicePinEnrollErrorKey;
 exports.DevicePinEnrollForm = DevicePinEnrollForm;
 exports.DevicePinErrorKey = DevicePinErrorKey;