diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
index f4be9fe7af..073d3c84c1 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
@@ -69,7 +69,7 @@ export class AuthUserDetailComponent implements OnDestroy {
   }
 
   public changeUsername(): void {
-    const dialogRefPhone = this.dialog.open(EditDialogComponent, {
+    const dialogRef = this.dialog.open(EditDialogComponent, {
       data: {
         confirmKey: 'ACTIONS.CHANGE',
         cancelKey: 'ACTIONS.CANCEL',
@@ -81,10 +81,10 @@ export class AuthUserDetailComponent implements OnDestroy {
       width: '400px',
     });
 
-    dialogRefPhone.afterClosed().subscribe((resp) => {
-      if (resp && resp !== this.user.userName) {
+    dialogRef.afterClosed().subscribe((resp: { value: string }) => {
+      if (resp && resp.value && resp.value !== this.user.userName) {
         this.userService
-          .updateMyUserName(resp)
+          .updateMyUserName(resp.value)
           .then(() => {
             this.toast.showInfo('USER.TOAST.USERNAMECHANGED', true);
             this.refreshUser();
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
index e2692d058d..a8526f3a06 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
@@ -85,7 +85,7 @@ export class UserDetailComponent implements OnInit {
   }
 
   public changeUsername(): void {
-    const dialogRefPhone = this.dialog.open(EditDialogComponent, {
+    const dialogRef = this.dialog.open(EditDialogComponent, {
       data: {
         confirmKey: 'ACTIONS.CHANGE',
         cancelKey: 'ACTIONS.CANCEL',
@@ -97,10 +97,10 @@ export class UserDetailComponent implements OnInit {
       width: '400px',
     });
 
-    dialogRefPhone.afterClosed().subscribe((resp) => {
-      if (resp && resp !== this.user.userName) {
+    dialogRef.afterClosed().subscribe((resp: { value: string }) => {
+      if (resp.value && resp.value !== this.user.userName) {
         this.mgmtUserService
-          .updateUserName(this.user.id, resp)
+          .updateUserName(this.user.id, resp.value)
           .then(() => {
             this.toast.showInfo('USER.TOAST.USERNAMECHANGED', true);
             this.refreshUser();