@dloizides/auth-web 1.2.1 → 1.3.0

package/dist/index.mjs

@@ -18,6 +18,7 @@ var DEFAULT_LOGIN_LABELS = {
   submit: "Sign in",
   submitting: "Signing in...",
   forgotPassword: "Forgot password?",
+  signUp: "Create an account",
   invalidCredentials: "Incorrect username or password.",
   missingFields: "Enter both your username and password."
 };
@@ -32,6 +33,11 @@ var DEFAULT_FORGOT_PASSWORD_LABELS = {
   networkError: "Something went wrong. Please try again.",
   invalidEmail: "Enter a valid email address."
 };
+var DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS = {
+  ...DEFAULT_FORGOT_PASSWORD_LABELS,
+  cancel: "Cancel",
+  close: "Close"
+};
 var DEFAULT_OTP_LABELS = {
   requestTitle: "Sign in with a code",
   requestDescription: "Enter your email and we will send you a one-time code.",
@@ -85,10 +91,13 @@ var AuthTestIds = {
   loginPasswordInput: "auth-login-password",
   loginSubmitButton: "auth-login-submit",
   loginForgotLink: "auth-login-forgot-link",
+  loginSignUpLink: "auth-login-signup-link",
   loginError: "auth-login-error",
   forgotPasswordForm: "auth-forgot-form",
   forgotPasswordEmailInput: "auth-forgot-email",
   forgotPasswordSubmitButton: "auth-forgot-submit",
+  forgotPasswordCancelButton: "auth-forgot-cancel",
+  forgotPasswordCloseButton: "auth-forgot-close",
   forgotPasswordError: "auth-forgot-error",
   forgotPasswordSuccess: "auth-forgot-success",
   resetPasswordForm: "auth-reset-form",
@@ -358,6 +367,7 @@ function LoginForm({
   labels: labelsProp,
   onSuccess,
   onForgotPassword,
+  onSignUp,
   testIdPrefix
 }) {
   const theme = useAuthTheme(themeProp);
@@ -464,7 +474,20 @@ function LoginForm({
         onPress: handleSubmit,
         children: isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.submit })
       }
-    )
+    ),
+    onSignUp !== void 0 ? /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        accessibilityHint: labels.signUp,
+        accessibilityLabel: labels.signUp,
+        accessibilityRole: "link",
+        disabled: isSubmitting,
+        style: styles.fieldGroup,
+        testID: withTestIdPrefix(AuthTestIds.loginSignUpLink, testIdPrefix),
+        onPress: onSignUp,
+        children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: labels.signUp })
+      }
+    ) : null
   ] }) });
 }
 function useBffForgotPassword(options) {
@@ -595,6 +618,182 @@ function ForgotPasswordForm({
     }
   ) });
 }
