From 99e2c84d3ca666ccd9e2882e72e56e8684f03d26 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 27 Aug 2019 13:14:40 -0400
Subject: [PATCH 1/7] Add inset_form to options and date picker macros

---
 js/components/date_selector.js          |  4 ++++
 js/components/options_input.js          |  3 ++-
 templates/components/date_picker.html   |  6 ++++--
 templates/components/options_input.html | 12 +++++++++++-
 templates/components/phone_input.html   |  4 ++--
 templates/fragments/edit_user_form.html | 14 +++++++-------
 6 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index 8e8f5327..cdda5276 100644
--- a/js/components/date_selector.js
+++ b/js/components/date_selector.js
@@ -28,6 +28,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    insetForm: Boolean,
   },
 
   data: function() {
@@ -36,6 +37,7 @@ export default {
       month: this.initialmonth,
       year: this.initialyear,
       name: this.nameTag,
+      showValidation: !this.insetForm,
     }
   },
 
@@ -160,6 +162,8 @@ export default {
 
   methods: {
     onInput: function(e) {
+      this.showValidation = true
+
       emitEvent('field-change', this, {
         value: this.formattedDate,
         name: this.name,
diff --git a/js/components/options_input.js b/js/components/options_input.js
index 48213378..66e82838 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -22,6 +22,7 @@ export default {
       type: String,
       default: '',
     },
+    insetForm: Boolean,
   },
 
   created: function() {
@@ -36,7 +37,7 @@ export default {
     const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
       showError: showError,
-      showValid: !showError && !!this.initialValue,
+      showValid: !this.insetForm && (!showError && !!this.initialValue),
       validationError: this.initialErrors.join(' '),
       value: this.initialValue,
     }
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index 61c1889f..ca0ce59a 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -7,7 +7,8 @@
   mindate=None,
   maxdate=None,
   watch=False,
-  optional=True) -%}
+  optional=True,
+  inset_form=False) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -18,9 +19,10 @@
   initialyear="{{ field.data.year }}"
   v-bind:watch='{{ watch | string | lower }}'
   :optional='{{ optional | string | lower }}'
+  v-bind:inset-form={{ inset_form|lower }}
   inline-template>
 
-    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
       <legend>
         <div class="usa-input__title">
           {{ label }}
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index b7d8d858..05416d93 100644
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@@ -1,7 +1,16 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False, label=True, show_validation=True, disabled=False, watch=False, optional=True) -%}
+{% macro OptionsInput(
+  field,
+  tooltip,
+  inline=False,
+  label=True,
+  show_validation=True,
+  disabled=False,
+  watch=False,
+  optional=True,
+  inset_form=False) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
@@ -11,6 +20,7 @@
     v-bind:watch='{{ watch | string | lower }}'
     v-bind:optional={{ optional|lower }}
     v-bind:null-option="'{{ field.default }}'"
+    v-bind:inset-form={{ inset_form|lower }}
     >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
diff --git a/templates/components/phone_input.html b/templates/components/phone_input.html
index 62a1c18a..f63e0c39 100644
--- a/templates/components/phone_input.html
+++ b/templates/components/phone_input.html
@@ -3,10 +3,10 @@
 {% macro PhoneInput(phone_number, phone_ext, placeholder_phone="") %}
   <div class='phone-input'>
       <div class='phone-input__phone'>
-        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone') }}
+        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', inset_form=True) }}
       </div>
       <div class='phone-input__extension'>
-        {{ TextInput(phone_ext, validation='phoneExt')}}
+        {{ TextInput(phone_ext, validation='phoneExt', inset_form=True)}}
       </div>
   </div>
 {%- endmacro %}
diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html
index 56f61b80..3822271d 100644
--- a/templates/fragments/edit_user_form.html
+++ b/templates/fragments/edit_user_form.html
@@ -11,24 +11,24 @@
       <div class='panel__content'>
         <div class='form-row'>
           <div class='form-col form-col--half'>
-            {{ TextInput(form.first_name, validation='requiredField') }}
+            {{ TextInput(form.first_name, validation='requiredField', inset_form=True) }}
           </div>
 
           <div class='form-col form-col--half'>
-            {{ TextInput(form.last_name, validation='requiredField') }}
+            {{ TextInput(form.last_name, validation='requiredField', inset_form=True) }}
           </div>
         </div>
 
-        {{ TextInput(form.email, validation='email') }}
+        {{ TextInput(form.email, validation='email', inset_form=True) }}
         {{ PhoneInput(form.phone_number, form.phone_ext) }}
 
-        {{ OptionsInput(form.service_branch) }}
-        {{ OptionsInput(form.citizenship) }}
-        {{ OptionsInput(form.designation) }}
+        {{ OptionsInput(form.service_branch, inset_form=True) }}
+        {{ OptionsInput(form.citizenship, inset_form=True) }}
+        {{ OptionsInput(form.designation, inset_form=True) }}
 
 
         <div class="usa-input">
-          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
+          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate, inset_form=True) }}
         </div>
       </div>
     </div>

