change alert to matdialog in demo page

apps/client/src/app/pages/demo/demo-page-dialog.html

@@ -0,0 +1 @@
+<h3 mat-dialog-title>{{text}}</h3>

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

@@ -4,6 +4,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 import { InfoItem } from '@ghostfolio/common/interfaces';
 import { Subject } from 'rxjs';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   host: { class: 'page' },
@@ -17,24 +18,21 @@ export class DemoPageComponent implements OnDestroy {
 
   public constructor(
     private dataService: DataService,
-    private router: Router,
-    private tokenStorageService: TokenStorageService
+    private tokenStorageService: TokenStorageService,
+    public dialog: MatDialog
   ) {
     this.info = this.dataService.fetchInfo();
   }
 
   public ngOnInit() {
     const hasToken = this.tokenStorageService.getToken()?.length > 0;
-
     if (hasToken) {
-      alert(
-        $localize`As you are already logged in, you cannot access the demo account.`
-      );
+      this.dialog.open(DialogAnimationsExampleDialog, {
+        width: '50%'
+      });
     } else {
       this.tokenStorageService.saveToken(this.info.demoAuthToken, true);
     }
-
-    this.router.navigate(['/']);
   }
 
   public ngOnDestroy() {
@@ -42,3 +40,20 @@ export class DemoPageComponent implements OnDestroy {
     this.unsubscribeSubject.complete();
   }
 }
+@Component({
+  selector: 'demo-page-dialog',
+  templateUrl: './demo-page-dialog.html'
+})
+export class DialogAnimationsExampleDialog {
+  public text: String;
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogAnimationsExampleDialog>,
+    private router: Router
+  ) {
+    this.text = $localize`As you are already logged in, you cannot access the demo account.`;
+    dialogRef.afterClosed().subscribe(() => {
+      this.router.navigate(['/']);
+    });
+  }
+}

apps/client/src/app/pages/demo/demo-page.module.ts

@@ -3,10 +3,11 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 
 import { DemoPageRoutingModule } from './demo-page-routing.module';
 import { DemoPageComponent } from './demo-page.component';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [DemoPageComponent],
-  imports: [CommonModule, DemoPageRoutingModule],
+  imports: [CommonModule, DemoPageRoutingModule, MatDialogModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class DemoPageModule {}