Merge branch 'main' into ag/3255-domain-reports-take-three

src/registrar/assets/src/js/getgov/domain-dnssec.js

@@ -0,0 +1,15 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainDNSSEC() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_dnssec_page = document.getElementById("domain-dnssec");
+        if (domain_dnssec_page) {
+            const button = document.getElementById("disable-dnssec-button");
+            if (button) {
+                button.addEventListener("click", function () {
+                    submitForm("disable-dnssec-form");
+                });
+            }
+        }
+    });
+}

src/registrar/assets/src/js/getgov/domain-dsdata.js

@@ -0,0 +1,27 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainDSData() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_dsdata_page = document.getElementById("domain-dsdata");
+        if (domain_dsdata_page) {
+            const override_button = document.getElementById("disable-override-click-button");
+            const cancel_button = document.getElementById("btn-cancel-click-button");
+            const cancel_close_button = document.getElementById("btn-cancel-click-close-button");
+            if (override_button) {
+                override_button.addEventListener("click", function () {
+                    submitForm("disable-override-click-form");
+                });
+            }
+            if (cancel_button) {
+                cancel_button.addEventListener("click", function () {
+                    submitForm("btn-cancel-click-form");
+                });
+            } 
+            if (cancel_close_button) {
+                cancel_close_button.addEventListener("click", function () {
+                    submitForm("btn-cancel-click-form");
+                });
+            } 
+        }
+    });
+}

src/registrar/assets/src/js/getgov/domain-managers.js

@@ -0,0 +1,20 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainManagersPage() {
+    document.addEventListener('DOMContentLoaded', function() {
+        let domain_managers_page = document.getElementById("domain-managers");
+        if (domain_managers_page) {
+            // Add event listeners for all buttons matching user-delete-button-{NUMBER}
+            const deleteButtons = document.querySelectorAll('[id^="user-delete-button-"]'); // Select buttons with ID starting with "user-delete-button-"
+            deleteButtons.forEach((button) => {
+                const buttonId = button.id; // e.g., "user-delete-button-1"
+                const number = buttonId.split('-').pop(); // Extract the NUMBER part
+                const formId = `user-delete-form-${number}`; // Generate the corresponding form ID
+
+                button.addEventListener("click", function () {
+                    submitForm(formId); // Pass the form ID to submitForm
+                });
+            });
+        } 
+    });
+}

src/registrar/assets/src/js/getgov/domain-request-form.js

@@ -0,0 +1,12 @@
+import { submitForm } from './helpers.js';
+
+export function initDomainRequestForm() {
+    document.addEventListener('DOMContentLoaded', function() {
+        const button = document.getElementById("domain-request-form-submit-button");
+        if (button) {
+            button.addEventListener("click", function () {
+                submitForm("submit-domain-request-form");
+            });
+        } 
+    });
+}

src/registrar/assets/src/js/getgov/form-errors.js

