From a1b3fe8a2781566f072b46b8e0e60311cfa935c4 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Thu, 30 Mar 2017 15:51:00 +0800
Subject: [PATCH] Fix UX issues.

---
 .../create-project.component.html             |  7 ++-
 .../project/create-project/create-project.css | 12 +++++
 .../add-member/add-member.component.css       |  4 ++
 .../add-member/add-member.component.html      |  2 +-
 .../member/add-member/add-member.component.ts |  3 +-
 .../project-detail.component.css              |  7 +++
 .../project-detail.component.html             |  2 +-
 .../src/app/project/project.component.ts      | 12 +++--
 .../create-edit-destination.component.css     |  4 ++
 .../create-edit-destination.component.html    | 14 +++---
 .../create-edit-destination.component.ts      |  3 +-
 .../list-job/list-job.component.ts            |  9 ++++
 .../create-edit-policy.component.css          |  4 ++
 .../create-edit-policy.component.html         | 22 ++++-----
 .../create-edit-policy.component.ts           |  9 +++-
 .../list-policy/list-policy.component.ts      |  8 +++-
 src/ui_ng/src/i18n/lang/en-us-lang.json       | 13 +++--
 src/ui_ng/src/i18n/lang/zh-cn-lang.json       | 47 ++++++++++---------
 18 files changed, 128 insertions(+), 54 deletions(-)
 create mode 100644 src/ui_ng/src/app/project/member/add-member/add-member.component.css
 create mode 100644 src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css
 create mode 100644 src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css

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 785ba7fe9..97f838bb2 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
@@ -1,12 +1,12 @@
 <clr-modal [(clrModalOpen)]="createProjectOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
   <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
   <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
-  <div class="modal-body">
+  <div class="modal-body" style="height: 12.8em; overflow-y: hidden;">
     <form #projectForm="ngForm">
       <section class="form-block">
         <div class="form-group">
           <label for="create_project_name" class="col-md-4 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.valid]="projectName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-right">
+          <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" [class.valid]="projectName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
             <input type="text" id="create_project_name"  [(ngModel)]="project.name" name="name" size="20" 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}}
@@ -26,6 +26,9 @@
             <label for="create_project_public"></label>
           </div>
         </div>
+        <p class="inline-help-public">
+          {{'PROJECT.INLINE_HELP_PUBLIC' | translate }}
+        </p>
       </section>
     </form>
   </div>
diff --git a/src/ui_ng/src/app/project/create-project/create-project.css b/src/ui_ng/src/app/project/create-project/create-project.css
index e69de29bb..0445cdd02 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.css
+++ b/src/ui_ng/src/app/project/create-project/create-project.css
@@ -0,0 +1,12 @@
+.inline-help-public {
+  color: #CCCCCC;
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  margin-top: 0;
+  padding: 0 14px;
+}
+
+.form-group-label-override {
+    font-size: 14px;
+    font-weight: 400;
+}
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/member/add-member/add-member.component.css b/src/ui_ng/src/app/project/member/add-member/add-member.component.css
new file mode 100644
index 000000000..0bcac82e9
--- /dev/null
+++ b/src/ui_ng/src/app/project/member/add-member/add-member.component.css
@@ -0,0 +1,4 @@
+.form-group-label-override {
+    font-size: 14px;
+    font-weight: 400;
+}
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/member/add-member/add-member.component.html b/src/ui_ng/src/app/project/member/add-member/add-member.component.html
index 55764ae35..9da8644b1 100644
--- a/src/ui_ng/src/app/project/member/add-member/add-member.component.html
+++ b/src/ui_ng/src/app/project/member/add-member/add-member.component.html
@@ -6,7 +6,7 @@
       <section class="form-block">
         <div class="form-group">
           <label for="member_name" class="col-md-4 form-group-label-override">{{'MEMBER.NAME' | translate}}</label>
-          <label for="member_name" aria-haspopup="true" role="tooltip" [class.invalid]="memberName.invalid && (memberName.dirty || memberName.touched)" [class.valid]="memberName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-right">
+          <label for="member_name" aria-haspopup="true" role="tooltip" [class.invalid]="memberName.invalid && (memberName.dirty || memberName.touched)" [class.valid]="memberName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
             <input type="text" id="member_name"  [(ngModel)]="member.username" name="name" size="20" #memberName="ngModel" required targetExists="MEMBER_NAME" [projectId]="projectId">
             <span class="tooltip-content" *ngIf="memberName.errors && memberName.errors.required && (memberName.dirty || memberName.touched)">
               {{ 'MEMBER.USERNAME_IS_REQUIRED' | translate }}
