From 1e0a88ffaa1ffb715763fd07b1307d883b9295fe Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Wed, 14 Aug 2024 14:51:36 -0400
Subject: [PATCH 1/7] 10353-bug: add debounce and deactivate button for new
 user creation

---
 .../business/useCases/auth/signUpUserInteractor.ts   |  4 ++++
 .../CreatePetitionerAccountForm.tsx                  | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/web-api/src/business/useCases/auth/signUpUserInteractor.ts b/web-api/src/business/useCases/auth/signUpUserInteractor.ts
index 87091c8894b..d546e44a9a1 100644
--- a/web-api/src/business/useCases/auth/signUpUserInteractor.ts
+++ b/web-api/src/business/useCases/auth/signUpUserInteractor.ts
@@ -28,6 +28,10 @@ export const signUpUserInteractor = async (
       email: user.email,
     });
 
+  // Note that this check can fail to catch two (nearly) simultaneous requests,
+  // and Cognito can therefore create accounts with the same email.
+  // (See https://stackoverflow.com/questions/50730759/user-pool-allows-two-users-with-same-email-despite-configuration)
+  // In order to get around it, we need to delete duplicate accounts after they are created.
   if (existingAccount) {
     const accountUnconfirmed =
       existingAccount.accountStatus === UserStatusType.UNCONFIRMED;
diff --git a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
index c9971de0789..736cb38d45d 100644
--- a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
+++ b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@web-client/ustc-ui/Button/Button';
 import { RequirementsText } from '@web-client/views/CreatePetitionerAccount/RequirementsText';
 import { connect } from '@web-client/presenter/shared.cerebral';
+import { debounce } from 'lodash';
 import { sequences, state } from '@web-client/presenter/app.cerebral';
 import React, { useState } from 'react';
 
@@ -30,6 +31,12 @@ export const CreatePetitionerAccountForm = connect(
   }) => {
     const [inFocusEmail, setInFocusEmail] = useState(true);
     const [inFocusName, setInFocusName] = useState(true);
+    const [submitDisabled, setSubmitDisabled] = useState(false);
+
+    const submitFunction = debounce(
+      () => submitCreatePetitionerAccountFormSequence(),
+      500,
+    );
 
     return (
       <>
@@ -42,7 +49,8 @@ export const CreatePetitionerAccountForm = connect(
             <form
               onSubmit={e => {
                 e.preventDefault();
-                submitCreatePetitionerAccountFormSequence();
+                setSubmitDisabled(true);
+                submitFunction();
               }}
             >
               <label className="usa-label" htmlFor="email">
@@ -205,7 +213,7 @@ export const CreatePetitionerAccountForm = connect(
               <Button
                 className="usa-button margin-top-2"
                 data-testid="petitioner-account-creation-submit-button"
-                disabled={!createAccountHelper.formIsValid}
+                disabled={!createAccountHelper.formIsValid || submitDisabled}
                 id="submit-button"
               >
                 Continue

From ad9665e693451586f1f8690e02a2da83a1e1af60 Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Fri, 16 Aug 2024 11:04:48 -0400
Subject: [PATCH 2/7] 10353-bug: add test, and reenable button after form
 submission in case of error

---
 .../petitioner-account-creation.cy.ts         | 28 ++++++++++++++++++-
 .../CreatePetitionerAccountForm.tsx           |  8 +++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts b/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
index 23ebe8ce469..ab2a45aa443 100644
--- a/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
+++ b/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
@@ -87,11 +87,37 @@ describe('Petitioner Account Creation', () => {
   });
 
   describe('Create Petitioner Account and login', () => {
-    const TEST_EMAIL = `cypress_test_account+success_${GUID}@example.com`;
     const TEST_NAME = 'Cypress Test';
     const TEST_PASSWORD = generatePassword(VALID_PASSWORD_CONFIG);
 
+    it('should prevent multiple submissions', () => {
+      const TEST_EMAIL = `cypress_test_account+no_multiple_submissions_${GUID}@example.com`;
+      cy.visit('/create-account/petitioner');
+      cy.get('[data-testid="petitioner-account-creation-email"]').type(
+        TEST_EMAIL,
+      );
+      cy.get('[data-testid="petitioner-account-creation-name"]').type(
+        TEST_NAME,
+      );
+      cy.get('[data-testid="petitioner-account-creation-password"]').type(
+        TEST_PASSWORD,
+      );
+      cy.get(
+        '[data-testid="petitioner-account-creation-confirm-password"]',
+      ).type(TEST_PASSWORD);
+      cy.intercept('POST', '/auth/account/create').as('accountCreationRequest');
+
+      // eslint-disable-next-line cypress/unsafe-to-chain-command
+      cy.get('[data-testid="petitioner-account-creation-submit-button"]')
+        .click({ force: true })
+        .click({ force: true });
+
+      cy.wait('@accountCreationRequest');
+      cy.get('@accountCreationRequest.all').should('have.length', 1);
+    });
+
     it('should create an account and verify it using the verification link, then login and create an eletronic case', () => {
+      const TEST_EMAIL = `cypress_test_account+success_${GUID}@example.com`;
       createAPetitioner({
         email: TEST_EMAIL,
         name: TEST_NAME,
diff --git a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
index 736cb38d45d..941703125ee 100644
--- a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
+++ b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
@@ -33,10 +33,10 @@ export const CreatePetitionerAccountForm = connect(
     const [inFocusName, setInFocusName] = useState(true);
     const [submitDisabled, setSubmitDisabled] = useState(false);
 
-    const submitFunction = debounce(
-      () => submitCreatePetitionerAccountFormSequence(),
-      500,
-    );
+    const submitFunction = debounce(() => {
+      submitCreatePetitionerAccountFormSequence();
+      setSubmitDisabled(false);
+    }, 500);
 
     return (
       <>

From 20340d279208da55ffbef1488af4c03d7b84ca87 Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Fri, 16 Aug 2024 15:31:40 -0400
Subject: [PATCH 3/7] 10353-bug: fix comment

---
 web-api/src/business/useCases/auth/signUpUserInteractor.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web-api/src/business/useCases/auth/signUpUserInteractor.ts b/web-api/src/business/useCases/auth/signUpUserInteractor.ts
index d546e44a9a1..1faf9cd14f1 100644
--- a/web-api/src/business/useCases/auth/signUpUserInteractor.ts
+++ b/web-api/src/business/useCases/auth/signUpUserInteractor.ts
@@ -31,7 +31,8 @@ export const signUpUserInteractor = async (
   // Note that this check can fail to catch two (nearly) simultaneous requests,
   // and Cognito can therefore create accounts with the same email.
   // (See https://stackoverflow.com/questions/50730759/user-pool-allows-two-users-with-same-email-despite-configuration)
-  // In order to get around it, we need to delete duplicate accounts after they are created.
+  // On the frontend, we can prevent multiple submissions; if we wanted to enforce non-duplicates on the back-end,
+  // we would probably need to run an asynchronous task to delete duplicate records.
   if (existingAccount) {
     const accountUnconfirmed =
       existingAccount.accountStatus === UserStatusType.UNCONFIRMED;

From ed6e425183e31982057bef346443b02e067cf081 Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Fri, 16 Aug 2024 15:41:57 -0400
Subject: [PATCH 4/7] 10353-bug: update comment again

---
 web-api/src/business/useCases/auth/signUpUserInteractor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-api/src/business/useCases/auth/signUpUserInteractor.ts b/web-api/src/business/useCases/auth/signUpUserInteractor.ts
index 1faf9cd14f1..ab22dda09b1 100644
--- a/web-api/src/business/useCases/auth/signUpUserInteractor.ts
+++ b/web-api/src/business/useCases/auth/signUpUserInteractor.ts
@@ -31,7 +31,7 @@ export const signUpUserInteractor = async (
   // Note that this check can fail to catch two (nearly) simultaneous requests,
   // and Cognito can therefore create accounts with the same email.
   // (See https://stackoverflow.com/questions/50730759/user-pool-allows-two-users-with-same-email-despite-configuration)
-  // On the frontend, we can prevent multiple submissions; if we wanted to enforce non-duplicates on the back-end,
+  // On the frontend, we can prevent multiple submissions; if we wanted to enforce non-duplicates on the backend,
   // we would probably need to run an asynchronous task to delete duplicate records.
   if (existingAccount) {
     const accountUnconfirmed =

From 027d771c6736cd3f930e3bb53f35af2cfed47f47 Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Tue, 20 Aug 2024 17:26:30 -0400
Subject: [PATCH 5/7] 10353-bug: fix condition to re-enable button

---
 .../petitioner-account-creation.cy.ts            |  2 +-
 .../CreatePetitionerAccountForm.tsx              | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts b/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
index ab2a45aa443..b94df3a7e23 100644
--- a/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
+++ b/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
@@ -116,7 +116,7 @@ describe('Petitioner Account Creation', () => {
       cy.get('@accountCreationRequest.all').should('have.length', 1);
     });
 
-    it('should create an account and verify it using the verification link, then login and create an eletronic case', () => {
+    it('should create an account and verify it using the verification link, then login and create an electronic case', () => {
       const TEST_EMAIL = `cypress_test_account+success_${GUID}@example.com`;
       createAPetitioner({
         email: TEST_EMAIL,
diff --git a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
index 941703125ee..b9fccff7117 100644
--- a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
+++ b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
@@ -3,10 +3,12 @@ import { RequirementsText } from '@web-client/views/CreatePetitionerAccount/Requ
 import { connect } from '@web-client/presenter/shared.cerebral';
 import { debounce } from 'lodash';
 import { sequences, state } from '@web-client/presenter/app.cerebral';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 export const CreatePetitionerAccountForm = connect(
   {
+    alertError: state.alertError,
+    alertWarning: state.alertWarning,
     confirmPassword: state.form.confirmPassword,
     createAccountHelper: state.createAccountHelper,
     navigateToLoginSequence: sequences.navigateToLoginSequence,
@@ -19,6 +21,8 @@ export const CreatePetitionerAccountForm = connect(
     updateFormValueSequence: sequences.updateFormValueSequence,
   },
   ({
+    alertError,
+    alertWarning,
     confirmPassword,
     createAccountHelper,
     navigateToLoginSequence,
@@ -33,9 +37,15 @@ export const CreatePetitionerAccountForm = connect(
     const [inFocusName, setInFocusName] = useState(true);
     const [submitDisabled, setSubmitDisabled] = useState(false);
 
+    // Re-enabled submit button if submission was unsuccessful
+    useEffect(() => {
+      if (alertError || alertWarning) {
+        setSubmitDisabled(false);
+      }
+    }, [alertError, alertWarning]);
+
     const submitFunction = debounce(() => {
       submitCreatePetitionerAccountFormSequence();
-      setSubmitDisabled(false);
     }, 500);
 
     return (
@@ -234,5 +244,3 @@ export const CreatePetitionerAccountForm = connect(
     );
   },
 );
-
-CreatePetitionerAccountForm.displayName = 'CreatePetitionerAccountForm';

From 0d364210c9afb9b483ba5812aeace1c71d209468 Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Tue, 20 Aug 2024 17:33:20 -0400
Subject: [PATCH 6/7] 10353-test: add line that somehow got deleted

---
 .../CreatePetitionerAccount/CreatePetitionerAccountForm.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
index b9fccff7117..14ddd373dd8 100644
--- a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
+++ b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
@@ -244,3 +244,5 @@ export const CreatePetitionerAccountForm = connect(
     );
   },
 );
+
+CreatePetitionerAccountForm.displayName = 'CreatePetitionerAccountForm';

From 94675228e360988595632aab3ab743db9d4862e7 Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Thu, 22 Aug 2024 14:30:17 -0400
Subject: [PATCH 7/7] 10353-bug: pull out debounce time into a constant

---
 .../CreatePetitionerAccount/CreatePetitionerAccountForm.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
index 14ddd373dd8..f3b47a340ab 100644
--- a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
+++ b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
@@ -5,6 +5,8 @@ import { debounce } from 'lodash';
 import { sequences, state } from '@web-client/presenter/app.cerebral';
 import React, { useEffect, useState } from 'react';
 
+const DEBOUNCE_TIME_MS = 500;
+
 export const CreatePetitionerAccountForm = connect(
   {
     alertError: state.alertError,
@@ -46,7 +48,7 @@ export const CreatePetitionerAccountForm = connect(
 
     const submitFunction = debounce(() => {
       submitCreatePetitionerAccountFormSequence();
-    }, 500);
+    }, DEBOUNCE_TIME_MS);
 
     return (
       <>