From fe5de50566d3ee85c5d2ec0f25bd33820e3e08e4 Mon Sep 17 00:00:00 2001
From: Steven Zou <szou@vmware.com>
Date: Wed, 29 Mar 2017 16:17:17 +0800
Subject: [PATCH] Fix UI issues

---
 .../account-settings-modal.component.html     |  2 +-
 .../password/forgot-password.component.html   |  2 +-
 .../password/password-setting.component.html  |  4 +-
 .../password/reset-password.component.html    |  4 +-
 .../app/account/sign-up/sign-up.component.ts  |  2 +
 .../app/project/member/member.component.html  |  2 +-
 .../src/app/project/project.component.html    | 54 ++++++------
 .../destination/destination.component.html    |  2 +-
 .../replication/replication.component.html    | 88 ++++++++++---------
 .../about-dialog/about-dialog.component.html  |  3 +-
 .../new-user-form.component.html              | 16 ++--
 src/ui_ng/src/app/user/user.component.html    |  2 +-
 12 files changed, 92 insertions(+), 89 deletions(-)

diff --git a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html
index 820b6a792..1bc7df843 100644
--- a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html
+++ b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html
@@ -13,7 +13,7 @@
                     <label for="account_settings_email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left" [class.invalid]='!getValidationState("account_settings_email")'>
                       <input name="account_settings_email" type="text" #eamilInput="ngModel" [(ngModel)]="account.email" 
                       required 
-                      pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$' id="account_settings_email" size="30" 
+                      pattern='^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$' id="account_settings_email" size="30" 
                       (input)='handleValidation("account_settings_email", false)' 
                       (focusout)='handleValidation("account_settings_email", true)'>
                       <span class="tooltip-content">
diff --git a/src/ui_ng/src/app/account/password/forgot-password.component.html b/src/ui_ng/src/app/account/password/forgot-password.component.html
index b805a73f4..d97037710 100644
--- a/src/ui_ng/src/app/account/password/forgot-password.component.html
+++ b/src/ui_ng/src/app/account/password/forgot-password.component.html
@@ -10,7 +10,7 @@
                     <label for="reset_pwd_email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]="validationState === false">
                       <input name="reset_pwd_email" type="text" #eamilInput="ngModel" [(ngModel)]="email" 
                       required 
-                      pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$' 
+                      pattern='^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$' 
                       id="reset_pwd_email" 
                       size="40"
                       (input)="handleValidation(true)" 
diff --git a/src/ui_ng/src/app/account/password/password-setting.component.html b/src/ui_ng/src/app/account/password/password-setting.component.html
index 1057922b1..c689e3b3a 100644
--- a/src/ui_ng/src/app/account/password/password-setting.component.html
+++ b/src/ui_ng/src/app/account/password/password-setting.component.html
@@ -22,7 +22,7 @@
                     <label for="newPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left" [class.invalid]='!getValidationState("newPassword")'>
                 <input type="password" id="newPassword"
                     required
-                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
+                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                     name="newPassword"
                     [(ngModel)]="newPwd"
                     #newPassInput="ngModel" size="42" 
@@ -39,7 +39,7 @@
                     <label for="reNewPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left" [class.invalid]='!getValidationState("reNewPassword")'>
                 <input type="password" id="reNewPassword"
                     required
-                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
+                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                     name="reNewPassword"
                     [(ngModel)]="reNewPwd"
                     #reNewPassInput="ngModel" size="42" 
diff --git a/src/ui_ng/src/app/account/password/reset-password.component.html b/src/ui_ng/src/app/account/password/reset-password.component.html
index 69cdc9ee5..8e85a6c12 100644
--- a/src/ui_ng/src/app/account/password/reset-password.component.html
+++ b/src/ui_ng/src/app/account/password/reset-password.component.html
@@ -9,7 +9,7 @@
                     <label for="newPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("newPassword") === false'>
                 <input type="password" id="newPassword" placeholder='{{"PLACEHOLDER.NEW_PWD" | translate}}'
                     required
-                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{7,}$"
+                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                     name="newPassword"
                     [(ngModel)]="password"
                     #newPassInput="ngModel" 
@@ -26,7 +26,7 @@
                     <label for="reNewPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("reNewPassword") === false'>
                 <input type="password" id="reNewPassword" placeholder='{{"PLACEHOLDER.CONFIRM_PWD" | translate}}'
                     required
