@dloizides/auth-web 1.13.0 → 1.16.0

package/dist/index.js

@@ -9,15 +9,18 @@ var authClient = require('@dloizides/auth-client');
 // src/components/AuthScreen.tsx
 var FULL_WIDTH = "100%";
 var CARD_BORDER_WIDTH = 1;
+var CARD_TOP_OFFSET = 64;
 function useAuthScreenStyles(theme) {
   return react.useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return reactNative.StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Deliberately NOT `justifyContent: 'center'` — see CARD_TOP_OFFSET.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: CARD_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -75,7 +78,8 @@ var defaultAuthTheme = {
   typography: {
     title: 28,
     subtitle: 16,
-    label: 14,
+    // 13, not 14 — the shared contract's `field` voice. See AuthThemeTypography.label.
+    label: 13,
     body: 16,
     caption: 12
   }
@@ -304,6 +308,29 @@ var DEFAULT_RESET_PASSWORD_LABELS = {
   errorNetwork: "Something went wrong. Please try again."
 };
 
+// src/components/labels/accountSettingsLabels.ts
+var DEFAULT_ACCOUNT_SETTINGS_LABELS = {
+  heading: "Account settings",
+  changePasswordTitle: "Change password",
+  changePasswordDescription: "Update the password you use to sign in.",
+  currentPasswordLabel: "Current password",
+  currentPasswordPlaceholder: "Enter your current password",
+  newPasswordLabel: "New password",
+  newPasswordPlaceholder: "Enter a new password",
+  confirmPasswordLabel: "Confirm new password",
+  confirmPasswordPlaceholder: "Re-enter your new password",
+  submit: "Change password",
+  submitting: "Changing password...",
+  submitHint: "Submit the form to change your password",
+  success: "Your password has been changed.",
+  errorWeakNewPassword: "Your new password must be at least 8 characters and include an uppercase letter, a lowercase letter and a number.",
+  errorMismatch: "The new password and its confirmation do not match.",
+  errorCurrentRequired: "Enter your current password.",
+  errorInvalidCurrent: "Your current password is incorrect, or the new password does not meet the policy.",
+  errorUnauthorized: "Your session has expired. Sign in again to change your password.",
+  errorFailed: "Could not change your password. Try again later."
+};
+
 // src/components/testIds.ts
 var AuthTestIds = {
   loginForm: "auth-login-form",
@@ -377,6 +404,15 @@ var AuthTestIds = {
   preferredMethodSettingsError: "auth-preferred-method-settings-error",
   // Preferred-method login-screen hint
   preferredMethodHint: "auth-preferred-method-hint",
+  // Account-settings screen shell + in-app change-password form
+  accountSettings: "auth-account-settings",
+  accountSettingsChangePassword: "auth-account-settings-change-password",
+  changePasswordCurrentInput: "auth-change-password-current",
+  changePasswordNewInput: "auth-change-password-new",
+  changePasswordConfirmInput: "auth-change-password-confirm",
+  changePasswordSubmit: "auth-change-password-submit",
+  changePasswordError: "auth-change-password-error",
+  changePasswordSuccess: "auth-change-password-success",
   // Public-demo credentials panel
   demoCredentialsHint: "auth-demo-credentials-hint",
   demoCredentialsUsername: "auth-demo-credentials-username",
@@ -391,15 +427,21 @@ function withTestIdPrefix(baseId, prefix) {
 var FULL_WIDTH2 = "100%";
 var CARD_MAX_WIDTH = 420;
 var BUTTON_VERTICAL_PADDING = 14;
+var SCREEN_TOP_OFFSET = 64;
 function useAuthStyles(theme) {
   return react.useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return reactNative.StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Top-anchored, NOT centred — a centred card re-centres as it grows and
+        // drags the inputs up under the cursor. Same reasoning (and the same
+        // measurement) as `useAuthScreenStyles`' CARD_TOP_OFFSET; kept in step so
+        // a standalone `<LoginForm>` and an `<AuthScreen>`-composed one agree.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: SCREEN_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -2013,14 +2055,15 @@ function DevicePinLengthPicker({
   const theme = useAuthTheme(themeProp);
   const dynamic = usePickerStyles(theme);
   const baseId = withTestIdPrefix(AuthTestIds.devicePinEnrollLength, testIdPrefix);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityRole: "radiogroup", role: "radiogroup", style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
     const active = option === selected;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
+        "aria-checked": active,
         accessibilityHint: interpolate(optionHint, { count: option }),
         accessibilityLabel: String(option),
-        accessibilityRole: "button",
+        accessibilityRole: "radio",
         accessibilityState: { selected: active },
         disabled,
         style: [styles2.pill, dynamic.pill, active ? dynamic.active : null],
@@ -3164,6 +3207,7 @@ function PreferredMethodSettingsCard({
           return /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TouchableOpacity,
             {
+              "aria-checked": isSelected,
               accessibilityHint: labels.description,
               accessibilityLabel: option.label,
               accessibilityRole: "radio",
@@ -3190,6 +3234,307 @@ function PreferredMethodSettingsCard({
     }
   );
 }
+
+// src/password/ChangePasswordErrorKey.ts
+var ChangePasswordErrorKey = /* @__PURE__ */ ((ChangePasswordErrorKey2) => {
+  ChangePasswordErrorKey2["WeakNewPassword"] = "weak_new_password";
+  ChangePasswordErrorKey2["Mismatch"] = "mismatch";
+  ChangePasswordErrorKey2["CurrentRequired"] = "current_required";
+  ChangePasswordErrorKey2["InvalidCurrent"] = "invalid_current";
+  ChangePasswordErrorKey2["Unauthorized"] = "unauthorized";
+  ChangePasswordErrorKey2["Failed"] = "failed";
+  return ChangePasswordErrorKey2;
+})(ChangePasswordErrorKey || {});
+function errorKeyForStatus(status) {
+  if (status === "invalidCurrent") {
+    return "invalid_current" /* InvalidCurrent */;
+  }
+  if (status === "unauthorized") {
+    return "unauthorized" /* Unauthorized */;
+  }
+  return "failed" /* Failed */;
+}
+function useChangePassword({
+  client,
+  onChanged
+}) {
+  const [currentPassword, setCurrentValue] = react.useState("");
+  const [newPassword, setNewValue] = react.useState("");
+  const [confirmPassword, setConfirmValue] = react.useState("");
+  const [submitting, setSubmitting] = react.useState(false);
+  const [succeeded, setSucceeded] = react.useState(false);
+  const [errorKey, setErrorKey] = react.useState(null);
+  const clearStatus = react.useCallback(() => {
+    setErrorKey(null);
+    setSucceeded(false);
+  }, []);
+  const setCurrentPassword = react.useCallback((value) => {
+    setCurrentValue(value);
+    clearStatus();
+  }, [clearStatus]);
+  const setNewPassword = react.useCallback((value) => {
+    setNewValue(value);
+    clearStatus();
+  }, [clearStatus]);
+  const setConfirmPassword = react.useCallback((value) => {
+    setConfirmValue(value);
+    clearStatus();
+  }, [clearStatus]);
+  const reset = react.useCallback(() => {
+    setCurrentValue("");
+    setNewValue("");
+    setConfirmValue("");
+    setSubmitting(false);
+    setSucceeded(false);
+    setErrorKey(null);
+  }, []);
+  const submit = react.useCallback(() => {
+    if (currentPassword === "") {
+      setErrorKey("current_required" /* CurrentRequired */);
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setErrorKey("mismatch" /* Mismatch */);
+      return;
+    }
+    if (!isPasswordValid(newPassword)) {
+      setErrorKey("weak_new_password" /* WeakNewPassword */);
+      return;
+    }
+    setErrorKey(null);
+    setSucceeded(false);
+    setSubmitting(true);
+    client.changePassword({ currentPassword, newPassword }).then((result) => {
+      if (result.status === "success") {
+        setCurrentValue("");
+        setNewValue("");
+        setConfirmValue("");
+        setSucceeded(true);
+        onChanged?.();
+        return;
+      }
+      setErrorKey(errorKeyForStatus(result.status));
+    }).catch(() => {
+      setErrorKey("failed" /* Failed */);
+    }).finally(() => {
+      setSubmitting(false);
+    });
+  }, [client, currentPassword, newPassword, confirmPassword, onChanged]);
+  return {
+    currentPassword,
+    newPassword,
+    confirmPassword,
+    setCurrentPassword,
+    setNewPassword,
+    setConfirmPassword,
+    submitting,
+    succeeded,
+    errorKey,
+    submit,
+    reset
+  };
+}
+function errorMessage2(errorKey, labels) {
+  switch (errorKey) {
+    case "weak_new_password" /* WeakNewPassword */:
+      return labels.errorWeakNewPassword;
+    case "mismatch" /* Mismatch */:
+      return labels.errorMismatch;
+    case "current_required" /* CurrentRequired */:
+      return labels.errorCurrentRequired;
+    case "invalid_current" /* InvalidCurrent */:
+      return labels.errorInvalidCurrent;
+    case "unauthorized" /* Unauthorized */:
+      return labels.errorUnauthorized;
+    case "failed" /* Failed */:
+      return labels.errorFailed;
+    default:
+      return null;
+  }
+}
+function ChangePasswordCard({
+  client,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix,
+  onChanged
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = react.useMemo(
+    () => ({ ...DEFAULT_ACCOUNT_SETTINGS_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const form = useChangePassword({ client, onChanged });
+  const message = errorMessage2(form.errorKey, labels);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.accountSettingsChangePassword, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.changePasswordTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.changePasswordDescription }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.label, children: labels.currentPasswordLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              accessibilityLabel: labels.currentPasswordLabel,
+              autoComplete: "current-password",
+              placeholder: labels.currentPasswordPlaceholder,
+              placeholderTextColor: theme.colors.textSecondary,
+              secureTextEntry: true,
+              style: styles3.input,
+              testID: withTestIdPrefix(AuthTestIds.changePasswordCurrentInput, testIdPrefix),
+              value: form.currentPassword,
+              onChangeText: form.setCurrentPassword
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.label, children: labels.newPasswordLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              accessibilityLabel: labels.newPasswordLabel,
+              autoComplete: "new-password",
+              placeholder: labels.newPasswordPlaceholder,
+              placeholderTextColor: theme.colors.textSecondary,
+              secureTextEntry: true,
+              style: styles3.input,
+              testID: withTestIdPrefix(AuthTestIds.changePasswordNewInput, testIdPrefix),
+              value: form.newPassword,
+              onChangeText: form.setNewPassword
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.label, children: labels.confirmPasswordLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              accessibilityLabel: labels.confirmPasswordLabel,
+              autoComplete: "new-password",
+              placeholder: labels.confirmPasswordPlaceholder,
+              placeholderTextColor: theme.colors.textSecondary,
+              secureTextEntry: true,
+              style: styles3.input,
+              testID: withTestIdPrefix(AuthTestIds.changePasswordConfirmInput, testIdPrefix),
+              value: form.confirmPassword,
+              onChangeText: form.setConfirmPassword
+            }
+          )
+        ] }),
+        message !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: styles3.errorText,
+            testID: withTestIdPrefix(AuthTestIds.changePasswordError, testIdPrefix),
+            children: message
+          }
+        ) : null,
+        form.succeeded ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: styles3.successText,
+            testID: withTestIdPrefix(AuthTestIds.changePasswordSuccess, testIdPrefix),
+            children: labels.success
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.TouchableOpacity,
+          {
+            accessibilityHint: labels.submitHint,
+            accessibilityLabel: form.submitting ? labels.submitting : labels.submit,
+            accessibilityRole: "button",
+            disabled: form.submitting,
+            style: form.submitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton,
+            testID: withTestIdPrefix(AuthTestIds.changePasswordSubmit, testIdPrefix),
+            onPress: form.submit,
+            children: form.submitting ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.primaryButtonText, children: labels.submit })
+          }
+        )
+      ]
+    }
+  );
+}
+var GAP = 16;
+var layout = reactNative.StyleSheet.create({
+  content: {
+    width: "100%",
+    alignItems: "center",
+    rowGap: GAP
+  }
+});
+function AccountSettingsScreen({
+  changePassword,
+  devicePin,
+  passkeys,
+  preferredMethod,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = react.useMemo(
+    () => ({ ...DEFAULT_ACCOUNT_SETTINGS_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.ScrollView,
+    {
+      contentContainerStyle: styles3.screen,
+      testID: withTestIdPrefix(AuthTestIds.accountSettings, testIdPrefix),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: layout.content, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ChangePasswordCard,
+          {
+            client: changePassword.client,
+            labels: labelsProp,
+            testIdPrefix,
+            theme,
+            onChanged: changePassword.onChanged
+          }
+        ),
+        devicePin !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          DevicePinSettingsCard,
+          {
+            client: devicePin.client,
+            enrollLabels: devicePin.enrollLabels,
+            initialHasPin: devicePin.initialHasPin,
+            labels: devicePin.labels,
+            testIdPrefix,
+            theme,
+            onChanged: devicePin.onChanged
+          }
+        ) : null,
+        passkeys !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          PasskeySettingsCard,
+          {
+            labels: passkeys.labels,
+            returnUrl: passkeys.returnUrl,
+            testIdPrefix,
+            theme
+          }
+        ) : null,
+        preferredMethod !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          PreferredMethodSettingsCard,
+          {
+            availableMethods: preferredMethod.availableMethods,
+            client: preferredMethod.client,
+            labels: preferredMethod.labels,
+            testIdPrefix,
+            theme,
+            onChanged: preferredMethod.onChanged
+          }
+        ) : null
+      ] })
+    }
+  );
+}
 function hintFor(method, labels) {
   if (method === "password") {
     return labels.password;
@@ -3450,6 +3795,7 @@ function DemoCredentialsHint({
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TouchableOpacity,
           {
+            "aria-expanded": expanded,
             accessibilityHint: labels.toggleHint,
             accessibilityLabel: labels.toggle,
             accessibilityRole: "button",
@@ -3705,6 +4051,56 @@ async function performBffLogout(options) {
   }
   runGuarded(onRedirect, onError);
 }
+var CHANGE_PASSWORD_ENDPOINT = "/bff/account/change-password";
+var CSRF_HEADER2 = "X-BFF-Csrf";
+var CSRF_HEADER_VALUE2 = "1";
+var JSON_CONTENT_TYPE2 = "application/json";
+var HTTP_NO_CONTENT = 204;
+var HTTP_OK = 200;
+var HTTP_BAD_REQUEST2 = 400;
+var HTTP_UNAUTHORIZED = 401;
+async function lazyFetchHttpClient2(request) {
+  const fetchImpl = typeof fetch === "function" ? fetch.bind(globalThis) : void 0;
+  if (fetchImpl === void 0) {
+    throw new Error("createBffChangePasswordClient: fetch is not available in this environment");
+  }
+  return authClient.createFetchHttpClient(fetchImpl)(request);
+}
+function resultFromStatus(status) {
+  if (status === HTTP_NO_CONTENT || status === HTTP_OK) {
+    return { status: "success" };
+  }
+  if (status === HTTP_BAD_REQUEST2) {
+    return { status: "invalidCurrent" };
+  }
+  if (status === HTTP_UNAUTHORIZED) {
+    return { status: "unauthorized" };
+  }
+  return { status: "error" };
+}
+function createBffChangePasswordClient(options = {}) {
+  const http = options.http ?? lazyFetchHttpClient2;
+  const baseUrl = options.baseUrl ?? "";
+  const url = `${baseUrl}${CHANGE_PASSWORD_ENDPOINT}`;
+  return {
+    changePassword: async (request) => {
+      try {
+        const response = await http({
+          url,
+          method: "POST",
+          headers: { "Content-Type": JSON_CONTENT_TYPE2, [CSRF_HEADER2]: CSRF_HEADER_VALUE2 },
+          body: JSON.stringify({
+            currentPassword: request.currentPassword,
+            newPassword: request.newPassword
+          })
+        });
+        return resultFromStatus(response.status);
+      } catch {
+        return { status: "error" };
+      }
+    }
+  };
+}
 
 Object.defineProperty(exports, "BffAuthClient", {
   enumerable: true,
@@ -3714,10 +4110,15 @@ Object.defineProperty(exports, "createFetchHttpClient", {
   enumerable: true,
   get: function () { return authClient.createFetchHttpClient; }
 });
+exports.AccountSettingsScreen = AccountSettingsScreen;
 exports.AuthScreen = AuthScreen;
 exports.AuthTestIds = AuthTestIds;
 exports.AuthThemeProvider = AuthThemeProvider;
 exports.BffAuthStatus = BffAuthStatus;
+exports.CHANGE_PASSWORD_ENDPOINT = CHANGE_PASSWORD_ENDPOINT;
+exports.ChangePasswordCard = ChangePasswordCard;
+exports.ChangePasswordErrorKey = ChangePasswordErrorKey;
+exports.DEFAULT_ACCOUNT_SETTINGS_LABELS = DEFAULT_ACCOUNT_SETTINGS_LABELS;
 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;
@@ -3767,6 +4168,7 @@ exports.cachePreferredMethod = cachePreferredMethod;
 exports.clearCachedPreferredMethod = clearCachedPreferredMethod;
 exports.collectUserRoles = collectUserRoles;
 exports.createBffAuthClient = createBffAuthClient;
+exports.createBffChangePasswordClient = createBffChangePasswordClient;
 exports.createPreferencesClient = createPreferencesClient;
 exports.defaultAuthTheme = defaultAuthTheme;
 exports.isAllowedPinDigits = isAllowedPinDigits;
@@ -3787,6 +4189,7 @@ exports.useBffAuth = useBffAuth;
 exports.useBffForgotPassword = useBffForgotPassword;
 exports.useBffLoginConfig = useBffLoginConfig;
 exports.useBffResetPassword = useBffResetPassword;
+exports.useChangePassword = useChangePassword;
 exports.useDemoCredentials = useDemoCredentials;
 exports.useDevicePinDisable = useDevicePinDisable;
 exports.useDevicePinEnroll = useDevicePinEnroll;