add notification on copy in connector details component

CHANGELOG.md

@@ -22,6 +22,7 @@ please see [changelog_updates.md](docs/dev/changelog_updates.md).
   - Cleaned up dead links
 - Fixed an error with input validation that prevented the use of upper-case letters in zip codes [#21](https://github.com/sovity/authority-portal/issues/21)
 - Changed order of industry select options [#22](https://github.com/sovity/authority-portal/issues/22)
+- Added notification when user clicks on copy button [#24](https://github.com/sovity/authority-portal/issues/24)
 
 ### Known issues
 

authority-portal-frontend/src/app/core/utils/clipboard-utils.ts

@@ -10,15 +10,35 @@
  * Contributors:
  *      sovity GmbH - initial implementation
  */
+import {Injectable} from '@angular/core';
+import {ToastService} from '../toast-notifications/toast.service';
 
-export function copyToClipboard(text: string) {
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
+@Injectable({
+  providedIn: 'root',
+})
+export class ClipboardUtils {
+  constructor(private toastService: ToastService) {}
 
-  // Append the textarea to the document
-  document.body.appendChild(textarea);
-  textarea.select();
-  navigator.clipboard.writeText(text);
-  // Remove the textarea from the document
-  document.body.removeChild(textarea);
+  copyToClipboard(text: string | undefined) {
+    if (!text) {
+      this.toastService.showDanger('Nothing to copy');
+      return;
+    }
+
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+
+    document.body.appendChild(textarea);
+    textarea.select();
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        this.toastService.showSuccess('Copied to clipboard');
+      })
+      .catch(() => {
+        this.toastService.showDanger('Failed to copy to clipboard');
+      });
+
+    document.body.removeChild(textarea);
+  }
 }

authority-portal-frontend/src/app/pages/authority-connector-detail-page/authority-connector-detail-page/authority-connector-detail-page.component.ts

@@ -10,7 +10,6 @@
  * Contributors:
  *      sovity GmbH - initial implementation
  */
-
 import {Clipboard} from '@angular/cdk/clipboard';
 import {Component, HostBinding, Inject, OnDestroy, OnInit} from '@angular/core';
 import {Subject, takeUntil} from 'rxjs';
@@ -21,6 +20,7 @@ import {
   UserRoleDto,
 } from '@sovity.de/authority-portal-client';
 import {GlobalStateUtils} from 'src/app/core/global-state/global-state-utils';
+import {ClipboardUtils} from 'src/app/core/utils/clipboard-utils';
 import {
   getConnectorStatusText,
   getConnectorsTypeClasses,
@@ -61,7 +61,6 @@ export class AuthorityConnectorDetailPageComponent
   constructor(
     private store: Store,
     @Inject('childComponentInput') childComponentInput: ChildComponentInput,
-    private clipboard: Clipboard,
     private globalStateUtils: GlobalStateUtils,
   ) {
     this.connectorId = childComponentInput.id;
@@ -128,12 +127,6 @@ export class AuthorityConnectorDetailPageComponent
     this.store.dispatch(RefreshConnector);
   }
 
-  copyToClipboard(s: string | undefined) {
-    if (s) {
-      this.clipboard.copy(s);
-    }
-  }
-
   cancelDeleteConnector() {
     this.showModal = false;
   }

authority-portal-frontend/src/app/pages/component-registration-pages/register-central-component-page/register-central-component-page/register-central-component-page.component.ts

@@ -10,7 +10,6 @@
  * Contributors:
  *      sovity GmbH - initial implementation
  */
-
 import {
   Component,
   HostBinding,
@@ -28,7 +27,7 @@ import {
 } from '@sovity.de/authority-portal-client';
 import {APP_CONFIG, AppConfig} from 'src/app/core/config/app-config';
 import {GlobalStateUtils} from 'src/app/core/global-state/global-state-utils';
-import {copyToClipboard} from '../../../../core/utils/clipboard-utils';
+import {ClipboardUtils} from '../../../../core/utils/clipboard-utils';
 import {Reset, Submit} from '../state/register-central-component-page-actions';
 import {
   DEFAULT_REGISTER_CENTRAL_COMPONENT_PAGE_STATE,
@@ -62,6 +61,7 @@ export class RegisterCentralComponentPageComponent
     private store: Store,
     public form: RegisterCentralComponentPageForm,
     private globalStateUtils: GlobalStateUtils,
+    private clipboardUtils: ClipboardUtils,
   ) {}
 
   ngOnInit(): void {
@@ -79,7 +79,9 @@ export class RegisterCentralComponentPageComponent
   }
 
   copyToClipboard() {
-    copyToClipboard(this.state.createdCentralComponentId || '');
+    this.clipboardUtils.copyToClipboard(
+      this.state.createdCentralComponentId || '',
+    );
   }
 
   private startListeningToState() {

authority-portal-frontend/src/app/shared/components/business/connector-registering-success-message-page/connector-registering-success-message-page.component.ts

@@ -10,9 +10,8 @@
  * Contributors:
  *      sovity GmbH - initial implementation
  */
-
 import {Component, HostBinding, Input} from '@angular/core';
-import {copyToClipboard} from '../../../../core/utils/clipboard-utils';
+import {ClipboardUtils} from '../../../../core/utils/clipboard-utils';
 
 @Component({
   selector: 'app-connector-registering-success-message-page',
@@ -30,7 +29,9 @@ export class ConnectorRegisteringSuccessMessagePageComponent {
   @Input()
   connectorConfig: string = '...';
 
+  constructor(private clipboardUtils: ClipboardUtils) {}
+
   copyToClipboard() {
-    copyToClipboard(this.connectorConfig);
+    this.clipboardUtils.copyToClipboard(this.connectorConfig);
   }
 }

authority-portal-frontend/src/app/shared/components/business/shared-connector-detail/shared-connector-detail.component.ts

@@ -10,10 +10,9 @@
  * Contributors:
  *      sovity GmbH - initial implementation
  */
-
 import {Component, HostBinding, Input} from '@angular/core';
 import {ConnectorDetailDto} from '@sovity.de/authority-portal-client';
-import {copyToClipboard} from '../../../../core/utils/clipboard-utils';
+import {ClipboardUtils} from '../../../../core/utils/clipboard-utils';
 import {getConnectorStatusText} from '../../../../core/utils/ui-utils';
 
 @Component({
@@ -30,5 +29,10 @@ export class SharedConnectorDetailComponent {
   @Input() connector!: ConnectorDetailDto;
 
   getConnectorStatusText = getConnectorStatusText;
-  copyToClipboard = copyToClipboard;
+
+  constructor(private clipboardUtils: ClipboardUtils) {}
+
+  copyToClipboard(param: string) {
+    this.clipboardUtils.copyToClipboard(param);
+  }
 }