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,6 +119,56 @@
         {% if g.matchesPath("application-members") %}
           {% include "fragments/flash.html" %}
         {% endif %}
+        {% for member in members %}
+          {% set modal_name = "edit_member-{}".format(loop.index) %}
+          {% call Modal(modal_name, dismissable=True) %}
+          <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) %}
+                {% set env_mgmt = "perms_env_mgmt-{}".format(member.role_id) %}
+                {% set del_env = "perms_del_env-{}".format(member.role_id) %}
+                {{ CheckboxInput(member.form.permission_sets.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt) }}
+                {{ CheckboxInput(member.form.permission_sets.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt) }}
+                {{ CheckboxInput(member.form.permission_sets.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env) }}
+              </div>
+              <div class="environment-roles-new">
+                <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
+                <hr>
+                {% for environment_data in member.form.environment_roles %}
+                  <optionsinput inline-template
+                    v-bind:initial-value="'{{ environment_data.role.data | string }}'"
+                    v-bind:name="'{{ environment_data.name | string }}'"
+                    v-bind:optional="true">
+                    <div class="usa-input">
+                      <fieldset data-ally-disabled="true" class="usa-input__choices">
+                        <div class="form-row">
+                          <div class="form-col form-col--two-thirds">
+                            <legend>
+                              <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
+                                {{ environment_data.environment_name.data }}
+                              </div>
+                            </legend>
+                          </div>
+                          <div class="form-col form-col--third">
+                            {{ environment_data.role(**{"v-model": "value"}) }}
+                          </div>
+                        </div>
+                      </fieldset>
+                    </div>
+                  </optionsinput>
+                  {{ environment_data.environment_id() }}
+                  <hr>
+                {% endfor %}
+              </div>
+              <input
+                type="submit"
+                class='action-group__action usa-button'
+                value='Update'>
+            </form>
+          {% endcall %}
+        {% endfor %}
         <table>
           <thead>
             <tr>
@@ -130,51 +180,7 @@
           </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 }}'>
-                <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
-                  <div class="application-perms">
-                    {% set team_mgmt = "perms_team_mgmt-{}".format(member.role_id) %}
-                    {% set env_mgmt = "perms_env_mgmt-{}".format(member.role_id) %}
-                    {% set del_env = "perms_del_env-{}".format(member.role_id) %}
-                    {{ CheckboxInput(member.form.permission_sets.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt) }}
-                    {{ CheckboxInput(member.form.permission_sets.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt) }}
-                    {{ CheckboxInput(member.form.permission_sets.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env) }}
-                  </div>
-                  <div class="environment-roles-new">
-                    <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
-                    <hr>
-                    {% for environment_data in member.form.environment_roles %}
-                      <optionsinput inline-template
-                        v-bind:initial-value="'{{ environment_data.role.data | string }}'"
-                        v-bind:name="'{{ environment_data.name | string }}'"
-                        v-bind:optional="true"
-                      >
-                        <div class="usa-input">
-                          <fieldset data-ally-disabled="true" class="usa-input__choices">
-                            <div class="form-row">
-                              <div class="form-col form-col--two-thirds">
-                                <legend>
-                                  <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
-                                    {{ environment_data.environment_name.data }}
-                                  </div>
-                                </legend>
-                              </div>
-                              <div class="form-col form-col--third">
-                                {{ environment_data.role(**{"v-model": "value"}) }}
-                              </div>
-                            </div>
-                          </fieldset>
-                        </div>
-                      </optionsinput>
-                      {{ environment_data.environment_id() }}
-                      <hr>
-                    {% endfor %}
-                  </div>
-                </form>
-              {% endcall %}
               <tr>
                 <td>
                   {{ member.user_name }}