Refactor form header and footer into macro

styles/sections/_application_edit.scss

@@ -76,6 +76,11 @@
       }
     }
   }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid $color-gray-lighter;
+  }
 }
 
 .environment-roles {

templates/fragments/applications/new_member_modal_content.html

@@ -3,11 +3,38 @@
 {% from "components/checkbox_input.html" import CheckboxInput %}
 {% from "components/phone_input.html" import PhoneInput %}
 
-{% macro MemberStepOne(new_member_form) %}
+{% macro MemberFormTemplate(title, next_button, previous=True) %}
   <div class="modal__form--header">
-    <h1>{{ Icon('avatar') }} Add Member</h1>
+    <h1>{{ Icon('avatar') }} {{ title }}</h1>
     <hr>
   </div>
+
+  {{ caller() }}
+
+  <div class='action-group'>
+    {{ next_button }}
+    {% if previous %}
+      <input
+          type='button'
+          v-on:click="previous()"
+          class='action-group__action usa-button usa-button-secondary'
+          value='Previous'>
+    {% endif %}
+    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
+  </div>
+{% endmacro %}
+
+{% macro MemberStepOne(new_member_form) %}
+  {% set next_button %}
+    <input
+        type='button'
+        v-on:click="next()"
+        v-bind:disabled="invalid"
+        class='action-group__action usa-button'
+        value='Next'>
+  {% endset %}
+
+  {% call MemberFormTemplate(title="Add Member", next_button=next_button, previous=False) %}
     <div class='form-row'>
       {{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
     </div>
@@ -23,22 +50,18 @@
     <div class='form-row'>
       {{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
     </div>
-  <div class='action-group'>
+  {% endcall %}
-    <input
-        type='button'
-        v-on:click="next()"
-        v-bind:disabled="invalid"
-        class='action-group__action usa-button'
-        value='Next'>
-    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
-  </div>
 {% endmacro %}
 {% macro MemberStepTwo(new_member_form, application) %}
-  <div class="modal__form--header">
+  {% set next_button %}
-    <h1>{{ Icon('avatar') }} Set Permissions and Roles</h1>
+    <input
-    <hr>
+      type="submit"
-  </div>
+      class='action-group__action usa-button'
+      form="add-app-mem"
+      value='Add Member'>
+  {% endset %}
 
+  {% call MemberFormTemplate(title="Set Permissions and Roles", next_button=next_button) %}
     <h4>Project Permissions</h4>
     <div class="application-perms">
       {{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
@@ -75,18 +98,5 @@
         <hr>
       {% endfor %}
     </div>
-
+  {% endcall %}
-  <div class='action-group'>
-    <input
-      type="submit"
-      class='action-group__action usa-button'
-      form="add-app-mem"
-      value='Add Member'>
-    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
-    <input
-        type='button'
-        v-on:click="previous()"
-        class='action-group__action usa-button action-group__action--left'
-        value='Previous'>
-  </div>
 {% endmacro %}