From 79a0a06dcb8039e7b1cd9c5926c55893b7392c1f Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 3 May 2023 13:52:22 +0300
Subject: [PATCH 1/4] UI: Added action copy and generate for device credentials

---
 ...vice-credentials-mqtt-basic.component.html | 57 +++++++++++++++++++
 ...device-credentials-mqtt-basic.component.ts |  6 +-
 .../device/device-credentials.component.html  | 18 ++++++
 .../admin/oauth2-settings.component.html      |  3 +
 .../button/copy-button.component.html         |  1 +
 .../button/copy-button.component.scss         | 13 +++--
 .../button/copy-button.component.ts           |  5 ++
 .../assets/locale/locale.constant-en_US.json  |  8 +++
 8 files changed, 105 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
index 4025e34dda..03b0f7a28b 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
@@ -19,6 +19,25 @@
   <mat-form-field class="mat-block">
     <mat-label translate>device.client-id</mat-label>
     <input matInput formControlName="clientId">
+    <button type="button"
+            matSuffix
+            mat-icon-button
+            aria-label="Generate"
+            matTooltip="{{ 'device.generate-client-id' | translate }}"
+            matTooltipPosition="above"
+            (click)="generate('clientId')"
+            *ngIf="!deviceCredentialsMqttFormGroup.get('clientId').value">
+      <mat-icon>autorenew</mat-icon>
+    </button>
+    <tb-copy-button
+      matSuffix
+      inputAction
+      *ngIf="deviceCredentialsMqttFormGroup.get('clientId').value"
+      [copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
+      tooltipText="{{ 'device.copy-client-id' | translate }}"
+      tooltipPosition="above"
+      icon="content_copy">
+    </tb-copy-button>
     <mat-error *ngIf="deviceCredentialsMqttFormGroup.get('clientId').hasError('pattern')">
       {{ 'device.client-id-pattern' | translate }}
     </mat-error>
@@ -26,6 +45,25 @@
   <mat-form-field class="mat-block">
     <mat-label translate>device.user-name</mat-label>
     <input matInput formControlName="userName" [required]="!!deviceCredentialsMqttFormGroup.get('password').value">
+    <button type="button"
+            matSuffix
+            mat-icon-button
+            aria-label="Generate"
+            matTooltip="{{ 'device.generate-user-name' | translate }}"
+            matTooltipPosition="above"
+            (click)="generate('userName')"
+            *ngIf="!deviceCredentialsMqttFormGroup.get('userName').value">
+      <mat-icon>autorenew</mat-icon>
+    </button>
+    <tb-copy-button
+      matSuffix
+      inputAction
+      *ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
+      [copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
+      tooltipText="{{ 'device.copy-user-name' | translate }}"
+      tooltipPosition="above"
+      icon="content_copy">
+    </tb-copy-button>
     <mat-error *ngIf="deviceCredentialsMqttFormGroup.get('userName').hasError('required')">
       {{ 'device.user-name-required' | translate }}
     </mat-error>
@@ -37,6 +75,25 @@
            (ngModelChange)="passwordChanged()"
            type="password">
     <tb-toggle-password matSuffix></tb-toggle-password>
+    <button type="button"
+            matSuffix
+            mat-icon-button
+            aria-label="Generate"
+            matTooltip="{{ 'device.generate-password' | translate }}"
+            matTooltipPosition="above"
+            (click)="generate('password')"
+            *ngIf="!deviceCredentialsMqttFormGroup.get('password').value">
+      <mat-icon>autorenew</mat-icon>
+    </button>
+    <tb-copy-button
+      matSuffix
+      inputAction
+      *ngIf="deviceCredentialsMqttFormGroup.get('password').value"
+      [copyText]="deviceCredentialsMqttFormGroup.get('password').value"
+      tooltipText="{{ 'device.copy-password' | translate }}"
+      tooltipPosition="above"
+      icon="content_copy">
+    </tb-copy-button>
   </mat-form-field>
   <tb-error style="margin-top: -12px; display: block;"
             [error]="deviceCredentialsMqttFormGroup.hasError('atLeastOne') ?
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
index 4db3b51146..6a98e9969e 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
@@ -29,7 +29,7 @@ import {
 import { Subject } from 'rxjs';
 import { DeviceCredentialMQTTBasic } from '@shared/models/device.models';
 import { takeUntil } from 'rxjs/operators';
-import { isDefinedAndNotNull, isEmptyStr } from '@core/utils';
+import { generateSecret, isDefinedAndNotNull, isEmptyStr } from '@core/utils';
 
 @Component({
   selector: 'tb-device-credentials-mqtt-basic',
@@ -128,4 +128,8 @@ export class DeviceCredentialsMqttBasicComponent implements ControlValueAccessor
       return hasAtLeastOne ? null : {atLeastOne: true};
     };
   }
+
+  public generate(formControlName: string) {
+    this.deviceCredentialsMqttFormGroup.get(formControlName).patchValue(generateSecret(12));
+  }
 }
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 fe5149cfac..befff7253f 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,15 @@
       <mat-form-field class="mat-block">
         <mat-label translate>device.access-token</mat-label>
         <input matInput formControlName="credentialsId" required>
+        <tb-copy-button
+          matSuffix
+          inputAction
+          *ngIf="deviceCredentialsFormGroup.get('credentialsId').value"
+          [copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
+          tooltipText="{{ 'device.copy-access-token' | translate }}"
+          tooltipPosition="above"
+          icon="content_copy">
+        </tb-copy-button>
         <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('required')">
           {{ 'device.access-token-required' | translate }}
         </mat-error>
@@ -41,6 +50,15 @@
       <mat-form-field class="mat-block">
         <mat-label translate>device.certificate-pem-format</mat-label>
         <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
+        <tb-copy-button
+          matSuffix
+          inputAction
+          *ngIf="deviceCredentialsFormGroup.get('credentialsValue').value"
+          [copyText]="deviceCredentialsFormGroup.get('credentialsValue').value"
+          tooltipText="{{ 'device.copy-certificate' | translate }}"
+          tooltipPosition="above"
+          icon="content_copy">
+        </tb-copy-button>
         <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsValue').hasError('required')">
           {{ 'device.certificate-pem-format-required' | translate }}
         </mat-error>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index fb78ba0b97..00492970dc 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -95,6 +95,7 @@
                                         <input matInput [value]="redirectURI(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
+                                          inputAction
                                           color="primary"
                                           [copyText]="redirectURI(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -106,6 +107,7 @@
                                         <input matInput [value]="redirectURIMixed(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
+                                          inputAction
                                           color="primary"
                                           [copyText]="redirectURIMixed(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -164,6 +166,7 @@
                                         <textarea matInput formControlName="appSecret" rows="1" required></textarea>
                                         <tb-copy-button
                                           matSuffix
+                                          inputAction
                                           color="primary"
                                           [copyText]="mobileInfo.get('appSecret').value"
                                           tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 5311b2c947..77dc8a1378 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@@ -17,6 +17,7 @@
 -->
 <button mat-icon-button
         type="button"
+        [ngClass]="{'table-cell-action': !inputAction}"
         [color]="color"
         [disabled]="disabled"
         [matTooltip]="matTooltipText"
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
index ddb0134283..b53d65c407 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
@@ -13,20 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "../../../../theme";
+
 :host {
-  .mat-mdc-icon-button{
+  .table-cell-action {
     height: 32px;
     width: 32px;
     line-height: 32px;
     padding: 4px;
     vertical-align: middle;
-    .mat-icon.copied{
-      color: #00C851 !important;
-    }
+  }
+
+  .mat-icon.copied{
+    color: #00C851 !important;
   }
   &:hover{
     .mat-icon{
-      color: #28567E !important;
+      color: $tb-primary-color !important;
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.ts b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
index 372bdfd280..96b9376105 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.ts
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
@@ -19,6 +19,7 @@ import { ClipboardService } from 'ngx-clipboard';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { TranslateService } from '@ngx-translate/core';
 import { ThemePalette } from '@angular/material/core';
+import { coerceBoolean } from '@shared/decorators/coerce-boolean';
 
 @Component({
   selector: 'tb-copy-button',
@@ -55,6 +56,10 @@ export class CopyButtonComponent {
   @Input()
   color: ThemePalette;
 
+  @Input()
+  @coerceBoolean()
+  inputAction = false;
+
   @Output()
   successCopied = new EventEmitter<string>();
 
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 801aff32bf..0d8472485b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1233,6 +1233,14 @@
         "access-token-invalid": "Access token length must be from 1 to 32 characters.",
         "certificate-pem-format": "Certificate in PEM format",
         "certificate-pem-format-required": "Certificate is required.",
+        "copy-access-token": "Copy Access token",
+        "copy-certificate": "Copy Certificate",
+        "copy-client-id": "Copy Client ID",
+        "copy-user-name": "Copy User name",
+        "copy-password": "Copy Password",
+        "generate-client-id": "Generate Client ID",
+        "generate-user-name": "Generate User name",
+        "generate-password": "Generate Password",
         "lwm2m-security-config": {
           "identity": "Client Identity",
           "identity-required": "Client Identity is required.",

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 2/4] 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.",

From 4a53707124dcbc5f3ae3904c70656550ed1b71b9 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 3 May 2023 15:59:31 +0300
Subject: [PATCH 3/4] UI: Refactoring

---
 ...vice-credentials-mqtt-basic.component.html | 65 ++++++++++---------
 ...device-credentials-mqtt-basic.component.ts |  2 +-
 .../device/device-credentials.component.html  | 23 +++----
 .../device/device-credentials.component.ts    |  2 +-
 .../admin/oauth2-settings.component.html      |  6 +-
 .../button/copy-button.component.html         |  2 +-
 .../button/copy-button.component.scss         |  2 +-
 .../button/copy-button.component.ts           |  3 +-
 8 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
index 03b0f7a28b..692289b753 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
@@ -26,18 +26,19 @@
             matTooltip="{{ 'device.generate-client-id' | translate }}"
             matTooltipPosition="above"
             (click)="generate('clientId')"
-            *ngIf="!deviceCredentialsMqttFormGroup.get('clientId').value">
+            *ngIf="!deviceCredentialsMqttFormGroup.get('clientId').value; else copyClientId">
       <mat-icon>autorenew</mat-icon>
     </button>
-    <tb-copy-button
-      matSuffix
-      inputAction
-      *ngIf="deviceCredentialsMqttFormGroup.get('clientId').value"
-      [copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
-      tooltipText="{{ 'device.copy-client-id' | translate }}"
-      tooltipPosition="above"
-      icon="content_copy">
-    </tb-copy-button>
+    <ng-template #copyClientId>
+      <tb-copy-button
+        matSuffix
+        [miniButton]="false"
+        [copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
+        tooltipText="{{ 'device.copy-client-id' | translate }}"
+        tooltipPosition="above"
+        icon="content_copy">
+      </tb-copy-button>
+    </ng-template>
     <mat-error *ngIf="deviceCredentialsMqttFormGroup.get('clientId').hasError('pattern')">
       {{ 'device.client-id-pattern' | translate }}
     </mat-error>
@@ -52,18 +53,20 @@
             matTooltip="{{ 'device.generate-user-name' | translate }}"
             matTooltipPosition="above"
             (click)="generate('userName')"
-            *ngIf="!deviceCredentialsMqttFormGroup.get('userName').value">
+            *ngIf="!deviceCredentialsMqttFormGroup.get('userName').value; else copyUserName">
       <mat-icon>autorenew</mat-icon>
     </button>
-    <tb-copy-button
-      matSuffix
-      inputAction
-      *ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
-      [copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
-      tooltipText="{{ 'device.copy-user-name' | translate }}"
-      tooltipPosition="above"
-      icon="content_copy">
-    </tb-copy-button>
+    <ng-template #copyUserName>
+      <tb-copy-button
+        matSuffix
+        [miniButton]="false"
+        *ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
+        [copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
+        tooltipText="{{ 'device.copy-user-name' | translate }}"
+        tooltipPosition="above"
+        icon="content_copy">
+      </tb-copy-button>
+    </ng-template>
     <mat-error *ngIf="deviceCredentialsMqttFormGroup.get('userName').hasError('required')">
       {{ 'device.user-name-required' | translate }}
     </mat-error>
@@ -82,18 +85,20 @@
             matTooltip="{{ 'device.generate-password' | translate }}"
             matTooltipPosition="above"
             (click)="generate('password')"
-            *ngIf="!deviceCredentialsMqttFormGroup.get('password').value">
+            *ngIf="!deviceCredentialsMqttFormGroup.get('password').value; else copyPassword">
       <mat-icon>autorenew</mat-icon>
     </button>
-    <tb-copy-button
-      matSuffix
-      inputAction
-      *ngIf="deviceCredentialsMqttFormGroup.get('password').value"
-      [copyText]="deviceCredentialsMqttFormGroup.get('password').value"
-      tooltipText="{{ 'device.copy-password' | translate }}"
-      tooltipPosition="above"
-      icon="content_copy">
-    </tb-copy-button>
+    <ng-template #copyPassword>
+      <tb-copy-button
+        matSuffix
+        [miniButton]="false"
+        *ngIf="deviceCredentialsMqttFormGroup.get('password').value"
+        [copyText]="deviceCredentialsMqttFormGroup.get('password').value"
+        tooltipText="{{ 'device.copy-password' | translate }}"
+        tooltipPosition="above"
+        icon="content_copy">
+      </tb-copy-button>
+    </ng-template>
   </mat-form-field>
   <tb-error style="margin-top: -12px; display: block;"
             [error]="deviceCredentialsMqttFormGroup.hasError('atLeastOne') ?
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
index 6a98e9969e..4904aab324 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
@@ -130,6 +130,6 @@ export class DeviceCredentialsMqttBasicComponent implements ControlValueAccessor
   }
 
   public generate(formControlName: string) {
-    this.deviceCredentialsMqttFormGroup.get(formControlName).patchValue(generateSecret(12));
+    this.deviceCredentialsMqttFormGroup.get(formControlName).patchValue(generateSecret(20));
   }
 }
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 2433af82f2..c8dc23b733 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
@@ -36,18 +36,19 @@
                 matTooltip="{{ 'device.generate-access-token' | translate }}"
                 matTooltipPosition="above"
                 (click)="generate('credentialsId')"
-                *ngIf="!deviceCredentialsFormGroup.get('credentialsId').value">
+                *ngIf="!deviceCredentialsFormGroup.get('credentialsId').value; else copyAccessToken">
           <mat-icon>autorenew</mat-icon>
         </button>
-        <tb-copy-button
-          matSuffix
-          inputAction
-          *ngIf="deviceCredentialsFormGroup.get('credentialsId').value"
-          [copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
-          tooltipText="{{ 'device.copy-access-token' | translate }}"
-          tooltipPosition="above"
-          icon="content_copy">
-        </tb-copy-button>
+        <ng-template #copyAccessToken>
+          <tb-copy-button
+            matSuffix
+            [miniButton]="false"
+            [copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
+            tooltipText="{{ 'device.copy-access-token' | translate }}"
+            tooltipPosition="above"
+            icon="content_copy">
+          </tb-copy-button>
+        </ng-template>
         <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('required')">
           {{ 'device.access-token-required' | translate }}
         </mat-error>
@@ -62,7 +63,7 @@
         <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
         <tb-copy-button
           matSuffix
-          inputAction
+          [miniButton]="false"
           *ngIf="deviceCredentialsFormGroup.get('credentialsValue').value"
           [copyText]="deviceCredentialsFormGroup.get('credentialsValue').value"
           tooltipText="{{ 'device.copy-certificate' | translate }}"
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 6e61e13064..bc9af3867e 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
@@ -183,6 +183,6 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
   }
 
   public generate(formControlName: string) {
-    this.deviceCredentialsFormGroup.get(formControlName).patchValue(generateSecret(12));
+    this.deviceCredentialsFormGroup.get(formControlName).patchValue(generateSecret(20));
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index 00492970dc..dd1ae38c47 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -95,7 +95,7 @@
                                         <input matInput [value]="redirectURI(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
-                                          inputAction
+                                          [miniButton]="false"
                                           color="primary"
                                           [copyText]="redirectURI(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -107,7 +107,7 @@
                                         <input matInput [value]="redirectURIMixed(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
-                                          inputAction
+                                          [miniButton]="false"
                                           color="primary"
                                           [copyText]="redirectURIMixed(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -166,7 +166,7 @@
                                         <textarea matInput formControlName="appSecret" rows="1" required></textarea>
                                         <tb-copy-button
                                           matSuffix
-                                          inputAction
+                                          [miniButton]="false"
                                           color="primary"
                                           [copyText]="mobileInfo.get('appSecret').value"
                                           tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 77dc8a1378..640d467998 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@@ -17,7 +17,7 @@
 -->
 <button mat-icon-button
         type="button"
-        [ngClass]="{'table-cell-action': !inputAction}"
+        [ngClass]="{'mini-button': miniButton}"
         [color]="color"
         [disabled]="disabled"
         [matTooltip]="matTooltipText"
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
index b53d65c407..0818466a38 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
@@ -16,7 +16,7 @@
 @import "../../../../theme";
 
 :host {
-  .table-cell-action {
+  .mini-button {
     height: 32px;
     width: 32px;
     line-height: 32px;
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.ts b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
index 96b9376105..0b815a6ff9 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.ts
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
@@ -36,6 +36,7 @@ export class CopyButtonComponent {
   copyText: string;
 
   @Input()
+  @coerceBoolean()
   disabled = false;
 
   @Input()
@@ -58,7 +59,7 @@ export class CopyButtonComponent {
 
   @Input()
   @coerceBoolean()
-  inputAction = false;
+  miniButton = true;
 
   @Output()
   successCopied = new EventEmitter<string>();

From 69da3e63ebb05d4e98887a2fe3d4b47024f6bd5b Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 3 May 2023 16:07:07 +0300
Subject: [PATCH 4/4] UI: refactoring for decorator

---
 .../device/device-credentials-mqtt-basic.component.html     | 6 +++---
 .../components/device/device-credentials.component.html     | 4 ++--
 .../modules/home/pages/admin/oauth2-settings.component.html | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
index 692289b753..be71d3724e 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
@@ -32,7 +32,7 @@
     <ng-template #copyClientId>
       <tb-copy-button
         matSuffix
-        [miniButton]="false"
+        miniButton="false"
         [copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
         tooltipText="{{ 'device.copy-client-id' | translate }}"
         tooltipPosition="above"
@@ -59,7 +59,7 @@
     <ng-template #copyUserName>
       <tb-copy-button
         matSuffix
-        [miniButton]="false"
+        miniButton="false"
         *ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
         [copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
         tooltipText="{{ 'device.copy-user-name' | translate }}"
@@ -91,7 +91,7 @@
     <ng-template #copyPassword>
       <tb-copy-button
         matSuffix
-        [miniButton]="false"
+        miniButton="false"
         *ngIf="deviceCredentialsMqttFormGroup.get('password').value"
         [copyText]="deviceCredentialsMqttFormGroup.get('password').value"
         tooltipText="{{ 'device.copy-password' | translate }}"
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 c8dc23b733..303c46ef70 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
@@ -42,7 +42,7 @@
         <ng-template #copyAccessToken>
           <tb-copy-button
             matSuffix
-            [miniButton]="false"
+            miniButton="false"
             [copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
             tooltipText="{{ 'device.copy-access-token' | translate }}"
             tooltipPosition="above"
@@ -63,7 +63,7 @@
         <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
         <tb-copy-button
           matSuffix
-          [miniButton]="false"
+          miniButton="false"
           *ngIf="deviceCredentialsFormGroup.get('credentialsValue').value"
           [copyText]="deviceCredentialsFormGroup.get('credentialsValue').value"
           tooltipText="{{ 'device.copy-certificate' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index dd1ae38c47..bc5ffd3ae5 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -95,7 +95,7 @@
                                         <input matInput [value]="redirectURI(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
-                                          [miniButton]="false"
+                                          miniButton="false"
                                           color="primary"
                                           [copyText]="redirectURI(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -107,7 +107,7 @@
                                         <input matInput [value]="redirectURIMixed(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
-                                          [miniButton]="false"
+                                          miniButton="false"
                                           color="primary"
                                           [copyText]="redirectURIMixed(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -166,7 +166,7 @@
                                         <textarea matInput formControlName="appSecret" rows="1" required></textarea>
                                         <tb-copy-button
                                           matSuffix
-                                          [miniButton]="false"
+                                          miniButton="false"
                                           color="primary"
                                           [copyText]="mobileInfo.get('appSecret').value"
                                           tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"