From aff4caa83fb8b4572fdc9e4625b2e5bde18c72be Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 27 Aug 2019 13:14:51 -0400
Subject: [PATCH 2/7] Add error icon for date validation

---
 templates/components/date_picker.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index ca0ce59a..b6e97e08 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -78,8 +78,13 @@
 
         </div>
 
-        <div class="usa-form-group-date-ok" v-if="isDateValid">
-          {{ Icon("ok", classes="icon--green") }}
+        <div v-if="showValidation">
+          <div class="usa-form-group-date-ok" v-if="isDateValid">
+            {{ Icon("ok", classes="icon--green") }}
+          </div>
+          <div class="usa-form-group-date-ok" v-else>
+            {{ Icon("alert", classes="icon--red")}}
+          </div>
         </div>
       </div>
     </fieldset>

From 1901172d6e2fa9c4c4e6b0444fe92ce5b8a1e268 Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Tue, 27 Aug 2019 15:59:51 -0400
Subject: [PATCH 3/7] Remove inset_form prop from text inputs

---
 js/components/text_input.js                     | 3 +--
 templates/components/phone_input.html           | 4 ++--
 templates/components/text_input.html            | 4 +---
 templates/fragments/edit_user_form.html         | 6 +++---
 templates/portfolios/admin.html                 | 2 +-
 templates/portfolios/applications/settings.html | 4 ++--
 6 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/js/components/text_input.js b/js/components/text_input.js
index ea210cb0..962fcabf 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -31,7 +31,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    insetForm: Boolean,
   },
 
   data: function() {
@@ -61,7 +60,7 @@ export default {
       this._checkIfValid({
         value: this.value,
         invalidate: true,
-        showValidationIcon: !this.insetForm,
+        showValidationIcon: false,
       })
 
       if (this.mask && this.validation !== 'email') {
diff --git a/templates/components/phone_input.html b/templates/components/phone_input.html
index f63e0c39..62a1c18a 100644
--- a/templates/components/phone_input.html
+++ b/templates/components/phone_input.html
@@ -3,10 +3,10 @@
 {% macro PhoneInput(phone_number, phone_ext, placeholder_phone="") %}
   <div class='phone-input'>
       <div class='phone-input__phone'>
-        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', inset_form=True) }}
+        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone') }}
       </div>
       <div class='phone-input__extension'>
-        {{ TextInput(phone_ext, validation='phoneExt', inset_form=True)}}
+        {{ TextInput(phone_ext, validation='phoneExt')}}
       </div>
   </div>
 {%- endmacro %}
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index 51528970..1b7e5aa7 100644
--- a/templates/components/text_input.html
+++ b/templates/components/text_input.html
@@ -17,8 +17,7 @@
   optional=True,
   showLabel=True,
   watch=False,
-  show_validation=True,
-  inset_form=False) -%}
+  show_validation=True) -%}
 
   <textinput
     v-cloak
@@ -29,7 +28,6 @@
     {% if initial_value or field.data is not none %}initial-value='{{ initial_value or field.data }}'{% endif %}
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     v-bind:optional={{ optional|lower }}
-    v-bind:inset-form={{ inset_form|lower }}
     key='{{ field.name }}'
     :watch='{{ watch | string | lower }}'
     inline-template>
diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html
index 3822271d..f13f5753 100644
--- a/templates/fragments/edit_user_form.html
+++ b/templates/fragments/edit_user_form.html
@@ -11,15 +11,15 @@
       <div class='panel__content'>
         <div class='form-row'>
           <div class='form-col form-col--half'>
