Refine the access level of project creation

src/ui_ng/src/app/project/create-project/create-project.component.html

@@ -1,12 +1,12 @@
 <clr-modal [(clrModalOpen)]="createProjectOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
-  <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
+    <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
-  <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
+    <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
-  <div class="modal-body" style="height: 12.8em; overflow-y: hidden;">
+    <div class="modal-body" style="height: 16.8em; overflow-y: hidden;">
-    <form #projectForm="ngForm">
+        <form #projectForm="ngForm">
-      <section class="form-block">
+            <section class="form-block">
-        <div class="form-group" style="padding-left: 135px;">
+                <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" 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">
+                    <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}}
@@ -18,23 +18,24 @@
               {{'PROJECT.NAME_ALREADY_EXISTS' | translate}}
             </span>
           </label>
-        </div>
+                </div>
-        <div class="form-group">
+                <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-4 form-group-label-override">{{'PROJECT.PUBLIC' | translate}}</label>
+                    <label class="col-md-4 form-group-label-override">{{'PROJECT.ACCESS_LEVEL' | translate}}</label>
-          <div class="checkbox-inline">
+                    <div class="checkbox-inline">
-            <input type="checkbox" id="create_project_public" [(ngModel)]="project.public" name="public">
+                        <input type="checkbox" id="create_project_public" [(ngModel)]="project.public" name="public">
-            <label for="create_project_public"></label>
+                        <label for="create_project_public"></label>
-            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right" style="top:-8px; left:-8px;">
+                        <span class="access-level-label">{{ accessLevelDisplayText | translate}}</span>
-             <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
+                        <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-bottom-right" style="top:-8px; left:-8px;">
-             <span class="tooltip-content" style="margin-left: 5px;">{{'PROJECT.INLINE_HELP_PUBLIC' | translate }}</span>
+                            <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
-           </a>
+                            <span class="tooltip-content" style="margin-left: 5px;">{{'PROJECT.INLINE_HELP_PUBLIC' | translate }}</span>
-          </div>
+                        </a>
-        </div>
+                    </div>
-      </section>
+                </div>
-    </form>
+            </section>
-  </div>
+        </form>
-  <div class="modal-footer">
+    </div>
-    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <div class="modal-footer">
-    <button type="button" class="btn btn-primary" [disabled]="projectForm.form.invalid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
+        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
-  </div>
+        <button type="button" class="btn btn-primary" [disabled]="projectForm.form.invalid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
+    </div>
 </clr-modal>

src/ui_ng/src/app/project/create-project/create-project.component.ts

