Merge pull request #1039 from dod-ccpo/user-profile-validation

User profile validation

templates/components/date_picker.html

@@ -20,7 +20,7 @@
   :optional='{{ optional | string | 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 }}
@@ -76,8 +76,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>

templates/components/options_input.html

@@ -1,7 +1,15 @@
 {% 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) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template

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 %}

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>