From 8957c3aff842295a839a7fc5db520180e57c9dcf Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sat, 16 Jun 2018 22:36:48 +0200
Subject: [PATCH] feat(ui): validate new project folder name

---
 packages/@vue/cli-ui/locales/en.json             |  3 ++-
 packages/@vue/cli-ui/src/views/ProjectCreate.vue | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/@vue/cli-ui/locales/en.json b/packages/@vue/cli-ui/locales/en.json
index a0341dca03..8568ca1b1f 100644
--- a/packages/@vue/cli-ui/locales/en.json
+++ b/packages/@vue/cli-ui/locales/en.json
@@ -193,7 +193,8 @@
               "placeholder": "my-app",
               "tooltip": "Change base folder",
               "action": "Select this folder",
-              "folder-exists": "This folder already exists"
+              "folder-exists": "This folder already exists",
+              "folder-name-invalid": "Folder name invalid"
             },
             "manager": {
               "label": "Package manager",
diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
index 0dd6ff0010..7d7505475d 100644
--- a/packages/@vue/cli-ui/src/views/ProjectCreate.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -50,6 +50,14 @@
                       />
                     </div>
 
+                    <div
+                      v-if="formData.folder && !folderNameValid"
+                      class="vue-ui-text danger banner"
+                    >
+                      <VueIcon icon="error" class="big"/>
+                      <span>{{ $t('views.project-create.tabs.details.form.folder.folder-name-invalid') }}</span>
+                    </div>
+
                     <ApolloQuery
                       v-if="formData.folder"
                       :query="require('../graphql/folderExists.gql')"
@@ -477,8 +485,13 @@ export default {
   },
 
   computed: {
+    folderNameValid () {
+      const name = this.formData.folder
+      return !name.match(/[/@\s+%:]/) && encodeURIComponent(name) === name
+    },
+
     detailsValid () {
-      return !!this.formData.folder
+      return !!this.formData.folder && this.folderNameValid
     },
 
     presetValid () {