Extend support for feature flags (#39)

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Extended the support for feature flags to simplify the initial project setup
+
 ## 0.90.0 - 22.04.2021
 
 ### Added

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

@@ -26,7 +26,11 @@ export class InfoService {
     const globalPermissions: string[] = [];
 
     if (this.configurationService.get('ENABLE_FEATURE_SOCIAL_LOGIN')) {
-      globalPermissions.push(permissions.useSocialLogin);
+      globalPermissions.push(permissions.enableSocialLogin);
+    }
+
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      globalPermissions.push(permissions.enableSubscription);
     }
 
     return {

apps/api/src/services/configuration.service.ts

@@ -15,6 +15,7 @@ export class ConfigurationService {
       ENABLE_FEATURE_CUSTOM_SYMBOLS: bool({ default: false }),
       ENABLE_FEATURE_FEAR_AND_GREED_INDEX: bool({ default: false }),
       ENABLE_FEATURE_SOCIAL_LOGIN: bool({ default: false }),
+      ENABLE_FEATURE_SUBSCRIPTION: bool({ default: false }),
       GOOGLE_CLIENT_ID: str({ default: 'dummyClientId' }),
       GOOGLE_SECRET: str({ default: 'dummySecret' }),
       JWT_SECRET_KEY: str({}),

apps/api/src/services/interfaces/environment.interface.ts

@@ -7,6 +7,7 @@ export interface Environment extends CleanedEnvAccessors {
   ENABLE_FEATURE_CUSTOM_SYMBOLS: boolean;
   ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
   ENABLE_FEATURE_SOCIAL_LOGIN: boolean;
+  ENABLE_FEATURE_SUBSCRIPTION: boolean;
   GOOGLE_CLIENT_ID: string;
   GOOGLE_SECRET: string;
   JWT_SECRET_KEY: string;

apps/client/src/app/components/header/header.component.html

@@ -37,7 +37,7 @@
       >Transactions</a
     >
     <a
-      *ngIf="canAccessAdminAccessControl"
+      *ngIf="hasPermissionToAccessAdminControl"
       class="d-none d-sm-block mx-1"
       [routerLink]="['/admin']"
       i18n
@@ -150,7 +150,7 @@
         >Account</a
       >
       <a
-        *ngIf="canAccessAdminAccessControl"
+        *ngIf="hasPermissionForAdminControl"
         class="d-block d-sm-none"
         [routerLink]="['/admin']"
         i18n

apps/client/src/app/components/header/header.component.ts

@@ -27,8 +27,8 @@ export class HeaderComponent implements OnChanges {
   @Input() info: InfoItem;
   @Input() user: User;
 
-  public canAccessAdminAccessControl: boolean;
-  public hasPermissionToUseSocialLogin: boolean;
+  public hasPermissionToAccessAdminControl: boolean;
+  public hasPermissionForSocialLogin: boolean;
   public impersonationId: string;
 
   private unsubscribeSubject = new Subject<void>();
@@ -49,15 +49,15 @@ export class HeaderComponent implements OnChanges {
 
   public ngOnChanges() {
     if (this.user) {
-      this.canAccessAdminAccessControl = hasPermission(
+      this.hasPermissionToAccessAdminControl = hasPermission(
         this.user.permissions,
         permissions.accessAdminControl
       );
     }
 
-    this.hasPermissionToUseSocialLogin = hasPermission(
+    this.hasPermissionForSocialLogin = hasPermission(
       this.info?.globalPermissions,
-      permissions.useSocialLogin
+      permissions.enableSocialLogin
     );
   }
 
@@ -81,7 +81,7 @@ export class HeaderComponent implements OnChanges {
       autoFocus: false,
       data: {
         accessToken: '',
-        hasPermissionToUseSocialLogin: this.hasPermissionToUseSocialLogin
+        hasPermissionToUseSocialLogin: this.hasPermissionForSocialLogin
       },
       width: '30rem'
     });

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

@@ -1,8 +1,9 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { InfoItem } from '@ghostfolio/api/app/info/interfaces/info-item.interface';
 import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
-import { baseCurrency } from '@ghostfolio/helper';
+import { baseCurrency, hasPermission, permissions } from '@ghostfolio/helper';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -15,6 +16,7 @@ import { environment } from '../../../environments/environment';
 })
 export class AboutPageComponent implements OnInit {
   public baseCurrency = baseCurrency;
+  public hasPermissionForSubscription: boolean;
   public isLoggedIn: boolean;
   public lastPublish = environment.lastPublish;
   public user: User;
@@ -35,6 +37,13 @@ export class AboutPageComponent implements OnInit {
    * Initializes the controller
    */
   public ngOnInit() {
+    this.dataService.fetchInfo().subscribe((info) => {
+      this.hasPermissionForSubscription = hasPermission(
+        info.globalPermissions,
+        permissions.enableSubscription
+      );
+    });
+
     this.isLoggedIn = !!this.tokenStorageService.getToken();
 
     if (this.isLoggedIn)

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

@@ -61,7 +61,7 @@
     </div>
   </div>
 
-  <div class="mb-5 row">
+  <div *ngIf="hasPermissionForSubscription" class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Pricing Plans</h3>
       <div class="row">

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

@@ -3,7 +3,11 @@ import { Access } from '@ghostfolio/api/app/access/interfaces/access.interface';
 import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/helper';
+import {
+  DEFAULT_DATE_FORMAT,
+  hasPermission,
+  permissions
+} from '@ghostfolio/helper';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -19,6 +23,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   public baseCurrency: Currency;
   public currencies: Currency[] = [];
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public hasPermissionForSubscription: boolean;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -34,8 +39,13 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     this.dataService
       .fetchInfo()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ currencies }) => {
+      .subscribe(({ currencies, globalPermissions }) => {
         this.currencies = currencies;
+
+        this.hasPermissionForSubscription = hasPermission(
+          globalPermissions,
+          permissions.enableSubscription
+        );
       });
 
     this.tokenStorageService
@@ -70,6 +80,11 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private update() {
     this.dataService
       .fetchAccesses()
@@ -80,9 +95,4 @@ export class AccountPageComponent implements OnDestroy, OnInit {
         this.cd.markForCheck();
       });
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

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

@@ -15,7 +15,7 @@
             <div class="w-50" i18n>Alias</div>
             <div class="w-50">{{ user.alias }}</div>
           </div>
-          <div class="d-flex py-1">
+          <div *ngIf="hasPermissionForSubscription" class="d-flex py-1">
             <div class="w-50" i18n>Membership</div>
             <div class="w-50">
               <div class="align-items-center d-flex mb-1">

libs/helper/src/lib/permissions.ts

@@ -10,10 +10,11 @@ export const permissions = {
   createAccount: 'createAccount',
   createOrder: 'createOrder',
   deleteOrder: 'deleteOrder',
+  enableSocialLogin: 'enableSocialLogin',
+  enableSubscription: 'enableSubscription',
   readForeignPortfolio: 'readForeignPortfolio',
   updateOrder: 'updateOrder',
-  updateUserSettings: 'updateUserSettings',
-  useSocialLogin: 'useSocialLogin'
+  updateUserSettings: 'updateUserSettings'
 };
 
 export function hasPermission(