diff --git a/src/ui_ng/src/app/project/member/add-member/add-member.component.ts b/src/ui_ng/src/app/project/member/add-member/add-member.component.ts
index 0e44b09ab..f998a7796 100644
--- a/src/ui_ng/src/app/project/member/add-member/add-member.component.ts
+++ b/src/ui_ng/src/app/project/member/add-member/add-member.component.ts
@@ -13,7 +13,8 @@ import { Member } from '../member';
 
 @Component({
   selector: 'add-member',
-  templateUrl: 'add-member.component.html'
+  templateUrl: 'add-member.component.html',
+  styleUrls: [ 'add-member.component.css' ]
 })
 export class AddMemberComponent implements AfterViewChecked {
 
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.css b/src/ui_ng/src/app/project/project-detail/project-detail.component.css
index 3e47b01ad..25f27c693 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.css
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.css
@@ -5,4 +5,11 @@
 
 .sub-nav-bg-color {
   background-color: #fafafa;
+}
+
+.role-label {
+  color: #CCCCCC;
+  font-size: 14px;
+  font-style: italic;
+  letter-spacing: 0.01em;
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.html b/src/ui_ng/src/app/project/project-detail/project-detail.component.html
index 1fff58b6a..f14d118f7 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.html
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.html
@@ -1,7 +1,7 @@
 <a *ngIf="hasSignedIn" [routerLink]="['/harbor', 'projects']">&lt; {{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
 <a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']">&lt; {{'SEARCH.BACK' | translate}}</a>
 
-<h1 class="sub-header-title">{{currentProject.name}} <span class="badge badge-light-blue" *ngIf="isMember">{{roleName | translate}}</span>  <span class="badge badge-purple" *ngIf="isSystemAdmin">{{ 'MEMBER.SYS_ADMIN' | translate}}</span></h1>
+<h1 class="sub-header-title">{{currentProject.name}} <span class="role-label" *ngIf="isMember">{{roleName | translate}}</span>  <span class="role-label" *ngIf="isSystemAdmin">{{ 'MEMBER.SYS_ADMIN' | translate}}</span></h1>
 <nav class="subnav sub-nav-bg-color">
   <ul class="nav">
     <li class="nav-item">
diff --git a/src/ui_ng/src/app/project/project.component.ts b/src/ui_ng/src/app/project/project.component.ts
index 24aef2259..70e740276 100644
--- a/src/ui_ng/src/app/project/project.component.ts
+++ b/src/ui_ng/src/app/project/project.component.ts
@@ -75,8 +75,14 @@ export class ProjectComponent implements OnInit, OnDestroy {
             console.log('Successful delete project with ID:' + projectId);
             this.retrieve();
           },
-          error =>this.messageHandlerService.handleError(error)
-          );
+          error =>{
+            if(error && error.status === 412) {
+              this.messageHandlerService.showError('PROJECT.FAILED_TO_DELETE_PROJECT', '');
+            } else {
+              this.messageHandlerService.handleError(error);
+            }
+          }
+        );
       }
     });
     
@@ -121,7 +127,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
         this.changedProjects = response.json();
       },
       error => this.messageHandlerService.handleError(error)
