Move modal outside of table and add csrf token

atst/forms/application_member.py

@@ -1,5 +1,6 @@
 from flask_wtf import FlaskForm
 from wtforms.fields import FormField, FieldList, HiddenField, BooleanField
+from wtforms import Form
 
 from .forms import BaseForm
 from .member import NewForm as BaseNewMemberForm
@@ -9,7 +10,7 @@ from atst.forms.fields import SelectField
 from atst.utils.localization import translate
 
 
-class EnvironmentForm(FlaskForm):
+class EnvironmentForm(Form):
     environment_id = HiddenField()
     environment_name = HiddenField()
     role = SelectField(
@@ -27,7 +28,7 @@ class EnvironmentForm(FlaskForm):
         return _data
 
 
-class PermissionsForm(FlaskForm):
+class PermissionsForm(Form):
     perms_env_mgmt = BooleanField(
         translate("portfolios.applications.members.form.env_mgmt.label"),
         default=False,

atst/routes/applications/settings.py

@@ -363,3 +363,13 @@ def remove_member(application_id, application_role_id):
             fragment="application-members",
         )
     )
+
+
+@applications_bp.route(
+    "/applications/<application_id>/members/<application_role_id>/update",
+    methods=["POST"],
+)
+@user_can(Permissions.EDIT_APPLICATION_MEMBER, message="update application member")
+def update_member(application_id, application_role_id):
+    import ipdb; ipdb.set_trace()
+    pass

templates/components/checkbox_input.html

@@ -18,6 +18,7 @@
           <legend>
             {{ field(id=id, checked=True, **{"v-model": "isChecked"}) }}
             {{ field.label(for=id) | safe }}
+            {{ field.data }}
 
             {% if field.description %}
               <p class='usa-input__help'>

templates/portfolios/applications/settings.html

@@ -119,21 +119,11 @@
         {% if g.matchesPath("application-members") %}
           {% include "fragments/flash.html" %}
         {% endif %}
-        <table>
-          <thead>
-            <tr>
-              <th>Member</th>
-              <th>Project Permissions</th>
-              <th>Environment Access</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
         {% for member in members %}
-              {% import "fragments/applications/new_member_modal_content.html" as member_steps %}
           {% set modal_name = "edit_member-{}".format(loop.index) %}
           {% call Modal(modal_name, dismissable=True) %}
-              <form id='{{ modal_name }}'>
+          <form id='{{ modal_name }}' method="POST" action="{{ url_for('applications.update_member', application_id=application.id, application_role_id=member.role_id) }}">
+            {{ member.form.csrf_token() }}
             <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
               <div class="application-perms">
                 {% set team_mgmt = "perms_team_mgmt-{}".format(member.role_id) %}
@@ -150,8 +140,7 @@
                   <optionsinput inline-template
                     v-bind:initial-value="'{{ environment_data.role.data | string }}'"
                     v-bind:name="'{{ environment_data.name | string }}'"
-                        v-bind:optional="true"
-                      >
+                    v-bind:optional="true">
                     <div class="usa-input">
                       <fieldset data-ally-disabled="true" class="usa-input__choices">
                         <div class="form-row">
@@ -173,8 +162,25 @@
                   <hr>
                 {% endfor %}
               </div>
+              <input
+                type="submit"
+                class='action-group__action usa-button'
+                value='Update'>
             </form>
           {% endcall %}
+        {% endfor %}
+        <table>
+          <thead>
+            <tr>
+              <th>Member</th>
+              <th>Project Permissions</th>
+              <th>Environment Access</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for member in members %}
+              {% set modal_name = "edit_member-{}".format(loop.index) %}
               <tr>
                 <td>
                   {{ member.user_name }}