@dloizides/auth-web 1.16.0 → 1.18.0

package/dist/index.js

@@ -331,6 +331,27 @@ var DEFAULT_ACCOUNT_SETTINGS_LABELS = {
   errorFailed: "Could not change your password. Try again later."
 };
 
+// src/components/labels/registerLabels.ts
+function field(label, placeholder) {
+  return { label, placeholder, hint: placeholder, inputLabel: label };
+}
+var DEFAULT_REGISTER_LABELS = {
+  title: "Create account",
+  subtitle: "Sign up to get started",
+  submit: "Create account",
+  submitHint: "Creates your account",
+  submitting: "Creating account...",
+  fields: {
+    firstName: field("First name", "Enter your first name"),
+    lastName: field("Last name", "Enter your last name"),
+    username: field("Username", "Choose a username"),
+    email: field("Email", "Enter your email"),
+    password: field("Password", "Choose a password"),
+    confirmPassword: field("Confirm password", "Repeat your password"),
+    tenantName: field("Organisation name", "Enter your organisation name")
+  }
+};
+
 // src/components/testIds.ts
 var AuthTestIds = {
   loginForm: "auth-login-form",
@@ -415,6 +436,8 @@ var AuthTestIds = {
   changePasswordSuccess: "auth-change-password-success",
   // Public-demo credentials panel
   demoCredentialsHint: "auth-demo-credentials-hint",
+  // Per-account heading, present only when >1 account is published (multi-account).
+  demoCredentialsAccountLabel: "auth-demo-credentials-account-label",
   demoCredentialsUsername: "auth-demo-credentials-username",
   demoCredentialsPassword: "auth-demo-credentials-password",
   demoCredentialsUseButton: "auth-demo-credentials-use",
@@ -3571,9 +3594,21 @@ function DemoCredentialsBody({
   styles: styles3,
   authStyles,
   testIdPrefix,
+  accountLabel,
+  testIdIndex,
   onUse
 }) {
+  const testId = (base) => withTestIdPrefix(testIdIndex === void 0 ? base : `${base}-${testIdIndex}`, testIdPrefix);
+  const hasLabel = typeof accountLabel === "string" && accountLabel.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        style: styles3.accountLabel,
+        testID: testId(AuthTestIds.demoCredentialsAccountLabel),
+        children: accountLabel
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.usernameLabel }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3581,7 +3616,7 @@ function DemoCredentialsBody({
         {
           selectable: true,
           style: styles3.rowValue,
-          testID: withTestIdPrefix(AuthTestIds.demoCredentialsUsername, testIdPrefix),
+          testID: testId(AuthTestIds.demoCredentialsUsername),
           children: credentials.username
         }
       )
@@ -3593,7 +3628,7 @@ function DemoCredentialsBody({
         {
           selectable: true,
           style: styles3.rowValue,
-          testID: withTestIdPrefix(AuthTestIds.demoCredentialsPassword, testIdPrefix),
+          testID: testId(AuthTestIds.demoCredentialsPassword),
           children: credentials.password
         }
       )
@@ -3605,7 +3640,7 @@ function DemoCredentialsBody({
         accessibilityLabel: labels.useCredentials,
         accessibilityRole: "button",
         style: [authStyles.secondaryButton, styles3.useButton],
-        testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
+        testID: testId(AuthTestIds.demoCredentialsUseButton),
         onPress: onUse,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
       }
@@ -3658,6 +3693,15 @@ function useDemoCredentialsStyles(theme) {
         marginBottom: spacing.sm,
         color: colors.textSecondary
       },
+      accountLabel: {
+        fontSize: typography.caption,
+        fontWeight: "700",
+        color: colors.text,
+        // Separates one account block from the previous one; the first block sits
+        // under the panel description / disclosure divider, which already spaces it.
+        marginTop: spacing.sm,
+        marginBottom: spacing.xs / HALF
+      },
       row: {
         flexDirection: "row",
         alignItems: "center",
@@ -3733,8 +3777,39 @@ function resolveDemoCredentials(credentials) {
   }
   return { username, password };
 }
+
+// src/demo/resolveDemoAccounts.ts
+function resolveAccount(account) {
+  if (account === void 0 || account === null) {
+    return null;
+  }
+  const pair = resolveDemoCredentials(account);
+  if (pair === null) {
+    return null;
+  }
+  const label = typeof account.label === "string" ? account.label : "";
+  return { label, username: pair.username, password: pair.password };
+}
+function resolveAccountList(accounts) {
+  if (!Array.isArray(accounts)) {
+    return [];
+  }
+  return accounts.map(resolveAccount).filter((account) => account !== null);
+}
+function resolveDemoAccounts(credentials) {
+  if (credentials === void 0 || credentials === null) {
+    return [];
+  }
+  const fromList = resolveAccountList(credentials.publishedAccounts);
+  if (fromList.length > 0) {
+    return fromList;
+  }
+  const single = resolveDemoCredentials(credentials);
+  return single === null ? [] : [{ label: "", username: single.username, password: single.password }];
+}
 function DemoCredentialsHint({
   credentials,
+  accounts,
   variant = "disclosure" /* Disclosure */,
   theme: themeProp,
   labels: labelsProp,
@@ -3749,29 +3824,35 @@ function DemoCredentialsHint({
     () => ({ ...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]);
+  const resolvedAccounts = react.useMemo(
+    () => accounts !== void 0 && accounts.length > 0 ? resolveAccountList(accounts) : resolveDemoAccounts(credentials),
+    [accounts, credentials]
+  );
+  const makeUse = react.useCallback(
+    (account) => onUse === void 0 ? void 0 : () => onUse({ username: account.username, password: account.password }),
+    [onUse]
+  );
   const handleToggle = react.useCallback(() => {
     setExpanded((current) => !current);
   }, []);
-  if (resolved === null) {
+  if (resolvedAccounts.length === 0) {
     return null;
   }
-  const body = /* @__PURE__ */ jsxRuntime.jsx(
+  const isSingle = resolvedAccounts.length === 1;
+  const body = resolvedAccounts.map((account, index) => /* @__PURE__ */ jsxRuntime.jsx(
     DemoCredentialsBody,
     {
+      accountLabel: isSingle ? void 0 : account.label,
       authStyles,
-      credentials: resolved,
+      credentials: { username: account.username, password: account.password },
       labels,
       styles: styles3,
+      testIdIndex: isSingle ? void 0 : index,
       testIdPrefix,
-      onUse: onUse === void 0 ? void 0 : handleUse
-    }
-  );
+      onUse: makeUse(account)
+    },
+    `${account.username}-${String(index)}`
+  ));
   if (variant === "panel" /* Panel */) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
@@ -3927,7 +4008,11 @@ function useDemoCredentials({
   credentials,
   prefillOnMount = false
 } = {}) {
-  const resolved = react.useMemo(() => resolveDemoCredentials(credentials), [credentials]);
+  const accounts = react.useMemo(() => resolveDemoAccounts(credentials), [credentials]);
+  const resolved = react.useMemo(() => {
+    const first = accounts[0];
+    return first === void 0 ? null : { username: first.username, password: first.password };
+  }, [accounts]);
   const [filled, setFilled] = react.useState(
     prefillOnMount ? resolved : null
   );
@@ -3959,13 +4044,314 @@ function useDemoCredentials({
         prefillIntent
       },
       // `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 }
+      // `resolveDemoAccounts` itself, so it fails closed even when it is used
+      // standalone, without this hook. `accounts` is the already-resolved list the
+      // hint prefers — one labelled row per entry.
+      hintProps: { credentials, accounts, onUse: handleUse }
     }),
-    [filled, prefillNonce, prefillIntent, credentials, handleUse]
+    [filled, prefillNonce, prefillIntent, credentials, accounts, handleUse]
   );
 }
+
+// src/components/registerTestIds.ts
+var RegisterTestIds = {
+  form: "register-form",
+  firstNameInput: "register-first-name-input",
+  lastNameInput: "register-last-name-input",
+  usernameInput: "register-username-input",
+  emailInput: "register-email-input",
+  passwordInput: "register-password-input",
+  confirmPasswordInput: "register-confirm-password-input",
+  tenantNameInput: "register-tenant-name-input",
+  submitButton: "register-submit-button",
+  websiteInput: "register-website"
+};
+var FIELDS = [
+  { key: "firstName", testId: RegisterTestIds.firstNameInput, autoComplete: "name" },
+  { key: "lastName", testId: RegisterTestIds.lastNameInput, autoComplete: "name" },
+  { key: "username", testId: RegisterTestIds.usernameInput, autoComplete: "username" },
+  { key: "email", testId: RegisterTestIds.emailInput, autoComplete: "email", keyboardType: "email-address" },
+  { key: "password", testId: RegisterTestIds.passwordInput, secure: true },
+  { key: "confirmPassword", testId: RegisterTestIds.confirmPasswordInput, secure: true },
+  { key: "tenantName", testId: RegisterTestIds.tenantNameInput }
+];
+var OFF_SCREEN = -9999;
+var HONEYPOT_SIZE = 1;
+var HONEYPOT_PLACEHOLDER = "Website";
+var honeypotStyles = reactNative.StyleSheet.create({
+  honeypot: {
+    position: "absolute",
+    left: OFF_SCREEN,
+    top: OFF_SCREEN,
+    width: HONEYPOT_SIZE,
+    height: HONEYPOT_SIZE,
+    opacity: 0
+  }
+});
+function RegisterFormFields({
+  values,
+  labels,
+  disabled,
+  theme,
+  styles: styles3,
+  onChange,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    FIELDS.map((config) => {
+      const copy = labels.fields[config.key];
+      return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.label, children: copy.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.TextInput,
+          {
+            accessibilityHint: copy.hint,
+            accessibilityLabel: copy.inputLabel,
+            autoCapitalize: "none",
+            autoComplete: config.autoComplete,
+            autoCorrect: false,
+            editable: !disabled,
+            keyboardType: config.keyboardType ?? "default",
+            placeholder: copy.placeholder,
+            placeholderTextColor: theme.colors.textSecondary,
+            secureTextEntry: config.secure === true,
+            style: styles3.input,
+            testID: withTestIdPrefix(config.testId, testIdPrefix),
+            value: values[config.key],
+            onChangeText: (text) => onChange(config.key, text)
+          }
+        )
+      ] }, config.key);
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TextInput,
+      {
+        accessibilityElementsHidden: true,
+        autoComplete: "off",
+        focusable: false,
+        importantForAccessibility: "no-hide-descendants",
+        placeholder: HONEYPOT_PLACEHOLDER,
+        style: honeypotStyles.honeypot,
+        testID: withTestIdPrefix(RegisterTestIds.websiteInput, testIdPrefix),
+        value: values.website,
+        onChangeText: (text) => onChange("website", text)
+      }
+    )
+  ] });
+}
+
+// src/hooks/RegisterErrorCode.ts
+var RegisterErrorCode = /* @__PURE__ */ ((RegisterErrorCode2) => {
+  RegisterErrorCode2["MissingFields"] = "missingFields";
+  RegisterErrorCode2["InvalidEmail"] = "invalidEmail";
+  RegisterErrorCode2["WeakPassword"] = "weakPassword";
+  RegisterErrorCode2["PasswordMismatch"] = "passwordMismatch";
+  RegisterErrorCode2["UsernameTaken"] = "usernameTaken";
+  RegisterErrorCode2["EmailTaken"] = "emailTaken";
+  RegisterErrorCode2["RealmInvalid"] = "realmInvalid";
+  RegisterErrorCode2["ValidationFailed"] = "validationFailed";
+  RegisterErrorCode2["Failed"] = "failed";
+  RegisterErrorCode2["InFlight"] = "inFlight";
+  return RegisterErrorCode2;
+})(RegisterErrorCode || {});
+
+// src/hooks/registerErrors.ts
+var MIN_PASSWORD_LENGTH = 8;
+var EMAIL_REGEX4 = /^[^@\s]+@[^.\s]+\.\S+$/;
+var PASSWORD_LETTER_REGEX = /[a-zA-Z]/;
+var PASSWORD_DIGIT_REGEX = /\d/;
+var PASSWORD_SPECIAL_REGEX = /[^a-zA-Z0-9]/;
+var SERVER_ERROR_CODES = [
+  ["USERNAME_TAKEN", "usernameTaken" /* UsernameTaken */],
+  ["EMAIL_TAKEN", "emailTaken" /* EmailTaken */],
+  ["REALM_REQUIRED", "realmInvalid" /* RealmInvalid */],
+  ["REALM_INVALID", "realmInvalid" /* RealmInvalid */]
+];
+function isRegisterPasswordStrong(password) {
+  if (password.length < MIN_PASSWORD_LENGTH) {
+    return false;
+  }
+  if (!PASSWORD_LETTER_REGEX.test(password)) {
+    return false;
+  }
+  if (!PASSWORD_DIGIT_REGEX.test(password)) {
+    return false;
+  }
+  return PASSWORD_SPECIAL_REGEX.test(password);
+}
+function trimRegisterValues(values) {
+  return {
+    firstName: values.firstName.trim(),
+    lastName: values.lastName.trim(),
+    username: values.username.trim(),
+    email: values.email.trim(),
+    password: values.password,
+    confirmPassword: values.confirmPassword,
+    tenantName: values.tenantName.trim(),
+    website: values.website.trim()
+  };
+}
+function hasMissingRequiredField(values) {
+  const required = [
+    values.firstName,
+    values.lastName,
+    values.username,
+    values.email,
+    values.password,
+    values.tenantName
+  ];
+  return required.some((value) => value === "");
+}
+function validateRegisterValues(values, passwordPolicy) {
+  if (hasMissingRequiredField(values)) {
+    return "missingFields" /* MissingFields */;
+  }
+  if (!EMAIL_REGEX4.test(values.email)) {
+    return "invalidEmail" /* InvalidEmail */;
+  }
+  if (!passwordPolicy(values.password)) {
+    return "weakPassword" /* WeakPassword */;
+  }
+  if (values.password !== values.confirmPassword) {
+    return "passwordMismatch" /* PasswordMismatch */;
+  }
+  return null;
+}
+function messageOf(error) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return typeof error === "string" ? error : "";
+}
+function mapRegisterErrorCode(error) {
+  const message = messageOf(error);
+  if (message === "") {
+    return "failed" /* Failed */;
+  }
+  const match = SERVER_ERROR_CODES.find(([code]) => message.includes(code));
+  return match === void 0 ? "validationFailed" /* ValidationFailed */ : match[1];
+}
+
+// src/hooks/useRegisterForm.ts
+var EMPTY_VALUES = {
+  firstName: "",
+  lastName: "",
+  username: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+  tenantName: "",
+  website: ""
+};
+function toSubmitValues(values) {
+  return {
+    firstName: values.firstName,
+    lastName: values.lastName,
+    username: values.username,
+    email: values.email,
+    password: values.password,
+    tenantName: values.tenantName,
+    website: values.website
+  };
+}
+function useRegisterForm({
+  onSubmit,
+  passwordPolicy = isRegisterPasswordStrong
+}) {
+  const [state, setState] = react.useState(EMPTY_VALUES);
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const inFlight = react.useRef(false);
+  const setField = react.useCallback((field2, value) => {
+    setState((prev) => ({ ...prev, [field2]: value }));
+  }, []);
+  const submit = react.useCallback(async () => {
+    if (inFlight.current) {
+      return { ok: false, error: "inFlight" /* InFlight */ };
+    }
+    const trimmed = trimRegisterValues(state);
+    const refusal = trimmed.website === "" ? validateRegisterValues(trimmed, passwordPolicy) : "failed" /* Failed */;
+    if (refusal !== null) {
+      setError(refusal);
+      return { ok: false, error: refusal };
+    }
+    inFlight.current = true;
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      const result = await onSubmit(toSubmitValues(trimmed));
+      return { ok: true, result };
+    } catch (caught) {
+      const code = mapRegisterErrorCode(caught);
+      setError(code);
+      return { ok: false, error: code };
+    } finally {
+      inFlight.current = false;
+      setIsSubmitting(false);
+    }
+  }, [onSubmit, passwordPolicy, state]);
+  return { state, setField, submit, isSubmitting, error };
+}
+function RegisterForm({
+  onSubmit,
+  onSuccess,
+  onError,
+  onSubmitAttempt,
+  passwordPolicy,
+  labels: labelsProp,
+  theme: themeProp,
+  footer,
+  testIdPrefix
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = react.useMemo(
+    () => ({ ...DEFAULT_REGISTER_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const { state, setField, submit, isSubmitting } = useRegisterForm({ onSubmit, passwordPolicy });
+  const handlePress = react.useCallback(() => {
+    onSubmitAttempt?.();
+    void submit().then((outcome) => {
+      if (outcome.ok) {
+        onSuccess(outcome.result);
+      } else if (outcome.error !== "inFlight" /* InFlight */) {
+        onError?.(outcome.error);
+      }
+    });
+  }, [onError, onSubmitAttempt, onSuccess, submit]);
+  const buttonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.card, testID: withTestIdPrefix(RegisterTestIds.form, testIdPrefix), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.subtitle }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RegisterFormFields,
+      {
+        disabled: isSubmitting,
+        labels,
+        styles: styles3,
+        testIdPrefix,
+        theme,
+        values: state,
+        onChange: setField
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TouchableOpacity,
+      {
+        accessibilityHint: labels.submitHint,
+        accessibilityLabel: isSubmitting ? labels.submitting : labels.submit,
+        accessibilityRole: "button",
+        disabled: isSubmitting,
+        style: buttonStyle,
+        testID: withTestIdPrefix(RegisterTestIds.submitButton, testIdPrefix),
+        onPress: handlePress,
+        children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.primaryButtonText, children: labels.submit })
+      }
+    ),
+    footer
+  ] }) });
+}
 async function lazyFetchHttpClient(request) {
   const fetchImpl = typeof fetch === "function" ? fetch.bind(globalThis) : void 0;
   if (fetchImpl === void 0) {
@@ -4133,6 +4519,7 @@ 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_REGISTER_LABELS = DEFAULT_REGISTER_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;
@@ -4162,6 +4549,9 @@ exports.PinForm = PinForm;
 exports.PreferredMethodHint = PreferredMethodHint;
 exports.PreferredMethodSettingsCard = PreferredMethodSettingsCard;
 exports.PrefillIntent = PrefillIntent;
+exports.RegisterErrorCode = RegisterErrorCode;
+exports.RegisterForm = RegisterForm;
+exports.RegisterTestIds = RegisterTestIds;
 exports.ResetPasswordError = ResetPasswordError;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.cachePreferredMethod = cachePreferredMethod;
@@ -4173,12 +4563,16 @@ exports.createPreferencesClient = createPreferencesClient;
 exports.defaultAuthTheme = defaultAuthTheme;
 exports.isAllowedPinDigits = isAllowedPinDigits;
 exports.isPasswordValid = isPasswordValid;
+exports.isRegisterPasswordStrong = isRegisterPasswordStrong;
 exports.isValidForgotPasswordEmail = isValidForgotPasswordEmail;
+exports.mapRegisterErrorCode = mapRegisterErrorCode;
 exports.performBffLogout = performBffLogout;
 exports.readCachedPreferredMethod = readCachedPreferredMethod;
 exports.readPasskeyError = readPasskeyError;
 exports.readPasskeyRegistered = readPasskeyRegistered;
 exports.resolveAccessibleRoutes = resolveAccessibleRoutes;
+exports.resolveAccountList = resolveAccountList;
+exports.resolveDemoAccounts = resolveDemoAccounts;
 exports.resolveDemoCredentials = resolveDemoCredentials;
 exports.resolvePostLoginRoute = resolvePostLoginRoute;
 exports.startPasskeyLogin = startPasskeyLogin;
@@ -4199,6 +4593,7 @@ exports.useOtpLogin = useOtpLogin;
 exports.usePasskeyCeremony = usePasskeyCeremony;
 exports.usePinLogin = usePinLogin;
 exports.usePreferredMethodSetting = usePreferredMethodSetting;
+exports.useRegisterForm = useRegisterForm;
 exports.useResetPasswordForm = useResetPasswordForm;
 exports.validatePasswordPolicy = validatePasswordPolicy;
 exports.withTestIdPrefix = withTestIdPrefix;