@dloizides/auth-web 1.17.0 → 1.18.1

package/dist/index.js

@@ -3,6 +3,7 @@
 var reactNative = require('react-native');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var uiButtons = require('@dloizides/ui-buttons');
 var reactQuery = require('@tanstack/react-query');
 var authClient = require('@dloizides/auth-client');
 
@@ -331,6 +332,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",
@@ -754,7 +776,6 @@ function LoginForm({
     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 }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.subtitle }),
@@ -818,19 +839,18 @@ function LoginForm({
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.linkText, children: labels.forgotPassword })
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.TouchableOpacity,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.fieldGroup, children: /* @__PURE__ */ jsxRuntime.jsx(
+      uiButtons.Button,
       {
+        fullWidth: true,
         accessibilityHint: labels.submit,
         accessibilityLabel: isSubmitting ? labels.submitting : labels.submit,
-        accessibilityRole: "button",
-        disabled: isSubmitting,
-        style: submitButtonStyle,
+        label: labels.submit,
+        loading: isSubmitting,
         testID: withTestIdPrefix(AuthTestIds.loginSubmitButton, testIdPrefix),
-        onPress: handleSubmit,
-        children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.primaryButtonText, children: labels.submit })
+        onPress: handleSubmit
       }
-    ),
+    ) }),
     onSignUp !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.TouchableOpacity,
       {
@@ -4031,6 +4051,327 @@ function useDemoCredentials({
     [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,
+        accessibilityRole: "none",
+        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/routeRegisterOutcome.ts
+function routeRegisterOutcome(outcome, handlers) {
+  if (outcome.ok) {
+    handlers.onSuccess(outcome.result);
+    return;
+  }
+  if (outcome.error !== "inFlight" /* InFlight */) {
+    handlers.onError?.(outcome.error);
+  }
+}
+
+// src/hooks/registerErrors.ts
+var MIN_PASSWORD_LENGTH = 8;
+var WHITESPACE_REGEX = /\s/;
+var EMAIL_PART_COUNT = 2;
+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 isEmailShaped(email) {
+  if (WHITESPACE_REGEX.test(email)) {
+    return false;
+  }
+  const parts = email.split("@");
+  if (parts.length !== EMAIL_PART_COUNT) {
+    return false;
+  }
+  const [local = "", domain = ""] = parts;
+  return local !== "" && domain.slice(1, -1).includes(".");
+}
+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 (!isEmailShaped(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,
+  onSubmitAttempt
+}) {
+  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 */ };
+    }
+    onSubmitAttempt?.();
+    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, onSubmitAttempt, 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,
+    onSubmitAttempt,
+    passwordPolicy
+  });
+  const handlePress = react.useCallback(async () => {
+    routeRegisterOutcome(await submit(), { onSuccess, onError });
+  }, [onError, onSuccess, submit]);
+  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.View, { style: styles3.fieldGroup, children: /* @__PURE__ */ jsxRuntime.jsx(
+      uiButtons.Button,
+      {
+        fullWidth: true,
+        accessibilityHint: labels.submitHint,
+        accessibilityLabel: isSubmitting ? labels.submitting : labels.submit,
+        label: labels.submit,
+        loading: isSubmitting,
+        testID: withTestIdPrefix(RegisterTestIds.submitButton, testIdPrefix),
+        onPress: handlePress
+      }
+    ) }),
+    footer
+  ] }) });
+}
 async function lazyFetchHttpClient(request) {
   const fetchImpl = typeof fetch === "function" ? fetch.bind(globalThis) : void 0;
   if (fetchImpl === void 0) {
@@ -4198,6 +4539,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;
@@ -4227,6 +4569,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;
@@ -4238,6 +4583,7 @@ exports.createPreferencesClient = createPreferencesClient;
 exports.defaultAuthTheme = defaultAuthTheme;
 exports.isAllowedPinDigits = isAllowedPinDigits;
 exports.isPasswordValid = isPasswordValid;
+exports.isRegisterPasswordStrong = isRegisterPasswordStrong;
 exports.isValidForgotPasswordEmail = isValidForgotPasswordEmail;
 exports.performBffLogout = performBffLogout;
 exports.readCachedPreferredMethod = readCachedPreferredMethod;
@@ -4266,6 +4612,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;