-                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{7,}$"
+                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                     name="reNewPassword"
                     [(ngModel)]="ngModel"
                     #reNewPassInput 
diff --git a/src/ui_ng/src/app/account/sign-up/sign-up.component.ts b/src/ui_ng/src/app/account/sign-up/sign-up.component.ts
index aac5c29c4..094b501d1 100644
--- a/src/ui_ng/src/app/account/sign-up/sign-up.component.ts
+++ b/src/ui_ng/src/app/account/sign-up/sign-up.component.ts
@@ -85,6 +85,7 @@ export class SignUpComponent {
     }
 
     confirmCancel(): void {
+        this.opened = false;
         this.modal.close();
     }
 
@@ -108,6 +109,7 @@ export class SignUpComponent {
         this.userService.addUser(u)
             .then(() => {
                 this.onGoing = false;
+                this.opened = false;
                 this.modal.close();
                 this.userCreation.emit(u);
             })
diff --git a/src/ui_ng/src/app/project/member/member.component.html b/src/ui_ng/src/app/project/member/member.component.html
index ac4a5ea5f..7a5a8a069 100644
--- a/src/ui_ng/src/app/project/member/member.component.html
+++ b/src/ui_ng/src/app/project/member/member.component.html
@@ -2,7 +2,7 @@
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="row flex-items-xs-between">
             <div class="flex-xs-middle option-left">
-                <button *ngIf="hasProjectAdminRole" class="btn btn-primary" (click)="openAddMemberModal()"><clr-icon shape="add"></clr-icon> {{'MEMBER.MEMBER' | translate }}</button>
+                <button *ngIf="hasProjectAdminRole" class="btn btn-link" (click)="openAddMemberModal()"><clr-icon shape="add"></clr-icon> {{'MEMBER.MEMBER' | translate }}</button>
                 <add-member [projectId]="projectId" (added)="addedMember($event)"></add-member>
             </div>
             <div class="flex-xs-middle option-right">
diff --git a/src/ui_ng/src/app/project/project.component.html b/src/ui_ng/src/app/project/project.component.html
index 8f1da6c22..e53389826 100644
--- a/src/ui_ng/src/app/project/project.component.html
+++ b/src/ui_ng/src/app/project/project.component.html
@@ -1,33 +1,31 @@
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <h2 class="header-title">{{'PROJECT.PROJECTS' | translate}}</h2>
-    <div>
-      <statistics-panel></statistics-panel>
-    </div>
-    <div class="row flex-items-xs-between">
-      <div class="option-left">
-        <button *ngIf="projectCreationRestriction" class="btn btn-primary" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'PROJECT.PROJECT' | translate}}</button>
-        <create-project (create)="createProject($event)"></create-project>
-      </div>
-      <div class="option-right">
-        <clr-dropdown [clrMenuPosition]="'bottom'">
-          <button class="btn btn-link" clrDropdownToggle>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <h2 class="header-title">{{'PROJECT.PROJECTS' | translate}}</h2>
+        <div>
+            <statistics-panel></statistics-panel>
+        </div>
+        <div class="row flex-items-xs-between">
+            <div class="option-left">
+                <button *ngIf="projectCreationRestriction" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'PROJECT.PROJECT' | translate}}</button>
+                <create-project (create)="createProject($event)"></create-project>
+            </div>
+            <div class="option-right">
+                <clr-dropdown [clrMenuPosition]="'bottom'">
+                    <button class="btn btn-link" clrDropdownToggle>
             {{projectTypes[currentFilteredType] | translate}}
             <clr-icon shape="caret down"></clr-icon>
           </button>
-          <div class="dropdown-menu">
-            <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(0)">{{projectTypes[0] | translate}}</a>
-            <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(1)">{{projectTypes[1] | translate}}</a>
-          </div>
-        </clr-dropdown>
-        <grid-filter filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)"></grid-filter>
-        <a href="javascript:void(0)" (click)="refresh()">
-          <clr-icon shape="refresh"></clr-icon>
-        </a>
-      </div>
+                    <div class="dropdown-menu">
+                        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(0)">{{projectTypes[0] | translate}}</a>
+                        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(1)">{{projectTypes[1] | translate}}</a>
+                    </div>
+                </clr-dropdown>
+                <grid-filter filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)"></grid-filter>
+                <a href="javascript:void(0)" (click)="refresh()">
+                    <clr-icon shape="refresh"></clr-icon>
+                </a>
+            </div>
+        </div>
+        <list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)" [totalPage]="totalPage" [totalRecordCount]="totalRecordCount"></list-project>
     </div>
