From 921d38a706f5dd2682f3cb3bce1e675decd889db Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 15 Sep 2023 16:21:14 +0200
Subject: [PATCH] Feature/harmonize style of granted access user interface
 (#2326)

* Harmonize style

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 apps/api/src/app/user/user.service.ts         |  7 ++++++-
 .../access-table/access-table.component.html  | 12 +++++++++++
 .../access-table/access-table.component.ts    |  1 +
 .../access-table/access-table.module.ts       |  9 +++++++-
 .../pages/user-account/user-account-page.html | 21 +++++++------------
 .../pages/user-account/user-account-page.scss |  7 -------
 7 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4862201..e8b973b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Harmonized the style of the user interface for granting and revoking public access to share the portfolio
 - Improved the logger output of the info service
 - Harmonized the logger output: <symbol> (<dataSource>)
 - Improved the language localization for Italian (`it`)
diff --git a/apps/api/src/app/user/user.service.ts b/apps/api/src/app/user/user.service.ts
index c5cc3c8c..a2710bfd 100644
--- a/apps/api/src/app/user/user.service.ts
+++ b/apps/api/src/app/user/user.service.ts
@@ -19,7 +19,7 @@ import { UserWithSettings } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { Prisma, Role, User } from '@prisma/client';
 import { differenceInDays } from 'date-fns';
-import { sortBy } from 'lodash';
+import { sortBy, without } from 'lodash';
 
 const crypto = require('crypto');
 
@@ -188,6 +188,11 @@ export class UserService {
           currentPermissions.push(permissions.enableSubscriptionInterstitial);
         }
 
+        currentPermissions = without(
+          currentPermissions,
+          permissions.createAccess
+        );
+
         // Reset benchmark
         user.Settings.settings.benchmark = undefined;
       }
diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index 589c67e1..498e73bf 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/apps/client/src/app/components/access-table/access-table.component.html
@@ -1,3 +1,15 @@
+<div *ngIf="hasPermissionToCreateAccess" class="d-flex justify-content-end">
+  <a
+    color="primary"
+    i18n
+    mat-flat-button
+    [queryParams]="{ createDialog: true }"
+    [routerLink]="[]"
+  >
+    Add Access
+  </a>
+</div>
+
 <table class="gf-table w-100" mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="alias">
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>
diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts
index c0db8fb2..298a0206 100644
--- a/apps/client/src/app/components/access-table/access-table.component.ts
+++ b/apps/client/src/app/components/access-table/access-table.component.ts
@@ -19,6 +19,7 @@ import { Access } from '@ghostfolio/common/interfaces';
 })
 export class AccessTableComponent implements OnChanges, OnInit {
   @Input() accesses: Access[];
+  @Input() hasPermissionToCreateAccess = false;
   @Input() showActions: boolean;
 
   @Output() accessDeleted = new EventEmitter<string>();
diff --git a/apps/client/src/app/components/access-table/access-table.module.ts b/apps/client/src/app/components/access-table/access-table.module.ts
index 111f0e2f..2ace3cfc 100644
--- a/apps/client/src/app/components/access-table/access-table.module.ts
+++ b/apps/client/src/app/components/access-table/access-table.module.ts
@@ -3,13 +3,20 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
+import { RouterModule } from '@angular/router';
 
 import { AccessTableComponent } from './access-table.component';
 
 @NgModule({
   declarations: [AccessTableComponent],
   exports: [AccessTableComponent],
-  imports: [CommonModule, MatButtonModule, MatMenuModule, MatTableModule],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatTableModule,
+    RouterModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPortfolioAccessTableModule {}
diff --git a/apps/client/src/app/pages/user-account/user-account-page.html b/apps/client/src/app/pages/user-account/user-account-page.html
index 24cfce6e..33c4e497 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.html
+++ b/apps/client/src/app/pages/user-account/user-account-page.html
@@ -287,24 +287,19 @@
   </div>
   <div class="row">
     <div class="col">
-      <h2 class="h3 mb-3 text-center" i18n>Granted Access</h2>
+      <h2 class="align-items-center d-flex h3 justify-content-center mb-3">
+        <span i18n>Granted Access</span>
+        <gf-premium-indicator
+          *ngIf="user?.subscription?.type === 'Basic'"
+          class="ml-1"
+        ></gf-premium-indicator>
+      </h2>
       <gf-access-table
         [accesses]="accesses"
+        [hasPermissionToCreateAccess]="hasPermissionToCreateAccess"
         [showActions]="hasPermissionToDeleteAccess"
         (accessDeleted)="onDeleteAccess($event)"
       ></gf-access-table>
     </div>
   </div>
-
-  <div *ngIf="hasPermissionToCreateAccess" class="fab-container">
-    <a
-      class="align-items-center d-flex justify-content-center"
-      color="primary"
-      mat-fab
-      [queryParams]="{ createDialog: true }"
-      [routerLink]="[]"
-    >
-      <ion-icon name="add-outline" size="large"></ion-icon>
-    </a>
-  </div>
 </div>
diff --git a/apps/client/src/app/pages/user-account/user-account-page.scss b/apps/client/src/app/pages/user-account/user-account-page.scss
index 6a010a85..6dddf0e3 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.scss
+++ b/apps/client/src/app/pages/user-account/user-account-page.scss
@@ -6,13 +6,6 @@
     overflow-x: auto;
   }
 
-  .fab-container {
-    position: fixed;
-    right: 2rem;
-    bottom: 2rem;
-    z-index: 999;
-  }
-
   .hint-text {
     font-size: 90%;
     line-height: 1.2;