Feature/extend support for impersonation mode (#1898)

* Support impersonation of all users for local development

* Update changelog

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { getDateFormatString, getEmojiFlag } from '@ghostfolio/common/helper';
 import { AdminData, InfoItem, User } from '@ghostfolio/common/interfaces';
@@ -21,6 +22,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   public defaultDateFormat: string;
   public getEmojiFlag = getEmojiFlag;
   public hasPermissionForSubscription: boolean;
+  public hasPermissionToImpersonateAllUsers: boolean;
   public info: InfoItem;
   public user: User;
   public users: AdminData['users'];
@@ -30,6 +32,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
   ) {
     this.info = this.dataService.fetchInfo();
@@ -48,6 +51,11 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
           this.defaultDateFormat = getDateFormatString(
             this.user.settings.locale
           );
+
+          this.hasPermissionToImpersonateAllUsers = hasPermission(
+            this.user.permissions,
+            permissions.impersonateAllUsers
+          );
         }
       });
   }
@@ -88,6 +96,16 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
     }
   }
 
+  public onImpersonateUser(aId: string) {
+    if (aId) {
+      this.impersonationStorageService.setId(aId);
+    } else {
+      this.impersonationStorageService.removeId();
+    }
+
+    window.location.reload();
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/components/admin-users/admin-users.html

@@ -106,12 +106,20 @@
                 <button
                   class="mx-1 no-min-width px-2"
                   mat-button
-                  [matMenuTriggerFor]="accountMenu"
+                  [matMenuTriggerFor]="userMenu"
                   (click)="$event.stopPropagation()"
                 >
                   <ion-icon name="ellipsis-vertical"></ion-icon>
                 </button>
-                <mat-menu #accountMenu="matMenu" xPosition="before">
+                <mat-menu #userMenu="matMenu" xPosition="before">
+                  <button
+                    *ngIf="hasPermissionToImpersonateAllUsers"
+                    mat-menu-item
+                    (click)="onImpersonateUser(userItem.id)"
+                  >
+                    <ion-icon class="mr-2" name="contract-outline"></ion-icon>
+                    <span i18n>Impersonate</span>
+                  </button>
                   <button
                     mat-menu-item
                     [disabled]="userItem.id === user?.id"