From d0c39416b66b0f4ee68313abd6bad44a13f30232 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 17 Nov 2020 17:49:32 +0200
Subject: [PATCH] UI: Added copied button device provision parameters in device
 profile

---
 ...ile-provision-configuration.component.html | 16 ++++++++++++++++
 ...ofile-provision-configuration.component.ts | 19 ++++++++++++++++++-
 .../assets/locale/locale.constant-en_US.json  |  4 ++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
index 2e9299f0cf..9af62c421d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -31,6 +31,14 @@
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>device-profile.provision-device-key</mat-label>
       <input matInput formControlName="provisionDeviceKey" required/>
+      <button mat-button matSuffix mat-icon-button
+              ngxClipboard
+              [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
+              (cbOnSuccess)="onProvisionCopied(true)"
+              matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
+      </button>
       <mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')">
         {{ 'device-profile.provision-device-key-required' | translate }}
       </mat-error>
@@ -38,6 +46,14 @@
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>device-profile.provision-device-secret</mat-label>
       <input matInput formControlName="provisionDeviceSecret" required/>
+      <button mat-button matSuffix mat-icon-button
+              ngxClipboard
+              [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
+              (cbOnSuccess)="onProvisionCopied(false)"
+              matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
+      </button>
       <mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')">
         {{ 'device-profile.provision-device-secret-required' | translate }}
       </mat-error>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
index e25c07e005..393aadb80c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
@@ -33,6 +33,10 @@ import {
   deviceProvisionTypeTranslationMap
 } from '@shared/models/device.models';
 import { generateSecret, isDefinedAndNotNull } from '@core/utils';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'tb-device-profile-provision-configuration',
@@ -73,7 +77,9 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
 
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: FormBuilder) {
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder,
+              private translate: TranslateService) {
   }
 
   ngOnInit(): void {
@@ -149,4 +155,15 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
     }
     this.propagateChange(deviceProvisionConfiguration);
   }
+
+  onProvisionCopied(isKey: boolean) {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant(isKey ? 'device-profile.provision-key-copied-message' : 'device-profile.provision-secret-copied-message'),
+        type: 'success',
+        duration: 1200,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+  }
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index ad79c56968..cddc73415e 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -950,8 +950,12 @@
         "provision-strategy-check-pre-provisioned": "Check for pre-provisioned devices",
         "provision-device-key": "Provision device key",
         "provision-device-key-required": "Provision device key is required.",
+        "copy-provision-key": "Copy provision key",
+        "provision-key-copied-message": "Provision key has been copied to clipboard",
         "provision-device-secret": "Provision device secret",
         "provision-device-secret-required": "Provision device secret is required.",
+        "copy-provision-secret": "Copy provision secret",
+        "provision-secret-copied-message": "Provision secret has been copied to clipboard",
         "condition": "Condition",
         "condition-type": "Condition type",
         "condition-type-simple": "Simple",