From cf65c39cef65830a06c5936ac9c0eade32075be5 Mon Sep 17 00:00:00 2001
From: Steven Zou <szou@vmware.com>
Date: Tue, 16 May 2017 12:17:18 -0700
Subject: [PATCH] Change the validation way of project name

---
 .../create-project.component.html             | 27 +++++++------
 .../create-project.component.ts               | 38 +++++++++++++++++++
 src/ui_ng/src/i18n/lang/en-us-lang.json       |  1 +
 src/ui_ng/src/i18n/lang/es-es-lang.json       |  1 +
 src/ui_ng/src/i18n/lang/zh-cn-lang.json       |  3 +-
 5 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.html b/src/ui_ng/src/app/project/create-project/create-project.component.html
index dfd036b2c..e3a647962 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.component.html
+++ b/src/ui_ng/src/app/project/create-project/create-project.component.html
@@ -5,19 +5,22 @@
         <form #projectForm="ngForm">
             <section class="form-block">
                 <div class="form-group" style="padding-left: 135px;">
-                    <label for="create_project_name" class="col-md-3 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
-                    <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="create_project_name"  [(ngModel)]="project.name" name="name" size="38" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
-            <span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.required && (projectName.dirty || projectName.touched)">
-              {{'PROJECT.NAME_IS_REQUIRED' | translate}}
-            </span>
-            <span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.minlength && (projectName.dirty || projectName.touched)">
-              {{'PROJECT.NAME_MINIMUM_LENGTH' | translate}}
-            </span>
-            <span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.targetExists && (projectName.dirty || projectName.touched)">
-              {{'PROJECT.NAME_ALREADY_EXISTS' | translate}}
+                    <label for="create_project_name" class="col-md-3 form-group-label-override required">{{'PROJECT.NAME' | translate}}</label>
+                    <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
+            <input type="text" id="create_project_name"  [(ngModel)]="project.name" 
+            name="create_project_name" size="36" 
+            required
+            pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
+            minlength="2" 
+            #projectName="ngModel" 
+            (input)='handleValidation(false)' 
+            (blur)='handleValidation(true)'
+            >
+            <span class="tooltip-content">
+              {{ nameTooltipText | translate }}
             </span>
           </label>
+                    <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
                 </div>
                 <div class="form-group" style="padding-left: 135px;">
                     <label class="col-md-4 form-group-label-override">{{'PROJECT.ACCESS_LEVEL' | translate}}</label>
@@ -36,6 +39,6 @@
     </div>
     <div class="modal-footer">
         <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
-        <button type="button" class="btn btn-primary" [disabled]="projectForm.form.invalid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
+        <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
     </div>
 </clr-modal>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.ts b/src/ui_ng/src/app/project/create-project/create-project.component.ts
index 053a74277..774aa9d55 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.component.ts
+++ b/src/ui_ng/src/app/project/create-project/create-project.component.ts
@@ -45,6 +45,10 @@ export class CreateProjectComponent implements AfterViewChecked {
   staticBackdrop: boolean = true;
   closable: boolean = false;
 
+  isNameValid: boolean = true;
+  nameTooltipText: string = 'PROJECT.NAME_TOOLTIP';
+  checkOnGoing: boolean = false;
+
   @Output() create = new EventEmitter<boolean>();
   @ViewChild(InlineAlertComponent)
   inlineAlert: InlineAlertComponent;
@@ -129,5 +133,39 @@ export class CreateProjectComponent implements AfterViewChecked {
     this.inlineAlert.close();
     this.projectForm.reset();
   }
+
+  public get isValid(): boolean {
+    return this.currentForm && this.currentForm.valid && this.isNameValid;
+  }
+
+  //Handle the form validation
+  handleValidation(flag: boolean): void {
+    if (flag) {
+      //validate
+      let cont = this.currentForm.controls["create_project_name"];
+      if (cont) {
+        this.isNameValid = cont.valid;
+        if (this.isNameValid && this.hasChanged) {
+          //Check exiting from backend
+          this.checkOnGoing = true;
+          this.projectService
+            .checkProjectExists(cont.value).toPromise()
+            .then(() => {
+              //Project existing
+              this.isNameValid = false;
+              this.nameTooltipText = 'PROJECT.NAME_ALREADY_EXISTS';
+              this.checkOnGoing = false;
+            })
+            .catch(error => {
+              this.checkOnGoing = false;
+            });
+        }
+      }
+    } else {
+      //reset
+      this.isNameValid = true;
+      this.nameTooltipText = 'PROJECT.NAME_TOOLTIP';
+    }
+  }
 }
 
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index 5a43b6c17..1447a8b2c 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -136,6 +136,7 @@
         "PUBLIC_PROJECTS": "Public Projects",
         "PROJECT": "Project",
         "NEW_PROJECT": "New Project",
+        "NAME_TOOLTIP": "Project name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
         "NAME_IS_REQUIRED": "Project name is required.",
         "NAME_MINIMUM_LENGTH": "Project name is too short, it should be greater than 2 characters.",
         "NAME_ALREADY_EXISTS": "Project name already exists.",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index be0f93f12..d924a54a2 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -136,6 +136,7 @@
         "PUBLIC_PROJECTS": "Proyectos Públicos",
         "PROJECT": "Proyecto",
         "NEW_PROJECT": "Nuevo proyecto",
+        "NAME_TOOLTIP": "Project name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
         "NAME_IS_REQUIRED": "El nombre del proyecto es obligatorio.",
         "NAME_MINIMUM_LENGTH": "El nombre del proyecto es demasiado corto, debe ser mayor de 2 caracteres.",
         "NAME_ALREADY_EXISTS": "Ya existe un proyecto con ese nombre.",
diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
index 7fdf36ecd..4b57a3422 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -136,7 +136,8 @@
         "PUBLIC_PROJECTS": "公开项目",
         "PROJECT": "项目",
         "NEW_PROJECT": "新建项目",
-        "NAME_IS_REQUIRED": "项目名称为必填项",
+        "NAME_TOOLTIP": "项目名称由小写字符、数字和._-组成且至少2个字符并以字符或者数字开头。",
+        "NAME_IS_REQUIRED": "项目名称为必填项。",
         "NAME_MINIMUM_LENGTH": "项目名称长度过短，至少多于2个字符。",
         "NAME_ALREADY_EXISTS": "项目名称已存在。",
         "NAME_IS_ILLEGAL": "项目名称非法。",