-    <list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)" [totalPage]="totalPage" [totalRecordCount]="totalRecordCount"></list-project>
- </div>
-</div>
-
-
+</div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/replication/destination/destination.component.html b/src/ui_ng/src/app/replication/destination/destination.component.html
index a9eb3e968..b2ce12739 100644
--- a/src/ui_ng/src/app/replication/destination/destination.component.html
+++ b/src/ui_ng/src/app/replication/destination/destination.component.html
@@ -2,7 +2,7 @@
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="row flex-items-xs-between">
             <div class="flex-items-xs-middle option-left">
-                <button class="btn btn-primary" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'DESTINATION.ENDPOINT' | translate}}</button>
+                <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'DESTINATION.ENDPOINT' | translate}}</button>
                 <create-edit-destination (reload)="reload($event)"></create-edit-destination>
             </div>
             <div class="flex-items-xs-middle option-right">
diff --git a/src/ui_ng/src/app/replication/replication.component.html b/src/ui_ng/src/app/replication/replication.component.html
index 1f8728c59..1b31732ca 100644
--- a/src/ui_ng/src/app/replication/replication.component.html
+++ b/src/ui_ng/src/app/replication/replication.component.html
@@ -1,54 +1,58 @@
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <div class="row flex-items-xs-between">
-      <div class="flex-xs-middle option-left">
-        <button class="btn btn-primary" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
-        <create-edit-policy [projectId]="projectId" (reload)="reloadPolicies($event)"></create-edit-policy>
-      </div>
-      <div class="flex-xs-middle option-right">
-        <clr-dropdown [clrMenuPosition]="'bottom-left'">
-          <button class="btn btn-link" clrDropdownToggle>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <div class="row flex-items-xs-between">
+            <div class="flex-xs-middle option-left">
+                <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
+                <create-edit-policy [projectId]="projectId" (reload)="reloadPolicies($event)"></create-edit-policy>
+            </div>
+            <div class="flex-xs-middle option-right">
+                <clr-dropdown [clrMenuPosition]="'bottom-left'">
+                    <button class="btn btn-link" clrDropdownToggle>
               {{currentRuleStatus.description | translate}}
             <clr-icon shape="caret down"></clr-icon>
           </button>
-          <div class="dropdown-menu">
-            <a href="javascript:void(0)" clrDropdownItem *ngFor="let r of ruleStatus" (click)="doFilterPolicyStatus(r.key)"> {{r.description | translate}}</a>
-          </div>
-        </clr-dropdown>
-        <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchPolicies($event)"></grid-filter>
-        <a href="javascript:void(0)" (click)="refreshPolicies()"><clr-icon shape="refresh"></clr-icon></a>
-      </div>
+                    <div class="dropdown-menu">
+                        <a href="javascript:void(0)" clrDropdownItem *ngFor="let r of ruleStatus" (click)="doFilterPolicyStatus(r.key)"> {{r.description | translate}}</a>
+                    </div>
+                </clr-dropdown>
+                <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchPolicies($event)"></grid-filter>
+                <a href="javascript:void(0)" (click)="refreshPolicies()">
+                    <clr-icon shape="refresh"></clr-icon>
+                </a>
+            </div>
+        </div>
     </div>
-  </div>
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <list-policy [policies]="changedPolicies" [projectless]="false" [selectedId]="initSelectedId" (selectOne)="selectOne($event)" (editOne)="openEditPolicy($event)" (reload)="reloadPolicies($event)"></list-policy>
-  </div>
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <div class="row flex-items-xs-between">
-      <h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
-      <div class="flex-items-xs-bottom option-right-down">
-        <button class="btn btn-link" (click)="toggleSearchJobOptionalName(currentJobSearchOption)">{{toggleJobSearchOption[currentJobSearchOption] | translate}}</button>
-        <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchJobs($event)"></grid-filter>
-        <a href="javascript:void(0)" (click)="refreshJobs()"><clr-icon shape="refresh"></clr-icon></a>
-      </div>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <list-policy [policies]="changedPolicies" [projectless]="false" [selectedId]="initSelectedId" (selectOne)="selectOne($event)" (editOne)="openEditPolicy($event)" (reload)="reloadPolicies($event)"></list-policy>
     </div>