-      );
+    );
   }
 
   openModal(): void {
diff --git a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css
new file mode 100644
index 000000000..0bcac82e9
--- /dev/null
+++ b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css
@@ -0,0 +1,4 @@
+.form-group-label-override {
+    font-size: 14px;
+    font-weight: 400;
+}
\ No newline at end of file
diff --git a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html
index 51ffb79ab..d2ec17401 100644
--- a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html
+++ b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html
@@ -2,7 +2,7 @@
   <h3 class="modal-title">{{modalTitle}}</h3>
   <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
   <div class="modal-body">
-    <div class="alert alert-danger" *ngIf="!editable">
+    <div class="alert alert-warning" *ngIf="!editable">
       <div class="alert-item">
         <span class="alert-text">
           {{'DESTINATION.CANNOT_EDIT' | translate}}
@@ -13,8 +13,8 @@
       <section class="form-block">
         <div class="form-group">
           <label for="destination_name" class="col-md-4 form-group-label-override">{{ 'DESTINATION.NAME' | translate }}<span style="color: red">*</span></label>
-          <label class="col-md-8" for="destination_name" aria-haspopup="true" role="tooltip" [class.invalid]="targetName.errors && (targetName.dirty || targetName.touched)" [class.valid]="targetName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-right">
-            <input type="text" id="destination_name" [disabled]="testOngoing || !editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" value="" required> 
+          <label class="col-md-8" for="destination_name" aria-haspopup="true" role="tooltip" [class.invalid]="targetName.errors && (targetName.dirty || targetName.touched)" [class.valid]="targetName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
+            <input type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" value="" required> 
             <span class="tooltip-content" *ngIf="targetName.errors && targetName.errors.required && (targetName.dirty || targetName.touched)">
               {{ 'DESTINATION.NAME_IS_REQUIRED' | translate }}
             </span>
@@ -22,8 +22,8 @@
         </div>
         <div class="form-group">
           <label for="destination_url" class="col-md-4 form-group-label-override">{{ 'DESTINATION.URL' | translate }}<span style="color: red">*</span></label>
-          <label class="col-md-8" for="destination_url" aria-haspopup="true" role="tooltip" [class.invalid]="targetEndpoint.errors && (targetEndpoint.dirty || targetEndpoint.touched)" [class.valid]="targetEndpoint.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-right">
-            <input type="text" id="destination_url" [disabled]="testOngoing || !editable" [(ngModel)]="target.endpoint" size="20" name="endpointUrl" #targetEndpoint="ngModel" required>
+          <label class="col-md-8" for="destination_url" aria-haspopup="true" role="tooltip" [class.invalid]="targetEndpoint.errors && (targetEndpoint.dirty || targetEndpoint.touched)" [class.valid]="targetEndpoint.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
+            <input type="text" id="destination_url" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.endpoint" size="20" name="endpointUrl" #targetEndpoint="ngModel" required>
             <span class="tooltip-content" *ngIf="targetEndpoint.errors && targetEndpoint.errors.required && (targetEndpoint.dirty || targetEndpoint.touched)">
               {{ 'DESTINATION.URL_IS_REQUIRED' | translate }}
             </span>
@@ -31,11 +31,11 @@
         </div>
         <div class="form-group">
           <label for="destination_username" class="col-md-4 form-group-label-override">{{ 'DESTINATION.USERNAME' | translate }}</label>
-          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing || !editable" [(ngModel)]="target.username" size="20" name="username" #username="ngModel">
+          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.username" size="20" name="username" #username="ngModel">
         </div>
         <div class="form-group">
           <label for="destination_password" class="col-md-4 form-group-label-override">{{ 'DESTINATION.PASSWORD' | translate }}</label>
-          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing || !editable" [(ngModel)]="target.password" size="20" name="password" #password="ngModel">
+          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.password" size="20" name="password" #password="ngModel">
         </div>
         <div class="form-group">
           <label for="spin" class="col-md-4"></label>
diff --git a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts
index ac8f26d05..0e55f7d63 100644
--- a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts
+++ b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts
@@ -13,7 +13,8 @@ import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'create-edit-destination',
-  templateUrl: './create-edit-destination.component.html'
+  templateUrl: './create-edit-destination.component.html',
+  styleUrls: [ 'create-edit-destination.component.css' ]
 })
 export class CreateEditDestinationComponent implements AfterViewChecked {
 
diff --git a/src/ui_ng/src/app/replication/list-job/list-job.component.ts b/src/ui_ng/src/app/replication/list-job/list-job.component.ts
index 2ca7cc570..f57299d8e 100644
--- a/src/ui_ng/src/app/replication/list-job/list-job.component.ts
+++ b/src/ui_ng/src/app/replication/list-job/list-job.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Job } from '../job';
 import { State } from 'clarity-angular';
