Merge pull request #742 from dod-ccpo/disable-save-buttons

Disable save buttons

js/components/checkbox_input.js

@@ -1,3 +1,5 @@
+import { emitFieldChange } from '../lib/emitters'
+
 export default {
   name: 'checkboxinput',
 
@@ -7,10 +9,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, { value: e.target.checked, name: this.name })
-        value: e.target.checked,
-        name: this.name,
-      })
     },
   },
 }

js/components/date_selector.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { getDaysInMonth } from 'date-fns'
+import { emitFieldChange } from '../lib/emitters'
 
 var paddedNumber = function(number) {
   if ((number + '').length === 1) {
@@ -62,18 +63,23 @@ export default {
 
     isMonthValid: function() {
       var _month = parseInt(this.month)
-
+      var valid = _month >= 0 && _month <= 12
-      return _month >= 0 && _month <= 12
+      this._emitChange('month', this.month, valid)
+      return valid
     },
 
     isDayValid: function() {
       var _day = parseInt(this.day)
-
+      var valid = _day >= 0 && _day <= this.daysMaxCalculation
-      return _day >= 0 && _day <= this.daysMaxCalculation
+      this._emitChange('day', this.day, valid)
+      return valid
     },
 
     isYearValid: function() {
-      return parseInt(this.year) >= 1
+      // Emit a change event
+      var valid = parseInt(this.year) >= 1
+      this._emitChange('year', this.year, valid)
+      return valid
     },
 
     isWithinDateRange: function() {
@@ -128,6 +134,12 @@ export default {
     },
   },
 
+  methods: {
+    _emitChange: function(name, value, valid) {
+      emitFieldChange(this, { value, name })
+    },
+  },
+
   render: function(createElement) {
     return createElement('p', 'Please implement inline-template')
   },

js/components/forms/base_form.js

@@ -0,0 +1,26 @@
+import ally from 'ally.js'
+
+import FormMixin from '../../mixins/form'
+import textinput from '../text_input'
+import optionsinput from '../options_input'
+import DateSelector from '../date_selector'
+import MultiStepModalForm from './multi_step_modal_form'
+import multicheckboxinput from '../multi_checkbox_input'
+import checkboxinput from '../checkbox_input'
+import levelofwarrant from '../levelofwarrant'
+import Modal from '../../mixins/modal'
+
+export default {
+  name: 'base-form',
+  components: {
+    textinput,
+    optionsinput,
+    DateSelector,
+    MultiStepModalForm,
+    multicheckboxinput,
+    checkboxinput,
+    levelofwarrant,
+    Modal,
+  },
+  mixins: [FormMixin, Modal],
+}

js/components/forms/new_application.js

@@ -118,7 +118,6 @@ export default {
 
         return newVal.showValid && previous
       }, true)
-
       this.validate()
       isValid = this.errors.length == 0 && isValid
 

js/components/multi_checkbox_input.js

@@ -1,5 +1,6 @@
 import optionsinput from '../components/options_input'
 import textinput from '../components/text_input'
+import { emitFieldChange } from '../lib/emitters'
 
 export default {
   name: 'multicheckboxinput',
@@ -40,10 +41,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, { value: e.target.value, name: this.name })
-        value: e.target.value,
-        name: this.name,
-      })
       this.showError = false
       this.showValid = true
     },

js/components/options_input.js

@@ -1,3 +1,5 @@
+import { emitFieldChange } from '../lib/emitters'
+
 export default {
   name: 'optionsinput',
 
@@ -21,10 +23,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, { value: e.target.value, name: this.name })
-        value: e.target.value,
-        name: this.name,
-      })
       this.showError = false
       this.showValid = true
     },

js/components/text_input.js

@@ -1,6 +1,7 @@
 import MaskedInput, { conformToMask } from 'vue-text-mask'
 import inputValidations from '../lib/input_validations'
 import { formatDollars } from '../lib/dollars'
