UI: minor improvements for gateway dashboard

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html

@@ -80,6 +80,15 @@
             <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').hasError('required')">
               {{ 'security.access-token-required' | translate }}
             </mat-error>
+            <tb-copy-button
+              matSuffix
+              miniButton="false"
+              *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').value"
+              [copyText]="gatewayConfigGroup.get('thingsboard.security.accessToken').value"
+              tooltipText="{{ 'device.copy-access-token' | translate }}"
+              tooltipPosition="above"
+              icon="content_copy">
+            </tb-copy-button>
             <mat-icon matIconSuffix style="cursor:pointer;"
                       matTooltip="{{ 'gateway.hints.token' | translate }}">info_outlined
             </mat-icon>
@@ -92,6 +101,15 @@
               <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').hasError('required')">
                 {{ 'security.clientId-required' | translate }}
               </mat-error>
+              <tb-copy-button
+                matSuffix
+                miniButton="false"
+                *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').value"
+                [copyText]="gatewayConfigGroup.get('thingsboard.security.clientId').value"
+                tooltipText="{{ 'gateway.copy-client-id' | translate }}"
+                tooltipPosition="above"
+                icon="content_copy">
+              </tb-copy-button>
               <mat-icon matIconSuffix style="cursor:pointer;"
                         matTooltip="{{ 'gateway.hints.client-id' | translate }}">info_outlined
               </mat-icon>
@@ -102,6 +120,15 @@
               <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')">
                 {{ 'security.username-required' | translate }}
               </mat-error>
+              <tb-copy-button
+                matSuffix
+                miniButton="false"
+                *ngIf="gatewayConfigGroup.get('thingsboard.security.username').value"
+                [copyText]="gatewayConfigGroup.get('thingsboard.security.username').value"
+                tooltipText="{{ 'gateway.copy-username' | translate }}"
+                tooltipPosition="above"
+                icon="content_copy">
+              </tb-copy-button>
               <mat-icon matIconSuffix style="cursor:pointer;"
                         matTooltip="{{ 'gateway.hints.username' | translate }}">info_outlined
               </mat-icon>
@@ -109,8 +136,17 @@
           </div>
           <mat-form-field appearance="outline" subscriptSizing="dynamic"
                           *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
-            <mat-label translate>security.password</mat-label>
+            <mat-label translate>gateway.password</mat-label>
             <input matInput formControlName="password"/>
+            <tb-copy-button
+              matSuffix
+              miniButton="false"
+              *ngIf="gatewayConfigGroup.get('thingsboard.security.password').value"
+              [copyText]="gatewayConfigGroup.get('thingsboard.security.password').value"
+              tooltipText="{{ 'gateway.copy-password' | translate }}"
+              tooltipPosition="above"
+              icon="content_copy">
+            </tb-copy-button>
             <mat-icon matIconSuffix style="cursor:pointer;"
                       matTooltip="{{ 'gateway.hints.password' | translate }}">info_outlined
             </mat-icon>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss

@@ -97,5 +97,9 @@
       color: #9E9E9E;
     }
   }
+
+  .mat-mdc-form-field-icon-suffix {
+    display: flex;
+  }
 }
 

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts

@@ -21,7 +21,8 @@ import {
   FormBuilder,
   FormControl,
   FormGroup,
-  FormGroupDirective, NgForm,
+  FormGroupDirective,
+  NgForm,
   UntypedFormControl,
   ValidatorFn,
   Validators
@@ -175,8 +176,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
       class: [''],
       configuration: [''],
       configurationJson: [{}, [Validators.required]],
-        basicConfig: this.fb.group({
+      basicConfig: this.fb.group({})
-      })
     });
     this.connectorForm.disable();
   }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2757,6 +2757,9 @@
         "connectors-table-actions": "Actions",
         "connectors-table-key": "Key",
         "connectors-table-class": "Class",
+        "copy-username": "Copy username",
+        "copy-password": "Copy password",
+        "copy-client-id": "Copy client ID",
         "rpc-command-save-template": "Save Template",
         "rpc-command-send": "Send",
         "rpc-command-result": "Response",