+import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 
 @Component({
   selector: 'list-job',
@@ -12,10 +13,18 @@ export class ListJobComponent {
   @Input() totalPage: number;
   @Output() paginate = new EventEmitter<State>();
 
+  constructor(private messageHandlerService: MessageHandlerService) {}
+
   pageOffset: number = 1;
 
   refresh(state: State) {
     if(this.jobs) {
+      for(let i = 0; i < this.jobs.length; i++) {
+        let j = this.jobs[i];
+        if(j.status === 'retrying' || j.status === 'error') {
+          this.messageHandlerService.showError('', '');
+        }
+      }
       this.paginate.emit(state);
     }
   }
diff --git a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css
new file mode 100644
index 000000000..0bcac82e9
--- /dev/null
+++ b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css
@@ -0,0 +1,4 @@
+.form-group-label-override {
+    font-size: 14px;
+    font-weight: 400;
+}
\ No newline at end of file
diff --git a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html
index b9106ae5f..decb4832a 100644
--- a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html
+++ b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html
@@ -1,10 +1,10 @@
 <clr-modal [(clrModalOpen)]="createEditPolicyOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
   <h3 class="modal-title">{{modalTitle}}</h3>
   <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
-  <div class="modal-body">
+  <div class="modal-body" style="max-height: 85vh;">
     <form #policyForm="ngForm">
       <section class="form-block">
-        <div class="alert alert-danger" *ngIf="readonly">
+        <div class="alert alert-warning" *ngIf="readonly">
           <div class="alert-item">
             <span class="alert-text">
               {{'REPLICATION.CANNOT_EDIT' | translate}}
@@ -13,8 +13,8 @@
         </div>
         <div class="form-group">
           <label for="policy_name" class="col-md-4 form-group-label-override">{{'REPLICATION.NAME' | translate}}<span style="color: red">*</span></label>
-          <label for="policy_name" class="col-md-8"  aria-haspopup="true" role="tooltip" [class.invalid]="name.errors && (name.dirty || name.touched)" [class.valid]="name.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-right">
-            <input type="text" id="policy_name" [(ngModel)]="createEditPolicy.name" name="name" #name="ngModel" required [disabled]="readonly">
+          <label for="policy_name" class="col-md-8"  aria-haspopup="true" role="tooltip" [class.invalid]="name.errors && (name.dirty || name.touched)" [class.valid]="name.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
+            <input type="text" id="policy_name" [(ngModel)]="createEditPolicy.name" name="name" size="20" #name="ngModel" required [readonly]="readonly">
             <span class="tooltip-content" *ngIf="name.errors && name.errors.required && (name.dirty || name.touched)">
               {{'REPLICATION.NAME_IS_REQUIRED' | translate}}
             </span>
@@ -22,7 +22,7 @@
         </div>
         <div class="form-group">
           <label for="policy_description" class="col-md-4 form-group-label-override">{{'REPLICATION.DESCRIPTION' | translate}}</label>
-          <input type="text" class="col-md-8" id="policy_description" [(ngModel)]="createEditPolicy.description" name="description" size="20" #description="ngModel" [disabled]="readonly"> 
+          <textarea class="col-md-8" id="policy_description" row="3" [(ngModel)]="createEditPolicy.description" name="description" size="20" #description="ngModel" [readonly]="readonly"></textarea>
         </div>
         <div class="form-group">
           <label class="col-md-4 form-group-label-override">{{'REPLICATION.ENABLE' | translate}}</label>
@@ -38,7 +38,7 @@
               <option *ngFor="let t of targets" [value]="t.id" [selected]="t.id == createEditPolicy.targetId">{{t.name}}</option>
             </select>
           </div>
-          <label class="col-md-8" *ngIf="isCreateDestination" for="destination_name" aria-haspopup="true" role="tooltip" [class.invalid]="targetName.errors && (targetName.dirty || targetName.touched)" [class.valid]="targetName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-right">
+          <label class="col-md-8" *ngIf="isCreateDestination" for="destination_name" aria-haspopup="true" role="tooltip" [class.invalid]="targetName.errors && (targetName.dirty || targetName.touched)" [class.valid]="targetName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
             <input type="text" id="destination_name" [(ngModel)]="createEditPolicy.targetName" name="targetName" size="8" #targetName="ngModel" value="" required> 
             <span class="tooltip-content" *ngIf="targetName.errors && targetName.errors.required && (targetName.dirty || targetName.touched)">
               {{'REPLICATION.DESTINATION_NAME_IS_REQUIRED' | translate}}
@@ -51,8 +51,8 @@
         </div>
         <div class="form-group">
           <label for="destination_url" class="col-md-4 form-group-label-override">{{'REPLICATION.DESTINATION_URL' | translate}}<span style="color: red">*</span></label>
-          <label for="destination_url" class="col-md-8" aria-haspopup="true" role="tooltip" [class.invalid]="endpointUrl.errors && (endpointUrl.dirty || endpointUrl.touched)" [class.valid]="endpointUrl.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-right">
-            <input type="text" id="destination_url" [disabled]="testOngoing || readonly" [(ngModel)]="createEditPolicy.endpointUrl" size="20" name="endpointUrl" required #endpointUrl="ngModel">
+          <label for="destination_url" class="col-md-8" aria-haspopup="true" role="tooltip" [class.invalid]="endpointUrl.errors && (endpointUrl.dirty || endpointUrl.touched)" [class.valid]="endpointUrl.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
+            <input type="text" id="destination_url" [disabled]="testOngoing" [readonly]="readonly || !isCreateDestination" [(ngModel)]="createEditPolicy.endpointUrl" size="20" name="endpointUrl" required #endpointUrl="ngModel">
             <span class="tooltip-content" *ngIf="endpointUrl.errors && endpointUrl.errors.required && (endpointUrl.dirty || endpointUrl.touched)">
               {{'REPLICATION.DESTINATION_URL_IS_REQUIRED' | translate}}
             </span>
@@ -60,11 +60,11 @@
         </div>
         <div class="form-group">
           <label for="destination_username" class="col-md-4 form-group-label-override">{{'REPLICATION.DESTINATION_USERNAME' | translate}}</label>
-          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing || readonly" [(ngModel)]="createEditPolicy.username" size="20" name="username" #username="ngModel">
+          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing" [readonly]="readonly || !isCreateDestination" [(ngModel)]="createEditPolicy.username" size="20" name="username" #username="ngModel">
         </div>
         <div class="form-group">
           <label for="destination_password" class="col-md-4 form-group-label-override">{{'REPLICATION.DESTINATION_PASSWORD' | translate}}</label>
-          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing || readonly" [(ngModel)]="createEditPolicy.password" size="20" name="password" #password="ngModel">
+          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="readonly || !isCreateDestination" [(ngModel)]="createEditPolicy.password" size="20" name="password" #password="ngModel">
         </div>
         <div class="form-group">
           <label for="spin" class="col-md-4"></label>
@@ -77,6 +77,6 @@
   <div class="modal-footer">
       <button type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="testOngoing">{{'REPLICATION.TEST_CONNECTION' | translate}}</button>
       <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate }}</button>
-      <button type="submit" class="btn btn-primary" [disabled]="!policyForm.form.valid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
+      <button type="submit" class="btn btn-primary" [disabled]="!policyForm.form.valid || testOngoing || readonly" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
   </div>
 </clr-modal>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts
index 8c0f3d119..d4b4a7174 100644
--- a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts
+++ b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts
@@ -17,7 +17,8 @@ import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'create-edit-policy',
-  templateUrl: 'create-edit-policy.component.html'
+  templateUrl: 'create-edit-policy.component.html',
+  styleUrls: [ 'create-edit-policy.component.css' ]
 })
 export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
 
