Feature/harmonize style of granted access user interface (#2326)

* Harmonize style

* Update changelog

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`)

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;
       }

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>

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>();

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 {}

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>

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;