From 0b94f87f3261b0e04f39998d6f9bf303783ca47f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 6 Jul 2026 14:41:35 +0200
Subject: [PATCH] Feature/extend alert dialog with copy-to-clipboard
 functionality (#7258)

* Extend alert dialog with copy-to-clipboard functionality

* Update changelog
---
 CHANGELOG.md                                  |  4 +++
 .../user-account-membership.component.ts      |  6 ++--
 .../alert-dialog/alert-dialog.component.ts    | 29 ++++++++++++++++++-
 .../alert-dialog/alert-dialog.html            | 16 ++++++++--
 .../alert-dialog/interfaces/interfaces.ts     |  1 +
 .../notifications/interfaces/interfaces.ts    |  1 +
 .../lib/notifications/notification.service.ts |  1 +
 7 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8d63de05..944a3b704 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added support for a copy-to-clipboard action in the alert dialog component
+
 ### Changed
 
 - Set the change detection strategy to `OnPush` in the _FIRE_ page
diff --git a/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts b/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
index b13a983fc..1b23a6df9 100644
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
@@ -146,11 +146,9 @@ export class GfUserAccountMembershipComponent {
           )
           .subscribe(({ apiKey }) => {
             this.notificationService.alert({
+              copyValue: apiKey,
               discardLabel: $localize`Okay`,
-              message:
-                $localize`Set this API key in your self-hosted environment:` +
-                '<br />' +
-                apiKey,
+              message: $localize`Set this API key in your self-hosted environment:`,
               title: $localize`Ghostfolio Premium Data Provider API Key`
             });
           });
diff --git a/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.component.ts b/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.component.ts
index 3dbe70387..16fb4b47b 100644
--- a/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.component.ts
+++ b/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.component.ts
@@ -1,6 +1,9 @@
+import { Clipboard } from '@angular/cdk/clipboard';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import ms from 'ms';
 
 import { AlertDialogParams } from './interfaces/interfaces';
 
@@ -12,6 +15,7 @@ import { AlertDialogParams } from './interfaces/interfaces';
   templateUrl: './alert-dialog.html'
 })
 export class GfAlertDialogComponent {
+  public copyValue?: string;
   public discardLabel: string;
   public message?: string;
   public title: string;
@@ -19,9 +23,32 @@ export class GfAlertDialogComponent {
   protected readonly dialogRef =
     inject<MatDialogRef<GfAlertDialogComponent>>(MatDialogRef);
 
-  public initialize({ discardLabel, message, title }: AlertDialogParams) {
+  private readonly clipboard = inject(Clipboard);
+  private readonly snackBar = inject(MatSnackBar);
+
+  public initialize({
+    copyValue,
+    discardLabel,
+    message,
+    title
+  }: AlertDialogParams) {
+    this.copyValue = copyValue;
     this.discardLabel = discardLabel;
     this.message = message;
     this.title = title;
   }
+
+  public onCopyToClipboard() {
+    if (this.copyValue) {
+      this.clipboard.copy(this.copyValue);
+
+      this.snackBar.open(
+        '✅ ' + $localize`The value has been copied to the clipboard`,
+        undefined,
+        {
+          duration: ms('3 seconds')
+        }
+      );
+    }
+  }
 }
diff --git a/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.html b/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.html
index 6602078d3..f690a8e5d 100644
--- a/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.html
+++ b/libs/ui/src/lib/notifications/alert-dialog/alert-dialog.html
@@ -2,10 +2,22 @@
   <div mat-dialog-title [innerHTML]="title"></div>
 }
 
-@if (message) {
-  <div mat-dialog-content [innerHTML]="message"></div>
+@if (message || copyValue) {
+  <div mat-dialog-content>
+    @if (message) {
+      <div [innerHTML]="message"></div>
+    }
+    @if (copyValue) {
+      <div class="mt-2">{{ copyValue }}</div>
+    }
+  </div>
 }
 
 <div align="end" mat-dialog-actions>
   <button mat-button (click)="dialogRef.close()">{{ discardLabel }}</button>
+  @if (copyValue) {
+    <button color="primary" mat-flat-button (click)="onCopyToClipboard()">
+      <ng-container i18n>Copy</ng-container>
+    </button>
+  }
 </div>
diff --git a/libs/ui/src/lib/notifications/alert-dialog/interfaces/interfaces.ts b/libs/ui/src/lib/notifications/alert-dialog/interfaces/interfaces.ts
index fa330c463..7b2c16e52 100644
--- a/libs/ui/src/lib/notifications/alert-dialog/interfaces/interfaces.ts
+++ b/libs/ui/src/lib/notifications/alert-dialog/interfaces/interfaces.ts
@@ -1,4 +1,5 @@
 export interface AlertDialogParams {
+  copyValue?: string;
   discardLabel: string;
   message?: string;
   title: string;
diff --git a/libs/ui/src/lib/notifications/interfaces/interfaces.ts b/libs/ui/src/lib/notifications/interfaces/interfaces.ts
index 071597691..dcea7d53c 100644
--- a/libs/ui/src/lib/notifications/interfaces/interfaces.ts
+++ b/libs/ui/src/lib/notifications/interfaces/interfaces.ts
@@ -1,6 +1,7 @@
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 
 export interface AlertParams {
+  copyValue?: string;
   discardFn?: () => void;
   discardLabel?: string;
   message?: string;
diff --git a/libs/ui/src/lib/notifications/notification.service.ts b/libs/ui/src/lib/notifications/notification.service.ts
index b9a2562f7..389f52180 100644
--- a/libs/ui/src/lib/notifications/notification.service.ts
+++ b/libs/ui/src/lib/notifications/notification.service.ts
@@ -31,6 +31,7 @@ export class NotificationService {
     });
 
     dialog.componentInstance.initialize({
+      copyValue: aParams.copyValue,
       discardLabel: aParams.discardLabel,
       message: aParams.message,
       title: aParams.title