From 6b2ba60c1e89219b99824c7521b69e0a62c66cea Mon Sep 17 00:00:00 2001
From: sshijun <sshijun@vmware.com>
Date: Thu, 19 Sep 2019 13:47:34 +0800
Subject: [PATCH] Improve project name validator when adding new project

Signed-off-by: sshijun <sshijun@vmware.com>
---
 .../create-project.component.html             | 28 +++++++++++--------
 .../create-project.component.ts               |  1 +
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/portal/src/app/project/create-project/create-project.component.html b/src/portal/src/app/project/create-project/create-project.component.html
index 882e84870..b82fcb4a6 100644
--- a/src/portal/src/app/project/create-project/create-project.component.html
+++ b/src/portal/src/app/project/create-project/create-project.component.html
@@ -3,16 +3,21 @@
     <div class="modal-body modal-height">
         <inline-alert></inline-alert>
         <form #projectForm="ngForm" class="clr-form clr-form-horizontal">
-            <clr-input-container>
-                <label class="required">{{'PROJECT.NAME' | translate}}</label>
-                <input clrInput type="text" id="create_project_name" [(ngModel)]="project.name" name="create_project_name" class="input-width"
-                    required pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" minlength="2" #projectName="ngModel" autocomplete="off"
-                    (keyup)='handleValidation()'>
-                <clr-control-error *ngIf="!isNameValid" class="tooltip-content">
-                    {{ nameTooltipText | translate }}
-                </clr-control-error>
-                <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
-            </clr-input-container>
+            <div class="clr-form-control">
+                <label class="required clr-control-label">{{'PROJECT.NAME' | translate}}</label>
+                <div class="clr-control-container" [class.clr-error]="!isNameValid">
+                    <div class="clr-input-wrapper">
+                        <input type="text" id="create_project_name" [(ngModel)]="project.name" name="create_project_name" class="clr-input input-width"
+                               required pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" minlength="2" #projectName="ngModel" autocomplete="off"
+                               (keyup)='handleValidation()'>
+                        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
+                        <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
+                    </div>
+                    <clr-control-error *ngIf="!isNameValid" class="tooltip-content">
+                        {{ nameTooltipText | translate }}
+                    </clr-control-error>
+                </div>
+            </div>
             <clr-checkbox-container>
                 <label class="form-group-label-override">{{'PROJECT.ACCESS_LEVEL' | translate}}
                     <clr-tooltip>
@@ -41,7 +46,6 @@
                 <clr-control-error class="tooltip-content">
                     {{ 'PROJECT.COUNT_QUOTA_TIP' | translate }}
                 </clr-control-error>
-                <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
             </clr-input-container>
             <div class="clr-form-control" *ngIf="isSystemAdmin">
                 <label for="create_project_storage_limit" class="required clr-control-label">{{'PROJECT.STORAGE_QUOTA' | translate}}
@@ -76,4 +80,4 @@
         <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | 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
+</clr-modal>
diff --git a/src/portal/src/app/project/create-project/create-project.component.ts b/src/portal/src/app/project/create-project/create-project.component.ts
index 9512cf2d6..5fd36989a 100644
--- a/src/portal/src/app/project/create-project/create-project.component.ts
+++ b/src/portal/src/app/project/create-project/create-project.component.ts
@@ -89,6 +89,7 @@ export class CreateProjectComponent implements OnInit, OnChanges, OnDestroy {
           this.isNameValid = cont.valid;
           if (this.isNameValid) {
             // Check exiting from backend
+            this.checkOnGoing = true;
             this.projectService
               .checkProjectExists(cont.value)
               .subscribe(() => {