Feature/extend API keys for Ghostfolio data provider (#4501)

* Extend API keys for Ghostfolio data provider

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -4,7 +4,10 @@
       <div class="align-items-center d-flex flex-column">
         <gf-membership-card
           [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
-          [hasPermissionToCreateApiKey]="hasPermissionToCreateApiKey"
+          [hasPermissionToCreateApiKey]="
+            hasPermissionToCreateApiKey &&
+            user?.settings?.isExperimentalFeatures
+          "
           [name]="user?.subscription?.type"
           (generateApiKeyClicked)="onGenerateApiKey()"
         />

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

@@ -240,7 +240,12 @@
                       <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
-                  <li class="align-items-center d-flex mb-1">
+                  <li
+                    class="align-items-center d-flex"
+                    [ngClass]="{
+                      'mb-1': !user?.settings?.isExperimentalFeatures
+                    }"
+                  >
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <span i18n>Professional Data Provider</span>
                     <span
@@ -251,6 +256,18 @@
                       <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
+                  @if (user?.settings?.isExperimentalFeatures) {
+                    <li class="align-items-center d-flex line-height-1 mb-1">
+                      <ion-icon
+                        class="hidden mr-1"
+                        name="checkmark-circle-outline"
+                      />
+                      <small class="text-muted"
+                        ><ng-container i18n>with API access for</ng-container>
+                        Open Source</small
+                      >
+                    </li>
+                  }
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <a i18n [routerLink]="routerLinkFeatures"

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -14,7 +14,7 @@
       />
     </div>
     @if (hasPermissionToCreateApiKey) {
-      <div class="d-none mt-5">
+      <div class="mt-5">
         <div class="heading text-muted" i18n>API Key</div>
         <div class="align-items-center d-flex">
           <div class="text-monospace value">* * * * * * * * *</div>