Improve user setting component (#16665)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/account-settings/account-settings-modal.component.html

@@ -93,7 +93,7 @@
         <span class="spinner spinner-inline loading-top" [hidden]="showProgress === false"></span>
         <button type="button" id="cancel-btn" class="btn btn-outline" (click)="close()">{{'BUTTON.CANCEL' | translate}}</button>
 
-        <button type="button" id="submit-btn" class="btn btn-primary" [disabled]="!isValid || showProgress"
+        <button type="button" id="submit-btn" class="btn btn-primary" [disabled]="!isValid || showProgress || !isUserDataChange()"
             (click)="submit()">{{'BUTTON.OK' | translate}}</button>
     </div>
 </clr-modal>

src/portal/src/app/base/account-settings/account-settings-modal.component.ts

@@ -12,10 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ChangeDetectorRef } from '@angular/core';
-import { Component, OnInit, ViewChild, AfterViewChecked } from "@angular/core";
+import { AfterViewChecked, Component, OnInit, ViewChild } from "@angular/core";
 import { NgForm } from "@angular/forms";
-import { Router, NavigationExtras } from "@angular/router";
+import { NavigationExtras, Router } from "@angular/router";
 import { SessionUser } from "../../shared/entities/session-user";
 import { SessionService } from "../../shared/services/session.service";
 import { MessageHandlerService } from "../../shared/services/message-handler.service";
@@ -63,20 +62,26 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
     @ViewChild("copyInput") copyInput: CopyInputComponent;
     showInputSecret: boolean = false;
     showConfirmSecret: boolean = false;
+
     constructor(
         private session: SessionService,
         private msgHandler: MessageHandlerService,
         private router: Router,
         private searchTrigger: SearchTriggerService,
         private accountSettingsService: AccountSettingsModalService,
-    private ref: ChangeDetectorRef
-  ) {}
+    ) {
+    }
 
     private validationStateMap: any = {
         account_settings_email: true,
         account_settings_full_name: true
     };
+
     ngOnInit(): void {
+        this.refreshAccount();
+    }
+
+    refreshAccount() {
         // Value copy
         this.account = Object.assign({}, this.session.getCurrentUser());
         this.originalStaticData = Object.assign({}, this.session.getCurrentUser());
@@ -304,6 +309,10 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
                     this.isOnCalling = false;
                     this.opened = false;
                     this.msgHandler.showSuccess("PROFILE.SAVE_SUCCESS");
+                    // get user info from back-end then refresh account
+                    this.session.retrieveUser().subscribe(() => {
+                        this.refreshAccount();
+                    });
                 }, error => {
                     this.isOnCalling = false;
                     this.error = error;
@@ -325,6 +334,7 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
             this.renameConfirmation = false;
         }
     }
+
     confirmYes($event: any): void {
         if (this.RenameOnGoing) {
             this.RenameOnGoing = false;
@@ -335,12 +345,15 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
         this.inlineAlert.close();
         this.opened = false;
     }
+
     onSuccess(event) {
         this.inlineAlert.showInlineSuccess({message: 'PROFILE.COPY_SUCCESS'});
     }
+
     onError(event) {
         this.inlineAlert.showInlineError({message: 'PROFILE.COPY_ERROR'});
     }
+
     generateCli(userId): void {
         let generateCliMessage = new ConfirmationMessage(
             'PROFILE.CONFIRM_TITLE_CLI_GENERATE',
@@ -351,9 +364,11 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
             ConfirmationButtons.CONFIRM_CANCEL);
         this.confirmationDialogComponent.open(generateCliMessage);
     }
+
     showGenerateCliFn() {
         this.showGenerateCli = !this.showGenerateCli;
     }
+
     confirmGenerate(event): void {
         this.account.oidc_user_meta.secret = randomWord(9);
         this.resetCliSecret(this.account.oidc_user_meta.secret);
@@ -369,14 +384,17 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
             this.resetSecretInlineAlert.showInlineError({message: 'PROFILE.GENERATE_ERROR'});
         });
     }
+
     disableChangeCliSecret() {
         return this.resetSecretFrom.invalid || (this.resetSecretFrom.value.input_secret !== this.resetSecretFrom.value.confirm_secret);
     }
+
     closeReset() {
         this.showSecretDetail = false;
         this.showGenerateCliFn();
         this.resetSecretFrom.resetForm(new ResetSecret());
     }
+
     openSecretDetail() {
         this.showSecretDetail = true;
         this.resetSecretInlineAlert.close();

src/portal/src/app/shared/services/session.service.ts

@@ -35,7 +35,7 @@ const signOffEndpoint = "/c/log_out";
 const accountEndpoint = CURRENT_BASE_HREF + "/users/:id";
 const langEndpoint = "/language";
 const userExistsEndpoint = "/c/userExists";
-const renameAdminEndpoint = CURRENT_BASE_HREF + '/internal/renameadmin';
+const renameAdminEndpoint =  'api/internal/renameadmin';
 const langMap = {
     "zh": "zh-CN",
     "en": "en-US"