Feature/Add support to grant private access with permissions (#2870)

* Add support to grant private access with permissions

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added support to grant private access with permissions (experimental)
 - Added `permissions` to the `Access` model
 
 ### Changed

apps/api/src/app/access/access.controller.ts

@@ -42,23 +42,27 @@ export class AccessController {
       where: { userId: this.request.user.id }
     });
 
-    return accessesWithGranteeUser.map((access) => {
+    return accessesWithGranteeUser.map(
-      if (access.GranteeUser) {
+      ({ alias, GranteeUser, id, permissions }) => {
+        if (GranteeUser) {
+          return {
+            alias,
+            id,
+            permissions,
+            grantee: GranteeUser?.id,
+            type: 'PRIVATE'
+          };
+        }
+
         return {
-          alias: access.alias,
+          alias,
-          grantee: access.GranteeUser?.id,
+          id,
-          id: access.id,
+          permissions,
-          type: 'RESTRICTED_VIEW'
+          grantee: 'Public',
+          type: 'PUBLIC'
         };
       }
-
+    );
-      return {
-        alias: access.alias,
-        grantee: 'Public',
-        id: access.id,
-        type: 'PUBLIC'
-      };
-    });
   }
 
   @HasPermission(permissions.createAccess)
@@ -83,6 +87,7 @@ export class AccessController {
         GranteeUser: data.granteeUserId
           ? { connect: { id: data.granteeUserId } }
           : undefined,
+        permissions: data.permissions,
         User: { connect: { id: this.request.user.id } }
       });
     } catch {

apps/api/src/app/access/create-access.dto.ts

@@ -1,4 +1,5 @@
-import { IsOptional, IsString, IsUUID } from 'class-validator';
+import { AccessPermission } from '@prisma/client';
+import { IsEnum, IsOptional, IsString, IsUUID } from 'class-validator';
 
 export class CreateAccessDto {
   @IsOptional()
@@ -9,7 +10,7 @@ export class CreateAccessDto {
   @IsUUID()
   granteeUserId?: string;
 
+  @IsEnum(AccessPermission, { each: true })
   @IsOptional()
-  @IsString()
+  permissions?: AccessPermission[];
-  type?: 'PUBLIC';
 }

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -74,6 +74,11 @@ export class PortfolioController {
   ): Promise<PortfolioDetails & { hasError: boolean }> {
     let hasDetails = true;
     let hasError = false;
+    const hasReadRestrictedAccessPermission =
+      this.userService.hasReadRestrictedAccessPermission({
+        impersonationId,
+        user: this.request.user
+      });
 
     if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
       hasDetails = this.request.user.subscription.type === 'Premium';
@@ -108,7 +113,7 @@ export class PortfolioController {
     let portfolioSummary = summary;
 
     if (
-      impersonationId ||
+      hasReadRestrictedAccessPermission ||
       this.userService.isRestrictedView(this.request.user)
     ) {
       const totalInvestment = Object.values(holdings)
@@ -148,7 +153,7 @@ export class PortfolioController {
 
     if (
       hasDetails === false ||
-      impersonationId ||
+      hasReadRestrictedAccessPermission ||
       this.userService.isRestrictedView(this.request.user)
     ) {
       portfolioSummary = nullifyValuesInObject(summary, [
@@ -164,6 +169,7 @@ export class PortfolioController {
         'excludedAccountsAndActivities',
         'fees',
         'fireWealth',
+        'interest',
         'items',
         'liabilities',
         'netWorth',
@@ -216,6 +222,12 @@ export class PortfolioController {
     @Query('range') dateRange: DateRange = 'max',
     @Query('tags') filterByTags?: string
   ): Promise<PortfolioDividends> {
+    const hasReadRestrictedAccessPermission =
+      this.userService.hasReadRestrictedAccessPermission({
+        impersonationId,
+        user: this.request.user
+      });
+
     const filters = this.apiService.buildFiltersFromQueryParams({
       filterByAccounts,
       filterByAssetClasses,
@@ -230,7 +242,7 @@ export class PortfolioController {
     });
 
     if (
-      impersonationId ||
+      hasReadRestrictedAccessPermission ||
       this.userService.isRestrictedView(this.request.user)
     ) {
       const maxDividend = dividends.reduce(
@@ -266,6 +278,12 @@ export class PortfolioController {
     @Query('range') dateRange: DateRange = 'max',
     @Query('tags') filterByTags?: string
   ): Promise<PortfolioInvestments> {
+    const hasReadRestrictedAccessPermission =
+      this.userService.hasReadRestrictedAccessPermission({
+        impersonationId,
+        user: this.request.user
+      });
+
     const filters = this.apiService.buildFiltersFromQueryParams({
       filterByAccounts,
       filterByAssetClasses,
@@ -281,7 +299,7 @@ export class PortfolioController {
     });
 
     if (
-      impersonationId ||
+      hasReadRestrictedAccessPermission ||
       this.userService.isRestrictedView(this.request.user)
     ) {
       const maxInvestment = investments.reduce(
@@ -329,6 +347,12 @@ export class PortfolioController {
     @Query('tags') filterByTags?: string,
     @Query('withExcludedAccounts') withExcludedAccounts = false
   ): Promise<PortfolioPerformanceResponse> {
+    const hasReadRestrictedAccessPermission =
+      this.userService.hasReadRestrictedAccessPermission({
+        impersonationId,
+        user: this.request.user
+      });
+
     const filters = this.apiService.buildFiltersFromQueryParams({
       filterByAccounts,
       filterByAssetClasses,
@@ -344,7 +368,7 @@ export class PortfolioController {
     });
 
     if (
-      impersonationId ||
+      hasReadRestrictedAccessPermission ||
       this.request.user.Settings.settings.viewMode === 'ZEN' ||
       this.userService.isRestrictedView(this.request.user)
     ) {

apps/api/src/app/user/user.service.ts

@@ -105,6 +105,24 @@ export class UserService {
     return usersWithAdminRole.length > 0;
   }
 
+  public hasReadRestrictedAccessPermission({
+    impersonationId,
+    user
+  }: {
+    impersonationId: string;
+    user: UserWithSettings;
+  }) {
+    if (!impersonationId) {
+      return false;
+    }
+
+    const access = user.Access?.find(({ id }) => {
+      return id === impersonationId;
+    });
+
+    return access?.permissions?.includes('READ_RESTRICTED') ?? true;
+  }
+
   public isRestrictedView(aUser: UserWithSettings) {
     return aUser.Settings.settings.isRestrictedView ?? false;
   }
@@ -113,6 +131,7 @@ export class UserService {
     userWhereUniqueInput: Prisma.UserWhereUniqueInput
   ): Promise<UserWithSettings | null> {
     const {
+      Access,
       accessToken,
       Account,
       Analytics,
@@ -127,6 +146,7 @@ export class UserService {
       updatedAt
     } = await this.prismaService.user.findUnique({
       include: {
+        Access: true,
         Account: {
           include: { Platform: true }
         },
@@ -138,6 +158,7 @@ export class UserService {
     });
 
     const user: UserWithSettings = {
+      Access,
       accessToken,
       Account,
       authChallenge,

apps/api/src/interceptors/redact-values-in-response.interceptor.ts

@@ -1,6 +1,7 @@
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { redactAttributes } from '@ghostfolio/api/helper/object.helper';
 import { HEADER_KEY_IMPERSONATION } from '@ghostfolio/common/config';
+import { UserWithSettings } from '@ghostfolio/common/types';
 import {
   CallHandler,
   ExecutionContext,
@@ -22,13 +23,20 @@ export class RedactValuesInResponseInterceptor<T>
   ): Observable<any> {
     return next.handle().pipe(
       map((data: any) => {
-        const request = context.switchToHttp().getRequest();
+        const { headers, user }: { headers: Headers; user: UserWithSettings } =
-        const hasImpersonationId =
+          context.switchToHttp().getRequest();
-          !!request.headers?.[HEADER_KEY_IMPERSONATION.toLowerCase()];
+
+        const impersonationId =
+          headers?.[HEADER_KEY_IMPERSONATION.toLowerCase()];
+        const hasReadRestrictedPermission =
+          this.userService.hasReadRestrictedAccessPermission({
+            impersonationId,
+            user
+          });
 
         if (
-          hasImpersonationId ||
+          hasReadRestrictedPermission ||
-          this.userService.isRestrictedView(request.user)
+          this.userService.isRestrictedView(user)
         ) {
           data = redactAttributes({
             object: data,

apps/api/src/services/data-provider/data-enhancer/trackinsight/trackinsight.service.ts

@@ -62,9 +62,9 @@ export class TrackinsightDataEnhancerService implements DataEnhancerInterface {
         }, this.configurationService.get('REQUEST_TIMEOUT'));
 
         return got(
-          `${TrackinsightDataEnhancerService.baseUrl}/funds/${symbol.split(
+          `${TrackinsightDataEnhancerService.baseUrl}/funds/${
-            '.'
+            symbol.split('.')?.[0]
-          )?.[0]}.json`,
+          }.json`,
           {
             // @ts-ignore
             signal: abortController.signal
@@ -104,9 +104,9 @@ export class TrackinsightDataEnhancerService implements DataEnhancerInterface {
         }, this.configurationService.get('REQUEST_TIMEOUT'));
 
         return got(
-          `${TrackinsightDataEnhancerService.baseUrl}/holdings/${symbol.split(
+          `${TrackinsightDataEnhancerService.baseUrl}/holdings/${
-            '.'
+            symbol.split('.')?.[0]
-          )?.[0]}.json`,
+          }.json`,
           {
             // @ts-ignore
             signal: abortController.signal

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

@@ -17,8 +17,13 @@
     <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">
-        <ion-icon class="mr-1" name="lock-closed-outline" />
+        @if (element.permissions.includes('READ')) {
-        <ng-container i18n>Restricted View</ng-container>
+          <ion-icon class="mr-1" name="lock-open-outline" />
+          <ng-container i18n>View</ng-container>
+        } @else if (element.permissions.includes('READ_RESTRICTED')) {
+          <ion-icon class="mr-1" name="lock-closed-outline" />
+          <ng-container i18n>Restricted view</ng-container>
+        }
       </div>
     </td>
   </ng-container>

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

@@ -74,7 +74,6 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
       });
 
     this.showDetails =
-      !this.hasImpersonationId &&
       !this.user.settings.isRestrictedView &&
       this.user.settings.viewMode !== 'ZEN';
 

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -1,14 +1,12 @@
 <div class="container p-0">
   <div class="no-gutters row">
-    <div
+    <div class="status-container text-muted text-right">
-      class="status-container text-muted text-right"
-      (click)="onShowErrors()"
-    >
       @if (errors?.length > 0 && !isLoading) {
         <ion-icon
           i18n-title
           name="time-outline"
-          title="Oops! Our data provider partner is experiencing the hiccups."
+          title="Oops! A data provider is experiencing the hiccups."
+          (click)="onShowErrors()"
         />
       }
     </div>

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -58,7 +58,7 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
           duration: 1,
           separator: getNumberFormatGroup(this.locale)
         }).start();
-      } else if (this.performance?.currentValue === null) {
+      } else if (this.showDetails === false) {
         new CountUp(
           'value',
           this.performance?.currentNetPerformancePercent * 100,
@@ -69,6 +69,8 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
             separator: getNumberFormatGroup(this.locale)
           }
         ).start();
+      } else {
+        this.value.nativeElement.innerHTML = '*****';
       }
     }
   }

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -10,8 +10,8 @@
     [hidden]="summary?.ordersCount === null"
   >
     <div class="flex-grow-1 ml-3 text-truncate" i18n>
-      {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1 {transaction}
+      {{ summary?.ordersCount }}
-      other {transactions}}
+      {summary?.ordersCount, plural, =1 {transaction} other {transactions}}
     </div>
   </div>
   <div class="row">
@@ -71,7 +71,11 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="align-items-center d-flex flex-grow-1 ml-3 text-truncate">
       <ng-container i18n>Gross Performance</ng-container>
-      <abbr class="initialism ml-2 text-muted" title="Time-Weighted Rate of Return">(TWR)</abbr>
+      <abbr
+        class="initialism ml-2 text-muted"
+        title="Time-Weighted Rate of Return"
+        >(TWR)</abbr
+      >
     </div>
     <div class="flex-column flex-wrap justify-content-end">
       <gf-value
@@ -117,7 +121,11 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate ml-3">
       <ng-container i18n>Net Performance</ng-container>
-      <abbr class="initialism ml-2 text-muted" title="Time-Weighted Rate of Return">(TWR)</abbr>
+      <abbr
+        class="initialism ml-2 text-muted"
+        title="Time-Weighted Rate of Return"
+        >(TWR)</abbr
+      >
     </div>
     <div class="flex-column flex-wrap justify-content-end">
       <gf-value

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

@@ -37,19 +37,23 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
   ngOnInit() {
     this.accessForm = this.formBuilder.group({
       alias: [this.data.access.alias],
+      permissions: [this.data.access.permissions[0], Validators.required],
       type: [this.data.access.type, Validators.required],
       userId: [this.data.access.grantee, Validators.required]
     });
 
-    this.accessForm.get('type').valueChanges.subscribe((value) => {
+    this.accessForm.get('type').valueChanges.subscribe((accessType) => {
+      const permissionsControl = this.accessForm.get('permissions');
       const userIdControl = this.accessForm.get('userId');
 
-      if (value === 'PRIVATE') {
+      if (accessType === 'PRIVATE') {
+        permissionsControl.setValidators(Validators.required);
         userIdControl.setValidators(Validators.required);
       } else {
         userIdControl.clearValidators();
       }
 
+      permissionsControl.updateValueAndValidity();
       userIdControl.updateValueAndValidity();
 
       this.changeDetectorRef.markForCheck();
@@ -64,7 +68,7 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
     const access: CreateAccessDto = {
       alias: this.accessForm.controls['alias'].value,
       granteeUserId: this.accessForm.controls['userId'].value,
-      type: this.accessForm.controls['type'].value
+      permissions: [this.accessForm.controls['permissions'].value]
     };
 
     this.dataService

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

@@ -30,9 +30,20 @@
     @if (accessForm.controls['type'].value === 'PRIVATE') {
     <div>
       <mat-form-field appearance="outline" class="w-100">
-        <mat-label
+        <mat-label i18n>Permission</mat-label>
-          >Ghostfolio <ng-container i18n>User ID</ng-container></mat-label
+        <mat-select formControlName="permissions">
-        >
+          <mat-option i18n value="READ_RESTRICTED">Restricted view</mat-option>
+          @if(data?.user?.settings?.isExperimentalFeatures) {
+          <mat-option i18n value="READ">View</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label>
+          Ghostfolio <ng-container i18n>User ID</ng-container>
+        </mat-label>
         <input
           formControlName="userId"
           matInput

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

@@ -1,5 +1,6 @@
-import { Access } from '@ghostfolio/common/interfaces';
+import { Access, User } from '@ghostfolio/common/interfaces';
 
 export interface CreateOrUpdateAccessDialogParams {
   access: Access;
+  user: User;
 }

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -7,7 +7,6 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { Access, User } from '@ghostfolio/common/interfaces';
@@ -105,8 +104,10 @@ export class UserAccountAccessComponent implements OnDestroy, OnInit {
       data: {
         access: {
           alias: '',
+          permissions: ['READ_RESTRICTED'],
           type: 'PRIVATE'
-        }
+        },
+        user: this.user
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'

libs/common/src/lib/interfaces/access.interface.ts

@@ -1,6 +1,10 @@
+import { AccessType } from '@ghostfolio/common/types';
+import { AccessPermission } from '@prisma/client';
+
 export interface Access {
   alias?: string;
   grantee?: string;
   id: string;
-  type: 'PRIVATE' | 'PUBLIC' | 'RESTRICTED_VIEW';
+  permissions: AccessPermission[];
+  type: AccessType;
 }

libs/common/src/lib/types/access-type.type.ts

@@ -0,0 +1 @@
+export type AccessType = 'PRIVATE' | 'PUBLIC';

libs/common/src/lib/types/index.ts

@@ -1,3 +1,4 @@
+import type { AccessType } from './access-type.type';
 import type { AccessWithGranteeUser } from './access-with-grantee-user.type';
 import type { AccountWithPlatform } from './account-with-platform.type';
 import type { AccountWithValue } from './account-with-value.type';
@@ -18,6 +19,7 @@ import type { UserWithSettings } from './user-with-settings.type';
 import type { ViewMode } from './view-mode.type';
 
 export type {
+  AccessType,
   AccessWithGranteeUser,
   AccountWithPlatform,
   AccountWithValue,

libs/common/src/lib/types/user-with-settings.type.ts

@@ -1,10 +1,11 @@
 import { UserSettings } from '@ghostfolio/common/interfaces';
 import { SubscriptionOffer } from '@ghostfolio/common/types';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription-type.type';
-import { Account, Settings, User } from '@prisma/client';
+import { Access, Account, Settings, User } from '@prisma/client';
 
 // TODO: Compare with User interface
 export type UserWithSettings = User & {
+  Access: Access[];
   Account: Account[];
   activityCount: number;
   permissions?: string[];

libs/ui/src/lib/value/value.component.html

@@ -32,7 +32,7 @@
           }"
         >
           <ng-container *ngIf="value === null">
-            <span class="text-monospace text-muted">***</span>
+            <span class="text-monospace text-muted">*****</span>
           </ng-container>
           <ng-container *ngIf="value !== null">
             {{ formattedValue }}