Feature/extract license to dedicated tab (#2061)

* Extract license to tab on about page

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Extended the clone functionality of a transaction by the quantity
 - Changed the direction of the ellipsis icon in various tables
+- Extracted the license to a dedicated tab on the about page
 - Displayed the link to the markets overview in the footer based on a permission
 - Improved the spacing in the benchmark comparator
 - Refreshed the cryptocurrencies list

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

@@ -80,14 +80,15 @@
             <a i18n [routerLink]="['/blog']">Blog</a>
           </li>
           <li>
-            <a i18n [routerLink]="['/about', 'changelog']"
+            <a i18n [routerLink]="['/about', 'changelog']">Changelog</a>
-              >Changelog & License</a
-            >
           </li>
           <li><a i18n [routerLink]="['/features']">Features</a></li>
           <li *ngIf="hasPermissionForSubscription">
             <a i18n [routerLink]="['/faq']">Frequently Asked Questions (FAQ)</a>
           </li>
+          <li>
+            <a i18n [routerLink]="['/about', 'license']">License</a>
+          </li>
           <li *ngIf="hasPermissionForSubscription">
             <a [routerLink]="['/open']">Open Startup</a>
           </li>

apps/client/src/app/pages/about/about-page-routing.module.ts

@@ -22,6 +22,21 @@ const routes: Routes = [
             (m) => m.ChangelogPageModule
           )
       },
+      ...[
+        'license',
+        /////
+        'licence',
+        'licencia',
+        'licentie',
+        'lizenz',
+        'licenza'
+      ].map((path) => ({
+        path,
+        loadChildren: () =>
+          import('./license/license-page.module').then(
+            (m) => m.LicensePageModule
+          )
+      })),
       {
         path: 'privacy-policy',
         loadChildren: () =>

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

@@ -53,9 +53,14 @@ export class AboutPageComponent implements OnDestroy, OnInit {
             },
             {
               iconName: 'sparkles-outline',
-              label: $localize`Changelog & License`,
+              label: $localize`Changelog`,
               path: ['/about', 'changelog']
             },
+            {
+              iconName: 'ribbon-outline',
+              label: $localize`License`,
+              path: ['/about', 'license']
+            },
             {
               iconName: 'shield-checkmark-outline',
               label: $localize`Privacy Policy`,

apps/client/src/app/pages/about/changelog/changelog-page-routing.module.ts

@@ -9,7 +9,7 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     component: ChangelogPageComponent,
     path: '',
-    title: $localize`Changelog & License`
+    title: $localize`Changelog`
   }
 ];
 

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

@@ -1,23 +1,10 @@
 <div class="container">
   <div class="mb-5 row">
     <div class="col">
-      <h3 class="mb-3 text-center" i18n>Changelog</h3>
+      <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Changelog</h1>
-      <mat-card appearance="outlined" class="changelog">
+      <div class="changelog">
-        <mat-card-content>
+        <markdown [src]="'../assets/CHANGELOG.md'"></markdown>
-          <markdown [src]="'../assets/CHANGELOG.md'"></markdown>
+      </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col">
-      <h3 class="mb-3 text-center" i18n>License</h3>
-      <mat-card appearance="outlined">
-        <mat-card-content>
-          <markdown [src]="'../assets/LICENSE'"></markdown>
-        </mat-card-content>
-      </mat-card>
     </div>
   </div>
 </div>

apps/client/src/app/pages/about/changelog/changelog-page.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ChangelogPageRoutingModule } from './changelog-page-routing.module';
@@ -11,8 +10,7 @@ import { ChangelogPageComponent } from './changelog-page.component';
   imports: [
     ChangelogPageRoutingModule,
     CommonModule,
-    MarkdownModule.forChild(),
+    MarkdownModule.forChild()
-    MatCardModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

apps/client/src/app/pages/about/changelog/changelog-page.scss

@@ -2,35 +2,33 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  .mat-mdc-card {
+  .changelog {
-    &.changelog {
+    ::ng-deep {
-      ::ng-deep {
+      a {
-        a {
+        color: rgba(var(--palette-primary-500), 1);
-          color: rgba(var(--palette-primary-500), 1);
+        font-weight: 500;
-          font-weight: 500;
 
-          &:hover {
+        &:hover {
-            color: rgba(var(--palette-primary-300), 1);
+          color: rgba(var(--palette-primary-300), 1);
+        }
+      }
+
+      markdown {
+        h1,
+        p {
+          display: none;
+        }
+
+        h2 {
+          font-size: 18px;
+
+          &:not(:first-of-type) {
+            margin-top: 2rem;
           }
         }
 
-        markdown {
+        h3 {
-          h1,
+          font-size: 15px;
-          p {
-            display: none;
-          }
-
-          h2 {
-            font-size: 18px;
-
-            &:not(:first-of-type) {
-              margin-top: 2rem;
-            }
-          }
-
-          h3 {
-            font-size: 15px;
-          }
         }
       }
     }

apps/client/src/app/pages/about/license/license-page-routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { LicensePageComponent } from './license-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: LicensePageComponent,
+    path: '',
+    title: $localize`License`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LicensePageRoutingModule {}

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

@@ -0,0 +1,19 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-license-page',
+  styleUrls: ['./license-page.scss'],
+  templateUrl: './license-page.html'
+})
+export class LicensePageComponent implements OnDestroy {
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor() {}
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,10 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>License</h1>
+      <div>
+        <markdown [src]="'../assets/LICENSE'"></markdown>
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/about/license/license-page.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MarkdownModule } from 'ngx-markdown';
+
+import { LicensePageRoutingModule } from './license-page-routing.module';
+import { LicensePageComponent } from './license-page.component';
+
+@NgModule({
+  declarations: [LicensePageComponent],
+  imports: [LicensePageRoutingModule, CommonModule, MarkdownModule.forChild()],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class LicensePageModule {}

apps/client/src/app/pages/about/license/license-page.scss

@@ -0,0 +1,8 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/assets/sitemap.xml

@@ -58,6 +58,10 @@
     <loc>https://ghostfol.io/de/ueber-uns/changelog</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ueber-uns/lizenz</loc>
+    <lastmod>2023-06-01T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
@@ -70,6 +74,10 @@
     <loc>https://ghostfol.io/en/about/changelog</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/about/license</loc>
+    <lastmod>2023-06-01T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/blog</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
@@ -190,6 +198,10 @@
     <loc>https://ghostfol.io/es/sobre/changelog</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/es/sobre/licencia</loc>
+    <lastmod>2023-06-01T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/es/sobre/politica-de-privacidad</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
@@ -206,6 +218,10 @@
     <loc>https://ghostfol.io/fr/a-propos/changelog</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/fr/a-propos/licence</loc>
+    <lastmod>2023-06-01T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/fr/a-propos/politique-de-confidentialite</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
@@ -260,6 +276,10 @@
     <loc>https://ghostfol.io/it/informazioni-su/changelog</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/informazioni-su/licenza</loc>
+    <lastmod>2023-06-01T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/informazioni-su/informativa-sulla-privacy</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
@@ -316,6 +336,10 @@
     <loc>https://ghostfol.io/nl/over/changelog</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/over/licentie</loc>
+    <lastmod>2023-06-01T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/over/privacybeleid</loc>
     <lastmod>2023-06-01T00:00:00+00:00</lastmod>