Add modal between DA submit and form submit button, unit test that looks for modal trigger and modal data, fix DA unit tests that query and trigger the original form since we now have 2 forms on the page

src/registrar/templates/application_form.html

@@ -85,16 +85,28 @@
               class="usa-button usa-button--outline"
             >Save and return to manage your domains</button>
             {% else %}
-            <button
+            <a
-              type="submit"
+              href="#toggle-submit-domain-request"
               class="usa-button usa-button--big dotgov-button--green"
-            >Submit your domain request</button>
+              aria-controls="toggle-submit-domain-request"
+              data-open-modal
+              >Submit your domain request</a
+            >
             {% endif %}
           </div>
 {% endblock %}
 
         </form>
 
+        <div
+          class="usa-modal"
+          id="toggle-submit-domain-request"
+          aria-labelledby="Are you sure you want to continue?"
+          aria-describedby="Your DNSSEC records will be deleted from the registry."
+        >
+            {% include 'includes/modal.html' with modal_heading="You are about to submit a domain request for yourcity.gov." modal_description="Once you submit this request, you won’t be able to make further edits until it’s reviewed by our staff. You’ll only be able to withdraw your request." modal_button=modal_button|safe %}
+        </div>
+
 {% block after_form_content %}{% endblock %}
 
       </main>

src/registrar/tests/test_copy_names_from_contacts_to_users.py

@@ -18,8 +18,8 @@ class TestDataUpdates(TestCase):
         self.user2 = User.objects.create(username="user2")
         self.user3 = User.objects.create(username="user3")
         self.user4 = User.objects.create(username="user4")
