Task/add write access to create or update access dialog (#7676)

* Add write access

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the permission to manage data to the grant access dialog and to the access table to share the portfolio (experimental)
+
 ### Changed
 
 - Extended the account selector options to include the platform and currency

apps/client/src/app/components/access-table/access-table.component.html

@@ -18,7 +18,10 @@
       <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Permission</th>
       <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         <div class="align-items-center d-flex">
-          @if (hasScopeToReadValues(element)) {
+          @if (hasScopesToWrite(element)) {
+            <ion-icon class="mr-1" name="create-outline" />
+            <ng-container i18n>View and manage</ng-container>
+          } @else if (hasScopeToReadValues(element)) {
             <ion-icon class="mr-1" name="lock-open-outline" />
             <ng-container i18n>View</ng-container>
           } @else {

apps/client/src/app/components/access-table/access-table.component.ts

@@ -1,7 +1,11 @@
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
-import { hasScope, scopes } from '@ghostfolio/common/scopes';
+import {
+  hasAnyScopeOfWriteAccess,
+  hasScope,
+  scopes
+} from '@ghostfolio/common/scopes';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
@@ -105,6 +109,10 @@ export class GfAccessTableComponent {
     return hasScope(scopesOfAccess, scopes.portfolioReadValues);
   }
 
+  protected hasScopesToWrite({ scopes: scopesOfAccess }: Access) {
+    return hasAnyScopeOfWriteAccess(scopesOfAccess);
+  }
+
   protected onCopyUrlToClipboard(aId: string) {
     this.clipboard.copy(this.getPublicUrl(aId));
 

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -148,11 +148,13 @@
           [baseCurrency]="user?.settings?.baseCurrency"
           [dataSource]="dataSource"
           [deviceType]="data.deviceType"
-          [hasPermissionToCreateActivity]="false"
+          [hasActivities]="true"
+          [hasPermissionToCreateActivity]="data.hasPermissionToCreateActivity"
           [hasPermissionToDeleteActivity]="false"
           [hasPermissionToExportActivities]="!showValuesInPercentage()"
           [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
+          [hasPermissionToUpdateActivity]="data.hasPermissionToUpdateActivity"
           [locale]="user?.settings?.locale"
           [pageIndex]="pageIndex"
           [pageSize]="pageSize"

apps/client/src/app/components/account-detail-dialog/interfaces/interfaces.ts

@@ -2,6 +2,7 @@ export interface AccountDetailDialogParams {
   accountId: string;
   deviceType: string;
   hasPermissionToCreateActivity: boolean;
+  hasPermissionToUpdateActivity: boolean;
   impersonationId: string | null;
 }
 

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -379,13 +379,15 @@
           [baseCurrency]="data.baseCurrency"
           [dataSource]="dataSource"
           [deviceType]="data.deviceType"
-          [hasPermissionToCreateActivity]="false"
+          [hasActivities]="true"
+          [hasPermissionToCreateActivity]="data.hasPermissionToCreateActivity"
           [hasPermissionToDeleteActivity]="false"
           [hasPermissionToExportActivities]="
             !data.impersonationId && !user?.settings?.isRestrictedView
           "
           [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
+          [hasPermissionToUpdateActivity]="data.hasPermissionToUpdateActivity"
           [locale]="data.locale"
           [pageIndex]="pageIndex"
           [pageSize]="pageSize"

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -1,4 +1,3 @@
-import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   AssetProfileIdentifier,
@@ -7,6 +6,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { hasScope, scopes } from '@ghostfolio/common/scopes';
 import {
   HoldingType,
   HoldingsViewMode,
@@ -51,7 +51,6 @@ export class GfHomeHoldingsComponent implements OnInit {
   public static DEFAULT_HOLDINGS_VIEW_MODE: HoldingsViewMode = 'TABLE';
 
   protected deviceType: string;
-  protected hasImpersonationId: boolean;
   protected hasPermissionToAccessHoldingsChart: boolean;
   protected hasPermissionToCreateActivity: boolean;
   protected holdings: PortfolioPosition[] | undefined;
@@ -83,9 +82,6 @@ export class GfHomeHoldingsComponent implements OnInit {
   private readonly dataService = inject(DataService);
   private readonly destroyRef = inject(DestroyRef);
   private readonly deviceDetectorService = inject(DeviceDetectorService);
-  private readonly impersonationStorageService = inject(
-    ImpersonationStorageService
-  );
   private readonly router = inject(Router);
   private readonly userService = inject(UserService);
 
@@ -96,15 +92,6 @@ export class GfHomeHoldingsComponent implements OnInit {
   public ngOnInit() {
     this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
 
-    this.impersonationStorageService
-      .onChangeHasImpersonation()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((impersonationId) => {
-        this.hasImpersonationId = !!impersonationId;
-
-        this.changeDetectorRef.markForCheck();
-      });
-
     this.userService.stateChanged
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
@@ -116,10 +103,9 @@ export class GfHomeHoldingsComponent implements OnInit {
             permissions.accessHoldingsChart
           );
 
-          this.hasPermissionToCreateActivity = hasPermission(
-            this.user.permissions,
-            permissions.createActivity
-          );
+          this.hasPermissionToCreateActivity =
+            hasPermission(this.user.permissions, permissions.createActivity) &&
+            hasScope(this.user.scopes, scopes.activityCreate);
 
           this.initialize();
         }

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -41,11 +41,7 @@
           [locale]="user?.settings?.locale"
           (holdingClicked)="onHoldingClicked($event)"
         />
-        @if (
-          !hasImpersonationId &&
-          hasPermissionToCreateActivity &&
-          holdings?.length > 0
-        ) {
+        @if (hasPermissionToCreateActivity && holdings?.length > 0) {
           <div class="text-center">
             <a
               class="mt-3"

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -15,6 +15,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { hasScope, scopes } from '@ghostfolio/common/scopes';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -66,7 +67,10 @@ export class GfHomeOverviewComponent implements OnInit {
   );
 
   protected readonly hasPermissionToCreateActivity = computed(() => {
-    return hasPermission(this.user()?.permissions, permissions.createActivity);
+    return (
+      hasPermission(this.user()?.permissions, permissions.createActivity) &&
+      hasScope(this.user()?.scopes, scopes.activityCreate)
+    );
   });
 
   protected readonly showDetails = computed(() => {

apps/client/src/app/components/home-watchlist/home-watchlist.component.ts

@@ -1,4 +1,3 @@
-import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { DEFAULT_LOCALE } from '@ghostfolio/common/config';
 import {
@@ -7,6 +6,7 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { hasScope, scopes } from '@ghostfolio/common/scopes';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
 import { GfFabComponent } from '@ghostfolio/ui/fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
@@ -44,7 +44,6 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
   templateUrl: './home-watchlist.html'
 })
 export class GfHomeWatchlistComponent implements OnInit {
-  protected hasImpersonationId: boolean;
   protected hasPermissionToCreateWatchlistItem: boolean;
   protected hasPermissionToDeleteWatchlistItem: boolean;
   protected user: User;
@@ -59,21 +58,11 @@ export class GfHomeWatchlistComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
   private readonly deviceDetectorService = inject(DeviceDetectorService);
   private readonly dialog = inject(MatDialog);
-  private readonly impersonationStorageService = inject(
-    ImpersonationStorageService
-  );
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly userService = inject(UserService);
 
   public constructor() {
-    this.impersonationStorageService
-      .onChangeHasImpersonation()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((impersonationId) => {
-        this.hasImpersonationId = !!impersonationId;
-      });
-
     this.route.queryParams
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
@@ -89,17 +78,15 @@ export class GfHomeWatchlistComponent implements OnInit {
           this.user = state.user;
 
           this.hasPermissionToCreateWatchlistItem =
-            !this.hasImpersonationId &&
             hasPermission(
               this.user.permissions,
               permissions.createWatchlistItem
-            );
+            ) && hasScope(this.user.scopes, scopes.watchlistCreate);
           this.hasPermissionToDeleteWatchlistItem =
-            !this.hasImpersonationId &&
             hasPermission(
               this.user.permissions,
               permissions.deleteWatchlistItem
-            );
+            ) && hasScope(this.user.scopes, scopes.watchlistDelete);
 
           this.changeDetectorRef.markForCheck();
         }
@@ -149,6 +136,15 @@ export class GfHomeWatchlistComponent implements OnInit {
       .subscribe((user) => {
         this.user = user;
 
+        if (
+          !hasPermission(user?.permissions, permissions.createWatchlistItem) ||
+          !hasScope(user?.scopes, scopes.watchlistCreate)
+        ) {
+          this.router.navigate(['.'], { relativeTo: this.route });
+
+          return;
+        }
+
         const dialogRef = this.dialog.open<
           GfCreateWatchlistItemDialogComponent,
           CreateWatchlistItemDialogParams

apps/client/src/app/components/home-watchlist/home-watchlist.html

@@ -21,6 +21,6 @@
     </div>
   </div>
 </div>
-@if (!hasImpersonationId && hasPermissionToCreateWatchlistItem) {
+@if (hasPermissionToCreateWatchlistItem) {
   <gf-fab [queryParams]="{ createWatchlistItemDialog: true }" />
 }

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -4,6 +4,9 @@ import { Filter, PortfolioPosition } from '@ghostfolio/common/interfaces';
 import {
   SCOPES_OF_READ_ACCESS,
   SCOPES_OF_READ_RESTRICTED_ACCESS,
+  SCOPES_OF_WRITE_ACCESS,
+  Scope,
+  hasAnyScopeOfWriteAccess,
   hasScope,
   scopes
 } from '@ghostfolio/common/scopes';
@@ -49,7 +52,10 @@ import { MatSelectModule } from '@angular/material/select';
 import { StatusCodes } from 'http-status-codes';
 import { EMPTY, catchError } from 'rxjs';
 
-import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
+import {
+  AccessLevel,
+  CreateOrUpdateAccessDialogParams
+} from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -105,21 +111,22 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
     );
   }
 
+  public get canGrantWriteAccess() {
+    return this.hasExperimentalFeatures;
+  }
+
   public ngOnInit() {
     const access = this.data?.access;
     const isPublic = access?.type === 'PUBLIC';
 
     this.accessForm = this.formBuilder.group({
+      accessLevel: this.getAccessLevel(access?.scopes),
       alias: [access?.alias ?? ''],
       filters: [null],
       granteeUserId: [
         access?.grantee ?? null,
         isPublic ? null : Validators.required
       ],
-      hasScopeToReadValues: hasScope(
-        access?.scopes,
-        scopes.portfolioReadValues
-      ),
       type: [
         { disabled: this.mode === 'update', value: access?.type ?? 'PRIVATE' },
         Validators.required
@@ -145,10 +152,6 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
       .subscribe((accessType) => {
         const granteeUserIdControl = this.accessForm.get('granteeUserId');
 
-        const hasScopeToReadValuesControl = this.accessForm.get(
-          'hasScopeToReadValues'
-        );
-
         if (accessType === 'PRIVATE') {
           granteeUserIdControl?.setValidators(Validators.required);
           this.accessForm.get('filters')?.setValue(null);
@@ -156,8 +159,9 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
           granteeUserIdControl?.clearValidators();
           granteeUserIdControl?.setValue(null);
 
-          // A public access never exposes the monetary values
-          hasScopeToReadValuesControl?.setValue(false);
+          // A public access never exposes the monetary values and never
+          // changes data
+          this.accessForm.get('accessLevel')?.setValue('READ_RESTRICTED');
         }
 
         granteeUserIdControl?.updateValueAndValidity();
@@ -186,16 +190,29 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
     );
   }
 
-  /**
-   * The dialog offers the read access only. The write scopes are not granted
-   * here yet.
-   */
-  private buildScopes() {
-    return [
-      ...(this.accessForm.get('hasScopeToReadValues')?.value
-        ? SCOPES_OF_READ_ACCESS
-        : SCOPES_OF_READ_RESTRICTED_ACCESS)
-    ];
+  private buildScopes(): Scope[] {
+    const accessLevel = this.accessForm.get('accessLevel')
+      ?.value as AccessLevel;
+
+    const scopesOfAccess = this.data.access?.scopes ?? [];
+
+    if (
+      scopesOfAccess.length > 0 &&
+      accessLevel === this.getAccessLevel(scopesOfAccess)
+    ) {
+      return Object.values(scopes).filter((scope) => {
+        return hasScope(scopesOfAccess, scope);
+      });
+    }
+
+    switch (accessLevel) {
+      case 'CREATE_READ_UPDATE_DELETE':
+        return [...SCOPES_OF_READ_ACCESS, ...SCOPES_OF_WRITE_ACCESS];
+      case 'READ':
+        return [...SCOPES_OF_READ_ACCESS];
+      default:
+        return [...SCOPES_OF_READ_RESTRICTED_ACCESS];
+    }
   }
 
   private async createAccess() {
@@ -237,6 +254,16 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
     }
   }
 
+  private getAccessLevel(scopesOfAccess: string[] | undefined): AccessLevel {
+    if (hasAnyScopeOfWriteAccess(scopesOfAccess)) {
+      return 'CREATE_READ_UPDATE_DELETE';
+    }
+
+    return hasScope(scopesOfAccess, scopes.portfolioReadValues)
+      ? 'READ'
+      : 'READ_RESTRICTED';
+  }
+
   private loadHoldings() {
     this.dataService
       .fetchPortfolioHoldings()

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -36,10 +36,16 @@
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Permission</mat-label>
-        <mat-select formControlName="hasScopeToReadValues">
-          <mat-option i18n [value]="false">Restricted view</mat-option>
+        <mat-select formControlName="accessLevel">
+          <mat-option i18n value="READ_RESTRICTED">Restricted view</mat-option>
           @if (accessForm.get('type')?.value === 'PRIVATE') {
-            <mat-option i18n [value]="true">View</mat-option>
+            <mat-option i18n value="READ">View</mat-option>
+            <mat-option
+              i18n
+              value="CREATE_READ_UPDATE_DELETE"
+              [disabled]="!canGrantWriteAccess"
+              >View and manage</mat-option
+            >
           }
         </mat-select>
       </mat-form-field>

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/interfaces/interfaces.ts

@@ -3,3 +3,6 @@ import { Access } from '@ghostfolio/common/interfaces';
 export interface CreateOrUpdateAccessDialogParams {
   access?: Access;
 }
+
+export type AccessLevel =
+  'CREATE_READ_UPDATE_DELETE' | 'READ' | 'READ_RESTRICTED';

apps/client/src/app/pages/accounts/account-dialog-host/account-dialog-host.component.ts

@@ -9,6 +9,7 @@ import { CreateAccountDto, UpdateAccountDto } from '@ghostfolio/common/dtos';
 import { AccountResponse, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { Scope, hasScope, scopes } from '@ghostfolio/common/scopes';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -111,7 +112,7 @@ export class GfAccountDialogHostComponent implements OnDestroy, OnInit {
             if (
               !account ||
               !hasPermission(user?.permissions, permissions.updateAccount) ||
-              this.isReadOnlyMode(user)
+              this.isWriteRestricted(user, scopes.accountUpdate)
             ) {
               this.navigateBack();
 
@@ -140,7 +141,7 @@ export class GfAccountDialogHostComponent implements OnDestroy, OnInit {
 
           if (
             !hasPermission(user?.permissions, permissions.createAccount) ||
-            this.isReadOnlyMode(user)
+            this.isWriteRestricted(user, scopes.accountCreate)
           ) {
             this.navigateBack();
 
@@ -181,9 +182,9 @@ export class GfAccountDialogHostComponent implements OnDestroy, OnInit {
     this.dialogRef?.close();
   }
 
-  private isReadOnlyMode(user: User) {
+  private isWriteRestricted(user: User, requiredScope: Scope) {
     return (
-      !!this.impersonationStorageService.getId() ||
+      !hasScope(user?.scopes, requiredScope) ||
       !!user?.settings?.isRestrictedView
     );
   }
@@ -220,6 +221,10 @@ export class GfAccountDialogHostComponent implements OnDestroy, OnInit {
         hasPermissionToCreateActivity:
           !impersonationId &&
           hasPermission(user?.permissions, permissions.createActivity) &&
+          !user?.settings?.isRestrictedView,
+        hasPermissionToUpdateActivity:
+          !impersonationId &&
+          hasPermission(user?.permissions, permissions.updateActivity) &&
           !user?.settings?.isRestrictedView
       },
       height: this.deviceType() === 'mobile' ? '98vh' : '80vh',

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -4,6 +4,7 @@ import { TransferBalanceDto } from '@ghostfolio/common/dtos';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { hasScope, scopes } from '@ghostfolio/common/scopes';
 import { AccountWithValue } from '@ghostfolio/common/types';
 import { GfAccountsTableComponent } from '@ghostfolio/ui/accounts-table';
 import { GfFabComponent } from '@ghostfolio/ui/fab';
@@ -41,13 +42,14 @@ export class GfAccountsPageComponent implements OnInit {
   protected accounts: AccountWithValue[];
   protected activitiesCount = 0;
   protected hasPermissionToCreateAccount: boolean;
+  protected hasPermissionToDeleteAccount: boolean;
   protected hasPermissionToUpdateAccount: boolean;
-  protected impersonationId: string | null;
   protected readonly internalRoutes = internalRoutes;
   protected totalBalanceInBaseCurrency = 0;
   protected totalValueInBaseCurrency = 0;
   protected user: User;
 
+  private hasImpersonationId: boolean;
   private isInitialFetch = true;
 
   private readonly deviceType = computed(
@@ -77,16 +79,12 @@ export class GfAccountsPageComponent implements OnInit {
       });
   }
 
-  protected get hasImpersonationId() {
-    return !!this.impersonationId;
-  }
-
   public ngOnInit() {
     this.impersonationStorageService
       .onChangeHasImpersonation()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((impersonationId) => {
-        this.impersonationId = impersonationId;
+        this.hasImpersonationId = !!impersonationId;
       });
 
     this.userService.stateChanged
@@ -95,14 +93,17 @@ export class GfAccountsPageComponent implements OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.hasPermissionToCreateAccount = hasPermission(
-            this.user.permissions,
-            permissions.createAccount
-          );
-          this.hasPermissionToUpdateAccount = hasPermission(
-            this.user.permissions,
-            permissions.updateAccount
-          );
+          this.hasPermissionToCreateAccount =
+            hasPermission(this.user.permissions, permissions.createAccount) &&
+            hasScope(this.user.scopes, scopes.accountCreate);
+
+          this.hasPermissionToDeleteAccount =
+            hasPermission(this.user.permissions, permissions.deleteAccount) &&
+            hasScope(this.user.scopes, scopes.accountDelete);
+
+          this.hasPermissionToUpdateAccount =
+            hasPermission(this.user.permissions, permissions.updateAccount) &&
+            hasScope(this.user.scopes, scopes.accountUpdate);
 
           this.fetchAccounts();
         }
@@ -148,6 +149,7 @@ export class GfAccountsPageComponent implements OnInit {
           this.totalValueInBaseCurrency = totalValueInBaseCurrency;
 
           if (
+            !this.hasImpersonationId &&
             this.accounts?.length <= 0 &&
             this.hasPermissionToCreateAccount &&
             this.isInitialFetch

apps/client/src/app/pages/accounts/accounts-page.html

@@ -6,10 +6,11 @@
         [accounts]="accounts"
         [activitiesCount]="activitiesCount"
         [baseCurrency]="user?.settings?.baseCurrency"
+        [hasPermissionToDeleteAccount]="hasPermissionToDeleteAccount"
+        [hasPermissionToUpdateAccount]="hasPermissionToUpdateAccount"
         [locale]="user?.settings?.locale"
         [showActions]="
-          !hasImpersonationId &&
-          hasPermissionToUpdateAccount &&
+          (hasPermissionToDeleteAccount || hasPermissionToUpdateAccount) &&
           !user.settings.isRestrictedView
         "
         [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"
@@ -20,11 +21,7 @@
     </div>
   </div>
 
-  @if (
-    !hasImpersonationId &&
-    hasPermissionToCreateAccount &&
-    !user.settings.isRestrictedView
-  ) {
+  @if (hasPermissionToCreateAccount && !user.settings.isRestrictedView) {
     <gf-fab
       [routerLink]="internalRoutes.accounts.subRoutes.create.routerLink"
     />

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -10,6 +10,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { hasScope, scopes } from '@ghostfolio/common/scopes';
 import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
 import { GfFabComponent } from '@ghostfolio/ui/fab';
 import { DataService } from '@ghostfolio/ui/services';
@@ -53,6 +54,7 @@ export class GfActivitiesPageComponent implements OnInit {
   protected hasImpersonationId: boolean;
   protected hasPermissionToCreateActivity: boolean;
   protected hasPermissionToDeleteActivity: boolean;
+  protected hasPermissionToUpdateActivity: boolean;
   protected readonly internalRoutes = internalRoutes;
   protected pageIndex = 0;
   protected readonly pageSize = DEFAULT_PAGE_SIZE;
@@ -75,6 +77,12 @@ export class GfActivitiesPageComponent implements OnInit {
   private readonly router = inject(Router);
   private readonly userService = inject(UserService);
 
+  protected get hasPermissionToImportActivities() {
+    // An import always writes to the own portfolio, hence it is not available
+    // while the user impersonates a different user
+    return this.hasPermissionToCreateActivity && !this.hasImpersonationId;
+  }
+
   public ngOnInit() {
     this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
 
@@ -301,6 +309,7 @@ export class GfActivitiesPageComponent implements OnInit {
         this.totalItems = count;
 
         if (
+          !this.hasImpersonationId &&
           this.hasPermissionToCreateActivity &&
           this.user?.activitiesCount === 0
         ) {
@@ -330,12 +339,18 @@ export class GfActivitiesPageComponent implements OnInit {
     this.user = aUser;
 
     this.hasPermissionToCreateActivity =
-      !this.hasImpersonationId &&
       hasPermission(this.user.permissions, permissions.createActivity) &&
+      hasScope(this.user.scopes, scopes.activityCreate) &&
       !this.user.settings?.isRestrictedView;
 
     this.hasPermissionToDeleteActivity =
-      !this.hasImpersonationId &&
-      hasPermission(this.user.permissions, permissions.deleteActivity);
+      hasPermission(this.user.permissions, permissions.deleteActivity) &&
+      hasScope(this.user.scopes, scopes.activityDelete) &&
+      !this.user.settings?.isRestrictedView;
+
+    this.hasPermissionToUpdateActivity =
+      hasPermission(this.user.permissions, permissions.updateActivity) &&
+      hasScope(this.user.scopes, scopes.activityUpdate) &&
+      !this.user.settings?.isRestrictedView;
   }
 }

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -11,12 +11,15 @@
         [hasPermissionToDeleteActivity]="hasPermissionToDeleteActivity"
         [hasPermissionToExportActivities]="!hasImpersonationId"
         [hasPermissionToFilterByType]="user?.settings?.isExperimentalFeatures"
+        [hasPermissionToImportActivities]="hasPermissionToImportActivities"
+        [hasPermissionToUpdateActivity]="hasPermissionToUpdateActivity"
         [locale]="user?.settings?.locale"
         [pageIndex]="pageIndex"
         [pageSize]="pageSize"
         [showActions]="
-          !hasImpersonationId &&
-          hasPermissionToDeleteActivity &&
+          (hasPermissionToCreateActivity ||
+            hasPermissionToDeleteActivity ||
+            hasPermissionToUpdateActivity) &&
           !user.settings.isRestrictedView
         "
         [sortColumn]="sortColumn"
@@ -36,11 +39,7 @@
     </div>
   </div>
 
-  @if (
-    !hasImpersonationId &&
-    hasPermissionToCreateActivity &&
-    !user.settings.isRestrictedView
-  ) {
+  @if (hasPermissionToCreateActivity) {
     <gf-fab
       [routerLink]="
         internalRoutes.portfolio.subRoutes.activities.subRoutes.create

apps/client/src/app/pages/portfolio/activities/activity-dialog-host/activity-dialog-host.component.ts

@@ -1,9 +1,9 @@
-import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { CreateOrderDto, UpdateOrderDto } from '@ghostfolio/common/dtos';
 import { Activity, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { Scope, hasScope, scopes } from '@ghostfolio/common/scopes';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -46,9 +46,6 @@ export class GfActivityDialogHostComponent implements OnDestroy, OnInit {
   private readonly destroyRef = inject(DestroyRef);
   private readonly deviceDetectorService = inject(DeviceDetectorService);
   private readonly dialog = inject(MatDialog);
-  private readonly impersonationStorageService = inject(
-    ImpersonationStorageService
-  );
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly userService = inject(UserService);
@@ -94,7 +91,7 @@ export class GfActivityDialogHostComponent implements OnDestroy, OnInit {
           if (
             !activity ||
             !hasPermission(user?.permissions, permissions.updateActivity) ||
-            this.isReadOnlyMode(user)
+            this.isWriteRestricted(user, scopes.activityUpdate)
           ) {
             this.navigateBack();
 
@@ -115,7 +112,7 @@ export class GfActivityDialogHostComponent implements OnDestroy, OnInit {
         // Cloning creates a new activity as well
         if (
           !hasPermission(user?.permissions, permissions.createActivity) ||
-          this.isReadOnlyMode(user)
+          this.isWriteRestricted(user, scopes.activityCreate)
         ) {
           this.navigateBack();
 
@@ -156,9 +153,9 @@ export class GfActivityDialogHostComponent implements OnDestroy, OnInit {
     this.dialogRef?.close();
   }
 
-  private isReadOnlyMode(user: User) {
+  private isWriteRestricted(user: User, requiredScope: Scope) {
     return (
-      !!this.impersonationStorageService.getId() ||
+      !hasScope(user?.scopes, requiredScope) ||
       !!user?.settings?.isRestrictedView
     );
   }

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -626,6 +626,10 @@ export class GfAllocationsPageComponent implements OnInit {
           !this.impersonationId &&
           hasPermission(this.user?.permissions, permissions.createActivity) &&
           !this.user?.settings?.isRestrictedView,
+        hasPermissionToUpdateActivity:
+          !this.impersonationId &&
+          hasPermission(this.user?.permissions, permissions.updateActivity) &&
+          !this.user?.settings?.isRestrictedView,
         impersonationId: this.impersonationId
       },
       height: this.deviceType() === 'mobile' ? '98vh' : '80vh',

libs/common/src/lib/scopes.spec.ts

@@ -5,6 +5,7 @@ import {
   getScopesOfAccess,
   getScopesOfOwnAccess,
   getScopesOfUnrestrictedImpersonation,
+  hasAnyScopeOfWriteAccess,
   hasScope,
   scopes
 } from '@ghostfolio/common/scopes';
@@ -82,18 +83,25 @@ describe('Scopes', () => {
       ).toEqual([]);
     });
 
-    // TODO: Remove this expectation once the dialog allows to configure the
-    // write scopes
-    it('Gives no write scope', () => {
+    it('Gives the write scopes', () => {
       const scopesOfAccess = getScopesOfAccess({
         granteeUserId: 'ffb08949-2f8a-4b6e-88fd-0f1e6b6b5f5d',
         scopes: [...SCOPES_OF_READ_ACCESS, ...SCOPES_OF_WRITE_ACCESS]
       });
 
       for (const scope of SCOPES_OF_WRITE_ACCESS) {
-        expect(scopesOfAccess).not.toContain(scope);
+        expect(scopesOfAccess).toContain(scope);
       }
     });
+
+    it('Drops an unknown scope', () => {
+      expect(
+        getScopesOfAccess({
+          granteeUserId: 'ffb08949-2f8a-4b6e-88fd-0f1e6b6b5f5d',
+          scopes: [scopes.portfolioRead, 'portfolio:write']
+        })
+      ).toEqual([scopes.portfolioRead]);
+    });
   });
 
   describe('Get scopes of public access', () => {
@@ -129,6 +137,14 @@ describe('Scopes', () => {
         getScopesOfAccess({ scopes: [...SCOPES_OF_READ_ACCESS] })
       ).not.toContain(scopes.portfolioReadValues);
     });
+
+    // The dialog offers the write scopes for a private access only, hence this
+    // function is the sole barrier for a public access
+    it('Gives no write scope', () => {
+      expect(
+        getScopesOfAccess({ scopes: [...SCOPES_OF_WRITE_ACCESS] })
+      ).toEqual([]);
+    });
   });
 
   describe('Get scopes of own access', () => {
@@ -174,6 +190,22 @@ describe('Scopes', () => {
     });
   });
 
+  describe('Has any scope of write access', () => {
+    it('Single write scope', () => {
+      expect(hasAnyScopeOfWriteAccess([scopes.activityUpdate])).toEqual(true);
+    });
+
+    it('Read scopes only', () => {
+      expect(hasAnyScopeOfWriteAccess([...SCOPES_OF_READ_ACCESS])).toEqual(
+        false
+      );
+    });
+
+    it('Without scopes', () => {
+      expect(hasAnyScopeOfWriteAccess(undefined)).toEqual(false);
+    });
+  });
+
   describe('Has scope', () => {
     it('Present scope', () => {
       expect(hasScope([scopes.portfolioRead], scopes.portfolioRead)).toEqual(

libs/common/src/lib/scopes.ts

@@ -67,8 +67,9 @@ export function getScopesOfAccess({
   const scopesToEvaluate = scopesOfAccess ?? [];
 
   if (granteeUserId) {
-    // TODO: Permit the write scopes once the dialog allows to configure them
-    return SCOPES_OF_READ_ACCESS.filter((scope) => {
+    // An unknown scope is dropped, so that a scope which has been removed from
+    // the vocabulary cannot stay effective
+    return Object.values(scopes).filter((scope) => {
       return scopesToEvaluate.includes(scope);
     });
   }
@@ -96,6 +97,12 @@ export function getScopesOfUnrestrictedImpersonation(): string[] {
   return [...SCOPES_OF_READ_RESTRICTED_ACCESS];
 }
 
+export function hasAnyScopeOfWriteAccess(aScopes: string[] = []) {
+  return SCOPES_OF_WRITE_ACCESS.some((scope) => {
+    return hasScope(aScopes, scope);
+  });
+}
+
 export function hasScope(aScopes: string[] = [], aScope: Scope) {
   return aScopes.includes(aScope);
 }

libs/ui/src/lib/accounts-table/accounts-table.component.html

@@ -1,4 +1,4 @@
-@if (showActions()) {
+@if (showActions() && hasPermissionToUpdateAccount()) {
   <div class="d-flex justify-content-end">
     <button
       class="align-items-center d-flex"
@@ -338,26 +338,30 @@
               </span>
             </a>
           }
-          <a
-            mat-menu-item
-            [routerLink]="accountDialogRouterLinks().get(element.id)?.update"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline" />
-              <span><ng-container i18n>Edit</ng-container>...</span>
-            </span>
-          </a>
-          <hr class="m-0" />
-          <button
-            mat-menu-item
-            [disabled]="element.activitiesCount > 0"
-            (click)="onDeleteAccount(element.id)"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
-              <span i18n>Delete</span>
-            </span>
-          </button>
+          @if (hasPermissionToUpdateAccount()) {
+            <a
+              mat-menu-item
+              [routerLink]="accountDialogRouterLinks().get(element.id)?.update"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="create-outline" />
+                <span><ng-container i18n>Edit</ng-container>...</span>
+              </span>
+            </a>
+          }
+          @if (hasPermissionToDeleteAccount()) {
+            <hr class="m-0" />
+            <button
+              mat-menu-item
+              [disabled]="element.activitiesCount > 0"
+              (click)="onDeleteAccount(element.id)"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="trash-outline" />
+                <span i18n>Delete</span>
+              </span>
+            </button>
+          }
         </mat-menu>
       </td>
       <td *matFooterCellDef class="px-1" mat-footer-cell></td>

libs/ui/src/lib/accounts-table/accounts-table.component.ts

@@ -59,7 +59,9 @@ export class GfAccountsTableComponent {
   public readonly accounts = input.required<AccountWithValue[]>();
   public readonly activitiesCount = input<number>();
   public readonly baseCurrency = input<string>();
+  public readonly hasPermissionToDeleteAccount = input<boolean>();
   public readonly hasPermissionToOpenDetails = input(true);
+  public readonly hasPermissionToUpdateAccount = input<boolean>();
   public readonly locale = input(getLocale());
   public readonly showActions = input<boolean>();
   public readonly showActivitiesCount = input(true);

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -19,17 +19,19 @@
     }
   </div>
 
-  @if (hasPermissionToCreateActivity) {
+  @if (hasPermissionToImportActivities || hasPermissionToDeleteActivity) {
     <div class="d-flex">
-      <button
-        class="align-items-center d-flex"
-        mat-stroked-button
-        (click)="onImport()"
-      >
-        <ion-icon class="mr-2" name="cloud-upload-outline" />
-        <span><ng-container i18n>Import Activities</ng-container>...</span>
-      </button>
-      @if (hasPermissionToExportActivities) {
+      @if (hasPermissionToImportActivities) {
+        <button
+          class="align-items-center d-flex"
+          mat-stroked-button
+          (click)="onImport()"
+        >
+          <ion-icon class="mr-2" name="cloud-upload-outline" />
+          <span><ng-container i18n>Import Activities</ng-container>...</span>
+        </button>
+      }
+      @if (hasPermissionToExportActivities || hasPermissionToDeleteActivity) {
         <button
           class="mx-1 no-min-width px-2"
           mat-stroked-button
@@ -44,16 +46,18 @@
         class="no-max-width"
         xPosition="before"
       >
-        <button
-          mat-menu-item
-          [disabled]="dataSource()?.data.length === 0"
-          (click)="onImportDividends()"
-        >
-          <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="color-wand-outline" />
-            <span><ng-container i18n>Import Dividends</ng-container>...</span>
-          </span>
-        </button>
+        @if (hasPermissionToImportActivities) {
+          <button
+            mat-menu-item
+            [disabled]="dataSource()?.data.length === 0"
+            (click)="onImportDividends()"
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="color-wand-outline" />
+              <span><ng-container i18n>Import Dividends</ng-container>...</span>
+            </span>
+          </button>
+        }
         @if (hasPermissionToExportActivities) {
           <button
             class="align-items-center d-flex"
@@ -87,25 +91,31 @@
             </span>
           </button>
         }
-        <hr class="m-0" />
-        <button
-          class="align-items-center d-flex"
-          mat-menu-item
-          [disabled]="!canDeleteActivities()"
-          (click)="onDeleteActivities()"
-        >
-          <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="trash-outline" />
-            @if (canDeleteActivities()) {
-              <span i18n
-                >Delete {{ totalItems > 1 ? totalItems : '' }}
-                {totalItems, plural, =1 {Activity} other {Activities}}</span
-              >
-            } @else {
-              <span i18n>Delete Activities</span>
-            }
-          </span>
-        </button>
+        @if (hasPermissionToDeleteActivity) {
+          @if (
+            hasPermissionToExportActivities || hasPermissionToImportActivities
+          ) {
+            <hr class="m-0" />
+          }
+          <button
+            class="align-items-center d-flex"
+            mat-menu-item
+            [disabled]="!canDeleteActivities()"
+            (click)="onDeleteActivities()"
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="trash-outline" />
+              @if (canDeleteActivities()) {
+                <span i18n
+                  >Delete {{ totalItems > 1 ? totalItems : '' }}
+                  {totalItems, plural, =1 {Activity} other {Activities}}</span
+                >
+              } @else {
+                <span i18n>Delete Activities</span>
+              }
+            </span>
+          </button>
+        }
       </mat-menu>
     </div>
   }
@@ -397,7 +407,7 @@
     <ng-container matColumnDef="actions" stickyEnd>
       <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
         @if (
-          !hasPermissionToCreateActivity && hasPermissionToExportActivities
+          !hasPermissionToImportActivities && hasPermissionToExportActivities
         ) {
           <button
             class="mx-1 no-min-width px-2"
@@ -413,7 +423,7 @@
           class="no-max-width"
           xPosition="before"
         >
-          @if (hasPermissionToCreateActivity) {
+          @if (hasPermissionToImportActivities) {
             <button
               class="align-items-center d-flex"
               mat-menu-item
@@ -427,7 +437,7 @@
               </span>
             </button>
           }
-          @if (hasPermissionToCreateActivity) {
+          @if (hasPermissionToImportActivities) {
             <button
               mat-menu-item
               [disabled]="dataSource()?.data.length === 0"
@@ -493,35 +503,41 @@
               </span>
             </button>
           }
-          <a
-            mat-menu-item
-            [routerLink]="activityDialogRouterLinks().get(element.id)?.update"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline" />
-              <span><ng-container i18n>Edit</ng-container>...</span>
-            </span>
-          </a>
-          <a
-            mat-menu-item
-            [routerLink]="activityDialogRouterLinks().get(element.id)?.clone"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="copy-outline" />
-              <span><ng-container i18n>Clone</ng-container>...</span>
-            </span>
-          </a>
-          <button
-            mat-menu-item
-            [disabled]="!isDraftActivity(element)"
-            (click)="onExportDraft(element.id)"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline" />
-              <span i18n>Export Draft as ICS</span>
-            </span>
-          </button>
-          <hr class="m-0" />
+          @if (hasPermissionToUpdateActivity) {
+            <a
+              mat-menu-item
+              [routerLink]="activityDialogRouterLinks().get(element.id)?.update"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="create-outline" />
+                <span><ng-container i18n>Edit</ng-container>...</span>
+              </span>
+            </a>
+          }
+          @if (hasPermissionToCreateActivity) {
+            <a
+              mat-menu-item
+              [routerLink]="activityDialogRouterLinks().get(element.id)?.clone"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="copy-outline" />
+                <span><ng-container i18n>Clone</ng-container>...</span>
+              </span>
+            </a>
+          }
+          @if (hasPermissionToExportActivities) {
+            <button
+              mat-menu-item
+              [disabled]="!isDraftActivity(element)"
+              (click)="onExportDraft(element.id)"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="calendar-clear-outline" />
+                <span i18n>Export Draft as ICS</span>
+              </span>
+            </button>
+            <hr class="m-0" />
+          }
           <button
             mat-menu-item
             [disabled]="!hasPermissionToDeleteActivity"

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -114,7 +114,9 @@ export class GfActivitiesTableComponent implements AfterViewInit, OnInit {
   @Input() hasPermissionToDeleteActivity: boolean;
   @Input() hasPermissionToExportActivities: boolean;
   @Input() hasPermissionToFilterByType: boolean;
+  @Input() hasPermissionToImportActivities: boolean;
   @Input() hasPermissionToOpenDetails = true;
+  @Input() hasPermissionToUpdateActivity: boolean;
   @Input() locale = getLocale();
   @Input() pageIndex: number;
   @Input() pageSize = DEFAULT_PAGE_SIZE;