From 45b6a738ca21091daa310ea5e5759bc24e1bd7f6 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 3 May 2023 14:59:41 +0300
Subject: [PATCH] UI: Add gerenator for access token for device credentials

---
 .../device/device-credentials.component.html           | 10 ++++++++++
 .../components/device/device-credentials.component.ts  |  6 +++++-
 ui-ngx/src/assets/locale/locale.constant-en_US.json    |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
index befff7253f..2433af82f2 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -29,6 +29,16 @@
       <mat-form-field class="mat-block">
         <mat-label translate>device.access-token</mat-label>
         <input matInput formControlName="credentialsId" required>
+        <button type="button"
+                matSuffix
+                mat-icon-button
+                aria-label="Generate"
+                matTooltip="{{ 'device.generate-access-token' | translate }}"
+                matTooltipPosition="above"
+                (click)="generate('credentialsId')"
+                *ngIf="!deviceCredentialsFormGroup.get('credentialsId').value">
+          <mat-icon>autorenew</mat-icon>
+        </button>
         <tb-copy-button
           matSuffix
           inputAction
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
index 2e2f20eb24..6e61e13064 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
@@ -34,7 +34,7 @@ import {
 } from '@shared/models/device.models';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { isDefinedAndNotNull } from '@core/utils';
+import { generateSecret, isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-device-credentials',
@@ -181,4 +181,8 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
         break;
     }
   }
+
+  public generate(formControlName: string) {
+    this.deviceCredentialsFormGroup.get(formControlName).patchValue(generateSecret(12));
+  }
 }
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 0d8472485b..d41ada03f8 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1241,6 +1241,7 @@
         "generate-client-id": "Generate Client ID",
         "generate-user-name": "Generate User name",
         "generate-password": "Generate Password",
+        "generate-access-token": "Generate Access Token",
         "lwm2m-security-config": {
           "identity": "Client Identity",
           "identity-required": "Client Identity is required.",