-            {{ TextInput(form.first_name, validation='requiredField', inset_form=True) }}
+            {{ TextInput(form.first_name, validation='requiredField') }}
           </div>
 
           <div class='form-col form-col--half'>
-            {{ TextInput(form.last_name, validation='requiredField', inset_form=True) }}
+            {{ TextInput(form.last_name, validation='requiredField') }}
           </div>
         </div>
 
-        {{ TextInput(form.email, validation='email', inset_form=True) }}
+        {{ TextInput(form.email, validation='email') }}
         {{ PhoneInput(form.phone_number, form.phone_ext) }}
 
         {{ OptionsInput(form.service_branch, inset_form=True) }}
diff --git a/templates/portfolios/admin.html b/templates/portfolios/admin.html
index d451c9df..a4268f44 100644
--- a/templates/portfolios/admin.html
+++ b/templates/portfolios/admin.html
@@ -17,7 +17,7 @@
               {{ portfolio_form.csrf_token }}
               <div class='form-row'>
                 <div class='form-col form-col--half'>
-                  {{ TextInput(portfolio_form.name, validation="portfolioName", inset_form=True) }}
+                  {{ TextInput(portfolio_form.name, validation="portfolioName") }}
                 </div>
                 <div class='edit-portfolio-name action-group'>
                   {{ SaveButton(text='Save', additional_classes='usa-button-big') }}
diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html
index 4e7f0047..4fe5f75a 100644
--- a/templates/portfolios/applications/settings.html
+++ b/templates/portfolios/applications/settings.html
@@ -25,8 +25,8 @@
             </p>
             <div class="form-row">
               <div class="form-col form-col--two-thirds">
-                {{ TextInput(application_form.name, inset_form=True) }}
-                {{ TextInput(application_form.description, paragraph=True, inset_form=True) }}
+                {{ TextInput(application_form.name) }}
+                {{ TextInput(application_form.description, paragraph=True) }}
               </div>
               <div class="form-col form-col--third">
                 {% if user_can(permissions.DELETE_APPLICATION) %}

From 981171d8db58d2df8adbeaa90493b4479a7d334c Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Tue, 27 Aug 2019 16:06:56 -0400
Subject: [PATCH 4/7] Remove inset_form prop from options inputs

---
 js/components/options_input.js          | 3 +--
 templates/components/options_input.html | 4 +---
 templates/fragments/edit_user_form.html | 6 +++---
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/js/components/options_input.js b/js/components/options_input.js
index 66e82838..6c82b39b 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -22,7 +22,6 @@ export default {
       type: String,
       default: '',
     },
-    insetForm: Boolean,
   },
 
   created: function() {
@@ -37,7 +36,7 @@ export default {
     const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
       showError: showError,
-      showValid: !this.insetForm && (!showError && !!this.initialValue),
+      showValid: false,
       validationError: this.initialErrors.join(' '),
       value: this.initialValue,
     }
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index 05416d93..38c964f5 100644
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@@ -9,8 +9,7 @@
   show_validation=True,
   disabled=False,
   watch=False,
-  optional=True,
-  inset_form=False) -%}
+  optional=True) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
@@ -20,7 +19,6 @@
     v-bind:watch='{{ watch | string | lower }}'
     v-bind:optional={{ optional|lower }}
     v-bind:null-option="'{{ field.default }}'"
-    v-bind:inset-form={{ inset_form|lower }}
     >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html
index f13f5753..f73284fd 100644
--- a/templates/fragments/edit_user_form.html
+++ b/templates/fragments/edit_user_form.html
@@ -22,9 +22,9 @@
         {{ TextInput(form.email, validation='email') }}
         {{ PhoneInput(form.phone_number, form.phone_ext) }}
 
-        {{ OptionsInput(form.service_branch, inset_form=True) }}
-        {{ OptionsInput(form.citizenship, inset_form=True) }}
-        {{ OptionsInput(form.designation, inset_form=True) }}
+        {{ OptionsInput(form.service_branch) }}
+        {{ OptionsInput(form.citizenship) }}
+        {{ OptionsInput(form.designation) }}
 
 
         <div class="usa-input">

From 17fb264440de9dcabc4e3b566dc6cfc213c36895 Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Tue, 27 Aug 2019 16:32:03 -0400
Subject: [PATCH 5/7] Remove inset_form prop from date picker