@@ -0,0 +1,19 @@
+export function initFormErrorHandling() {
+  document.addEventListener('DOMContentLoaded', function() {
+    const errorSummary = document.getElementById('form-errors');
+    const firstErrorField = document.querySelector('.usa-input--error');
+    if (firstErrorField) {
+      // Scroll to the first field in error
+      firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+      // Add focus to the first field in error
+      setTimeout(() => {
+        firstErrorField.focus();
+      }, 50);
+    } else if (errorSummary) {
+      // Scroll to the error summary
+      errorSummary.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+  });
+}

src/registrar/assets/src/js/getgov/helpers.js

@@ -75,3 +75,16 @@ export function debounce(handler, cooldown=600) {
 export function getCsrfToken() {
     return document.querySelector('input[name="csrfmiddlewaretoken"]').value;
 }
+
+/**
+ * Helper function to submit a form
+ * @param {} form_id - the id of the form to be submitted
+ */
+export function submitForm(form_id) {
+    let form = document.getElementById(form_id);
+    if (form) {
+        form.submit();
+    } else {
+        console.error("Form '" + form_id + "' not found.");
+    }
+}

src/registrar/assets/src/js/getgov/main.js

@@ -11,6 +11,11 @@ import { initMembersTable } from './table-members.js';
 import { initMemberDomainsTable } from './table-member-domains.js';
 import { initEditMemberDomainsTable } from './table-edit-member-domains.js';
 import { initPortfolioNewMemberPageToggle, initAddNewMemberPageListeners, initPortfolioMemberPageRadio } from './portfolio-member-page.js';
+import { initDomainRequestForm } from './domain-request-form.js';
+import { initDomainManagersPage } from './domain-managers.js';
+import { initDomainDSData } from './domain-dsdata.js';
+import { initDomainDNSSEC } from './domain-dnssec.js';
+import { initFormErrorHandling } from './form-errors.js';
 
 initDomainValidators();
 
@@ -36,6 +41,13 @@ initMembersTable();
 initMemberDomainsTable();
 initEditMemberDomainsTable();
 
+initDomainRequestForm();
+initDomainManagersPage();
+initDomainDSData();
+initDomainDNSSEC();
+
+initFormErrorHandling();
+
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
 initPortfolioNewMemberPageToggle();

src/registrar/assets/src/js/getgov/table-base.js

@@ -495,7 +495,8 @@ export class BaseTable {
   // Add event listeners to table headers for sorting
   initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
-      header.addEventListener('click', () => {
+      header.addEventListener('click', event => {
+        let button = header.querySelector('.usa-table__header__button')
         const sortBy = header.getAttribute('data-sortable');
         let order = 'asc';
         // sort order will be ascending, unless the currently sorted column is ascending, and the user
@@ -505,6 +506,13 @@ export class BaseTable {
         }
         // load the results with the updated sort
         this.loadTable(1, sortBy, order);
+        // If the click occurs outside of the button, need to simulate a button click in order
+        // for USWDS listener on the button to execute.
+        // Check first to see if click occurs outside of the button
+        if (!button.contains(event.target)) {
+            // Simulate a button click
+            button.click();
+        }
       });
     });
   }

src/registrar/assets/src/sass/_theme/_tables.scss

@@ -88,8 +88,14 @@ th {
   }
 
   @include at-media(tablet-lg) {
-    th[data-sortable]:not([aria-sort]) .usa-table__header__button {
+    th[data-sortable] .usa-table__header__button {
       right: auto;
+
+      &[aria-sort=ascending],
+      &[aria-sort=descending],
+      &:not([aria-sort]) {
+        right: auto;
+      }
     }
   }
 }

src/registrar/templates/domain_add_user.html

@@ -37,6 +37,9 @@
     </nav>
     {% endif %}
   {% endblock breadcrumb %}
+
+  {% include "includes/form_errors.html" with form=form %}
+
   <h1>Add a domain manager</h1>
 {% if has_organization_feature_flag %}
   <p>

src/registrar/templates/domain_dnssec.html

@@ -27,7 +27,7 @@
   {% endif %}
   {% endblock breadcrumb %}
 
-  <h1>DNSSEC</h1>
+  <h1 id="domain-dnssec">DNSSEC</h1>
 
   <p>DNSSEC, or DNS Security Extensions, is an additional security layer to protect your website. Enabling DNSSEC ensures that when someone visits your domain, they can be certain that it’s connecting to the correct server, preventing potential hijacking or tampering with your domain's records.</p>
 
@@ -78,7 +78,11 @@ <h2>DNSSEC is enabled on your domain</h2>
     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="Are you sure you want to disable DNSSEC?" modal_button=modal_button|safe %}
+      {% include 'includes/modal.html' with modal_heading="Are you sure you want to disable DNSSEC?" modal_button_id="disable-dnssec-button" modal_button_text="Confirm" modal_button_class="usa-button--secondary" %}
   </div>
+  <form method="post" id="disable-dnssec-form">
+    {% csrf_token %}
+    <input type="hidden" name="disable_dnssec" value="1">
+  </form>
 
 {% endblock %}  {# domain_content #}

src/registrar/templates/domain_dsdata.html

@@ -42,7 +42,7 @@
     {% include "includes/form_errors.html" with form=form %}
   {% endfor %}
 
-  <h1>DS data</h1>
+  <h1 id="domain-dsdata">DS data</h1>
 
   <p>In order to enable DNSSEC, you must first configure it with your DNS hosting service.</p>
 
@@ -141,7 +141,15 @@ <h2 class="margin-top-0">DS data record {{forloop.counter}}</h2>
     aria-describedby="Your DNSSEC records will be deleted from the registry."
     data-force-action
   >
-      {% include 'includes/modal.html' with cancel_button_resets_ds_form=True modal_heading="Warning: You are about to remove all DS records on your domain." modal_description="To fully disable DNSSEC: In addition to removing your DS records here, you’ll need to delete the DS records at your DNS host. To avoid causing your domain to appear offline, you should wait to delete your DS records at your DNS host until the Time to Live (TTL) expires. This is often less than 24 hours, but confirm with your provider." modal_button=modal_button|safe %}
+      {% include 'includes/modal.html' with cancel_button_resets_ds_form=True modal_heading="Warning: You are about to remove all DS records on your domain." modal_description="To fully disable DNSSEC: In addition to removing your DS records here, you’ll need to delete the DS records at your DNS host. To avoid causing your domain to appear offline, you should wait to delete your DS records at your DNS host until the Time to Live (TTL) expires. This is often less than 24 hours, but confirm with your provider." modal_button_id="disable-override-click-button" modal_button_text="Remove all DS data" modal_button_class="usa-button--secondary" %}
   </div>
+  <form method="post" id="disable-override-click-form">
+    {% csrf_token %}
+    <input type="hidden" name="disable-override-click" value="1">
+  </form>
+  <form method="post" id="btn-cancel-click-form">
+    {% csrf_token %}
+    <input type="hidden" name="btn-cancel-click" value="1">
+  </form>
 
 {% endblock %}  {# domain_content #}

src/registrar/templates/domain_request_form.html

@@ -130,9 +130,17 @@ <h1> {{form_titles|get_item:steps.current}} </h1>
           aria-describedby="Are you sure you want to submit a domain request?"
           data-force-action
         >
-            {% include 'includes/modal.html' with is_domain_request_form=True review_form_is_complete=review_form_is_complete modal_heading=modal_heading|safe modal_description=modal_description|safe modal_button=modal_button|safe %}
+          {% if review_form_is_complete %}
+            {% include 'includes/modal.html' with modal_heading="You are about to submit a domain request for " domain_name_modal=requested_domain__name modal_description="Once you submit this request, you won’t be able to edit it until we review it. You’ll only be able to withdraw your request." modal_button_id="domain-request-form-submit-button" modal_button_text="Submit request" %}
+          {% else %}
+            {% include 'includes/modal.html' with modal_heading="Your request form is incomplete" modal_description='This request cannot be submitted yet. Return to the request and visit the steps that are marked as "incomplete."' modal_button_text="Return to request" cancel_button_only=True %}
+          {% endif %}
         </div>
 
+        <form method="post" id="submit-domain-request-form">
+          {% csrf_token %}
+        </form>
+
 {% block after_form_content %}{% endblock %}
 
       </main>

src/registrar/templates/domain_users.html

@@ -49,7 +49,7 @@ <h1>Domain managers</h1>
   </ul>
 
   {% if domain_manager_roles %}
-  <section class="section-outlined">
+  <section class="section-outlined" id="domain-managers">
   <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
     <h2 class> Domain managers </h2>
     <caption class="sr-only">Domain managers</caption>
@@ -89,12 +89,13 @@ <h2 class> Domain managers </h2>
             aria-describedby="You will be removed from this domain"
             data-force-action
             >
-              <form method="POST" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
-                {% with domain_name=domain.name|force_escape %}
-                  {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove yourself as a domain manager?" modal_description="You will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button=modal_button_self|safe %}
-                {% endwith %}
-              </form>
+              {% with domain_name=domain.name|force_escape counter_str=forloop.counter|stringformat:"s" %}
+                {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove yourself as a domain manager?" modal_description="You will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button_id="user-delete-button-"|add:counter_str|safe modal_button_text="Yes, remove myself" modal_button_class="usa-button--secondary" %}
+              {% endwith %}
             </div>
+            <form method="POST" id="user-delete-form-{{ forloop.counter }}" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}" >
+              {% csrf_token %}
+            </form>
           {% else %}
             <div
               class="usa-modal"
@@ -103,12 +104,13 @@ <h2 class> Domain managers </h2>
               aria-describedby="{{ item.permission.user.email }} will be removed"
               data-force-action
             >
-              <form method="POST" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
-                {% with email=item.permission.user.email|default:item.permission.user|force_escape domain_name=domain.name|force_escape %}
-                  {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove " heading_value=email|add:"?" modal_description="<strong>"|add:email|add:"</strong> will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button=modal_button|safe %}
-                {% endwith %}
-              </form>
+              {% with email=item.permission.user.email|default:item.permission.user|force_escape domain_name=domain.name|force_escape counter_str=forloop.counter|stringformat:"s" %}
+                {% include 'includes/modal.html' with modal_heading="Are you sure you want to remove " heading_value=email|add:"?" modal_description="<strong>"|add:email|add:"</strong> will no longer be able to manage the domain <strong>"|add:domain_name|add:"</strong>."|safe modal_button_id="user-delete-button-"|add:counter_str|safe modal_button_text="Yes, remove domain manager" modal_button_class="usa-button--secondary" %}
+              {% endwith %}
             </div>
+            <form method="POST" id="user-delete-form-{{ forloop.counter }}" action="{% url "domain-user-delete" pk=domain.id user_pk=item.permission.user.id %}">
+              {% csrf_token %}
+            </form>
           {% endif %}
         {% else %}
           <input 

src/registrar/templates/includes/form_errors.html

@@ -1,6 +1,7 @@
 {% if form.errors %}
+  <div id="form-errors">
   {% for error in form.non_field_errors %}
-    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2">
+    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
     <div class="usa-alert__body">
     {{ error|escape }}
     </div>
@@ -14,5 +15,6 @@
       </div>
     </div>
   {% endfor %}
-{% endfor %}
+  {% endfor %}
+  </div>
 {% endif %}