refactor(experience): add isSubmitting guard

packages/experience/src/components/IdentifierRegisterForm/index.test.tsx

@@ -161,7 +161,7 @@ describe('<IdentifierRegisterForm />', () => {
     test('submit properly', async () => {
       const { getByText, queryByText, container } = renderForm();
       const submitButton = getByText('action.create_account');
-      const termsButton = getByText('description.agree_with_terms');
+
       const usernameInput = container.querySelector('input[name=identifier]');
 
       assert(usernameInput, new Error('username input not found'));
@@ -176,12 +176,9 @@ describe('<IdentifierRegisterForm />', () => {
         expect(registerWithUsername).not.toBeCalled();
       });
 
+      const agreeButton = getByText('Agree');
       act(() => {
-        fireEvent.click(termsButton);
-      });
-
-      act(() => {
-        fireEvent.submit(submitButton);
+        fireEvent.click(agreeButton);
       });
 
       await waitFor(() => {

packages/experience/src/components/IdentifierRegisterForm/index.tsx

@@ -63,6 +63,10 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
 
   const onSubmitHandler = useCallback(
     async (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage();
 
       void handleSubmit(async ({ identifier: { type, value } }) => {
@@ -92,6 +96,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
       agreeToTermsPolicy,
       clearErrorMessage,
       handleSubmit,
+      isSubmitting,
       navigateToSingleSignOn,
       onSubmit,
       setIdentifierInputValue,

packages/experience/src/components/IdentifierSignInForm/index.tsx

@@ -70,6 +70,10 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
 
   const onSubmitHandler = useCallback(
     async (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage();
 
       void handleSubmit(async ({ identifier: { type, value } }) => {
@@ -96,6 +100,7 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
       agreeToTermsPolicy,
       clearErrorMessage,
       handleSubmit,
+      isSubmitting,
       navigateToSingleSignOn,
       onSubmit,
       setIdentifierInputValue,

packages/experience/src/components/PasswordSignInForm/index.tsx

@@ -63,6 +63,10 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
 
   const onSubmitHandler = useCallback(
     async (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage();
 
       await handleSubmit(async ({ identifier: { type, value }, password }) => {
@@ -92,6 +96,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
       agreeToTermsPolicy,
       clearErrorMessage,
       handleSubmit,
+      isSubmitting,
       navigateToSingleSignOn,
       onSubmit,
       setIdentifierInputValue,

packages/experience/src/components/SingleSignOnForm/index.tsx

@@ -55,6 +55,10 @@ const SingleSignOnForm = ({ isTermsAndPrivacyCheckboxVisible }: Props) => {
        */
       event?.preventDefault();
 
+      if (isSubmitting) {
+        return;
+      }
+
       /**
        * Check if the user has agreed to the terms and privacy policy when the policy is set to `Manual`.
        */
@@ -66,7 +70,7 @@ const SingleSignOnForm = ({ isTermsAndPrivacyCheckboxVisible }: Props) => {
 
       await handleSubmit(async ({ identifier: { value } }) => onSubmit(value, true))(event);
     },
-    [agreeToTermsPolicy, clearErrorMessage, handleSubmit, onSubmit, termsValidation]
+    [agreeToTermsPolicy, clearErrorMessage, handleSubmit, isSubmitting, onSubmit, termsValidation]
   );
 
   return (

packages/experience/src/containers/SetPassword/Lite.tsx

@@ -43,13 +43,17 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
 
   const onSubmitHandler = useCallback(
     (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage?.();
 
       void handleSubmit(async (data) => {
         await onSubmit(data.newPassword);
       })(event);
     },
-    [clearErrorMessage, handleSubmit, onSubmit]
+    [clearErrorMessage, handleSubmit, isSubmitting, onSubmit]
   );
 
   return (

packages/experience/src/containers/SetPassword/SetPassword.tsx

@@ -57,13 +57,17 @@ const SetPassword = ({
 
   const onSubmitHandler = useCallback(
     (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage?.();
 
       void handleSubmit(async (data) => {
         await onSubmit(data.newPassword);
       })(event);
     },
-    [clearErrorMessage, handleSubmit, onSubmit]
+    [clearErrorMessage, handleSubmit, isSubmitting, onSubmit]
   );
 
   return (

packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx

@@ -62,6 +62,10 @@ const IdentifierProfileForm = ({
 
   const onSubmitHandler = useCallback(
     (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage?.();
 
       void handleSubmit(async ({ identifier: { type, value } }) => {
@@ -72,7 +76,7 @@ const IdentifierProfileForm = ({
         await onSubmit?.(type, value);
       })(event);
     },
-    [clearErrorMessage, handleSubmit, onSubmit]
+    [clearErrorMessage, handleSubmit, isSubmitting, onSubmit]
   );
 
   return (

packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx

@@ -59,6 +59,10 @@ const ForgotPasswordForm = ({ className, autoFocus, defaultValue = '', enabledTy
 
   const onSubmitHandler = useCallback(
     async (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage();
 
       void handleSubmit(async ({ identifier: { type, value } }) => {
@@ -72,7 +76,7 @@ const ForgotPasswordForm = ({ className, autoFocus, defaultValue = '', enabledTy
         await onSubmit({ identifier: type, value });
       })(event);
     },
-    [clearErrorMessage, handleSubmit, onSubmit, setForgotPasswordIdentifierInputValue]
+    [clearErrorMessage, handleSubmit, isSubmitting, onSubmit, setForgotPasswordIdentifierInputValue]
   );
 
   return (

packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx

@@ -68,6 +68,10 @@ const PasswordForm = ({
 
   const onSubmitHandler = useCallback(
     async (event?: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmitting) {
+        return;
+      }
+
       clearErrorMessage();
 
       void handleSubmit(async ({ identifier: { type, value }, password }) => {
@@ -83,7 +87,7 @@ const PasswordForm = ({
         });
       })(event);
     },
-    [clearErrorMessage, handleSubmit, onSubmit, setIdentifierInputValue]
+    [clearErrorMessage, handleSubmit, isSubmitting, onSubmit, setIdentifierInputValue]
   );
 
   return (