Delete environments permission disabled by default in new app member form

It will be enabled when the user checks the "manage environments"
permission. This updates the Jinja and Vue checkbox input components so
that Vue can monitor the inpur state.

js/components/checkbox_input.js

@@ -3,8 +3,19 @@ import { emitEvent } from '../lib/emitters'
 export default {
   name: 'checkboxinput',
 
+  components: {
+    checkboxinput: this,
+  },
+
   props: {
     name: String,
+    initialChecked: Boolean,
+  },
+
+  data: function() {
+    return {
+      checked: this.initialChecked,
+    }
   },
 
   methods: {

styles/components/_forms.scss

@@ -182,6 +182,10 @@
 .input__inline-fields  {
   margin: 1rem 0 1rem 0;
 
+  &.input__inline-fields--indented {
+    margin-left: 4*$gap;
+  }
+
   &> fieldset.usa-input__choices label {
     display: inline;
     font-weight: $font-normal;

templates/components/checkbox_input.html

@@ -3,12 +3,18 @@
   label=field.label,
   inline=False,
   classes="") -%}
-  <checkboxinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
+  <checkboxinput
+    name='{{ field.name }}'
+    inline-template
+    key='{{ field.name }}'
+    v-bind:initial-checked='{{ field.data|string|lower }}'
+    >
+    <div>
       <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}'>
 
         <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
           <legend>
-          {{ field() }}
+            {{ field(**{"v-model": "checked"}) }}
             {{ label | safe }}
 
             {% if field.description %}
@@ -17,5 +23,9 @@
           </legend>
         </fieldset>
       </div>
+      {% if caller %}
+        {{ caller() }}
+      {% endif %}
+    </div>
   </checkboxinput>
 {%- endmacro %}

templates/fragments/applications/add_new_application_member.html

@@ -84,9 +84,30 @@
         {% endfor %}
       </div>
       <h1>{{ "portfolios.applications.members.new.manage_perms" | translate({"application_name": application.name}) }}</h1>
-      {{ CheckboxInput(member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
-      {{ CheckboxInput(member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
       {{ CheckboxInput(member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
+      {% call CheckboxInput(member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") %}
+        {% set field=member_form.permission_sets.perms_del_env %}
+        <checkboxinput
+          name='{{ field.name }}'
+          inline-template
+          key='{{ field.name }}'
+          v-bind:initial-checked='{{ field.data|string|lower }}'
+          >
+          <div class="usa-input input__inline-fields input__inline-fields--indented">
+            <fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
+              <legend>
+                <input
+                  id="permission_sets-perms_del_env"
+                  name="permission_sets-perms_del_env"
+                  type="checkbox"
+                  v-model="checked"
+                  v-bind:disabled="!$parent.checked">
+                {{ field.label | safe }}
+              </legend>
+            </fieldset>
+          </div>
+        </checkboxinput>
+      {% endcall %}
     </div>
     <div class='action-group'>
       <input