feat(ui): validate new project folder name

Author: Guillaume Chau

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",

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 () {