Use base form and save button on all forms

js/components/forms/base_form.js

@@ -4,7 +4,6 @@ import optionsinput from '../options_input'
 import DateSelector from '../date_selector'
 import MultiStepModalForm from './multi_step_modal_form'
 import multicheckboxinput from '../multi_checkbox_input'
-import funding from './funding'
 import checkboxinput from '../checkbox_input'
 import levelofwarrant from '../levelofwarrant'
 
@@ -16,7 +15,6 @@ export default {
     DateSelector,
     MultiStepModalForm,
     multicheckboxinput,
-    funding,
     checkboxinput,
     levelofwarrant,
   },

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/portfolios/admin.html

@@ -15,28 +15,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">
-          {{ portfolio_form.csrf_token }}
-          <div class='form-row'>
-            <div class='form-col form-col--half'>
-              {{ TextInput(portfolio_form.name, validation="portfolioName") }}
-            </div>
-
-              <div class='edit-portfolio-name action-group'>
-                <button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Save</button>
+        <base-form inline-template>
+          <form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
+            {{ portfolio_form.csrf_token }}
+            <div class='form-row'>
+              <div class='form-col form-col--half'>
+                {{ TextInput(portfolio_form.name, validation="portfolioName") }}
               </div>
-            </div>
-              <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 class='edit-portfolio-name action-group'>
+                  <savebutton text="Save" classes="usa-button-big" :disabled="disabled"></savebutton>
                 </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/task_orders/invitations.html

@@ -59,7 +59,7 @@
             {{ Icon("x") }}
             <span>Cancel</span>
           </a>
-          <input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
+          <savebutton text="Save Changes" :disabled="disabled"></savebutton>
         </div>
       </div>
     </template>

templates/portfolios/task_orders/review.html

@@ -103,7 +103,7 @@
       {% endblock %}
 
       <div class='action-group'>
-        <input type='submit' class='usa-button usa-button-primary' value='Continue' />
+        <savebutton text="Continue" :disabled="disabled"></savebutton>
       </div>
 
     </form>

templates/portfolios/task_orders/so_review.html

@@ -6,38 +6,36 @@
 {% block content %}
 
 {% include "fragments/flash.html" %}
+<base-form inline-template>
+  <div class="col">
+    <div class="panel">
 
-<div class="col">
-  <div class="panel">
-
-    <div class="panel__heading">
-      <h1 class="subheading">
-        <div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
-      </h1>
-    </div>
+      <div class="panel__heading">
+        <h1 class="subheading">
+          <div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
+        </h1>
+      </div>
 
 
-    <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.csrf_token }}
-        <h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
-        {{ TextInput(form.certifying_official) }}
-        {{ TextInput(form.certifying_official_title) }}
-        {{ TextInput(form.certifying_official_phone, placeholder='(123) 456-7890', validation='usPhone') }}
-        {{ TextInput(form.certifying_official_address, paragraph=True) }}
+      <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.csrf_token }}
+          <h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
+          {{ TextInput(form.certifying_official) }}
+          {{ TextInput(form.certifying_official_title) }}
+          {{ TextInput(form.certifying_official_phone, placeholder='(123) 456-7890', validation='usPhone') }}
+          {{ TextInput(form.certifying_official_address, paragraph=True) }}
 
-        <hr>
+          <hr>
 
-        {{ MultiCheckboxInput(form.required_distribution) }}
+          {{ MultiCheckboxInput(form.required_distribution) }}
 
-        <div class="action-group">
-          <button class="usa-button usa-button-big usa-button-primary">
-            Continue
-          </button>
-        </div>
-      </form>
+          <div class="action-group">
+            <savebutton text="Continue" :disabled="disabled"></savebutton>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
-</div>
-
+</base-form>
 {% endblock %}

templates/task_orders/signing/signature_requested.html

@@ -5,52 +5,50 @@
 {% from "components/icon.html" import Icon %}
 
 {% block content %}
-<form method="POST" action='{{ url_for("task_orders.record_signature", task_order_id=task_order_id) }}'>
-  {{ form.csrf_token }}
-  <div class="row row--pad">
-    <div class="col col--pad">
-      <div class="panel">
-        <div class="panel__heading">
-          <h1 class="task-order-form__heading subheading">
-            <div class="h2">{{ "task_orders.sign.task_order_builder_title" | translate }}</div>
-            {{ "task_orders.sign.title" | translate }}
-          </h1>
-        </div>
-
-        <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>
+<base-form inline-template>
+  <form method="POST" action='{{ url_for("task_orders.record_signature", task_order_id=task_order_id) }}'>
+    {{ form.csrf_token }}
+    <div class="row row--pad">
+      <div class="col col--pad">
+        <div class="panel">
+          <div class="panel__heading">
+            <h1 class="task-order-form__heading subheading">
+              <div class="h2">{{ "task_orders.sign.task_order_builder_title" | translate }}</div>
+              {{ "task_orders.sign.title" | translate }}
+            </h1>
           </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 }}" :disabled="disabled"></savebutton>
+          <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 %}
-