-    <div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
-      <clr-dropdown [clrMenuPosition]="'bottom-left'">
-        <button class="btn btn-link" clrDropdownToggle>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <div class="row flex-items-xs-between">
+            <h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
+            <div class="flex-items-xs-bottom option-right-down">
+                <button class="btn btn-link" (click)="toggleSearchJobOptionalName(currentJobSearchOption)">{{toggleJobSearchOption[currentJobSearchOption] | translate}}</button>
+                <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchJobs($event)"></grid-filter>
+                <a href="javascript:void(0)" (click)="refreshJobs()">
+                    <clr-icon shape="refresh"></clr-icon>
+                </a>
+            </div>
+        </div>
+        <div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
+            <clr-dropdown [clrMenuPosition]="'bottom-left'">
+                <button class="btn btn-link" clrDropdownToggle>
           {{currentJobStatus.description | translate}}
           <clr-icon shape="caret down"></clr-icon>
         </button>
-        <div class="dropdown-menu">
-          <a href="javascript:void(0)" clrDropdownItem *ngFor="let j of jobStatus" (click)="doFilterJobStatus(j.key)"> {{j.description | translate}}</a>
+                <div class="dropdown-menu">
+                    <a href="javascript:void(0)" clrDropdownItem *ngFor="let j of jobStatus" (click)="doFilterJobStatus(j.key)"> {{j.description | translate}}</a>
+                </div>
+            </clr-dropdown>
+            <div class="flex-items-xs-middle">
+                <clr-icon shape="date"></clr-icon><input type="date" #fromTime (change)="doJobSearchByTimeRange(fromTime.value, 'begin')">
+                <clr-icon shape="date"></clr-icon><input type="date" #toTime (change)="doJobSearchByTimeRange(toTime.value, 'end')">
+            </div>
         </div>
-      </clr-dropdown>
-      <div class="flex-items-xs-middle">
-        <clr-icon shape="date"></clr-icon><input type="date" #fromTime  (change)="doJobSearchByTimeRange(fromTime.value, 'begin')">
-        <clr-icon shape="date"></clr-icon><input type="date" #toTime  (change)="doJobSearchByTimeRange(toTime.value, 'end')">
-      </div>
     </div>
-  </div>
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <list-job [jobs]="changedJobs" [totalPage]="jobsTotalPage" [totalRecordCount]="jobsTotalRecordCount" (paginate)="fetchPolicyJobs($event)"></list-job>     
-  </div>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <list-job [jobs]="changedJobs" [totalPage]="jobsTotalPage" [totalRecordCount]="jobsTotalRecordCount" (paginate)="fetchPolicyJobs($event)"></list-job>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html
index 3d7600058..628abcf9c 100644
--- a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html
+++ b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html
@@ -13,8 +13,7 @@
             <p class="p5">{{'ABOUT.COPYRIGHT' | translate}} <a href="http://www.vmware.com/go/patents" target="_blank" class="about-text-link">http://www.vmware.com/go/patents</a></p>
             <p class="p5">{{'ABOUT.TRADEMARK' | translate}}</p>
             <p class="p5">
-                <a href="#" target="_blank">{{'ABOUT.END_USER_LICENSE' | translate}}</a><br>
-                <a href="#" target="_blank">{{'ABOUT.OPEN_SOURCE_LICENSE' | translate}}</a>
+                <a href="https://raw.githubusercontent.com/vmware/harbor/master/LICENSE" target="_blank">{{'ABOUT.OPEN_SOURCE_LICENSE' | translate}}</a>
             </p>
             <div style="height: 24px;"></div>
         </div>
diff --git a/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html
index 7fda2e732..d2605a7cc 100644
--- a/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html
+++ b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html
@@ -4,7 +4,7 @@
             <div class="form-group form-group-override">
                 <label for="username" class="required form-group-label-override">{{'PROFILE.USER_NAME' | translate}}</label>
                 <label for="username" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("username")'>
