Replaced the usage of alert() with MatDialog

apps/client/src/app/app.component.ts

@@ -28,6 +28,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
+import { NotificationService } from './core/notification/notification.service';
 import { DataService } from './services/data.service';
 import { ImpersonationStorageService } from './services/impersonation-storage.service';
 import { TokenStorageService } from './services/token-storage.service';
@@ -85,7 +86,8 @@ export class AppComponent implements OnDestroy, OnInit {
     private router: Router,
     private title: Title,
     private tokenStorageService: TokenStorageService,
-    private userService: UserService
+    private userService: UserService,
+    private notificationService: NotificationService
   ) {
     this.initializeTheme();
     this.user = undefined;
@@ -199,7 +201,10 @@ export class AppComponent implements OnDestroy, OnInit {
     if (this.user.systemMessage.routerLink) {
       this.router.navigate(this.user.systemMessage.routerLink);
     } else {
-      alert(this.user.systemMessage.message);
+      this.notificationService.alert({
+        title: '',
+        message: this.user.systemMessage.message
+      });
     }
   }
 

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -120,7 +120,10 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public onOpenComment(aComment: string) {
-    alert(aComment);
+    this.notificationService.alert({
+      title: '',
+      message: aComment
+    });
   }
 
   public onTransferBalance() {

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
@@ -59,7 +60,8 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private formBuilder: FormBuilder,
-    private userService: UserService
+    private userService: UserService,
+    private notificationService: NotificationService
   ) {
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -119,11 +121,17 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
   }
 
   public onViewData(aData: AdminJobs['jobs'][0]['data']) {
-    alert(JSON.stringify(aData, null, '  '));
+    this.notificationService.alert({
+      title: '',
+      message: JSON.stringify(aData, null, '  ')
+    });
   }
 
   public onViewStacktrace(aStacktrace: AdminJobs['jobs'][0]['stacktrace']) {
-    alert(JSON.stringify(aStacktrace, null, '  '));
+    this.notificationService.alert({
+      title: '',
+      message: JSON.stringify(aStacktrace, null, '  ')
+    });
   }
 
   public ngOnDestroy() {

apps/client/src/app/components/admin-market-data/admin-market-data.service.ts

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { ghostfolioScraperApiSymbolPrefix } from '@ghostfolio/common/config';
 import { getCurrencyFromSymbol, isCurrency } from '@ghostfolio/common/helper';
@@ -11,7 +12,10 @@ import { EMPTY, catchError, finalize, forkJoin, takeUntil } from 'rxjs';
 
 @Injectable()
 export class AdminMarketDataService {
-  public constructor(private adminService: AdminService) {}
+  public constructor(
+    private adminService: AdminService,
+    private notificationService: NotificationService
+  ) {}
 
   public deleteAssetProfile({ dataSource, symbol }: AssetProfileIdentifier) {
     const confirmation = confirm(
@@ -46,7 +50,10 @@ export class AdminMarketDataService {
       forkJoin(deleteRequests)
         .pipe(
           catchError(() => {
-            alert($localize`Oops! Could not delete profiles.`);
+            this.notificationService.alert({
+              title: '',
+              message: $localize`Oops! Could not delete profiles.`
+            });
 
             return EMPTY;
           }),

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -1,6 +1,7 @@
 import { UpdateAssetProfileDto } from '@ghostfolio/api/app/admin/update-asset-profile.dto';
 import { UpdateMarketDataDto } from '@ghostfolio/api/app/admin/update-market-data.dto';
 import { AdminMarketDataService } from '@ghostfolio/client/components/admin-market-data/admin-market-data.service';
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { validateObjectForForm } from '@ghostfolio/client/util/form.util';
@@ -94,7 +95,8 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     private dataService: DataService,
     public dialogRef: MatDialogRef<AssetProfileDialog>,
     private formBuilder: FormBuilder,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private notificationService: NotificationService
   ) {}
 
   public ngOnInit() {
@@ -329,19 +331,24 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
       })
       .pipe(
         catchError(({ error }) => {
-          alert(`Error: ${error?.message}`);
+          this.notificationService.alert({
+            title: '',
+            message: `Error: ${error?.message}`
+          });
           return EMPTY;
         }),
         takeUntil(this.unsubscribeSubject)
       )
       .subscribe(({ price }) => {
-        alert(
+        this.notificationService.alert({
-          $localize`The current market price is` +
+          title: '',
+          message:
+            $localize`The current market price is` +
             ' ' +
             price +
             ' ' +
             this.assetProfileForm.get('currency').value
-        );
+        });
       });
   }
 

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -60,7 +61,8 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     private cacheService: CacheService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    private userService: UserService
+    private userService: UserService,
+    private notificationService: NotificationService
   ) {
     this.info = this.dataService.fetchInfo();
 
@@ -126,7 +128,10 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
         const currencies = uniq([...this.customCurrencies, currency]);
         this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies });
       } else {
-        alert($localize`${currency} is an invalid currency!`);
+        this.notificationService.alert({
+          title: '',
+          message: $localize`${currency} is an invalid currency!`
+        });
       }
     }
   }

