Merge branch 'master' into ui/tooltips

js/components/text_input.js

@@ -14,32 +14,54 @@ export default {
       type: String,
       default: () => 'anything'
     },
-    value: {
+    initialValue: {
       type: String,
       default: () => ''
-    }
+    },
+    initialErrors: Array
   },
 
   data: function () {
     return {
-      showError: false,
+      showError: (this.initialErrors && this.initialErrors.length) || false,
       showValid: false,
       mask: inputValidations[this.validation].mask,
-      renderedValue: this.value
+      pipe: inputValidations[this.validation].pipe || undefined,
+      keepCharPositions: inputValidations[this.validation].keepCharPositions || false,
+      validationError: inputValidations[this.validation].validationError || '',
+      value: this.initialValue,
+      modified: false
+    }
+  },
+
+  computed:{
+    rawValue: function () {
+      return this._rawValue(this.value)
     }
   },
 
   mounted: function () {
-    const value = this.$refs.input.value
-    if (value) {
-      this._checkIfValid({ value, invalidate: true })
-      this.renderedValue = conformToMask(value, this.mask).conformedValue
+    if (this.value) {
+      this._checkIfValid({ value: this.value, invalidate: true })
+
+      if (this.mask && this.validation !== 'email') {
+        const mask = typeof this.mask.mask !== 'function'
+          ? this.mask
+          : mask.mask(this.value).filter((val) => val !== '[]')
+
+        this.value = conformToMask(this.value, mask).conformedValue
+      }
     }
   },
 
   methods: {
     // When user types a character
-    onInput: function (value) {
+    onInput: function (e) {
+      // When we use the native textarea element, we receive an event object
+      // When we use the masked-input component, we receive the value directly
+      const value = typeof e === 'object' ? e.target.value : e
+      this.value = value
+      this.modified = true
       this._checkIfValid({ value })
     },
 
@@ -52,7 +74,11 @@ export default {
     //
     _checkIfValid: function ({ value, invalidate = false}) {
       // Validate the value
-      const valid = this._validate(value)
+      let valid = this._validate(value)
+
+      if (!this.modified && this.initialErrors && this.initialErrors.length) {
+        valid = false
+      }
 
       // Show error messages or not
       if (valid) {
@@ -70,13 +96,14 @@ export default {
       })
     },
 
-    _validate: function (value) {
-      // Strip out all the mask characters
-      let rawValue = inputValidations[this.validation].unmask.reduce((currentValue, character) => {
+    _rawValue: function (value) {
+      return inputValidations[this.validation].unmask.reduce((currentValue, character) => {
         return currentValue.split(character).join('')
       }, value)
+    },
 
-      return inputValidations[this.validation].match.test(rawValue)
+    _validate: function (value) {
+      return inputValidations[this.validation].match.test(this._rawValue(value))
     }
   }
 }

js/index.js

@@ -24,7 +24,16 @@ const app = new Vue({
     return {
       modals: {
         styleguideModal: false,
+        pendingFinancialVerification: false,
+        pendingCCPOApproval: false,
       }
     }
+  },
+  mounted: function() {
+    const modalOpen = document.querySelector("#modalOpen");
+    if (modalOpen) {
+      const modal = modalOpen.getAttribute("data-modal");
+      this.modals[modal] = true;
+    }
   }
 })

js/lib/input_validations.js

@@ -1,20 +1,56 @@
 import createNumberMask from 'text-mask-addons/dist/createNumberMask'
 import emailMask from 'text-mask-addons/dist/emailMask'
+import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'
 
 export default {
   anything: {
     mask: false,
     match: /^(?!\s*$).+/,
     unmask: [],
+    validationError: 'Please enter a response.'
+  },
+  integer: {
+    mask: createNumberMask({ prefix: '', allowDecimal: false }),
+    match: /^[1-9]\d*$/,
+    unmask: [','],
+    validationError: 'Please enter a number.'
   },
   dollars: {
     mask: createNumberMask({ prefix: '$', allowDecimal: true }),
     match: /^-?\d+\.?\d*$/,
-    unmask: ['$',',']
+    unmask: ['$',','],
+    validationError: 'Please enter a dollar amount.'
+  },
+  gigabytes: {
+    mask: createNumberMask({ prefix: '', suffix:'GB', allowDecimal: false }),
+    match: /^[1-9]\d*$/,
+    unmask: [',','GB'],
+    validationError: 'Please enter an amount of data in gigabytes.'
   },
   email: {
     mask: emailMask,
     match: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,
     unmask: [],
+    validationError: 'Please enter a valid e-mail address.'
+  },
+  date: {
+    mask: [/\d/,/\d/,'/',/\d/,/\d/,'/',/\d/,/\d/,/\d/,/\d/],
+    match: /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
+    unmask: [],
+    pipe: createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM'),
+    keepCharPositions: true,
+    validationError: 'Please enter a valid date in the form MM/DD/YYYY.'
+  },
+  usPhone: {
+    mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    match: /^\d{10}$/,
+    unmask: ['(',')','-',' '],
+    validationError: 'Please enter a 10-digit phone number.'
+  },
+  dodId: {
+    mask: createNumberMask({ prefix: '', allowDecimal: false, includeThousandsSeparator: false }),
+    match: /^\d{10}$/,
+    unmask: [],
+    validationError: 'Please enter a 10-digit D.O.D. ID number.'
   }
 }