@@ -195,6 +196,8 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
             if(this.messageHandlerService.isAppLevel(error)) {
               this.messageHandlerService.handleError(error);
               this.createEditPolicyOpened = false;
+            } else if (error.status === 409) {
+              this.inlineAlert.showInlineError('REPLICATION.POLICY_ALREADY_EXISTS');
             } else {
               this.inlineAlert.showInlineError(error);
             }            
@@ -217,6 +220,8 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
             if(this.messageHandlerService.isAppLevel(error)) {
               this.messageHandlerService.handleError(error);
               this.createEditPolicyOpened = false;  
+            } else if (error.status === 409) {
+              this.inlineAlert.showInlineError('REPLICATION.POLICY_ALREADY_EXISTS');            
             } else {
               this.inlineAlert.showInlineError(error);
             }
@@ -240,6 +245,8 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
             if(this.messageHandlerService.isAppLevel(error)) {
               this.messageHandlerService.handleError(error);
               this.createEditPolicyOpened = false;
+            } else if (error.status === 409) {
+              this.inlineAlert.showInlineError('REPLICATION.POLICY_ALREADY_EXISTS');
             } else {
               this.inlineAlert.showInlineError(error);
             }
diff --git a/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts b/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts
index ee235217c..05c31e5e8 100644
--- a/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts
+++ b/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts
@@ -75,7 +75,13 @@ export class ListPolicyComponent implements OnDestroy {
                     console.log('Successful delete policy with ID:' + message.data);
                     this.reload.emit(true);
                   },
