From 5d9c38663d971f096384c03d83a9ed26f9ed8c13 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Wed, 15 May 2024 12:04:07 +0200 Subject: [PATCH] Feature/migrate various pages to standalone components (#3404) * Migrate to standalone components * Update changelog --- CHANGELOG.md | 6 +++ apps/client/src/app/app-routing.module.ts | 50 +++++++++---------- apps/client/src/app/core/auth.guard.ts | 3 +- apps/client/src/app/core/paths.ts | 11 ++++ .../pages/about/about-page-routing.module.ts | 2 +- .../pages/demo/demo-page-routing.module.ts | 16 ------ .../src/app/pages/demo/demo-page.component.ts | 5 +- .../src/app/pages/demo/demo-page.module.ts | 12 ----- .../features/features-page-routing.module.ts | 21 -------- .../pages/features/features-page.component.ts | 15 +++++- .../pages/features/features-page.module.ts | 22 -------- .../pages/i18n/i18n-page-routing.module.ts | 20 -------- .../src/app/pages/i18n/i18n-page.component.ts | 5 +- .../src/app/pages/i18n/i18n-page.module.ts | 12 ----- .../webauthn/webauthn-page-routing.module.ts | 14 ------ .../pages/webauthn/webauthn-page.component.ts | 13 ++++- .../pages/webauthn/webauthn-page.module.ts | 21 -------- 17 files changed, 79 insertions(+), 169 deletions(-) create mode 100644 apps/client/src/app/core/paths.ts delete mode 100644 apps/client/src/app/pages/demo/demo-page-routing.module.ts delete mode 100644 apps/client/src/app/pages/demo/demo-page.module.ts delete mode 100644 apps/client/src/app/pages/features/features-page-routing.module.ts delete mode 100644 apps/client/src/app/pages/features/features-page.module.ts delete mode 100644 apps/client/src/app/pages/i18n/i18n-page-routing.module.ts delete mode 100644 apps/client/src/app/pages/i18n/i18n-page.module.ts delete mode 100644 apps/client/src/app/pages/webauthn/webauthn-page-routing.module.ts delete mode 100644 apps/client/src/app/pages/webauthn/webauthn-page.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index ed79ebd6..b12a5e9f 100644 --- a/CHANGELOG.md +++ b/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 + +### Changed + +- Refactored various pages to standalone components + ## 2.81.0 - 2024-05-12 ### Added diff --git a/apps/client/src/app/app-routing.module.ts b/apps/client/src/app/app-routing.module.ts index 8f7aaea4..8a517c5f 100644 --- a/apps/client/src/app/app-routing.module.ts +++ b/apps/client/src/app/app-routing.module.ts @@ -1,3 +1,5 @@ +import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; +import { paths } from '@ghostfolio/client/core/paths'; import { PageTitleStrategy } from '@ghostfolio/client/services/page-title.strategy'; import { NgModule } from '@angular/core'; @@ -5,18 +7,6 @@ import { RouterModule, Routes, TitleStrategy } from '@angular/router'; import { ModulePreloadService } from './core/module-preload.service'; -export const paths = { - about: $localize`about`, - faq: $localize`faq`, - features: $localize`features`, - license: $localize`license`, - markets: $localize`markets`, - pricing: $localize`pricing`, - privacyPolicy: $localize`privacy-policy`, - register: $localize`register`, - resources: $localize`resources` -}; - const routes: Routes = [ { path: paths.about, @@ -53,9 +43,12 @@ const routes: Routes = [ import('./pages/blog/blog-page.module').then((m) => m.BlogPageModule) }, { - path: 'demo', - loadChildren: () => - import('./pages/demo/demo-page.module').then((m) => m.DemoPageModule) + canActivate: [AuthGuard], + loadComponent: () => + import('./pages/demo/demo-page.component').then( + (c) => c.GfDemoPageComponent + ), + path: 'demo' }, { path: paths.faq, @@ -63,11 +56,13 @@ const routes: Routes = [ import('./pages/faq/faq-page.module').then((m) => m.FaqPageModule) }, { + canActivate: [AuthGuard], + loadComponent: () => + import('./pages/features/features-page.component').then( + (c) => c.GfFeaturesPageComponent + ), path: paths.features, - loadChildren: () => - import('./pages/features/features-page.module').then( - (m) => m.FeaturesPageModule - ) + title: $localize`Features` }, { path: 'home', @@ -75,9 +70,13 @@ const routes: Routes = [ import('./pages/home/home-page.module').then((m) => m.HomePageModule) }, { + canActivate: [AuthGuard], + loadComponent: () => + import('./pages/i18n/i18n-page.component').then( + (c) => c.GfI18nPageComponent + ), path: 'i18n', - loadChildren: () => - import('./pages/i18n/i18n-page.module').then((m) => m.I18nPageModule) + title: $localize`Internationalization` }, { path: paths.markets, @@ -134,11 +133,12 @@ const routes: Routes = [ ) }, { + loadComponent: () => + import('./pages/webauthn/webauthn-page.component').then( + (c) => c.GfWebauthnPageComponent + ), path: 'webauthn', - loadChildren: () => - import('./pages/webauthn/webauthn-page.module').then( - (m) => m.WebauthnPageModule - ) + title: $localize`Sign in` }, { path: 'zen', diff --git a/apps/client/src/app/core/auth.guard.ts b/apps/client/src/app/core/auth.guard.ts index ee5ed77c..548d3647 100644 --- a/apps/client/src/app/core/auth.guard.ts +++ b/apps/client/src/app/core/auth.guard.ts @@ -1,4 +1,3 @@ -import { paths } from '@ghostfolio/client/app-routing.module'; import { DataService } from '@ghostfolio/client/services/data.service'; import { SettingsStorageService } from '@ghostfolio/client/services/settings-storage.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; @@ -12,6 +11,8 @@ import { import { EMPTY } from 'rxjs'; import { catchError } from 'rxjs/operators'; +import { paths } from './paths'; + @Injectable({ providedIn: 'root' }) export class AuthGuard { private static PUBLIC_PAGE_ROUTES = [ diff --git a/apps/client/src/app/core/paths.ts b/apps/client/src/app/core/paths.ts new file mode 100644 index 00000000..801228bb --- /dev/null +++ b/apps/client/src/app/core/paths.ts @@ -0,0 +1,11 @@ +export const paths = { + about: $localize`about`, + faq: $localize`faq`, + features: $localize`features`, + license: $localize`license`, + markets: $localize`markets`, + pricing: $localize`pricing`, + privacyPolicy: $localize`privacy-policy`, + register: $localize`register`, + resources: $localize`resources` +}; diff --git a/apps/client/src/app/pages/about/about-page-routing.module.ts b/apps/client/src/app/pages/about/about-page-routing.module.ts index ac02124a..06003093 100644 --- a/apps/client/src/app/pages/about/about-page-routing.module.ts +++ b/apps/client/src/app/pages/about/about-page-routing.module.ts @@ -1,5 +1,5 @@ -import { paths } from '@ghostfolio/client/app-routing.module'; import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; +import { paths } from '@ghostfolio/client/core/paths'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; diff --git a/apps/client/src/app/pages/demo/demo-page-routing.module.ts b/apps/client/src/app/pages/demo/demo-page-routing.module.ts deleted file mode 100644 index e0b86fb4..00000000 --- a/apps/client/src/app/pages/demo/demo-page-routing.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { DemoPageComponent } from './demo-page.component'; - -const routes: Routes = [ - { path: '', component: DemoPageComponent, canActivate: [AuthGuard] } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class DemoPageRoutingModule {} diff --git a/apps/client/src/app/pages/demo/demo-page.component.ts b/apps/client/src/app/pages/demo/demo-page.component.ts index 6515fd89..cf09d77a 100644 --- a/apps/client/src/app/pages/demo/demo-page.component.ts +++ b/apps/client/src/app/pages/demo/demo-page.component.ts @@ -2,16 +2,19 @@ import { DataService } from '@ghostfolio/client/services/data.service'; import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service'; import { InfoItem } from '@ghostfolio/common/interfaces'; +import { CommonModule } from '@angular/common'; import { Component, OnDestroy } from '@angular/core'; import { Router } from '@angular/router'; import { Subject } from 'rxjs'; @Component({ host: { class: 'page' }, + imports: [CommonModule], selector: 'gf-demo-page', + standalone: true, templateUrl: './demo-page.html' }) -export class DemoPageComponent implements OnDestroy { +export class GfDemoPageComponent implements OnDestroy { public info: InfoItem; private unsubscribeSubject = new Subject(); diff --git a/apps/client/src/app/pages/demo/demo-page.module.ts b/apps/client/src/app/pages/demo/demo-page.module.ts deleted file mode 100644 index 5465c93c..00000000 --- a/apps/client/src/app/pages/demo/demo-page.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; - -import { DemoPageRoutingModule } from './demo-page-routing.module'; -import { DemoPageComponent } from './demo-page.component'; - -@NgModule({ - declarations: [DemoPageComponent], - imports: [CommonModule, DemoPageRoutingModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class DemoPageModule {} diff --git a/apps/client/src/app/pages/features/features-page-routing.module.ts b/apps/client/src/app/pages/features/features-page-routing.module.ts deleted file mode 100644 index d6691acb..00000000 --- a/apps/client/src/app/pages/features/features-page-routing.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { FeaturesPageComponent } from './features-page.component'; - -const routes: Routes = [ - { - canActivate: [AuthGuard], - component: FeaturesPageComponent, - path: '', - title: $localize`Features` - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class FeaturesPageRoutingModule {} diff --git a/apps/client/src/app/pages/features/features-page.component.ts b/apps/client/src/app/pages/features/features-page.component.ts index 822a54b7..3fe7f3db 100644 --- a/apps/client/src/app/pages/features/features-page.component.ts +++ b/apps/client/src/app/pages/features/features-page.component.ts @@ -2,17 +2,30 @@ import { DataService } from '@ghostfolio/client/services/data.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; import { InfoItem, User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; +import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; +import { CommonModule } from '@angular/common'; import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { RouterModule } from '@angular/router'; import { Subject, takeUntil } from 'rxjs'; @Component({ host: { class: 'page' }, + imports: [ + CommonModule, + GfPremiumIndicatorComponent, + MatButtonModule, + MatCardModule, + RouterModule + ], selector: 'gf-features-page', + standalone: true, styleUrls: ['./features-page.scss'], templateUrl: './features-page.html' }) -export class FeaturesPageComponent implements OnDestroy { +export class GfFeaturesPageComponent implements OnDestroy { public hasPermissionForSubscription: boolean; public info: InfoItem; public routerLinkRegister = ['/' + $localize`register`]; diff --git a/apps/client/src/app/pages/features/features-page.module.ts b/apps/client/src/app/pages/features/features-page.module.ts deleted file mode 100644 index fb5b00c1..00000000 --- a/apps/client/src/app/pages/features/features-page.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; - -import { FeaturesPageRoutingModule } from './features-page-routing.module'; -import { FeaturesPageComponent } from './features-page.component'; - -@NgModule({ - declarations: [FeaturesPageComponent], - imports: [ - CommonModule, - FeaturesPageRoutingModule, - GfPremiumIndicatorComponent, - MatButtonModule, - MatCardModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class FeaturesPageModule {} diff --git a/apps/client/src/app/pages/i18n/i18n-page-routing.module.ts b/apps/client/src/app/pages/i18n/i18n-page-routing.module.ts deleted file mode 100644 index d268ddba..00000000 --- a/apps/client/src/app/pages/i18n/i18n-page-routing.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { I18nPageComponent } from './i18n-page.component'; - -const routes: Routes = [ - { - canActivate: [AuthGuard], - component: I18nPageComponent, - path: '' - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class I18nPageRoutingModule {} diff --git a/apps/client/src/app/pages/i18n/i18n-page.component.ts b/apps/client/src/app/pages/i18n/i18n-page.component.ts index 46837fa5..2bcac9d8 100644 --- a/apps/client/src/app/pages/i18n/i18n-page.component.ts +++ b/apps/client/src/app/pages/i18n/i18n-page.component.ts @@ -1,13 +1,16 @@ +import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { Subject } from 'rxjs'; @Component({ host: { class: 'page' }, + imports: [CommonModule], selector: 'gf-i18n-page', + standalone: true, styleUrls: ['./i18n-page.scss'], templateUrl: './i18n-page.html' }) -export class I18nPageComponent implements OnInit { +export class GfI18nPageComponent implements OnInit { private unsubscribeSubject = new Subject(); public constructor() {} diff --git a/apps/client/src/app/pages/i18n/i18n-page.module.ts b/apps/client/src/app/pages/i18n/i18n-page.module.ts deleted file mode 100644 index 5b5580eb..00000000 --- a/apps/client/src/app/pages/i18n/i18n-page.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; - -import { I18nPageRoutingModule } from './i18n-page-routing.module'; -import { I18nPageComponent } from './i18n-page.component'; - -@NgModule({ - declarations: [I18nPageComponent], - imports: [CommonModule, I18nPageRoutingModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class I18nPageModule {} diff --git a/apps/client/src/app/pages/webauthn/webauthn-page-routing.module.ts b/apps/client/src/app/pages/webauthn/webauthn-page-routing.module.ts deleted file mode 100644 index e1bd38bb..00000000 --- a/apps/client/src/app/pages/webauthn/webauthn-page-routing.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component'; - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - { component: WebauthnPageComponent, path: '', title: $localize`Sign in` } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class WebauthnPageRoutingModule {} diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.component.ts b/apps/client/src/app/pages/webauthn/webauthn-page.component.ts index 4f259cd0..5e5ce5d1 100644 --- a/apps/client/src/app/pages/webauthn/webauthn-page.component.ts +++ b/apps/client/src/app/pages/webauthn/webauthn-page.component.ts @@ -1,18 +1,29 @@ import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service'; import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service'; +import { GfLogoComponent } from '@ghostfolio/ui/logo'; +import { CommonModule } from '@angular/common'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ host: { class: 'page' }, + imports: [ + CommonModule, + GfLogoComponent, + MatButtonModule, + MatProgressSpinnerModule + ], selector: 'gf-webauthn-page', + standalone: true, styleUrls: ['./webauthn-page.scss'], templateUrl: './webauthn-page.html' }) -export class WebauthnPageComponent implements OnDestroy, OnInit { +export class GfWebauthnPageComponent implements OnDestroy, OnInit { public hasError = false; private unsubscribeSubject = new Subject(); diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts b/apps/client/src/app/pages/webauthn/webauthn-page.module.ts deleted file mode 100644 index 93f9fe87..00000000 --- a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component'; -import { GfLogoComponent } from '@ghostfolio/ui/logo'; - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; - -import { WebauthnPageRoutingModule } from './webauthn-page-routing.module'; - -@NgModule({ - declarations: [WebauthnPageComponent], - imports: [ - CommonModule, - GfLogoComponent, - MatButtonModule, - MatProgressSpinnerModule, - WebauthnPageRoutingModule - ] -}) -export class WebauthnPageModule {}