Feature/migrate setting Ghostfolio API key prompt dialog (#4151)

* Migrate setting Ghostfolio API key prompt dialog

apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts

@@ -1,3 +1,4 @@
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { PROPERTY_API_KEY_GHOSTFOLIO } from '@ghostfolio/common/config';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
@@ -32,7 +33,8 @@ export class GfGhostfolioPremiumApiDialogComponent {
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: GhostfolioPremiumApiDialogParams,
     private dataService: DataService,
-    public dialogRef: MatDialogRef<GfGhostfolioPremiumApiDialogComponent>
+    public dialogRef: MatDialogRef<GfGhostfolioPremiumApiDialogComponent>,
+    private notificationService: NotificationService
   ) {}
 
   public onCancel() {
@@ -40,19 +42,21 @@ export class GfGhostfolioPremiumApiDialogComponent {
   }
 
   public onSetGhostfolioApiKey() {
-    let ghostfolioApiKey = prompt(
-      $localize`Please enter your Ghostfolio API key:`
-    );
-    ghostfolioApiKey = ghostfolioApiKey?.trim();
+    this.notificationService.prompt({
+      confirmFn: (value) => {
+        const ghostfolioApiKey = value?.trim();
 
-    if (ghostfolioApiKey) {
-      this.dataService
-        .putAdminSetting(PROPERTY_API_KEY_GHOSTFOLIO, {
-          value: ghostfolioApiKey
-        })
-        .subscribe(() => {
-          this.dialogRef.close();
-        });
-    }
+        if (ghostfolioApiKey) {
+          this.dataService
+            .putAdminSetting(PROPERTY_API_KEY_GHOSTFOLIO, {
+              value: ghostfolioApiKey
+            })
+            .subscribe(() => {
+              this.dialogRef.close();
+            });
+        }
+      },
+      title: $localize`Please enter your Ghostfolio API key.`
+    });
   }
 }