Block special character for project name

vscode-wpilib/src/webviews/pages/projectcreatorpage.ts

@@ -1,7 +1,7 @@
 'use strict';
 
 import { IProjectIPCReceive, IProjectIPCSend, ProjectType } from './projectcreatorpagetypes';
-import { validateProject, validateTeamNumber } from './sharedpages';
+import { validateProject, validateTeamNumber, validateProjectFolder } from './sharedpages';
 
 interface IVsCodeApi {
   postMessage(message: IProjectIPCReceive): void;
@@ -127,4 +127,6 @@ window.addEventListener('load', (_: Event) => {
   document.getElementById('teamNumber')!.oninput = validateTeamNumber;
   // tslint:disable-next-line:no-non-null-assertion
   document.getElementById('generateProject')!.onclick = generateProject;
+  // tslint:disable-next-line:no-non-null-assertion
+  document.getElementById('projectFolder')!.oninput = validateProjectFolder;
 });

vscode-wpilib/src/webviews/pages/sharedpages.ts

@@ -5,12 +5,45 @@ declare global {
     interface Window { i18nTrans: (domain: string, message: string, ...args: any[]) => string; }
 }
 
+export function hasSpecialCharacter(str: string): boolean {
+  const characterBlacklist = ['@', '!', '.', '/', '\\', '$', '&', '|', '`', '~', ':', ' '];
+  // check black list characters
+  for (const c of str) {
+    if (characterBlacklist.indexOf(c) !== -1) {
+      return true;
+    }
+  }
+  // check prefix and suffix
+  for (const c of (str[0] + str[str.length - 1])) {
+    if (c >= '0' && c <= '9') {
+      continue;
+    }
+    if (c >= 'A' && c <= 'Z') {
+      continue;
+    }
+    if (c >= 'a' && c <= 'z') {
+      continue;
+    }
+    return true;
+  }
+  return false;
+}
+
+export function validatePath(str: string): boolean {
+  const characterBlacklist = ['@', '!', '.', '$', '&', '|', '`'];
+  for (const c of str) {
+    if(characterBlacklist.indexOf(c) !== -1) {
+      return false;
+    }
+  } 
+  return true;
+}
+
 export function validateProject() {
   const elem = document.getElementById('projectName') as HTMLButtonElement;
   const s = elem.value;
-  const match = s.match(/\w[\w-]*$/gm);
   const pdiv = document.getElementById('projectnamediv') as HTMLDivElement;
-  if (match === null || match.length === 0) {
+  if ( hasSpecialCharacter(s)) {
     pdiv.innerText = window.i18nTrans('ui', 'Invalid project name');
     pdiv.classList.add('error');
     elem.classList.add('error');
@@ -36,3 +69,18 @@ export function validateTeamNumber() {
     elem.classList.remove('error');
   }
 }
+
+export function validateProjectFolder() {
+  const input = document.getElementById('projectFolder') as HTMLInputElement;
+  const div = document.getElementById('projectFolderdiv') as HTMLInputElement;
+  const s = input.value;
+  if (!validatePath(s)) {
+    div.innerText = 'Select a folder to place the new project into. path includes illegal character(s)';
+    div.classList.add('error');
+    input.classList.add('error');
+  } else {
+    div.innerText = 'Select a folder to place the new project into.';
+    div.classList.remove('error');
+    input.classList.remove('error');
+  }
+}

wpilib-utility-standalone/projectcreator.html

@@ -43,9 +43,8 @@ <h1>Welcome to WPILib New Project Creator</h1>
   </select>
 
   <br/>
-  <br/> Select a folder to place the new project into.
-  <br/>
-  <input id="projectFolder" type="text" style="width: 100%; margin-top: 10px; margin-bottom: 10px" />
+  <div id="projectFolderdiv"> Select a folder to place the new project into. </div>
+  <input id="projectFolder" oninput="validators.validateProjectFolder(document.getElementById('projectFolder'), document.getElementById('projectFolderdiv'));" type="text" style="width: 100%; margin-top: 10px; margin-bottom: 10px" />
   <br/>
   <button onclick="exports.projectSelectButtonClick();">Select a new project folder</button>
   <br/>

wpilib-utility-standalone/src/validators.ts

@@ -1,7 +1,40 @@
+export function hasSpecialCharacter(str: string): boolean {
+  const characterBlacklist = ['@', '!', '.', '/', '\\', '$', '&', '|', '`', '~', ':', ' '];
+  // check black list characters
+  for (const c of str) {
+    if (characterBlacklist.indexOf(c) !== -1) {
+      return true;
+    }
+  }
+  // check prefix and suffix
+  for (const c of (str[0] + str[str.length - 1])) {
+    if (c >= '0' && c <= '9') {
+      continue;
+    }
+    if (c >= 'A' && c <= 'Z') {
+      continue;
+    }
+    if (c >= 'a' && c <= 'z') {
+      continue;
+    }
+    return true;
+  }
+  return false;
+}
+
+export function validatePath(str: string): boolean {
+  const characterBlacklist = ['@', '!', '.', '$', '&', '|', '`'];
+  for (const c of str) {
+    if (characterBlacklist.indexOf(c) !== -1) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export function validateProject(input: HTMLInputElement, div: HTMLDivElement) {
   const s = input.value;
-  const match = s.match(/\w[\w-]*$/gm);
-  if (match === null || match.length === 0) {
+  if (hasSpecialCharacter(s)) {
     div.innerText = 'Invalid Project Name';
     div.classList.add('error');
     input.classList.add('error');
@@ -26,3 +59,16 @@ export function validateTeamNumber(input: HTMLInputElement, div: HTMLDivElement)
     input.classList.remove('error');
   }
 }
+
+export function validateProjectFolder(input: HTMLInputElement, div: HTMLDivElement) {
+  const s = input.value;
+  if (!validatePath(s)) {
+    div.innerText = 'Select a folder to place the new project into. path includes illegal character(s)';
+    div.classList.add('error');
+    input.classList.add('error');
+  } else {
+    div.innerText = 'Select a folder to place the new project into.';
+    div.classList.remove('error');
+    input.classList.remove('error');
+  }
+}