@@ -26,7 +26,7 @@ import { TranslateService } from '@ngx-translate/core';
 @Component({
   selector: 'create-project',
   templateUrl: 'create-project.component.html',
-  styleUrls: [ 'create-project.css' ]
+  styleUrls: ['create-project.css']
 })
 export class CreateProjectComponent implements AfterViewChecked {
 
@@ -50,44 +50,48 @@ export class CreateProjectComponent implements AfterViewChecked {
   inlineAlert: InlineAlertComponent;
 
   constructor(private projectService: ProjectService,
-              private translateService: TranslateService,
+    private translateService: TranslateService,
-              private messageHandlerService: MessageHandlerService) {}
+    private messageHandlerService: MessageHandlerService) { }
+
+  public get accessLevelDisplayText(): string {
+    return this.project.public ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE';
+  }
 
   onSubmit() {
     this.projectService
-        .createProject(this.project.name, this.project.public ? 1 : 0)
+      .createProject(this.project.name, this.project.public ? 1 : 0)
-        .subscribe(
+      .subscribe(
-          status=>{
+      status => {
-            this.create.emit(true);
+        this.create.emit(true);
-            this.messageHandlerService.showSuccess('PROJECT.CREATED_SUCCESS');
+        this.messageHandlerService.showSuccess('PROJECT.CREATED_SUCCESS');
+        this.createProjectOpened = false;
+      },
+      error => {
+        let errorMessage: string;
+        if (error instanceof Response) {
+          switch (error.status) {
+            case 409:
+              this.translateService.get('PROJECT.NAME_ALREADY_EXISTS').subscribe(res => errorMessage = res);
+              break;
+            case 400:
+              this.translateService.get('PROJECT.NAME_IS_ILLEGAL').subscribe(res => errorMessage = res);
+              break;
+            default:
+              this.translateService.get('PROJECT.UNKNOWN_ERROR').subscribe(res => errorMessage = res);
+          }
+          if (this.messageHandlerService.isAppLevel(error)) {
+            this.messageHandlerService.handleError(error);
             this.createProjectOpened = false;
-          },
+          } else {
-          error=>{
+            this.inlineAlert.showInlineError(errorMessage);
-            let errorMessage: string;
+          }
-            if (error instanceof Response) { 
+        }
-              switch(error.status) {
+      });
-              case 409:
-                this.translateService.get('PROJECT.NAME_ALREADY_EXISTS').subscribe(res=>errorMessage = res);
-                break;
-              case 400:
-                this.translateService.get('PROJECT.NAME_IS_ILLEGAL').subscribe(res=>errorMessage = res); 
-                break;
-              default:
-                this.translateService.get('PROJECT.UNKNOWN_ERROR').subscribe(res=>errorMessage = res);
-              }
-              if(this.messageHandlerService.isAppLevel(error)) {
-                this.messageHandlerService.handleError(error);
-                this.createProjectOpened = false;
-              } else {
-                this.inlineAlert.showInlineError(errorMessage);
-              }
-            }
-          }); 
   }
 
   onCancel() {
-    if(this.hasChanged) {
+    if (this.hasChanged) {
-      this.inlineAlert.showInlineConfirmation({message: 'ALERT.FORM_CHANGE_CONFIRMATION'});
+      this.inlineAlert.showInlineConfirmation({ message: 'ALERT.FORM_CHANGE_CONFIRMATION' });
     } else {
       this.createProjectOpened = false;
       this.projectForm.reset();
@@ -97,12 +101,12 @@ export class CreateProjectComponent implements AfterViewChecked {
 
   ngAfterViewChecked(): void {
     this.projectForm = this.currentForm;
-    if(this.projectForm) {
+    if (this.projectForm) {
-      this.projectForm.valueChanges.subscribe(data=>{
+      this.projectForm.valueChanges.subscribe(data => {
-        for(let i in data) {
+        for (let i in data) {
           let origin = this.initVal[i];
           let current = data[i];
-          if(current && current !== origin) {
+          if (current && current !== origin) {
             this.hasChanged = true;
             break;
           } else {

src/ui_ng/src/app/project/create-project/create-project.css

@@ -2,3 +2,12 @@
     font-size: 14px;
     font-weight: 400;
 }
+
+.access-level-label {
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: -4px;
+    margin-right: 12px;
+    top: -6px;
+    position: relative;
+}

src/ui_ng/src/i18n/lang/en-us-lang.json

@@ -126,6 +126,7 @@
         "PUBLIC_OR_PRIVATE": "Access Level",
         "REPO_COUNT": "Repositories Count",
         "CREATION_TIME": "Creation Time",
+        "ACCESS_LEVEL": "Access Level",
         "PUBLIC": "Public",
         "PRIVATE": "Private",
         "MAKE": "Make",

src/ui_ng/src/i18n/lang/zh-cn-lang.json

@@ -126,6 +126,7 @@
         "PUBLIC_OR_PRIVATE": "访问级别",
         "REPO_COUNT": "镜像仓库数",
         "CREATION_TIME": "创建时间",
+        "ACCESS_LEVEL": "访问级别",
         "PUBLIC": "公开",
         "PRIVATE": "私有",
         "MAKE": "设为",