+import { emitFieldChange } from '../lib/emitters'
 
 export default {
   name: 'textinput',
@@ -124,7 +125,7 @@ export default {
       this.showValid = this.value != '' && valid
 
       // Emit a change event
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, {
         value: this._rawValue(value),
         valid,
         name: this.name,

js/index.js

@@ -33,6 +33,7 @@ import { isNotInVerticalViewport } from './lib/viewport'
 import DateSelector from './components/date_selector'
 import SidenavToggler from './components/sidenav_toggler'
 import KoReview from './components/forms/ko_review'
+import BaseForm from './components/forms/base_form'
 
 Vue.config.productionTip = false
 
@@ -68,12 +69,14 @@ const app = new Vue({
     EditOfficerForm,
     SidenavToggler,
     KoReview,
+    BaseForm,
   },
 
   mounted: function() {
-    this.$on('modalOpen', isOpen => {
+    this.$on('modalOpen', data => {
-      if (isOpen) {
+      if (data['isOpen']) {
         document.body.className += ' modal-open'
+        this.activeModal = data['name']
       } else {
         document.body.className = document.body.className.replace(
           ' modal-open',

js/lib/emitters.js

@@ -0,0 +1,6 @@
+export const emitFieldChange = (el, data) => {
+  el.$root.$emit('field-change', {
+    ...data,
+    parent_uid: el.$parent && el.$parent._uid,
+  })
+}

js/mixins/form.js

@@ -8,7 +8,23 @@ export default {
       const { value, name } = event
       if (typeof this[name] !== undefined) {
         this[name] = value
+        if (event['parent_uid'] === this._uid) {
+          this.changed = true
+        }
       }
     },
   },
+
+  data: function() {
+    return {
+      changed: this.hasChanges,
+    }
+  },
+
+  props: {
+    hasChanges: {
+      type: Boolean,
+      default: false,
+    },
+  },
 }

js/mixins/modal.js

@@ -10,7 +10,7 @@ export default {
 
     openModal: function(name) {
       this.activeModal = name
-      this.$emit('modalOpen', true)
+      this.$root.$emit('modalOpen', { isOpen: true, name: name })
       const idSelector = `#${this.modalId}`
 
       this.allyHandler = ally.maintain.disabled({

styles/components/_portfolio_layout.scss

@@ -297,7 +297,11 @@
 
     .members-table-footer {
       float: right;
-      padding: 3 * $gap;
+      padding: 3 * $gap 0;
+
+      .action-group.save {
+        padding-right: 3 * $gap;
+      }
     }
 
     a.modal-link.icon-link {

styles/sections/_task_order.scss

@@ -493,12 +493,10 @@
         align-items: center;
         justify-content: flex-end;
 
-        .usa-button {
+        button.usa-button {
           margin-left: 4 * $gap;
           margin-top: 0;
           margin-bottom: 0;
-          padding-top: 0;
-          padding-bottom: 0;
         }
       }
     }

templates/components/save_button.html

@@ -0,0 +1,10 @@
+{% macro SaveButton(text, element="button", additional_classes="", form=None) -%}
+  {% set class = "usa-button usa-button-primary" + additional_classes %}
+  {% if element == "button" %}
+    <button type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed" {{ form_attr }} >
+      {{ text }}
+    </button>
+  {% elif element == 'input' %}
+    <input type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed" value="{{ text }}" {% if form %}form="{{ form }}"{% endif %} />
+  {% endif %}
+{%- endmacro %}

templates/fragments/admin/portfolio_members.html

@@ -1,5 +1,6 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/options_input.html" import OptionsInput %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% from "components/modal.html" import Modal %}
 {% from "components/alert.html" import Alert %}
@@ -9,51 +10,59 @@
     {% if g.matchesPath("portfolio-members") %}
       {% include "fragments/flash.html" %}
     {% endif %}
-    <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_portfolio_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
+    <base-form inline-template>
-    {{ member_perms_form.csrf_token }}
+      <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_portfolio_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
+      {{ member_perms_form.csrf_token }}
 
-    <div class='member-list-header'>
+      <div class='member-list-header'>
-      <div class='left'>
+        <div class='left'>
-        <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
+          <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
-        <div class='subheading'>
+          <div class='subheading'>
-          {{ "portfolios.admin.portfolio_members_subheading" | translate }}
+            {{ "portfolios.admin.portfolio_members_subheading" | translate }}
+          </div>
+        </div>
+        <a class='icon-link'>
+          {{ Icon('info') }}
+          {{ "portfolios.admin.settings_info" | translate }}
+        </a>
         </div>
-      </div>
-      <a class='icon-link'>
-        {{ Icon('info') }}
-        {{ "portfolios.admin.settings_info" | translate }}
-      </a>
-      </div>
 
-    {% if not portfolio.members %}
+      {% if not portfolio.members %}
-      <p>{{ "portfolios.admin.no_members" | translate }}</p>
+        <p>{{ "portfolios.admin.no_members" | translate }}</p>
-    {% else %}
+      {% else %}
-      <table>
+        <table>
 
-        <thead>
+          <thead>
-          <tr>
+            <tr>
-              <td>{{ "portfolios.members.permissions.name" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.name" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
-              <td></td>
+                <td></td>
-          </tr>
+            </tr>
-        </thead>
+          </thead>
 
-        <tbody>
+          <tbody>
-          {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
+            {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-            {% include "fragments/admin/members_edit.html" %}
+              {% include "fragments/admin/members_edit.html" %}
-          {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
+            {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
-            {% include "fragments/admin/members_view.html" %}
+              {% include "fragments/admin/members_view.html" %}
-          {% endif %}
+            {% endif %}
-        </tbody>
+          </tbody>
 
-      </table>
+        </table>
+        <div class="members-table-footer">
+          <div class="action-group save">
+            {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
+              {{ SaveButton(text=('common.save' | translate), element="input", form="member-perms") }}
+            {% endif %}
+          </div>
+        </div>
+      {% endif %}
 
-    {% endif %}
+      </form>
-
+    </base-form>
-    </form>
 
     {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
       {% for member in portfolio.members %}
@@ -84,19 +93,11 @@
 
     <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={{ "common.save" | translate }} />
-        {% endif %}
         {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
           {% include "fragments/admin/add_new_portfolio_member.html" %}
         {% endif %}
       </div>
     </div>
-
   </div>
 
 </section>

templates/fragments/edit_user_form.html

@@ -3,38 +3,39 @@
 {% from "components/date_input.html" import DateInput %}
 {% from "components/phone_input.html" import PhoneInput %}
 {% from "components/date_picker.html" import DatePicker %}
+{% from 'components/save_button.html' import SaveButton %}
 
-<form method="POST" action='{{ form_action }}'>
+<base-form inline-template>
-  {{ form.csrf_token }}
+  <form method="POST" action='{{ form_action }}'>
-  <div class='panel'>
+    {{ form.csrf_token }}
-    <div class='panel__content'>
+    <div class='panel'>
-      <div class='form-row'>
+      <div class='panel__content'>
-        <div class='form-col form-col--half'>
+        <div class='form-row'>
-          {{ TextInput(form.first_name, validation='requiredField') }}
+          <div class='form-col form-col--half'>
+            {{ TextInput(form.first_name, validation='requiredField') }}
+          </div>
+
+          <div class='form-col form-col--half'>
+            {{ TextInput(form.last_name, validation='requiredField') }}
+          </div>
         </div>
 
-        <div class='form-col form-col--half'>
+        {{ TextInput(form.email, validation='email') }}
-          {{ TextInput(form.last_name, validation='requiredField') }}
+        {{ PhoneInput(form.phone_number, form.phone_ext) }}
+
+        {{ OptionsInput(form.service_branch) }}
+        {{ OptionsInput(form.citizenship) }}
+        {{ OptionsInput(form.designation) }}
+
+
+        <div class="usa-input">
+          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
         </div>
       </div>
-
-      {{ TextInput(form.email, validation='email') }}
-      {{ PhoneInput(form.phone_number, form.phone_ext) }}
-
-      {{ OptionsInput(form.service_branch) }}
-      {{ OptionsInput(form.citizenship) }}
-      {{ OptionsInput(form.designation) }}
-
-
-      <div class="usa-input">
-        {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
-      </div>
     </div>
-  </div>
 
-  <div class='action-group'>
+    <div class='action-group'>
-    <button class='usa-button usa-button-big' type='submit'>
+      {{ SaveButton(text=("fragments.edit_user_form.save_details_button" | translate), additional_classes="usa-button-big" )}}
-      {{ "fragments.edit_user_form.save_details_button" | translate }}
+    </div>
-    </button>
+  </form>
-  </div>
+</base-form>
-</form>

templates/portfolios/admin.html

@@ -4,6 +4,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
 
@@ -15,28 +16,30 @@
       <div class="panel__content">
 
         {% if user_can(permissions.VIEW_PORTFOLIO_NAME) %}
-        <form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
+        <base-form inline-template>
-          {{ portfolio_form.csrf_token }}
+          <form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
-          <div class='form-row'>
+            {{ portfolio_form.csrf_token }}
-            <div class='form-col form-col--half'>
+            <div class='form-row'>
-              {{ TextInput(portfolio_form.name, validation="portfolioName") }}
+              <div class='form-col form-col--half'>
-            </div>
+                {{ TextInput(portfolio_form.name, validation="portfolioName") }}
-
-              <div class='edit-portfolio-name action-group'>
-                <button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Save</button>
               </div>
-            </div>
+
-              <div class='defense-row'>
+                <div class='edit-portfolio-name action-group'>
-                <div>
+                  {{ SaveButton(text='Save', additional_classes='usa-button-big') }}
-                  <div class='admin-title'>{{ "forms.task_order.defense_component_label" | translate }}</div>
-                  {% if portfolio.defense_component %}
-                    <div class='admin-content'>{{ portfolio.defense_component }}</div>
-                  {% else %}
-                    <div class='admin-content'>{{ "fragments.portfolio_admin.none" | translate }}</div>
-                  {% endif %}
                 </div>
               </div>
-          </form>
+                <div class='defense-row'>
+                  <div>
+                    <div class='admin-title'>{{ "forms.task_order.defense_component_label" | translate }}</div>
+                    {% if portfolio.defense_component %}
+                      <div class='admin-content'>{{ portfolio.defense_component }}</div>
+                    {% else %}
+                      <div class='admin-content'>{{ "fragments.portfolio_admin.none" | translate }}</div>
+                    {% endif %}
+                  </div>
+                </div>
+            </form>
+          </base-form>
         {% endif %}
       </div>
     </div>

templates/portfolios/applications/new.html

@@ -4,6 +4,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/modal.html" import Modal %}
 {% from "components/text_input.html" import TextInput %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
 
@@ -76,7 +77,7 @@
       </div>
 
       <div class="action-group">
-        <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.create_button_text' | translate }}</button>
+        {{ SaveButton(text=('portfolios.applications.create_button_text' | translate)) }}
       </div>
     </form>
   </new-application>

templates/portfolios/task_orders/invitations.html

@@ -6,6 +6,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/confirmation_button.html" import ConfirmationButton %}
+{% from 'components/save_button.html' import SaveButton %}
 
 
 {% macro Link(text, icon_name, onClick=None, url='#', classes='') %}
@@ -59,7 +60,7 @@
             {{ Icon("x") }}
             <span>Cancel</span>
           </a>
-          <input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
+          {{ SaveButton(text='Save Changes', element="input") }}
         </div>
       </div>
     </template>

templates/portfolios/task_orders/review.html

@@ -10,7 +10,7 @@
 {% from "components/alert.html" import Alert %}
 {% from "components/review_field.html" import ReviewField %}
 {% from "components/upload_input.html" import UploadInput %}
-
+{% from 'components/save_button.html' import SaveButton %}
 
 {% block content %}
 <ko-review inline-template v-bind:initial-data='{{ form.data|tojson }}'>
@@ -103,7 +103,7 @@
       {% endblock %}
 
       <div class='action-group'>
-        <input type='submit' class='usa-button usa-button-primary' value='Continue' />
+        {{ SaveButton(text="Continue", element="input") }}
       </div>
 
     </form>

templates/portfolios/task_orders/so_review.html

@@ -2,42 +2,41 @@
 
 {% from "components/text_input.html" import TextInput %}
 {% from "components/multi_checkbox_input.html" import MultiCheckboxInput %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% block content %}
 
 {% include "fragments/flash.html" %}
+<base-form inline-template>
+  <div class="col">
+    <div class="panel">
 
-<div class="col">
+      <div class="panel__heading">
-  <div class="panel">
+        <h1 class="subheading">
-
+          <div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
-    <div class="panel__heading">
+        </h1>
-      <h1 class="subheading">
+      </div>
-        <div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
-      </h1>
-    </div>
 
 
-    <div class="panel__content">
+      <div class="panel__content">
-      <form method="POST" action='{{ url_for("portfolios.submit_so_review", portfolio_id=portfolio.id, task_order_id=task_order.id) }}'>
+        <form method="POST" action='{{ url_for("portfolios.submit_so_review", portfolio_id=portfolio.id, task_order_id=task_order.id) }}'>
-        {{ form.csrf_token }}
+          {{ form.csrf_token }}
-        <h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
+          <h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
-        {{ TextInput(form.certifying_official) }}
+          {{ TextInput(form.certifying_official) }}
-        {{ TextInput(form.certifying_official_title) }}
+          {{ TextInput(form.certifying_official_title) }}
-        {{ TextInput(form.certifying_official_phone, placeholder='(123) 456-7890', validation='usPhone') }}
+          {{ TextInput(form.certifying_official_phone, placeholder='(123) 456-7890', validation='usPhone') }}
-        {{ TextInput(form.certifying_official_address, paragraph=True) }}
+          {{ TextInput(form.certifying_official_address, paragraph=True) }}
 
-        <hr>
+          <hr>
 
-        {{ MultiCheckboxInput(form.required_distribution) }}
+          {{ MultiCheckboxInput(form.required_distribution) }}
 
-        <div class="action-group">
+          <div class="action-group">
-          <button class="usa-button usa-button-big usa-button-primary">
+            {{ SaveButton(text='Continue', additional_classes="usa-button-big") }}
-            Continue
+          </div>
-          </button>
+        </form>
-        </div>
+      </div>
-      </form>
     </div>
   </div>
-</div>
+</base-form>
-
 {% endblock %}

templates/task_orders/signing/signature_requested.html

@@ -3,54 +3,53 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/checkbox_input.html" import CheckboxInput %}
 {% from "components/icon.html" import Icon %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% block content %}
-<form method="POST" action='{{ url_for("task_orders.record_signature", task_order_id=task_order_id) }}'>
+<base-form inline-template>
-  {{ form.csrf_token }}
+  <form method="POST" action='{{ url_for("task_orders.record_signature", task_order_id=task_order_id) }}'>
-  <div class="row row--pad">
+    {{ form.csrf_token }}
-    <div class="col col--pad">
+    <div class="row row--pad">
-      <div class="panel">
+      <div class="col col--pad">
-        <div class="panel__heading">
+        <div class="panel">
-          <h1 class="task-order-form__heading subheading">
+          <div class="panel__heading">
-            <div class="h2">{{ "task_orders.sign.task_order_builder_title" | translate }}</div>
+            <h1 class="task-order-form__heading subheading">
-            {{ "task_orders.sign.title" | translate }}
+              <div class="h2">{{ "task_orders.sign.task_order_builder_title" | translate }}</div>
-          </h1>
+              {{ "task_orders.sign.title" | translate }}
-        </div>
+            </h1>
-
-        <div class="panel__content">
-          <div is="levelofwarrant" inline-template v-bind:initial-data='{{ form.data|tojson }}'>
-            <div>
-              <span v-bind:class="{ hide: !unlimited_level_of_warrant }">
-                {{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00', disabled=True) }}
-              </span>
-
-              <span v-bind:class="{  hide: unlimited_level_of_warrant }">
-                {{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00') }}
-              </span>
-
-
-              {{ CheckboxInput(form.unlimited_level_of_warrant) }}
-            </div>
           </div>
 
-          {{ CheckboxInput(form.signature) }}
+          <div class="panel__content">
+            <div is="levelofwarrant" inline-template v-bind:initial-data='{{ form.data|tojson }}'>
+              <div>
+                <span v-bind:class="{ hide: !unlimited_level_of_warrant }">
+                  {{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00', disabled=True) }}
+                </span>
+
+                <span v-bind:class="{  hide: unlimited_level_of_warrant }">
+                  {{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00') }}
+                </span>
+
+
+                {{ CheckboxInput(form.unlimited_level_of_warrant) }}
+              </div>
+            </div>
+
+            {{ CheckboxInput(form.signature) }}
+          </div>
+        </div>
+        <div class="action-group">
+          {{ SaveButton(text=('common.sign' | translate), additional_classes="usa-button-big") }}
+          <a
+            href="{{ url_for("portfolios.ko_review", portfolio_id=portfolio_id, task_order_id=task_order_id) }}"
+            class="action-group__action icon-link">
+            {{ Icon('caret_left') }}
+            <span class="icon icon--x"></span>
+            {{ "common.back" | translate }}
+          </a>
         </div>
       </div>
-      <div class="action-group">
-        <button class="usa-button usa-button-big usa-button-primary">
-          {{ "common.sign" | translate }}
-        </button>
-
-        <a
-          href="{{ url_for("portfolios.ko_review", portfolio_id=portfolio_id, task_order_id=task_order_id) }}"
-          class="action-group__action icon-link">
-          {{ Icon('caret_left') }}
-          <span class="icon icon--x"></span>
-          {{ "common.back" | translate }}
-        </a>
-      </div>
     </div>
-  </div>
+  </form>
-</form>
+</base-form>
 {% endblock %}
-