UI: Refactoring

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>
+    <ng-template #copyClientId>
       <tb-copy-button
         matSuffix
-      inputAction
+        [miniButton]="false"
-      *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>
     <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>
+    <ng-template #copyUserName>
       <tb-copy-button
         matSuffix
-      inputAction
+        [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>
+    <ng-template #copyPassword>
       <tb-copy-button
         matSuffix
-      inputAction
+        [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') ?

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));
   }
 }

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>
+        <ng-template #copyAccessToken>
           <tb-copy-button
             matSuffix
-          inputAction
+            [miniButton]="false"
-          *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>
         <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 }}"

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));
   }
 }

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 }}"

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"

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;

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>();