apps/client/src/app/components/header/header.component.ts

@@ -1,6 +1,7 @@
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
 import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
 import { LayoutService } from '@ghostfolio/client/core/layout.service';
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import {
@@ -96,7 +97,8 @@ export class HeaderComponent implements OnChanges {
     private router: Router,
     private settingsStorageService: SettingsStorageService,
     private tokenStorageService: TokenStorageService,
-    private userService: UserService
+    private userService: UserService,
+    private notificationService: NotificationService
   ) {
     this.impersonationStorageService
       .onChangeHasImpersonation()
@@ -240,7 +242,10 @@ export class HeaderComponent implements OnChanges {
             .loginAnonymous(data?.accessToken)
             .pipe(
               catchError(() => {
-                alert($localize`Oops! Incorrect Security Token.`);
+                this.notificationService.alert({
+                  title: 'Wrong',
+                  message: $localize`Oops! Incorrect Security Token.`
+                });
 
                 return EMPTY;
               }),

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -1,4 +1,5 @@
 import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { validateObjectForForm } from '@ghostfolio/client/util/form.util';
 
@@ -33,7 +34,8 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
     @Inject(MAT_DIALOG_DATA) private data: CreateOrUpdateAccessDialogParams,
     public dialogRef: MatDialogRef<CreateOrUpdateAccessDialog>,
     private dataService: DataService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private notificationService: NotificationService
   ) {}
 
   ngOnInit() {
@@ -85,7 +87,10 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
         .pipe(
           catchError((error) => {
             if (error.status === StatusCodes.BAD_REQUEST) {
-              alert($localize`Oops! Could not grant access.`);
+              this.notificationService.alert({
+                title: 'Bad Request',
+                message: $localize`Oops! Could not grant access.`
+              });
             }
 
             return EMPTY;

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { getDateFormatString } from '@ghostfolio/common/helper';
@@ -48,7 +49,8 @@ export class UserAccountMembershipComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private snackBar: MatSnackBar,
     private stripeService: StripeService,
-    private userService: UserService
+    private userService: UserService,
+    private notificationService: NotificationService
   ) {
     const { baseCurrency, globalPermissions, subscriptions } =
       this.dataService.fetchInfo();
@@ -96,13 +98,19 @@ export class UserAccountMembershipComponent implements OnDestroy, OnInit {
           return this.stripeService.redirectToCheckout({ sessionId });
         }),
         catchError((error) => {
-          alert(error.message);
+          this.notificationService.alert({
+            title: '',
+            message: error
+          });
           throw error;
         })
       )
       .subscribe((result) => {
         if (result.error) {
-          alert(result.error.message);
+          this.notificationService.alert({
+            title: result.error.type,
+            message: result.error.message
+          });
         }
       });
   }

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import {
   KEY_STAY_SIGNED_IN,
@@ -73,7 +74,8 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
     private snackBar: MatSnackBar,
     private tokenStorageService: TokenStorageService,
     private userService: UserService,
-    public webAuthnService: WebAuthnService
+    public webAuthnService: WebAuthnService,
+    private notificationService: NotificationService
   ) {
     const { baseCurrency, currencies } = this.dataService.fetchInfo();
 
@@ -155,7 +157,10 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
         })
         .pipe(
           catchError(() => {
-            alert($localize`Oops! Incorrect Security Token.`);
+            this.notificationService.alert({
+              title: '',
+              message: $localize`Oops! Incorrect Security Token.`
+            });
 
             return EMPTY;
           }),

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

@@ -3,6 +3,7 @@ import { TransferBalanceDto } from '@ghostfolio/api/app/account/transfer-balance
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
 import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -48,7 +49,8 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
     private impersonationStorageService: ImpersonationStorageService,
     private route: ActivatedRoute,
     private router: Router,
-    private userService: UserService
+    private userService: UserService,
+    private notificationService: NotificationService
   ) {
     this.route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -305,7 +307,10 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
             })
             .pipe(
               catchError(() => {
-                alert($localize`Oops, cash balance transfer has failed.`);
+                this.notificationService.alert({
+                  title: '',
+                  message: $localize`Oops, cash balance transfer has failed.`
+                });
 
                 return EMPTY;
               }),

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

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 import { InfoItem } from '@ghostfolio/common/interfaces';
@@ -20,7 +21,8 @@ export class GfDemoPageComponent implements OnDestroy {
   public constructor(
     private dataService: DataService,
     private router: Router,
-    private tokenStorageService: TokenStorageService
+    private tokenStorageService: TokenStorageService,
+    private notificationService: NotificationService
   ) {
     this.info = this.dataService.fetchInfo();
   }
@@ -29,9 +31,10 @@ export class GfDemoPageComponent implements OnDestroy {
     const hasToken = this.tokenStorageService.getToken()?.length > 0;
 
     if (hasToken) {
-      alert(
+      this.notificationService.alert({
-        $localize`As you are already logged in, you cannot access the demo account.`
+        title: '',
-      );
+        message: $localize`As you are already logged in, you cannot access the demo account.`
+      });
     } else {
       this.tokenStorageService.saveToken(this.info.demoAuthToken, true);
     }

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

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
@@ -42,7 +43,8 @@ export class PricingPageComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private stripeService: StripeService,
-    private userService: UserService
+    private userService: UserService,
+    private notificationService: NotificationService
   ) {}
 
   public ngOnInit() {
@@ -82,13 +84,19 @@ export class PricingPageComponent implements OnDestroy, OnInit {
           return this.stripeService.redirectToCheckout({ sessionId });
         }),
         catchError((error) => {
-          alert(error.message);
+          this.notificationService.alert({
+            title: '',
+            message: error
+          });
           throw error;
         })
       )
       .subscribe((result) => {
         if (result.error) {
-          alert(result.error.message);
+          this.notificationService.alert({
+            title: result.error.type,
+            message: result.error.message
+          });
         }
       });
   }

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -1,5 +1,6 @@
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { getDateFormatString, getLocale } from '@ghostfolio/common/helper';
@@ -120,7 +121,10 @@ export class GfActivitiesTableComponent
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private router: Router) {}
+  public constructor(
+    private router: Router,
+    private notificationService: NotificationService
+  ) {}
 
   public ngOnInit() {
     if (this.showCheckbox) {
@@ -260,7 +264,10 @@ export class GfActivitiesTableComponent
   }
 
   public onOpenComment(aComment: string) {
-    alert(aComment);
+    this.notificationService.alert({
+      title: '',
+      message: aComment
+    });
   }
 
   public onOpenPositionDialog({ dataSource, symbol }: AssetProfileIdentifier) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ghostfolio",
-  "version": "2.101.0",
+  "version": "2.103.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ghostfolio",
-      "version": "2.101.0",
+      "version": "2.103.0",
       "hasInstallScript": true,
       "license": "AGPL-3.0",
       "dependencies": {