Show confirmation modal when creating project

js/components/forms/new_project.js

@@ -1,3 +1,4 @@
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 
 const createEnvironment = (name) => ({ name })
@@ -5,6 +6,8 @@ const createEnvironment = (name) => ({ name })
 export default {
   name: 'new-project',
 
+  mixins: [FormMixin],
+
   components: {
     textinput
   },
@@ -19,6 +22,7 @@ export default {
   data: function () {
     const {
       environment_names,
+      name,
     } = this.initialData
 
     const environments = (
@@ -29,6 +33,7 @@ export default {
 
     return {
       environments,
+      name,
     }
   },
 

templates/workspace_project_new.html

@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/modal.html" import Modal %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/tooltip.html" import Tooltip %}
 {% from "components/alert.html" import Alert %}
@@ -6,8 +7,27 @@
 {% extends "base_workspace.html" %}
 
 {% block workspace_content %}
+
+{% set modalName = "newProjectConfirmation" %}
+
 <new-project inline-template v-bind:initial-data='{{ form.data|tojson }}'>
   <form method="POST" action="{{ url_for('workspaces.update_project', workspace_id=workspace.id) }}" >
+    {% call Modal(name=modalName, dismissable=False) %}
+      <h1>Are you sure you want to create <strong>!{ name }</strong> project?</h1>
+
+      <p>
+      When you click "Create Project" the following environments will be created as individual cloud resource groups under <strong>!{ name }</strong> project:
+      <span v-for="(environment, index) in environments">
+        <strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
+      </span>
+      </p>
+
+      <div class='action-group'>
+        <button type='submit' class='action-group__action usa-button'>Create Project</button>
+        <a v-on:click="closeModal('{{ modalName }}')" class='action-group__action'>Cancel</a>
+      </div>
+    {% endcall %}
+
     {{ form.csrf_token }}
     <div class="panel">
       <div class="panel__heading panel__heading--grow">
@@ -58,8 +78,7 @@
 
 
       <div class="action-group">
-        <input type="submit" value="Create Project" class="usa-button usa-button-primary">
-        <a href="{{ url_for('workspaces.workspace_projects', workspace_id=workspace.id) }}" class="action-group__action">Cancel</a>
+        <div v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary">Create Project</div>
       </div>
 
     </div>