refactor new project component form validation

js/components/forms/new_project.js

@@ -3,45 +3,6 @@ import textinput from '../text_input'
 
 const createEnvironment = (name) => ({ name })
 
-const VALIDATIONS = {
-  showMissingError: "hasEnvironments",
-  showUniqueError: "envNamesAreUnique",
-  showEmptyError: "environmentsHaveNames",
-}
-
-class Validator {
-  constructor(validations) {
-    this.validations = validations
-  }
-
-  errorList() {
-    let errors = {}
-    this.map((key) => {
-      errors[key] = false
-    })
-    return errors
-  }
-
-  map(callback) {
-    Object.keys(this.validations).map((k) => callback(k))
-  }
-
-  update(object) {
-    this.map((errName) => {
-      if (object[this.validations[errName]]()) {
-        object.errors[errName] = false
-      }
-    })
-  }
-
-  validate(object) {
-    this.map((errName) => {
-      object.errors[errName] = !object[this.validations[errName]]()
-    })
-    return Object.values(object.errors).every(e => e)
-  }
-}
-
 export default {
   name: 'new-project',
 
@@ -70,11 +31,13 @@ export default {
       : [""]
     ).map(createEnvironment)
 
-    const validator = new Validator(VALIDATIONS)
-
     return {
-      validator,
-      errors: validator.errorList(),
+      validations: [
+        {func: "hasEnvironments", message: "Provide at least one environment name."},
+        {func: "envNamesAreUnique", message: "Environment names must be unique."},
+        {func: "environmentsHaveNames", message: "Environment names cannot be empty."},
+      ],
+      errors: [],
       environments,
       name,
     }
@@ -84,10 +47,6 @@ export default {
     this.$root.$on('onEnvironmentAdded', this.addEnvironment)
   },
 
-  updated: function() {
-    this.validator.update(this)
-  },
-
   methods: {
     addEnvironment: function (event) {
       this.environments.push(createEnvironment(""))
@@ -99,6 +58,14 @@ export default {
       }
     },
 
+    validate: function() {
+      this.errors = this.validations.map((validation) => {
+        if (!this[validation.func]()) {
+          return validation.message
+        }
+      }).filter(Boolean)
+    },
+
     hasEnvironments: function () {
       return this.environments.length > 0 && this.environments.some((e) => e.name !== "")
     },
@@ -128,7 +95,8 @@ export default {
         return newVal.showValid && previous
       }, true)
 
-      isValid = this.validator.validate(this) && isValid
+      this.validate()
+      isValid = this.errors.length == 0 && isValid
 
       if (isValid) {
         this.openModal(modalName)

templates/components/alert.html

@@ -1,6 +1,6 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Alert(title, message=None, actions=None, level='info', fragment=None) -%}
+{% macro Alert(title, message=None, actions=None, level='info', fragment=None, vue_template=False) -%}
   {% set role = 'alertdialog' if actions else 'alert' %}
   {% set levels = {
     'warning': {
@@ -25,7 +25,11 @@
     {{ Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') }}
 
     <div class='alert__content'>
-      <h2 class='alert__title'>{{title}}</h2>
+      {% if vue_template %}
+        <h2 class='alert__title' v-html='title'></h2>
+      {% else %}
+        <h2 class='alert__title'>{{title}}</h2>
+      {% endif %}
 
       {% if message %}
         <div class='alert__message'>{{ message | safe }}</div>

templates/fragments/edit_project_form.html

@@ -42,14 +42,8 @@
       </div>
     </div>
 
-    <div v-if="errors.showMissingError">
-      {{ Alert("Provide at least one environment name.", level="error") }}
-    </div>
-    <div v-if="errors.showUniqueError">
-      {{ Alert("Environment names must be unique.", level="error") }}
-    </div>
-    <div v-if="errors.showEmptyError">
-      {{ Alert("Environment names cannot be empty.", level="error") }}
+    <div v-for="title in errors">
+      {{ Alert(message=None, level="error", vue_template=True) }}
     </div>
 
       <div class="block-list project-list-item">
@@ -78,7 +72,6 @@
         </div>
       </div>
 
-
       <div class="action-group">
         <button v-on:click="validateAndOpenModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
       </div>