Merge pull request goharbor#9148 from AllForNothing/add-member-nightly

Improve project name validator when adding new project
ilo-repo · Sep 19, 2019 · c360e71 · c360e71
2 parents 4c4897a + 6b2ba60
commit c360e71
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 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
@@ -3,16 +3,21 @@ <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
     <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 @@ <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
                 <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 @@ <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
         <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>
+</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
@@ -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(() => {