@dloizides/auth-web 1.18.1 → 1.18.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 1.18.3
+
+- `useLoginSubmit` has an in-flight ref guard, like `useRegisterForm`. A focused field stays read-only (not
+  disabled) during a pending login and RN-web still fires `onSubmitEditing` there, so a second Enter sent a
+  second `/bff/login`. jsdom tests now cover a pending submit + a second non-repeat Enter for both forms,
+  a valid register submitted by Enter, and an IME-composition Enter not submitting.
+
+## 1.18.2
+
+**Enter in a text field submits `<RegisterForm>` and `<LoginForm>`.**
+
+- Every visible input now has `onSubmitEditing` wired to the same guarded submit as the button, plus
+  `returnKeyType="go"`. RN-web renders no `<form>`, so Enter in a field never submitted in any prior
+  version (no `onSubmitEditing` anywhere in auth-web history); only a focused button did.
+- An OS key-repeat of a held Enter in a field is ignored (`useSubmitOnEnter`), so a held Enter is still
+  one attempt / one login. jsdom tests cover Enter in each of the seven register fields and both login fields.
+
 ## 1.18.1
 
 **Review fixes for the 1.18.0 registration extraction.**

package/dist/index.js

@@ -618,7 +618,11 @@ function useLoginSubmit({
   invalidCredentialsLabel
 }) {
   const [errorText, setErrorText] = react.useState(null);
+  const inFlight = react.useRef(false);
   const runLogin = react.useCallback(async () => {
+    if (inFlight.current) {
+      return;
+    }
     setErrorText(null);
     const trimmedUsername = username.trim();
     const hasMissingField = trimmedUsername.length === 0 || password.length === 0;
@@ -626,11 +630,14 @@ function useLoginSubmit({
       setErrorText(missingFieldsLabel);
       return;
     }
+    inFlight.current = true;
     try {
       const user = await login({ username: trimmedUsername, password });
       onSuccess(user);
     } catch {
       setErrorText(invalidCredentialsLabel);
+    } finally {
+      inFlight.current = false;
     }
   }, [username, password, login, onSuccess, missingFieldsLabel, invalidCredentialsLabel]);
   const handleSubmit = react.useCallback(() => {
@@ -638,6 +645,21 @@ function useLoginSubmit({
   }, [runLogin]);
   return { errorText, handleSubmit };
 }
+function isKeyRepeat(event) {
+  const native = event?.nativeEvent;
+  return native?.repeat === true;
+}
+function useSubmitOnEnter(submit) {
+  return react.useCallback(
+    (event) => {
+      if (isKeyRepeat(event)) {
+        return;
+      }
+      submit();
+    },
+    [submit]
+  );
+}
 var BffAuthStatus = /* @__PURE__ */ ((BffAuthStatus2) => {
   BffAuthStatus2["Loading"] = "loading";
   BffAuthStatus2["Authenticated"] = "authenticated";
@@ -776,6 +798,7 @@ function LoginForm({
     missingFieldsLabel: labels.missingFields,
     invalidCredentialsLabel: labels.invalidCredentials
   });
+  const handleSubmitEditing = useSubmitOnEnter(handleSubmit);
   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 }),
@@ -791,10 +814,12 @@ function LoginForm({
           editable: !isSubmitting,
           placeholder: labels.usernamePlaceholder,
           placeholderTextColor: theme.colors.textSecondary,
+          returnKeyType: "go",
           style: styles3.input,
           testID: withTestIdPrefix(AuthTestIds.loginUsernameInput, testIdPrefix),
           value: username,
-          onChangeText: setUsername
+          onChangeText: setUsername,
+          onSubmitEditing: handleSubmitEditing
         }
       )
     ] }),
@@ -811,10 +836,12 @@ function LoginForm({
           editable: !isSubmitting,
           placeholder: labels.passwordPlaceholder,
           placeholderTextColor: theme.colors.textSecondary,
+          returnKeyType: "go",
           style: styles3.input,
           testID: withTestIdPrefix(AuthTestIds.loginPasswordInput, testIdPrefix),
           value: password,
-          onChangeText: setPassword
+          onChangeText: setPassword,
+          onSubmitEditing: handleSubmitEditing
         }
       )
     ] }),
@@ -4094,6 +4121,7 @@ function RegisterFormFields({
   theme,
   styles: styles3,
   onChange,
+  onSubmitEditing,
   testIdPrefix
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -4113,11 +4141,13 @@ function RegisterFormFields({
             keyboardType: config.keyboardType ?? "default",
             placeholder: copy.placeholder,
             placeholderTextColor: theme.colors.textSecondary,
+            returnKeyType: "go",
             secureTextEntry: config.secure === true,
             style: styles3.input,
             testID: withTestIdPrefix(config.testId, testIdPrefix),
             value: values[config.key],
-            onChangeText: (text) => onChange(config.key, text)
+            onChangeText: (text) => onChange(config.key, text),
+            onSubmitEditing
           }
         )
       ] }, config.key);
@@ -4342,6 +4372,7 @@ function RegisterForm({
   const handlePress = react.useCallback(async () => {
     routeRegisterOutcome(await submit(), { onSuccess, onError });
   }, [onError, onSuccess, submit]);
+  const handleSubmitEditing = useSubmitOnEnter(handlePress);
   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 }),
@@ -4354,7 +4385,8 @@ function RegisterForm({
         testIdPrefix,
         theme,
         values: state,
-        onChange: setField
+        onChange: setField,
+        onSubmitEditing: handleSubmitEditing
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.fieldGroup, children: /* @__PURE__ */ jsxRuntime.jsx(