modal logic complete. Needs css updates and need to finish backend logic

src/registrar/assets/js/get-gov.js

@@ -2914,8 +2914,10 @@ document.addEventListener('DOMContentLoaded', function() {
       }
 
       // Show the modal
-      modal = document.getElementById('invite-member-modal');
+      let modalTrigger = document.querySelector("#invite_member_trigger");
-      showElement(modal);
+        if (modalTrigger) {
+          modalTrigger.click()
+        }
   }
 
   document.getElementById("confirm_new_member_submit").addEventListener("click", function() {
@@ -2923,29 +2925,13 @@ document.addEventListener('DOMContentLoaded', function() {
     document.getElementById("add_member_form").submit();
   });
 
-  // Attach event listener to the Invite Member button to open the modal
-  document.getElementById("invite_member_button").addEventListener('click', function() {
-    // Upon confirmation, submit the form
-    console.log("clicked")
-    openAddMemberConfirmationModal();
-  });
-
   document.getElementById("add_member_form").addEventListener("submit", function(event) {
     event.preventDefault(); // Prevents the form from submitting
-    //validateForm();
-    
-    // Check if the form is valid
-    // if (this.checkValidity()) {
-    //      openAddMemberConfirmationModal(); // Show validation errors if any
-    //      return;
-    // }
-    // else {
-    //   this.submit();
-    // }
-
 
     const formData = new FormData(this);
 
+    // Check if the form is valid and trigger events
+    // (like a confirmation modal) accordingly
     fetch(this.action, {
         method: "POST",
         body: formData,
@@ -2957,9 +2943,10 @@ document.addEventListener('DOMContentLoaded', function() {
     .then(response => response.json())
     .then(data => {
         if (data.is_valid) {
-            // If the form is valid, show the confirmation modal
+            // If the form is valid, show the confirmation modal before submitting
             openAddMemberConfirmationModal();
         } else {
+            // If the form is not valid, trigger error messages by firing a submit event
             this.submit();
         }
     });

src/registrar/templates/portfolio_members_add_new.html

@@ -95,8 +95,12 @@
 <!-- Basic access form -->
 <div id="new-member-basic-permissions" class="margin-top-2">
     <h2>Basic member permissions</h2>
-    <p>Member permissions available for basic-level access</p>
+    <p>Member permissions available for basic-level acccess.</p>
-    {% input_with_errors form.basic_org_domain_request_permissions %}
+
+    <h3 class="margin-bottom-0">Organization domain requests</h3>
+    {% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %}
+      {% input_with_errors form.basic_org_domain_request_permissions %}
+    {% endwith %}
 </div>
 
 <!-- Submit/cancel buttons -->
@@ -110,13 +114,12 @@
   >Cancel
 </a>
   <a
-    id="invite_member_button"
+    id="invite_member_trigger"
     href="#invite-member-modal"
-    type="button"
+    class="usa-button usa-button--outline margin-top-1 display-none"
-    class="usa-button"
     aria-controls="invite-member-modal"
     data-open-modal
-    >Invite Member</a>
+    >Trigger invite member modal</a>
     <button type="submit" class="usa-button">Invite Member</button>
 </div>
 </form>