4 files changed, 47 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.html b/client/src/app/shared/shared-main/buttons/copy-button.component.html
new file mode 100644
index 000000000..a99c0a93a
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.html
@@ -0,0 +1,9 @@
+<button
+  class="btn btn-outline-secondary btn-sm copy-button"
+  [cdkCopyToClipboard]="value" (click)="activateCopiedMessage()"
+  [title]="title" [ngClass]="{ 'is-input-group': isInputGroup }"
+>
+  <my-global-icon iconName="copy"></my-global-icon>
+
+  <ng-content></ng-content>
+</button>
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.scss b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
new file mode 100644
index 000000000..7e3720418
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
@@ -0,0 +1,15 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+button:not(.is-input-group) {
+  border: 0;
+}
+
+.is-input-group {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+my-global-icon {
+  width: 15px;
+}
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.ts b/client/src/app/shared/shared-main/buttons/copy-button.component.ts
new file mode 100644
index 000000000..aac9ab8b0
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core'
+import { Notifier } from '@app/core'
+
+@Component({
+  selector: 'my-copy-button',
+  styleUrls: [ './copy-button.component.scss' ],
+  templateUrl: './copy-button.component.html'
+})
+export class CopyButtonComponent {
+  @Input() value: string
+  @Input() title: string
+  @Input() notification: string
+  @Input() isInputGroup = false
+
+  constructor (private notifier: Notifier) {
+
+  }
+
+  activateCopiedMessage () {
+    if (this.notification) this.notifier.success(this.notification)
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/index.ts b/client/src/app/shared/shared-main/buttons/index.ts
index 775a47a39..75efbdea3 100644
--- a/client/src/app/shared/shared-main/buttons/index.ts
+++ b/client/src/app/shared/shared-main/buttons/index.ts
@@ -1,4 +1,5 @@
 export * from './action-dropdown.component'
 export * from './button.component'
+export * from './copy-button.component'
 export * from './delete-button.component'
 export * from './edit-button.component'