-                <input type="text" required pattern='[^"~#$%]+' maxLengthExt="20" #usernameInput="ngModel" name="username" [(ngModel)]="newUser.username" id="username" size="40" 
+                <input type="text" required pattern='[^"~#$%]+' maxLengthExt="20" #usernameInput="ngModel" name="username" [(ngModel)]="newUser.username" id="username" size="36" 
                 (input)='handleValidation("username", false)' 
                 (focusout)='handleValidation("username", true)'>
                 <span class="tooltip-content">
@@ -17,7 +17,7 @@
                 <label for="email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("email")'>
                       <input name="email" type="text" #eamilInput="ngModel" [(ngModel)]="newUser.email" 
                       required 
-                      pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$' id="email" size="40"
+                      pattern='^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$' id="email" size="36"
                       (input)='handleValidation("email", false)' 
                 (focusout)='handleValidation("email", true)'>
                       <span class="tooltip-content">
@@ -30,7 +30,7 @@
             <div class="form-group form-group-override">
                 <label for="realname" class="required form-group-label-override">{{'PROFILE.FULL_NAME' | translate}}</label>
                 <label for="realname" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("realname")'>
-                      <input type="text" name="realname" #fullNameInput="ngModel" [(ngModel)]="newUser.realname" required maxLengthExt="20" id="realname" size="40"
+                      <input type="text" name="realname" #fullNameInput="ngModel" [(ngModel)]="newUser.realname" required maxLengthExt="20" id="realname" size="36"
                       (input)='handleValidation("realname", false)' 
                 (focusout)='handleValidation("realname", true)'>
                       <span class="tooltip-content">
@@ -43,10 +43,10 @@
                 <label for="newPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("newPassword")'>
                 <input type="password" id="newPassword" 
                 required
-                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
+                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                     name="newPassword"
                     [(ngModel)]="newUser.password"
-                    #newPassInput="ngModel" size="40" 
+                    #newPassInput="ngModel" size="36" 
                     (input)='handleValidation("newPassword", false)' 
                 (focusout)='handleValidation("newPassword", true)'>
                 <span class="tooltip-content">
@@ -60,10 +60,10 @@
                 <label for="confirmPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("confirmPassword")'>
                 <input type="password" id="confirmPassword"
                     required
-                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
+                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                     name="confirmPassword"
                     [(ngModel)]="confirmedPwd"
-                    #confirmPassInput="ngModel" size="40" 
+                    #confirmPassInput="ngModel" size="36" 
                     (input)='handleValidation("confirmPassword", false)' 
                 (focusout)='handleValidation("confirmPassword", true)'>
                 <span class="tooltip-content">
@@ -74,7 +74,7 @@
             <div class="form-group form-group-override">
                 <label for="comment" class="form-group-label-override">{{'PROFILE.COMMENT' | translate}}</label>
                 <label for="comment" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("comment")'>
-                <input type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="20" id="comment" size="40" 
+                <input type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="20" id="comment" size="36" 
                 (input)='handleValidation("comment", false)' 
                 (focusout)='handleValidation("comment", true)'>
                 <span class="tooltip-content">
diff --git a/src/ui_ng/src/app/user/user.component.html b/src/ui_ng/src/app/user/user.component.html
index 656502bd2..0dff7b3b1 100644
--- a/src/ui_ng/src/app/user/user.component.html
+++ b/src/ui_ng/src/app/user/user.component.html
@@ -3,7 +3,7 @@
         <h2 class="custom-h2">{{'SIDE_NAV.SYSTEM_MGMT.USER' | translate}}</h2>
         <div class="action-panel-pos">
             <span>
-        <button *ngIf="canCreateUser" type="submit" class="btn btn-primary custom-add-button" (click)="addNewUser()"><clr-icon shape="add"></clr-icon>  {{'USER.ADD_ACTION' | translate}}</button>
+        <button *ngIf="canCreateUser" type="submit" class="btn btn-link custom-add-button" (click)="addNewUser()"><clr-icon shape="add"></clr-icon>  {{'USER.ADD_ACTION' | translate}}</button>
       </span>
             <grid-filter class="filter-pos" filterPlaceholder='{{"USER.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)"></grid-filter>
             <span class="refresh-btn" (click)="refreshUser()">