refactor new project component form validation

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>