Add admin rename ui Add UI Element for rename admin

src/ui_ng/lib/package.json

 {
     "name": "harbor-ui",
-    "version": "0.6.6",
+    "version": "0.6.22",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "scripts": {
         "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",

src/ui_ng/lib/pkg/package.json

 {
     "name": "harbor-ui",
-    "version": "0.6.6",
+    "version": "0.6.22",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "author": "VMware",
     "module": "index.js",

src/ui_ng/package.json

@@ -31,7 +31,7 @@
         "clarity-icons": "^0.10.17",
         "clarity-ui": "^0.10.17",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.6.20-beta.4",
+        "harbor-ui": "0.6.22",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",

src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html

 <clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="false">
     <h3 class="modal-title">{{'PROFILE.TITLE' | translate}}</h3>
-    <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
+    <inline-alert class="modal-title" (confirmEvt)="confirm($event)"></inline-alert>
     <div class="modal-body" style="overflow-y: hidden;">
         <form #accountSettingsFrom="ngForm" class="form">
             <section class="form-block">
                 <div class="form-group form-group-override">
-                    <label for="account_settings_username" class="form-group-label-override">{{'PROFILE.USER_NAME' | translate}}</label>
+                    <label for="account_settings_username" aria-haspopup="true" class="form-group-label-override">{{'PROFILE.USER_NAME' | translate}}</label>
                     <input type="text" name="account_settings_username" [(ngModel)]="account.username" disabled id="account_settings_username" size="33">
+                    <clr-tooltip *ngIf="renamable">
+                        <button (dblclick)="openRenameAlert()" class="btn btn-link">
+                            <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
+                        </button>
+                        <clr-tooltip-content clrPosition="bottom-left" clrSize="md" *clrIfOpen>
+                            <span (click)="openRenameAlert()"> {{'PROFILE.ADMIN_RENAME_TIP'}}</span>
+                        </clr-tooltip-content>
+                    </clr-tooltip>
                 </div>
                 <div class="form-group form-group-override">
                     <label for="account_settings_email" class="required form-group-label-override">{{'PROFILE.EMAIL' | translate}}</label>

src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts

@@ -42,6 +42,8 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
     formValueChanged: boolean = false;
     checkOnGoing: boolean = false;
 
+    RenameOnGoing: boolean = false;
+
     accountFormRef: NgForm;
     @ViewChild("accountSettingsFrom") accountForm: NgForm;
     @ViewChild(InlineAlertComponent)
@@ -133,6 +135,29 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
         return this.checkOnGoing;
     }
 
+    public get renamable(): boolean {
+        return this.account && this.account.has_admin_role && this.account.username === 'admin' && this.account.user_id === 1;
+    }
+
+    openRenameAlert(): void {
+        this.RenameOnGoing = true;
+        this.inlineAlert.showInlineConfirmation({
+            message: 'PROFILE.RENAME_CONFIRM_INFO'
+        });
+    }
+
+    confirmRename(): void {
+        if (this.renamable) {
+            this.session.renameAdmin(this.account)
+            .then(() => {
+                this.msgHandler.showSuccess('PROFILE.RENAME_SUCCESS');
+            })
+            .catch(error => {
+                this.msgHandler.handleError(error);
+            });
+        }
+    }
+
     ngAfterViewChecked(): void {
         if (this.accountFormRef != this.accountForm) {
             this.accountFormRef = this.accountForm;
@@ -215,7 +240,11 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
             });
     }
 
-    confirmCancel($event: any): void {
+    confirm($event: any): void {
+        if(this.RenameOnGoing) {
+            this.confirmRename();
+            this.RenameOnGoing = false;
+        }
         this.inlineAlert.close();
         this.opened = false;
     }

src/ui_ng/src/app/shared/session.service.ts

@@ -28,6 +28,7 @@ const signOffEndpoint = "/log_out";
 const accountEndpoint = "/api/users/:id";
 const langEndpoint = "/language";
 const userExistsEndpoint = "/userExists";
+const renameAdminEndpoint = 'api/internal/renameadmin';
 const langMap = {
     "zh": "zh-CN",
     "en": "en-US"
@@ -129,6 +130,25 @@ export class SessionService {
             .catch(error => this.handleError(error))
     }
 
+    /**
+     *
+     * Update accpunt settings
+     *
+     * @param {SessionUser} account
+     * @returns {Promise<any>}
+     *
+     * @memberOf SessionService
+     */
+    renameAdmin(account: SessionUser): Promise<any> {
+        if (!account) {
+            return Promise.reject("Invalid account settings");
+        }
+        return this.http.post(renameAdminEndpoint, JSON.stringify({}), HTTP_JSON_OPTIONS)
+        .toPromise()
+        .then(() => null)
+        .catch(error => this.handleError(error));
+    }
+
     /**
      * Switch the backend language profile
      */

src/ui_ng/src/app/user/user.service.ts

@@ -22,7 +22,7 @@ const userMgmtEndpoint = '/api/users';
 
 /**
  * Define related methods to handle account and session corresponding things
- * 
+ *
  * @export
  * @class SessionService
  */
@@ -31,26 +31,26 @@ export class UserService {
 
     constructor(private http: Http) { }
 
-    //Handle the related exceptions
+    // Handle the related exceptions
     handleError(error: any): Promise<any> {
         return Promise.reject(error.message || error);
     }
 
-    //Get the user list
+    // Get the user list
     getUsers(): Promise<User[]> {
         return this.http.get(userMgmtEndpoint, HTTP_GET_OPTIONS).toPromise()
             .then(response => response.json() as User[])
             .catch(error => this.handleError(error));
     }
 
-    //Add new user
+    // Add new user
     addUser(user: User): Promise<any> {
         return this.http.post(userMgmtEndpoint, JSON.stringify(user), HTTP_JSON_OPTIONS).toPromise()
             .then(() => null)
             .catch(error => this.handleError(error));
     }
 
-    //Delete the specified user
+    // Delete the specified user
     deleteUser(userId: number): Promise<any> {
         return this.http.delete(userMgmtEndpoint + "/" + userId, HTTP_JSON_OPTIONS)
             .toPromise()
@@ -58,7 +58,7 @@ export class UserService {
             .catch(error => this.handleError(error));
     }
 
-    //Update user to enable/disable the admin role
+    // Update user to enable/disable the admin role
     updateUser(user: User): Promise<any> {
         return this.http.put(userMgmtEndpoint + "/" + user.user_id, JSON.stringify(user), HTTP_JSON_OPTIONS)
             .toPromise()
@@ -66,7 +66,7 @@ export class UserService {
             .catch(error => this.handleError(error));
     }
 
-    //Set user admin role
+    // Set user admin role
     updateUserRole(user: User): Promise<any> {
         return this.http.put(userMgmtEndpoint + "/" + user.user_id + "/sysadmin", JSON.stringify(user), HTTP_JSON_OPTIONS)
             .toPromise()

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

@@ -82,7 +82,10 @@
         "FULL_NAME": "First and last name",
         "COMMENT": "Comments",
         "PASSWORD": "Password",
-        "SAVE_SUCCESS": "User profile saved successfully."
+        "SAVE_SUCCESS": "User profile saved successfully.",
+        "ADMIN_RENAME_TIP": "Double click to change your username to \"admin@harbor.local\", but this action can NOT redo.",
+        "RENAME_SUCCESS": "Rename success!",
+        "RENAME_CONFIRM_INFO": "This action can not undo, Confirm To Rename?"
     },
     "CHANGE_PWD": {
         "TITLE": "Change Password",

src/ui_ng/src/i18n/lang/es-es-lang.json

@@ -82,7 +82,10 @@
         "FULL_NAME": "Nombre y apellidos",
         "COMMENT": "Comentarios",
         "PASSWORD": "Contraseña",
-        "SAVE_SUCCESS": "Perfil de usuario guardado satisfactoriamente."
+        "SAVE_SUCCESS": "Perfil de usuario guardado satisfactoriamente.",
+        "ADMIN_RENAME_TIP": "Double click to change your username to \"admin@harbor.local\", but this action can NOT redo.",
+        "RENAME_SUCCESS": "Rename success!",
+        "RENAME_CONFIRM_INFO": "This action can not undo, Confirm To Rename?"
     },
     "CHANGE_PWD": {
         "TITLE": "Cambiar contraseña",

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

@@ -82,7 +82,10 @@
         "FULL_NAME": "全名",
         "COMMENT": "注释",
         "PASSWORD": "密码",
-        "SAVE_SUCCESS": "成功保存用户设置。"
+        "SAVE_SUCCESS": "成功保存用户设置。",
+        "ADMIN_RENAME_TIP": "双击将用户名改为 \"admin@harbor.local\", 注意这个操作是不可逆的",
+        "RENAME_SUCCESS": "用户名更改成功！",
+        "RENAME_CONFIRM_INFO": "更改用户名无法撤销, 你确定更改吗·?"
     },
     "CHANGE_PWD": {
         "TITLE": "修改密码",