From 59cf88a656e344bb8a2e29304cf9d6f0faa8f876 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Thu, 20 Jun 2024 12:08:35 +0300
Subject: [PATCH] Gateway - General Config - Security: added static height for
 username field

---
 .../gateway-configuration.component.html      | 100 +++++++++---------
 1 file changed, 51 insertions(+), 49 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
index 8aeaeef2ed..8c6224e116 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
@@ -93,64 +93,66 @@
                       matTooltip="{{ 'gateway.hints.token' | translate }}">info_outlined
             </mat-icon>
           </mat-form-field>
-          <div class="tb-form-row no-border no-padding tb-standard-fields"
-               *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
-            <mat-form-field appearance="outline" class="flex" subscriptSizing="dynamic">
-              <mat-label translate>security.clientId</mat-label>
-              <input matInput formControlName="clientId"/>
-              <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>
-            </mat-form-field>
-            <mat-form-field appearance="outline" class="flex" subscriptSizing="dynamic">
-              <mat-label translate>security.username</mat-label>
-              <input matInput formControlName="username"/>
-              <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')">
-                {{ 'security.username-required' | translate }}
-              </mat-error>
+          <section>
+            <div class="tb-form-row no-border no-padding tb-standard-fields"
+                 *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>security.clientId</mat-label>
+                <input matInput formControlName="clientId"/>
+                <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>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>security.username</mat-label>
+                <input matInput formControlName="username"/>
+                <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>
+              </mat-form-field>
+            </div>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%"
+                            *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
+              <mat-label translate>gateway.password</mat-label>
+              <input matInput formControlName="password"/>
               <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 }}"
+                *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.username' | translate }}">info_outlined
+                        matTooltip="{{ 'gateway.hints.password' | translate }}">info_outlined
               </mat-icon>
             </mat-form-field>
-          </div>
-          <mat-form-field appearance="outline" subscriptSizing="dynamic"
-                          *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
-            <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>
-          </mat-form-field>
+          </section>
           <tb-error style="margin-top: -12px; display: block;" fxFlex="100"
                     *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
                     [error]="gatewayConfigGroup.get('thingsboard.security').hasError('atLeastOne') ?