---
 js/components/date_selector.js          | 3 +--
 templates/components/date_picker.html   | 4 +---
 templates/fragments/edit_user_form.html | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index cdda5276..311d5514 100644
--- a/js/components/date_selector.js
+++ b/js/components/date_selector.js
@@ -28,7 +28,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    insetForm: Boolean,
   },
 
   data: function() {
@@ -37,7 +36,7 @@ export default {
       month: this.initialmonth,
       year: this.initialyear,
       name: this.nameTag,
-      showValidation: !this.insetForm,
+      showValidation: false,
     }
   },
 
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index b6e97e08..2774aec5 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -7,8 +7,7 @@
   mindate=None,
   maxdate=None,
   watch=False,
-  optional=True,
-  inset_form=False) -%}
+  optional=True) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -19,7 +18,6 @@
   initialyear="{{ field.data.year }}"
   v-bind:watch='{{ watch | string | lower }}'
   :optional='{{ optional | string | lower }}'
-  v-bind:inset-form={{ inset_form|lower }}
   inline-template>
 
     <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html
index f73284fd..56f61b80 100644
--- a/templates/fragments/edit_user_form.html
+++ b/templates/fragments/edit_user_form.html
@@ -28,7 +28,7 @@
 
 
         <div class="usa-input">
-          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate, inset_form=True) }}
+          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
         </div>
       </div>
     </div>

From 444d2568483ebb2b1c3e054972996f94dc2f4de8 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 29 Aug 2019 12:50:53 -0400
Subject: [PATCH 6/7] Check if field is valid on blur if it is modified and not
 optional

---
 js/components/text_input.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/components/text_input.js b/js/components/text_input.js
index 962fcabf..92c8c7e4 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -102,6 +102,8 @@ export default {
     onBlur: function(e) {
       if (!(this.optional && e.target.value === '')) {
         this._checkIfValid({ value: e.target.value.trim(), invalidate: true })
+      } else if (this.modified && !this.optional) {
+        this._checkIfValid({ value: e.target.value.trim(), invalidate: true })
       }
       this.value = e.target.value.trim()
 

From c31fb78a47b8e18f2cb2504209bd8ae8b4d19726 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 29 Aug 2019 12:51:20 -0400
Subject: [PATCH 7/7] Require fields in user profile form

---
 templates/components/phone_input.html   | 6 +++---
 templates/fragments/edit_user_form.html | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/templates/components/phone_input.html b/templates/components/phone_input.html
index 62a1c18a..74200436 100644
--- a/templates/components/phone_input.html
+++ b/templates/components/phone_input.html
@@ -1,12 +1,12 @@
 {% from "components/text_input.html" import TextInput %}
 
-{% macro PhoneInput(phone_number, phone_ext, placeholder_phone="") %}
+{% macro PhoneInput(phone_number, phone_ext, placeholder_phone="", phone_optional=True, extension_optional=True) %}
   <div class='phone-input'>
       <div class='phone-input__phone'>
-        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone') }}
+        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', optional=phone_optional) }}
       </div>
       <div class='phone-input__extension'>
-        {{ TextInput(phone_ext, validation='phoneExt')}}
+        {{ TextInput(phone_ext, validation='phoneExt', optional=extension_optional) }}
       </div>
   </div>
 {%- endmacro %}
diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html
index 56f61b80..473b8d3f 100644
--- a/templates/fragments/edit_user_form.html
+++ b/templates/fragments/edit_user_form.html
@@ -11,16 +11,16 @@
       <div class='panel__content'>
         <div class='form-row'>
           <div class='form-col form-col--half'>
-            {{ TextInput(form.first_name, validation='requiredField') }}
+            {{ TextInput(form.first_name, validation='requiredField', optional=False) }}
           </div>
 
           <div class='form-col form-col--half'>
-            {{ TextInput(form.last_name, validation='requiredField') }}
+            {{ TextInput(form.last_name, validation='requiredField', optional=False) }}
           </div>
         </div>
 
-        {{ TextInput(form.email, validation='email') }}
-        {{ PhoneInput(form.phone_number, form.phone_ext) }}
+        {{ TextInput(form.email, validation='email', optional=False) }}
+        {{ PhoneInput(form.phone_number, form.phone_ext, phone_optional=False) }}
 
         {{ OptionsInput(form.service_branch) }}
         {{ OptionsInput(form.citizenship) }}