-        # The last user created triggers the creation of a contact and attaches itself to it. @Neil wth is going on?
+        # The last user created triggers the creation of a contact and attaches itself to it. See signals.
-        # This bs_user defuses that situation so we can test the code.
+        # This bs_user defuses that situation (unwanted user-contact pairing) so we can test the code.
         self.bs_user = User.objects.create()
 
         self.contact1 = Contact.objects.create(

src/registrar/tests/test_views.py

@@ -141,7 +141,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # 302 redirect to the first form
         page = self.app.get(reverse("application:")).follow()
         # submitting should get back the same page if the required field is empty
-        result = page.form.submit()
+        result = page.forms[0].submit()
         self.assertIn("What kind of U.S.-based government organization do you represent?", result)
 
     def test_application_multiple_applications_exist(self):
@@ -178,11 +178,11 @@ class DomainApplicationTests(TestWithUser, WebTest):
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
 
         # ---- TYPE PAGE  ----
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = "federal"
         # test next button and validate data
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_form.submit()
         # should see results in db
         application = DomainApplication.objects.get()  # there's only one
         self.assertEqual(application.organization_type, "federal")
@@ -197,7 +197,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
 
         federal_page = type_result.follow()
-        federal_form = federal_page.form
+        federal_form = federal_page.forms[0]
         federal_form["organization_federal-federal_type"] = "executive"
 
         # test next button
@@ -216,7 +216,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         org_contact_page = federal_result.follow()
-        org_contact_form = org_contact_page.form
+        org_contact_form = org_contact_page.forms[0]
         # federal agency so we have to fill in federal_agency
         org_contact_form["organization_contact-federal_agency"] = "General Services Administration"
         org_contact_form["organization_contact-organization_name"] = "Testorg"
@@ -249,7 +249,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         ao_page = org_contact_result.follow()
-        ao_form = ao_page.form
+        ao_form = ao_page.forms[0]
         ao_form["authorizing_official-first_name"] = "Testy ATO"
         ao_form["authorizing_official-last_name"] = "Tester ATO"
         ao_form["authorizing_official-title"] = "Chief Tester"
@@ -276,7 +276,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         current_sites_page = ao_result.follow()
-        current_sites_form = current_sites_page.form
+        current_sites_form = current_sites_page.forms[0]
         current_sites_form["current_sites-0-website"] = "www.city.com"
 
         # test next button
@@ -298,7 +298,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         dotgov_page = current_sites_result.follow()
-        dotgov_form = dotgov_page.form
+        dotgov_form = dotgov_page.forms[0]
         dotgov_form["dotgov_domain-requested_domain"] = "city"
         dotgov_form["dotgov_domain-0-alternative_domain"] = "city1"
 
@@ -318,7 +318,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         purpose_page = dotgov_result.follow()
-        purpose_form = purpose_page.form
+        purpose_form = purpose_page.forms[0]
         purpose_form["purpose-purpose"] = "For all kinds of things."
 
         # test next button
@@ -337,7 +337,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         your_contact_page = purpose_result.follow()
-        your_contact_form = your_contact_page.form
+        your_contact_form = your_contact_page.forms[0]
 
         your_contact_form["your_contact-first_name"] = "Testy you"
         your_contact_form["your_contact-last_name"] = "Tester you"
@@ -365,7 +365,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         other_contacts_page = your_contact_result.follow()
-        other_contacts_form = other_contacts_page.form
+        other_contacts_form = other_contacts_page.forms[0]
 
         other_contacts_form["other_contacts-0-first_name"] = "Testy2"
         other_contacts_form["other_contacts-0-last_name"] = "Tester2"
@@ -398,7 +398,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         anything_else_page = other_contacts_result.follow()
-        anything_else_form = anything_else_page.form
+        anything_else_form = anything_else_page.forms[0]
 
         anything_else_form["anything_else-anything_else"] = "Nothing else."
 
@@ -418,7 +418,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         requirements_page = anything_else_result.follow()
-        requirements_form = requirements_page.form
+        requirements_form = requirements_page.forms[0]
 
         requirements_form["requirements-is_policy_acknowledged"] = True
 
@@ -438,7 +438,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         review_page = requirements_result.follow()
-        review_form = review_page.form
+        review_form = review_page.forms[0]
 
         # Review page contains all the previously entered data
         # Let's make sure the long org name is displayed
@@ -540,7 +540,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # the conditional step titles shouldn't appear initially
         self.assertNotContains(type_page, self.TITLES["organization_federal"])
         self.assertNotContains(type_page, self.TITLES["organization_election"])
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = "federal"
 
         # set the session ID before .submit()
@@ -561,9 +561,9 @@ class DomainApplicationTests(TestWithUser, WebTest):
 
         # continuing on in the flow we need to see top-level agency on the
         # contact page
-        federal_page.form["organization_federal-federal_type"] = "executive"
+        federal_page.forms[0]["organization_federal-federal_type"] = "executive"
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        federal_result = federal_page.form.submit()
+        federal_result = federal_page.forms[0].submit()
         # the post request should return a redirect to the contact
         # question
         self.assertEqual(federal_result.status_code, 302)
@@ -586,7 +586,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # the conditional step titles shouldn't appear initially
         self.assertNotContains(type_page, self.TITLES["organization_federal"])
         self.assertNotContains(type_page, self.TITLES["organization_election"])
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = "county"
 
         # set the session ID before .submit()
@@ -606,9 +606,9 @@ class DomainApplicationTests(TestWithUser, WebTest):
 
         # continuing on in the flow we need to NOT see top-level agency on the
         # contact page
-        election_page.form["organization_election-is_election_board"] = "True"
+        election_page.forms[0]["organization_election-is_election_board"] = "True"
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        election_result = election_page.form.submit()
+        election_result = election_page.forms[0].submit()
         # the post request should return a redirect to the contact
         # question
         self.assertEqual(election_result.status_code, 302)
@@ -626,10 +626,10 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # and then setting the cookie on each request.
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
 
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = "federal"
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_form.submit()
 
         # follow first redirect
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
@@ -654,15 +654,15 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # and then setting the cookie on each request.
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
 
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = DomainApplication.OrganizationChoices.INTERSTATE
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_form.submit()
 
         # follow first redirect
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         contact_page = type_result.follow()
-        org_contact_form = contact_page.form
+        org_contact_form = contact_page.forms[0]
 
         self.assertNotIn("federal_agency", org_contact_form.fields)
 
@@ -690,10 +690,10 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # and then setting the cookie on each request.
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
 
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = DomainApplication.OrganizationChoices.SPECIAL_DISTRICT
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_page.forms[0].submit()
         # follow first redirect
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         contact_page = type_result.follow()
@@ -710,7 +710,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
 
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        result = contacts_page.form.submit()
+        result = contacts_page.forms[0].submit()
         # follow first redirect
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         no_contacts_page = result.follow()
@@ -727,10 +727,10 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # and then setting the cookie on each request.
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
 
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = DomainApplication.OrganizationChoices.INTERSTATE
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_form.submit()
         # follow first redirect
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         contact_page = type_result.follow()
@@ -745,10 +745,10 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # of a "session". We are going to do it manually, saving the session ID here
         # and then setting the cookie on each request.
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = DomainApplication.OrganizationChoices.TRIBAL
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_form.submit()
         # the tribal government page comes immediately afterwards
         self.assertIn("/tribal_government", type_result.headers["Location"])
         # follow first redirect
@@ -767,18 +767,18 @@ class DomainApplicationTests(TestWithUser, WebTest):
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
 
         # ---- TYPE PAGE  ----
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = "federal"
 
         # test next button
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_form.submit()
 
         # ---- FEDERAL BRANCH PAGE  ----
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         federal_page = type_result.follow()
-        federal_form = federal_page.form
+        federal_form = federal_page.forms[0]
         federal_form["organization_federal-federal_type"] = "executive"
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         federal_result = federal_form.submit()
@@ -787,7 +787,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         org_contact_page = federal_result.follow()
-        org_contact_form = org_contact_page.form
+        org_contact_form = org_contact_page.forms[0]
         # federal agency so we have to fill in federal_agency
         org_contact_form["organization_contact-federal_agency"] = "General Services Administration"
         org_contact_form["organization_contact-organization_name"] = "Testorg"
@@ -828,18 +828,18 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # and then setting the cookie on each request.
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
         # ---- TYPE PAGE  ----
-        type_form = type_page.form
+        type_form = type_page.forms[0]
         type_form["organization_type-organization_type"] = "federal"
 
         # test next button
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        type_result = type_page.form.submit()
+        type_result = type_form.submit()
 
         # ---- FEDERAL BRANCH PAGE  ----
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         federal_page = type_result.follow()
-        federal_form = federal_page.form
+        federal_form = federal_page.forms[0]
         federal_form["organization_federal-federal_type"] = "executive"
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         federal_result = federal_form.submit()
@@ -848,7 +848,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         org_contact_page = federal_result.follow()
-        org_contact_form = org_contact_page.form
+        org_contact_form = org_contact_page.forms[0]
         # federal agency so we have to fill in federal_agency
         org_contact_form["organization_contact-federal_agency"] = "General Services Administration"
         org_contact_form["organization_contact-organization_name"] = "Testorg"
@@ -870,7 +870,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         ao_page = org_contact_result.follow()
-        ao_form = ao_page.form
+        ao_form = ao_page.forms[0]
         ao_form["authorizing_official-first_name"] = "Testy ATO"
         ao_form["authorizing_official-last_name"] = "Tester ATO"
         ao_form["authorizing_official-title"] = "Chief Tester"
@@ -884,7 +884,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         # Follow the redirect to the next form page
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         current_sites_page = ao_result.follow()
-        current_sites_form = current_sites_page.form
+        current_sites_form = current_sites_page.forms[0]
         current_sites_form["current_sites-0-website"] = "www.city.com"
 
         # test saving the page
@@ -917,7 +917,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         current_sites_page = self.app.get(reverse("application:current_sites"))
         session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
         # fill in the form field
-        current_sites_form = current_sites_page.form
+        current_sites_form = current_sites_page.forms[0]
         self.assertIn("current_sites-0-website", current_sites_form.fields)
         self.assertNotIn("current_sites-1-website", current_sites_form.fields)
         current_sites_form["current_sites-0-website"] = "https://example.com"
@@ -926,7 +926,7 @@ class DomainApplicationTests(TestWithUser, WebTest):
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
         current_sites_result = current_sites_form.submit("submit_button", value="save")
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        current_sites_form = current_sites_result.follow().form
+        current_sites_form = current_sites_result.follow().forms[0]
 
         # verify that there are two form fields
         value = current_sites_form["current_sites-0-website"].value
@@ -1086,6 +1086,16 @@ class DomainApplicationTests(TestWithUser, WebTest):
         detail_page = home_page.click("Manage", index=0)
         self.assertContains(detail_page, "Federal: an agency of the U.S. government")
 
+    def test_submit_modal(self):
+        """When user clicks on submit your domain request, a modal pops up."""
+        completed_application()
+        review_page = self.app.get(reverse("application:review"))
+        # We can't test the modal itself as it relies on JS for init and triggering,
+        # but we can test for the existence of its trigger:
+        self.assertContains(review_page, "toggle-submit-domain-request")
+        # And the existence of the modal's data parked and ready for the js init:
+        self.assertContains(review_page, "You are about to submit a domain request")
+
 
 class TestWithDomainPermissions(TestWithUser):
     def setUp(self):

src/registrar/views/application.py

@@ -321,12 +321,19 @@ class ApplicationWizard(ApplicationWizardPermissionView, TemplateView):
 
     def get_context_data(self):
         """Define context for access on all wizard pages."""
+        # Create HTML for the submit button:
+        # The on-page submit button is just a trigger for the modal;
+        # the submit button we're adding to context will get passed to
+        # the modal and is the button that triggers the actual domain
+        # application submission (via post -> goto_next_step -> done).
+        modal_button = '<button type="submit" ' 'class="usa-button" ' ">Submit request</button>"
         return {
             "form_titles": self.TITLES,
             "steps": self.steps,
             # Add information about which steps should be unlocked
             "visited": self.storage.get("step_history", []),
             "is_federal": self.application.is_federal(),
+            "modal_button": modal_button,
         }
 
     def get_step_list(self) -> list: