From b649d17eb8b86e15f44f6c0a8b597f91e6bdabb9 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 7 Aug 2018 15:43:03 -0400
Subject: [PATCH] input validations WIP

---
 js/components/text_input.js | 66 +++++++++++++++++++++++++++++++++++--
 js/index.js                 | 12 +++----
 js/lib/input_validations.js | 12 +++++++
 package.json                |  3 +-
 templates/styleguide.html   | 15 +++++++--
 yarn.lock                   |  4 +++
 6 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 js/lib/input_validations.js

diff --git a/js/components/text_input.js b/js/components/text_input.js
index 8baf14b8..a667131a 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -1,3 +1,65 @@
-export default {
-  name: 'textinput'
+import MaskedInput from 'vue-text-mask'
+import inputValidations from '../lib/input_validations'
+
+const validationTypes = {
+  matchAnything: /^(?!\s*$).+/,
+  matchDigits: /^\d+$/,
+  matchNumbers: /^-?\d+\.?\d*$/,
+  matchUrl: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
+  matchEmail: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
+}
+
+export default {
+  name: 'textinput',
+  data: () =>({
+    valid: false,
+    filled: false,
+    showError: false,
+    showValid: false,
+    validationType: inputValidations.anything.match,
+    mask: inputValidations.anything.mask
+  }),
+  components: {
+    MaskedInput
+  },
+  methods: {
+    // When user types a character
+    onInput: function (value) {
+      this._checkIfFilled(value)
+      this._checkIfValid(value)
+    },
+
+    // When field is blurred (un-focused)
+    onChange: function (value) {
+      this._checkIfInvalid(value)
+    },
+
+    _checkIfFilled: function (value) {
+      this.filled = (value && value !== '') ? true : false
+    },
+
+    _checkIfValid: function (value) {
+      const valid = this._validate(value)
+      if (valid) {
+        this.showError = false
+      }
+      this.valid = valid
+      this.showValid = valid
+    },
+
+    _checkIfInvalid: function (value) {
+      const valid = this._validate(value)
+      if (!valid) {
+        this.showError = true
+      } else {
+        this.showError = false
+      }
+      this.valid = valid
+      this.showValid = valid
+    },
+
+    _validate: function (value) {
+      return this.validationType.test(value)
+    }
+  }
 }
diff --git a/js/index.js b/js/index.js
index b1d81898..59883c65 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,14 +1,13 @@
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 
-import TextInput from './components/text_input'
-
-const components = {
-  TextInput
-}
+import textinput from './components/text_input'
 
 const app = new Vue({
   el: '#app-root',
+  components: {
+    textinput
+  },
   methods: {
     closeModal: function(name) {
       this.modals[name] = false
@@ -23,6 +22,5 @@ const app = new Vue({
         styleguideModal: false,
       }
     }
-  },
-  components: components
+  }
 })
diff --git a/js/lib/input_validations.js b/js/lib/input_validations.js
new file mode 100644
index 00000000..c65b99bc
--- /dev/null
+++ b/js/lib/input_validations.js
@@ -0,0 +1,12 @@
+export default {
+  anything: {
+    mask: [],
+    unmask: null,
+    match: /^(?!\s*$).+/
+  },
+  dollars: {
+    mask: ['$','/^\d+/','.','/^\d+/'],
+    unmask: ['$',','],
+    match: /^-?\d+\.?\d*$/
+  }
+}
diff --git a/package.json b/package.json
index 61eddafa..5fed2278 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "npm": "^6.0.1",
     "parcel": "^1.9.7",
     "uswds": "^1.6.3",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vue-text-mask": "^6.1.2"
   },
   "devDependencies": {
     "node-sass": "^4.9.2"
diff --git a/templates/styleguide.html b/templates/styleguide.html
index dd313184..0e263ee5 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -130,7 +130,7 @@
 
 
       <form>
-        <TextInput inline-template>
+        <textinput inline-template>
           <div class='usa-input'>
             <label for='basic-text-1'>
               Basic Text Input
@@ -138,9 +138,18 @@
                 This is some help text to explain what this form field is and why you should fill it out.
               </span>
             </label>
-            <input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
+            <masked-input
+              v-on:input='onInput'
+              v-on:change='onChange'
+              id='basic-text-1'
+              type='text'
+              placeholder='this is a sample of what you should enter'
+              :mask="mask">
+            </masked-input>
+          <div v-if='showError'>Error</div>
+          <div v-if='showValid'>Valid</div>
           </div>
-        </TextInput>
+        </textinput>
 
         <div class='usa-input usa-input--error'>
           <label for='basic-text-2'>
diff --git a/yarn.lock b/yarn.lock
index b8e561fc..d1e24cf1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6675,6 +6675,10 @@ vm-browserify@0.0.4, vm-browserify@~0.0.1:
   dependencies:
     indexof "0.0.1"
 
+vue-text-mask@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/vue-text-mask/-/vue-text-mask-6.1.2.tgz#2cc18a1ca04ea66798518a9373929a12256d14b9"
+
 vue@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"