Feature/add page titles (#1114)

* Add page titles

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added page titles
+
 ### Changed
 
 - Improved the performance of data provider requests by introducing a maximum number of symbols per request (chunk size)

apps/client/src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes, TitleStrategy } from '@angular/router';
+import { PageTitleStrategy } from '@ghostfolio/client/services/page-title.strategy';
 
 import { ModulePreloadService } from './core/module-preload.service';
 
@@ -234,7 +235,10 @@ const routes: Routes = [
       }
     )
   ],
-  providers: [ModulePreloadService],
+  providers: [
+    ModulePreloadService,
+    { provide: TitleStrategy, useClass: PageTitleStrategy }
+  ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { AboutPageComponent } from './about-page.component';
 
 const routes: Routes = [
-  { path: '', component: AboutPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: AboutPageComponent,
+    path: '',
+    title: 'About'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { ChangelogPageComponent } from './changelog-page.component';
 
 const routes: Routes = [
-  { path: '', component: ChangelogPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: ChangelogPageComponent,
+    path: '',
+    title: 'Changelog & License'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { PrivacyPolicyPageComponent } from './privacy-policy-page.component';
 
 const routes: Routes = [
-  { path: '', component: PrivacyPolicyPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: PrivacyPolicyPageComponent,
+    path: '',
+    title: 'Privacy Policy'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { AccountPageComponent } from './account-page.component';
 
 const routes: Routes = [
-  { path: '', component: AccountPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: AccountPageComponent,
+    path: '',
+    title: 'My Ghostfolio'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { AccountsPageComponent } from './accounts-page.component';
 
 const routes: Routes = [
-  { path: '', component: AccountsPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: AccountsPageComponent,
+    path: '',
+    title: 'Accounts'
+  }
 ];
 
 @NgModule({

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

@@ -10,8 +10,6 @@ import { AdminPageComponent } from './admin-page.component';
 
 const routes: Routes = [
   {
-    path: '',
-    component: AdminPageComponent,
     canActivate: [AuthGuard],
     children: [
       { path: '', redirectTo: 'overview', pathMatch: 'full' },
@@ -19,7 +17,10 @@ const routes: Routes = [
       { path: 'market-data', component: AdminMarketDataComponent },
       { path: 'overview', component: AdminOverviewComponent },
       { path: 'users', component: AdminUsersComponent }
-    ]
+    ],
+    component: AdminPageComponent,
+    path: '',
+    title: 'Admin Control'
   }
 ];
 

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

@@ -4,8 +4,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthPageComponent } from './auth-page.component';
 
 const routes: Routes = [
-  { path: '', component: AuthPageComponent },
+  { component: AuthPageComponent, path: '' },
-  { path: ':jwt', component: AuthPageComponent }
+  { component: AuthPageComponent, path: ':jwt' }
 ];
 
 @NgModule({

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page-routing.module.ts

@@ -6,9 +6,10 @@ import { HalloGhostfolioPageComponent } from './hallo-ghostfolio-page.component'
 
 const routes: Routes = [
   {
-    path: '',
+    canActivate: [AuthGuard],
     component: HalloGhostfolioPageComponent,
-    canActivate: [AuthGuard]
+    path: '',
+    title: 'Hallo Ghostfolio'
   }
 ];
 

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page-routing.module.ts

@@ -6,9 +6,10 @@ import { HelloGhostfolioPageComponent } from './hello-ghostfolio-page.component'
 
 const routes: Routes = [
   {
-    path: '',
+    canActivate: [AuthGuard],
     component: HelloGhostfolioPageComponent,
-    canActivate: [AuthGuard]
+    path: '',
+    title: 'Hello Ghostfolio'
   }
 ];
 

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page-routing.module.ts

@@ -6,9 +6,10 @@ import { FirstMonthsInOpenSourcePageComponent } from './first-months-in-open-sou
 
 const routes: Routes = [
   {
-    path: '',
+    canActivate: [AuthGuard],
     component: FirstMonthsInOpenSourcePageComponent,
-    canActivate: [AuthGuard]
+    path: '',
+    title: 'First months in Open Source'
   }
 ];
 

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page-routing.module.ts

@@ -6,9 +6,10 @@ import { GhostfolioMeetsInternetIdentityPageComponent } from './ghostfolio-meets
 
 const routes: Routes = [
   {
-    path: '',
+    canActivate: [AuthGuard],
     component: GhostfolioMeetsInternetIdentityPageComponent,
-    canActivate: [AuthGuard]
+    path: '',
+    title: 'Ghostfolio meets Internet Identity'
   }
 ];
 

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page-routing.module.ts

@@ -6,9 +6,10 @@ import { HowDoIGetMyFinancesInOrderPageComponent } from './how-do-i-get-my-finan
 
 const routes: Routes = [
   {
-    path: '',
+    canActivate: [AuthGuard],
     component: HowDoIGetMyFinancesInOrderPageComponent,
-    canActivate: [AuthGuard]
+    path: '',
+    title: 'How do I get my finances in order?'
   }
 ];
 

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { BlogPageComponent } from './blog-page.component';
 
 const routes: Routes = [
-  { path: '', component: BlogPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: BlogPageComponent,
+    path: '',
+    title: 'Blog'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { FaqPageComponent } from './faq-page.component';
 
 const routes: Routes = [
-  { path: '', component: FaqPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: FaqPageComponent,
+    path: '',
+    title: 'FAQ'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { FeaturesPageComponent } from './features-page.component';
 
 const routes: Routes = [
-  { path: '', component: FeaturesPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: FeaturesPageComponent,
+    path: '',
+    title: 'Features'
+  }
 ];
 
 @NgModule({

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

@@ -10,8 +10,6 @@ import { HomePageComponent } from './home-page.component';
 
 const routes: Routes = [
   {
-    path: '',
-    component: HomePageComponent,
     canActivate: [AuthGuard],
     children: [
       { path: '', redirectTo: 'overview', pathMatch: 'full' },
@@ -19,7 +17,10 @@ const routes: Routes = [
       { path: 'holdings', component: HomeHoldingsComponent },
       { path: 'summary', component: HomeSummaryComponent },
       { path: 'market', component: HomeMarketComponent }
-    ]
+    ],
+    component: HomePageComponent,
+    path: '',
+    title: 'Overview'
   }
 ];
 

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { MarketsPageComponent } from './markets-page.component';
 
 const routes: Routes = [
-  { path: '', component: MarketsPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: MarketsPageComponent,
+    path: '',
+    title: 'Markets'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { AllocationsPageComponent } from './allocations-page.component';
 
 const routes: Routes = [
-  { path: '', component: AllocationsPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: AllocationsPageComponent,
+    path: '',
+    title: 'Allocations'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { AnalysisPageComponent } from './analysis-page.component';
 
 const routes: Routes = [
-  { path: '', component: AnalysisPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: AnalysisPageComponent,
+    path: '',
+    title: 'Analysis'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { FirePageComponent } from './fire-page.component';
 
 const routes: Routes = [
-  { path: '', component: FirePageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: FirePageComponent,
+    path: '',
+    title: 'FIRE'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { HoldingsPageComponent } from './holdings-page.component';
 
 const routes: Routes = [
-  { path: '', component: HoldingsPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: HoldingsPageComponent,
+    path: '',
+    title: 'Holdings'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { PortfolioPageComponent } from './portfolio-page.component';
 
 const routes: Routes = [
-  { path: '', component: PortfolioPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: PortfolioPageComponent,
+    path: '',
+    title: 'Portfolio'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { ReportPageComponent } from './report-page.component';
 
 const routes: Routes = [
-  { path: '', component: ReportPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: ReportPageComponent,
+    path: '',
+    title: 'X-ray'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { TransactionsPageComponent } from './transactions-page.component';
 
 const routes: Routes = [
-  { path: '', component: TransactionsPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: TransactionsPageComponent,
+    path: '',
+    title: 'Activities'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { PricingPageComponent } from './pricing-page.component';
 
 const routes: Routes = [
-  { path: '', component: PricingPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: PricingPageComponent,
+    path: '',
+    title: 'Pricing'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { PublicPageComponent } from './public-page.component';
 
 const routes: Routes = [
-  { path: ':id', component: PublicPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: PublicPageComponent,
+    path: ':id',
+    title: 'Portfolio'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { RegisterPageComponent } from './register-page.component';
 
 const routes: Routes = [
-  { path: '', component: RegisterPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: RegisterPageComponent,
+    path: '',
+    title: 'Registration'
+  }
 ];
 
 @NgModule({

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

@@ -5,7 +5,12 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { ResourcesPageComponent } from './resources-page.component';
 
 const routes: Routes = [
-  { path: '', component: ResourcesPageComponent, canActivate: [AuthGuard] }
+  {
+    canActivate: [AuthGuard],
+    component: ResourcesPageComponent,
+    path: '',
+    title: 'Resources'
+  }
 ];
 
 @NgModule({

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

@@ -2,7 +2,9 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component';
 
-const routes: Routes = [{ path: '', component: WebauthnPageComponent }];
+const routes: Routes = [
+  { component: WebauthnPageComponent, path: '', title: 'Login' }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

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

@@ -8,14 +8,15 @@ import { ZenPageComponent } from './zen-page.component';
 
 const routes: Routes = [
   {
-    path: '',
-    component: ZenPageComponent,
     canActivate: [AuthGuard],
     children: [
       { path: '', redirectTo: 'overview', pathMatch: 'full' },
       { path: 'overview', component: HomeOverviewComponent },
       { path: 'holdings', component: HomeHoldingsComponent }
-    ]
+    ],
+    component: ZenPageComponent,
+    path: '',
+    title: 'Overview'
   }
 ];
 

apps/client/src/app/services/page-title.strategy.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
+
+@Injectable()
+export class PageTitleStrategy extends TitleStrategy {
+  private static readonly DEFAULT_TITLE =
+    'Ghostfolio – Open Source Wealth Management Software';
+
+  public constructor(private readonly title: Title) {
+    super();
+  }
+
+  public override updateTitle(routerState: RouterStateSnapshot) {
+    const title = this.buildTitle(routerState);
+
+    if (title) {
+      this.title.setTitle(`${title} – ${PageTitleStrategy.DEFAULT_TITLE}`);
+    } else {
+      this.title.setTitle(`${PageTitleStrategy.DEFAULT_TITLE}`);
+    }
+  }
+}