From 175149ee0a7ed817291ba231e20ea46d94d23857 Mon Sep 17 00:00:00 2001 From: simeng-li Date: Thu, 24 Apr 2025 16:17:06 +0800 Subject: [PATCH 1/2] refactor(experience): add isSubmitting guard add isSubmitting guard --- .../src/components/IdentifierRegisterForm/index.tsx | 5 +++++ .../src/components/IdentifierSignInForm/index.tsx | 5 +++++ .../experience/src/components/PasswordSignInForm/index.tsx | 5 +++++ .../experience/src/components/SingleSignOnForm/index.tsx | 6 +++++- packages/experience/src/containers/SetPassword/Lite.tsx | 6 +++++- .../experience/src/containers/SetPassword/SetPassword.tsx | 6 +++++- .../src/pages/Continue/IdentifierProfileForm/index.tsx | 6 +++++- .../src/pages/ForgotPassword/ForgotPasswordForm/index.tsx | 6 +++++- .../src/pages/SignInPassword/PasswordForm/index.tsx | 6 +++++- 9 files changed, 45 insertions(+), 6 deletions(-) diff --git a/packages/experience/src/components/IdentifierRegisterForm/index.tsx b/packages/experience/src/components/IdentifierRegisterForm/index.tsx index 599e681ff8c..5ce7b032671 100644 --- a/packages/experience/src/components/IdentifierRegisterForm/index.tsx +++ b/packages/experience/src/components/IdentifierRegisterForm/index.tsx @@ -63,6 +63,10 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props) const onSubmitHandler = useCallback( async (event?: React.FormEvent) => { + 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, diff --git a/packages/experience/src/components/IdentifierSignInForm/index.tsx b/packages/experience/src/components/IdentifierSignInForm/index.tsx index 2246033a67d..9a5a697624f 100644 --- a/packages/experience/src/components/IdentifierSignInForm/index.tsx +++ b/packages/experience/src/components/IdentifierSignInForm/index.tsx @@ -70,6 +70,10 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) => const onSubmitHandler = useCallback( async (event?: React.FormEvent) => { + 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, diff --git a/packages/experience/src/components/PasswordSignInForm/index.tsx b/packages/experience/src/components/PasswordSignInForm/index.tsx index 8c541207f3f..6f08c12d607 100644 --- a/packages/experience/src/components/PasswordSignInForm/index.tsx +++ b/packages/experience/src/components/PasswordSignInForm/index.tsx @@ -63,6 +63,10 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => { const onSubmitHandler = useCallback( async (event?: React.FormEvent) => { + 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, diff --git a/packages/experience/src/components/SingleSignOnForm/index.tsx b/packages/experience/src/components/SingleSignOnForm/index.tsx index 56bc68343d2..2878c77a154 100644 --- a/packages/experience/src/components/SingleSignOnForm/index.tsx +++ b/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 ( diff --git a/packages/experience/src/containers/SetPassword/Lite.tsx b/packages/experience/src/containers/SetPassword/Lite.tsx index a0ab77abddf..aa1197a70fb 100644 --- a/packages/experience/src/containers/SetPassword/Lite.tsx +++ b/packages/experience/src/containers/SetPassword/Lite.tsx @@ -43,13 +43,17 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage const onSubmitHandler = useCallback( (event?: React.FormEvent) => { + if (isSubmitting) { + return; + } + clearErrorMessage?.(); void handleSubmit(async (data) => { await onSubmit(data.newPassword); })(event); }, - [clearErrorMessage, handleSubmit, onSubmit] + [clearErrorMessage, handleSubmit, isSubmitting, onSubmit] ); return ( diff --git a/packages/experience/src/containers/SetPassword/SetPassword.tsx b/packages/experience/src/containers/SetPassword/SetPassword.tsx index d668270d8e9..5a3ad107078 100644 --- a/packages/experience/src/containers/SetPassword/SetPassword.tsx +++ b/packages/experience/src/containers/SetPassword/SetPassword.tsx @@ -57,13 +57,17 @@ const SetPassword = ({ const onSubmitHandler = useCallback( (event?: React.FormEvent) => { + if (isSubmitting) { + return; + } + clearErrorMessage?.(); void handleSubmit(async (data) => { await onSubmit(data.newPassword); })(event); }, - [clearErrorMessage, handleSubmit, onSubmit] + [clearErrorMessage, handleSubmit, isSubmitting, onSubmit] ); return ( diff --git a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx index 39fdfa6627d..fd4250daeb2 100644 --- a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx +++ b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx @@ -62,6 +62,10 @@ const IdentifierProfileForm = ({ const onSubmitHandler = useCallback( (event?: React.FormEvent) => { + 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 ( diff --git a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx index a94bffc1ff8..af71a782613 100644 --- a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx +++ b/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) => { + 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 ( diff --git a/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx b/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx index ebd088306c0..1727b1a6622 100644 --- a/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx +++ b/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx @@ -68,6 +68,10 @@ const PasswordForm = ({ const onSubmitHandler = useCallback( async (event?: React.FormEvent) => { + 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 ( From 246fa997845357bb9b084fd05228a0ccbcba809b Mon Sep 17 00:00:00 2001 From: simeng-li Date: Thu, 24 Apr 2025 17:41:51 +0800 Subject: [PATCH 2/2] fix(experience): fix unit test fix unit test --- .../src/components/IdentifierRegisterForm/index.test.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/experience/src/components/IdentifierRegisterForm/index.test.tsx b/packages/experience/src/components/IdentifierRegisterForm/index.test.tsx index 328e6c71b09..3446649d5fa 100644 --- a/packages/experience/src/components/IdentifierRegisterForm/index.test.tsx +++ b/packages/experience/src/components/IdentifierRegisterForm/index.test.tsx @@ -161,7 +161,7 @@ describe('', () => { 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('', () => { expect(registerWithUsername).not.toBeCalled(); }); + const agreeButton = getByText('Agree'); act(() => { - fireEvent.click(termsButton); - }); - - act(() => { - fireEvent.submit(submitButton); + fireEvent.click(agreeButton); }); await waitFor(() => {