rearrange admin template forms so that forms are not nested

templates/components/multi_step_modal_form.html

@@ -33,19 +33,19 @@
         {{ button_text }}
         {{ Icon('plus-circle-solid') }}
       </a>
-      <form action="{{ form_action }}" method="POST">
-        {{ form.csrf_token }}
         {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
-          <div v-if="activeModal === '{{ name }}'">
+          <form id="{{ name }}" action="{{ form_action }}" method="POST">
-            {% for step in steps %}
+            {{ form.csrf_token }}
-              <div class="modal__form" v-show="step === {{ loop.index0 }}">
+            <div v-if="activeModal === '{{ name }}'">
-                {{ FormSteps(step_count, loop.index) }}
+              {% for step in steps %}
-                {{ step }}
+                <div class="modal__form" v-show="step === {{ loop.index0 }}">
-              </div>
+                  {{ FormSteps(step_count, loop.index) }}
-            {% endfor %}
+                  {{ step }}
-          </div>
+                </div>
+              {% endfor %}
+            </div>
+          </form>
         {% endcall %}
-      </form>
     </div>
   </multi-step-modal-form>
 {% endmacro %}

templates/fragments/admin/add_new_portfolio_member.html

@@ -66,7 +66,12 @@
     {{ SimpleOptionsInput(member_form.perms_reporting) }}
     {{ SimpleOptionsInput(member_form.perms_portfolio_mgmt) }}
     <div class='action-group'>
-      <input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' value='Invite Member'>
+      <input
+        type="submit"
+        v-on:click="closeModal('{{ new_port_mem }}')"
+        class='action-group__action usa-button'
+        form="add-port-mem"
+        value='Invite Member'>
       <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
     </div>
   </div>

templates/fragments/admin/portfolio_members.html

@@ -6,63 +6,64 @@
     {% if g.matchesPath("portfolio-members") %}
       {% include "fragments/flash.html" %}
     {% endif %}
-    <form method='POST' autocomplete="off" enctype="multipart/form-data">
+    <form method='POST' id="member-perms" autocomplete="off" enctype="multipart/form-data">
-    <div class='member-list-header'>
+      <div class='member-list-header'>
-      <div class='left'>
+        <div class='left'>
-        <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
+          <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
-        <div class='subheading'>
+          <div class='subheading'>
-          {{ "portfolios.admin.portfolio_members_subheading" | translate }}
+            {{ "portfolios.admin.portfolio_members_subheading" | translate }}
+          </div>
         </div>
+        <a class='icon-link'>
+          <span class='icon'>{{ Icon('info') }}</span>
+          {{ "portfolios.admin.settings_info" | translate }}
+        </a>
       </div>
-      <a class='icon-link'>
-        <span class='icon'>{{ Icon('info') }}</span>
-        {{ "portfolios.admin.settings_info" | translate }}
-      </a>
-    </div>
 
-  {% if not portfolio.members %}
+    {% if not portfolio.members %}
+      <p>There are currently no members in this Portfolio.</p>
+    {% else %}
+      <table>
 
-    <p>There are currently no members in this Portfolio.</p>
+        <thead>
+          <tr>
+              <td>{{ "portfolios.members.permissions.name" | translate }}</td>
+              <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
+              <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
+              <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
+              <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
+              <td></td>
+          </tr>
+        </thead>
 
-  {% else %}
+        <tbody>
+          {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
+            {% include "fragments/admin/members_edit.html" %}
+          {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
+            {% include "fragments/admin/members_view.html" %}
+          {% endif %}
+        </tbody>
 
-    <table>
+      </table>
 
-      <thead>
+    {% endif %}
-        <tr>
-            <td>{{ "portfolios.members.permissions.name" | translate }}</td>
-            <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
-            <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
-            <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
-            <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
-            <td></td>
-        </tr>
-      </thead>
 
-      <tbody>
+    </form>
+    <div class="members-table-footer">
+      <div class="action-group">
         {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-          {% include "fragments/admin/members_edit.html" %}
+          <input
-        {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
+            type='submit'
-          {% include "fragments/admin/members_view.html" %}
+            form="member-perms"
+            class='usa-button usa-button-primary'
+            value='{{ "Save" }}' />
         {% endif %}
-      </tbody>
-
-    </table>
-
-      <div class="members-table-footer">
         {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
           {% include "fragments/admin/add_new_portfolio_member.html" %}
         {% endif %}
-        {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-          <input type='submit' class='usa-button usa-button-primary' value='{{ "Save" }}' />
-        {% endif %}
       </div>
+    </div>
 
-    </form>
   </div>
 
-  {% endif %}
-  </div>
-
-
 </section>