+var EMAIL_REGEX2 = /^[^@\s]+@[^.\s]+\.[^\s]+$/;
+function isValidForgotPasswordEmail(value) {
+  return EMAIL_REGEX2.test(value.trim());
+}
+function useForgotPasswordSubmit({
+  client,
+  resetUrlTemplate,
+  onSuccess
+}) {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [hasNetworkError, setHasNetworkError] = useState(false);
+  const canSubmit = isValidForgotPasswordEmail(email) && !isSubmitting;
+  const submit = useCallback(() => {
+    const target = email.trim();
+    if (!isValidForgotPasswordEmail(target) || isSubmitting) {
+      return;
+    }
+    setHasNetworkError(false);
+    setIsSubmitting(true);
+    const request = { email: target, resetUrlTemplate };
+    client.forgotPassword(request).then(() => {
+      setSubmitted(true);
+      onSuccess?.();
+    }).catch(() => setHasNetworkError(true)).finally(() => setIsSubmitting(false));
+  }, [client, email, isSubmitting, resetUrlTemplate, onSuccess]);
+  const reset = useCallback(() => {
+    setEmail("");
+    setSubmitted(false);
+    setIsSubmitting(false);
+    setHasNetworkError(false);
+  }, []);
+  return {
+    email,
+    setEmail,
+    submitted,
+    isSubmitting,
+    hasNetworkError,
+    canSubmit,
+    submit,
+    reset
+  };
+}
+var SECONDARY_BORDER_WIDTH = 1;
+function useModalStyles(theme) {
+  return useMemo(
+    () => StyleSheet.create({
+      body: { padding: theme.spacing.md },
+      actions: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        marginTop: theme.spacing.md,
+        gap: theme.spacing.sm
+      },
+      secondaryButton: {
+        borderRadius: theme.radii.input,
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md,
+        borderWidth: SECONDARY_BORDER_WIDTH,
+        borderColor: theme.colors.border
+      },
+      secondaryButtonText: {
+        fontSize: theme.typography.body,
+        fontWeight: "600",
+        color: theme.colors.text
+      }
+    }),
+    [theme]
+  );
+}
+function ForgotPasswordFields({
+  client,
+  theme: themeProp,
+  labels: labelsProp,
+  resetUrlTemplate,
+  visible = true,
+  onSuccess,
+  onCancel,
+  onClose,
+  testIdPrefix
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles = useAuthStyles(theme);
+  const modalStyles = useModalStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const form = useForgotPasswordSubmit({ client, resetUrlTemplate, onSuccess });
+  const { reset } = form;
+  useEffect(() => {
+    if (!visible) {
+      reset();
+    }
+  }, [visible, reset]);
+  const submitButtonStyle = form.canSubmit ? styles.primaryButton : [styles.primaryButton, styles.primaryButtonDisabled];
+  const handleCancel = () => {
+    form.reset();
+    onCancel?.();
+  };
+  const handleClose = () => {
+    form.reset();
+    onClose?.();
+  };
+  if (form.submitted) {
+    return /* @__PURE__ */ jsxs(View, { style: modalStyles.body, testID: withTestIdPrefix(AuthTestIds.forgotPasswordForm, testIdPrefix), children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.successText, testID: withTestIdPrefix(AuthTestIds.forgotPasswordSuccess, testIdPrefix), children: labels.successMessage }),
+      onClose !== void 0 ? /* @__PURE__ */ jsx(View, { style: modalStyles.actions, children: /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: labels.close,
+          accessibilityLabel: labels.close,
+          accessibilityRole: "button",
+          style: styles.primaryButton,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordCloseButton, testIdPrefix),
+          onPress: handleClose,
+          children: /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.close })
+        }
+      ) }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: modalStyles.body, testID: withTestIdPrefix(AuthTestIds.forgotPasswordForm, testIdPrefix), children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: labels.description }),
+    /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.emailLabel }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          accessibilityHint: labels.emailPlaceholder,
+          accessibilityLabel: labels.emailLabel,
+          autoCapitalize: "none",
+          autoCorrect: false,
+          editable: !form.isSubmitting,
+          keyboardType: "email-address",
+          placeholder: labels.emailPlaceholder,
+          placeholderTextColor: theme.colors.textSecondary,
+          style: styles.input,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordEmailInput, testIdPrefix),
+          value: form.email,
+          onChangeText: form.setEmail
+        }
+      )
+    ] }),
+    form.hasNetworkError ? /* @__PURE__ */ jsx(Text, { style: styles.errorText, testID: withTestIdPrefix(AuthTestIds.forgotPasswordError, testIdPrefix), children: labels.networkError }) : null,
+    /* @__PURE__ */ jsxs(View, { style: modalStyles.actions, children: [
+      onCancel !== void 0 ? /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: labels.cancel,
+          accessibilityLabel: labels.cancel,
+          accessibilityRole: "button",
+          disabled: form.isSubmitting,
+          style: modalStyles.secondaryButton,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordCancelButton, testIdPrefix),
+          onPress: handleCancel,
+          children: /* @__PURE__ */ jsx(Text, { style: modalStyles.secondaryButtonText, children: labels.cancel })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: labels.submit,
+          accessibilityLabel: form.isSubmitting ? labels.submitting : labels.submit,
+          accessibilityRole: "button",
+          disabled: !form.canSubmit,
+          style: submitButtonStyle,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordSubmitButton, testIdPrefix),
+          onPress: form.submit,
+          children: form.isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.submit })
+        }
+      )
+    ] })
+  ] });
+}
 
 // src/hooks/ResetPasswordError.ts
 var ResetPasswordError = /* @__PURE__ */ ((ResetPasswordError2) => {
@@ -1096,9 +1295,9 @@ function useOtpLogin(options) {
     ]
   );
 }
-var EMAIL_REGEX2 = /^[^@\s]+@[^.\s]+\.[^\s]+$/;
+var EMAIL_REGEX3 = /^[^@\s]+@[^.\s]+\.[^\s]+$/;
 function isValidEmail2(value) {
-  return EMAIL_REGEX2.test(value);
+  return EMAIL_REGEX3.test(value);
 }
 function transportErrorFor(step, error, labels) {
   if (error === null) {
@@ -1368,6 +1567,6 @@ function resolvePostLoginRoute(user, table) {
   return table.fallback ?? null;
 }
 
-export { AuthTestIds, AuthThemeProvider, BffAuthStatus, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PIN_LABELS, DEFAULT_RESET_PASSWORD_LABELS, ForgotPasswordForm, LoginForm, OtpForm, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasswordPolicyError, PinForm, ResetPasswordError, ResetPasswordForm, collectUserRoles, createBffAuthClient, defaultAuthTheme, isPasswordValid, resolvePostLoginRoute, useAuthTheme, useBffAuth, useBffForgotPassword, useBffResetPassword, useOtpLogin, usePinLogin, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
+export { AuthTestIds, AuthThemeProvider, BffAuthStatus, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PIN_LABELS, DEFAULT_RESET_PASSWORD_LABELS, ForgotPasswordFields, ForgotPasswordForm, LoginForm, OtpForm, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasswordPolicyError, PinForm, ResetPasswordError, ResetPasswordForm, collectUserRoles, createBffAuthClient, defaultAuthTheme, isPasswordValid, isValidForgotPasswordEmail, resolvePostLoginRoute, useAuthTheme, useBffAuth, useBffForgotPassword, useBffResetPassword, useForgotPasswordSubmit, useOtpLogin, usePinLogin, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map