rearrange admin template forms so that forms are not nested

templates/components/multi_step_modal_form.html

@@ -33,9 +33,9 @@
         {{ button_text }}
         {{ Icon('plus-circle-solid') }}
       </a>
-      <form action="{{ form_action }}" method="POST">
-        {{ form.csrf_token }}
         {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
+          <form id="{{ name }}" action="{{ form_action }}" method="POST">
+            {{ form.csrf_token }}
             <div v-if="activeModal === '{{ name }}'">
               {% for step in steps %}
                 <div class="modal__form" v-show="step === {{ loop.index0 }}">
@@ -44,8 +44,8 @@
                 </div>
               {% endfor %}
             </div>
-        {% endcall %}
           </form>
+        {% endcall %}
     </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,7 +6,7 @@
     {% 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='left'>
           <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
@@ -21,11 +21,8 @@
       </div>
 
     {% if not portfolio.members %}
-
       <p>There are currently no members in this Portfolio.</p>
-
     {% else %}
-
       <table>
 
         <thead>
@@ -49,20 +46,24 @@
 
       </table>
 
+    {% endif %}
+
+    </form>
     <div class="members-table-footer">
+      <div class="action-group">
+        {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
+          <input
+            type='submit'
+            form="member-perms"
+            class='usa-button usa-button-primary'
+            value='{{ "Save" }}' />
+        {% endif %}
         {% 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>