-                  error => this.messageHandlerService.handleError(error)
+                  error => {
+                    if(error && error.status === 412) {
+                      this.messageHandlerService.handleError('REPLICATION.FAILED_TO_DELETE_POLICY_ENABLED');
+                    } else {
+                      this.messageHandlerService.handleError(error);
+                    }
+                  }
                 );
         }
       }
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 fdbec0e1f..deecfced7 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -145,7 +145,9 @@
         "REPLICATION_RULE": "Replication Rule",
         "CREATED_SUCCESS": "Created project successfully.",
         "DELETED_SUCCESS": "Deleted project successfully.",
-        "TOGGLED_SUCCESS": "Toggled project successfully."
+        "TOGGLED_SUCCESS": "Toggled project successfully.",
+        "FAILED_TO_DELETE_PROJECT": "Project contains repositories or replication rules can not be deleted.",
+        "INLINE_HELP_PUBLIC": "When a project is set to public, anyone has read permission to the repositories under this project, and the user does not need to run \"docker login\" before pulling images under this project."
     },
     "PROJECT_DETAIL": {
         "REPOSITORIES": "Repositories",
@@ -249,15 +251,18 @@
         "LOGS": "Logs",
         "ITEMS": "item(s)",
         "TOGGLE_ENABLE_TITLE": "Enable Rule",
-        "CONFIRM_TOGGLE_ENABLE_POLICY": "After enabling the replication rule, all repositories under the project will be replicated to the destination registry. Please confirm to continue.",
+        "CONFIRM_TOGGLE_ENABLE_POLICY": "After enabling the replication rule, all repositories under the project \nwill be replicated to the destination registry. \nPlease confirm to continue.",
         "TOGGLE_DISABLE_TITLE": "Disable Rule",
-        "CONFIRM_TOGGLE_DISABLE_POLICY": "After disabling the rule, all unfinished replication jobs of this rule will be stopped and canceled. Please confirm to continue.",
+        "CONFIRM_TOGGLE_DISABLE_POLICY": "After disabling the rule, all unfinished replication jobs of this rule \nwill be stopped and canceled. \nPlease confirm to continue.",
         "CREATED_SUCCESS": "Created replication rule successfully.",
         "UPDATED_SUCCESS": "Updated replication rule successfully.",
         "DELETED_SUCCESS": "Deleted replication rule successfully.",
         "DELETED_FAILED": "Deleted replication rule failed.",
         "TOGGLED_SUCCESS": "Toggled replication rule status successfully.",
-        "CANNOT_EDIT": "Replication rule cannot be changed while it is enabled."
+        "CANNOT_EDIT": "Replication rule cannot be changed while it is enabled.",
+        "POLICY_ALREADY_EXISTS": "Replication rule already exists.",
+        "FAILED_TO_DELETE_POLICY_ENABLED": "Cannot delete rule: rule has unfinished job(s) or rule is enabled.",
+        "FOUND_ERROR_IN_JOBS": "Found errors in the replication job(s), please check."
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "New Endpoint",
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 b686682da..e86a1d7d4 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -127,7 +127,7 @@
         "PUBLIC": "公开",
         "PRIVATE": "私有",
         "MAKE": "设为",
-        "NEW_POLICY": "新建策略",
+        "NEW_POLICY": "新建规则",
         "DELETE": "删除",
         "MY_PROJECTS": "所有项目",
         "PUBLIC_PROJECTS": "公开项目",
@@ -142,10 +142,12 @@
         "DELETION_TITLE": "删除项目确认",
         "DELETION_SUMMARY": "你确认删除项目 {{param}}？",
         "FILTER_PLACEHOLDER": "过滤项目",
-        "REPLICATION_RULE": "复制策略",
+        "REPLICATION_RULE": "复制规则",
         "CREATED_SUCCESS": "创建项目成功。",
         "DELETED_SUCCESS": "删除项目成功。",
-        "TOGGLED_SUCCESS": "切换状态成功。"
+        "TOGGLED_SUCCESS": "切换状态成功。",
+        "FAILED_TO_DELETE_PROJECT": "项目包含镜像仓库或复制规则，无法删除。",
+        "INLINE_HELP_PUBLIC": "当项目设为公开后，任何人都有此项目下镜像的读权限。命令行用户不需要“docker login”就可以拉取此项目下的镜像。"
     },
     "PROJECT_DETAIL": {
         "REPOSITORIES": "镜像仓库",
@@ -196,19 +198,19 @@
         "FILTER_PLACEHOLDER": "过滤日志"
     },
     "REPLICATION": {
-        "REPLICATION_RULE": "复制策略",
-        "NEW_REPLICATION_RULE": "新建策略",
+        "REPLICATION_RULE": "复制规则",
+        "NEW_REPLICATION_RULE": "新建规则",
         "ENDPOINTS": "目标",
-        "FILTER_POLICIES_PLACEHOLDER": "过滤策略",
+        "FILTER_POLICIES_PLACEHOLDER": "过滤规则",
         "FILTER_JOBS_PLACEHOLDER": "过滤任务",
-        "DELETION_TITLE": "删除策略确认",
-        "DELETION_SUMMARY": "确认删除策略 {{param}}?",
+        "DELETION_TITLE": "删除规则确认",
+        "DELETION_SUMMARY": "确认删除规则 {{param}}?",
         "FILTER_TARGETS_PLACEHOLDER": "过滤目标",
         "DELETION_TITLE_TARGET": "删除目标确认",
         "DELETION_SUMMARY_TARGET": "确认删除目标 {{param}}?",
-        "ADD_POLICY": "新建策略",
-        "EDIT_POLICY": "修改策略",
-        "DELETE_POLICY": "删除策略",
+        "ADD_POLICY": "新建规则",
+        "EDIT_POLICY": "修改规则",
+        "DELETE_POLICY": "删除规则",
         "TEST_CONNECTION": "测试连接",
         "TESTING_CONNECTION": "正在测试连接...",
         "TEST_CONNECTION_SUCCESS": "测试连接成功。",
@@ -248,16 +250,19 @@
         "END_TIME": "结束时间",
         "LOGS": "日志",
         "ITEMS": "条记录",
-        "TOGGLE_ENABLE_TITLE": "启用策略",
-        "CONFIRM_TOGGLE_ENABLE_POLICY": "启用策略后，该项目下的所有镜像仓库将复制到目标实例。请确认继续。",
-        "TOGGLE_DISABLE_TITLE": "停用策略",
-        "CONFIRM_TOGGLE_DISABLE_POLICY": "停用策略后，所有未完成的复制任务将被终止和取消。请确认继续。",
-        "CREATED_SUCCESS": "创建复制策略成功。",
-        "UPDATED_SUCCESS": "更新复制策略成功。",
-        "DELETED_SUCCESS": "删除复制策略成功。",
-        "DELETED_FAILED": "删除复制策略失败。",
-        "TOGGLED_SUCCESS": "切换复制策略状态成功。",
-        "CANNOT_EDIT": "当复制规则启用时无法修改。"
+        "TOGGLE_ENABLE_TITLE": "启用规则",
+        "CONFIRM_TOGGLE_ENABLE_POLICY": "启用规则后，该项目下的所有镜像仓库将复制到目标实例。请确认继续。",
+        "TOGGLE_DISABLE_TITLE": "停用规则",
+        "CONFIRM_TOGGLE_DISABLE_POLICY": "停用规则后，所有未完成的复制任务将被终止和取消。请确认继续。",
+        "CREATED_SUCCESS": "创建复制规则成功。",
+        "UPDATED_SUCCESS": "更新复制规则成功。",
+        "DELETED_SUCCESS": "删除复制规则成功。",
+        "DELETED_FAILED": "删除复制规则失败。",
+        "TOGGLED_SUCCESS": "切换复制规则状态成功。",
+        "CANNOT_EDIT": "当复制规则启用时无法修改。",
+        "POLICY_ALREADY_EXISTS": "规则已存在。",
+        "FAILED_TO_DELETE_POLICY_ENABLED": "删除复制规则失败： 仍有未完成的任务或规则未停用。",
+        "FOUND_ERROR_IN_JOBS": "复制任务中包含错误，请检查。"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "新建目标",