From e4649e1b6040e6f3b9d986a1496b4739380dcff5 Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Thu, 23 Aug 2018 16:50:43 -0400
Subject: [PATCH] Show confirmation modal when creating project

---
 js/components/forms/new_project.js   |  5 +++++
 templates/workspace_project_new.html | 23 +++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js
index ba4e13f5..634c49ff 100644
--- a/js/components/forms/new_project.js
+++ b/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,
     }
   },
 
diff --git a/templates/workspace_project_new.html b/templates/workspace_project_new.html
index 874f93d3..b32178c7 100644
--- a/templates/workspace_project_new.html
+++ b/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>