UI: Created new component - toggle-password; Added this component for all input fields type password

ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html

@@ -35,12 +35,8 @@
     <input matInput formControlName="password"
            autocomplete="new-password"
            (ngModelChange)="passwordChanged()"
-           [type]="hidePassword ? 'password' : 'text'">
+           type="password">
-    <button mat-icon-button matSuffix type="button"
+    <tb-toggle-password matSuffix></tb-toggle-password>
-            (click)="hidePassword = !hidePassword"
-            [attr.aria-pressed]="hidePassword">
-      <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
-    </button>
   </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

@@ -54,8 +54,6 @@ export class DeviceCredentialsMqttBasicComponent implements ControlValueAccessor
 
   deviceCredentialsMqttFormGroup: FormGroup;
 
-  hidePassword = true;
-
   private destroy$ = new Subject();
   private propagateChange = (v: any) => {};
 

ui-ngx/src/app/modules/home/components/sms/aws-sns-provider-configuration.component.html

@@ -26,6 +26,7 @@
   <mat-form-field class="mat-block">
     <mat-label translate>admin.aws-secret-access-key</mat-label>
     <input required type="password" matInput formControlName="secretAccessKey">
+    <tb-toggle-password matSuffix></tb-toggle-password>
     <mat-error *ngIf="awsSnsProviderConfigurationFormGroup.get('secretAccessKey').hasError('required')">
       {{ 'admin.aws-secret-access-key-required' | translate }}
     </mat-error>

ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html

@@ -37,6 +37,7 @@
   <mat-form-field class="mat-block">
     <mat-label translate>admin.twilio-account-token</mat-label>
     <input required type="password" autocomplete="new-password" matInput formControlName="accountToken">
+    <tb-toggle-password matSuffix></tb-toggle-password>
     <mat-error *ngIf="twilioSmsProviderConfigurationFormGroup.get('accountToken').hasError('required')">
       {{ 'admin.twilio-account-token-required' | translate }}
     </mat-error>

ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html

@@ -119,6 +119,7 @@
             <mat-form-field class="mat-block">
               <mat-label translate>admin.proxy-password</mat-label>
               <input matInput type="password" formControlName="proxyPassword" autocomplete="new-proxy-password">
+              <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
           </div>
           <mat-form-field class="mat-block">
@@ -130,6 +131,7 @@
             <mat-label translate>common.password</mat-label>
             <input matInput formControlName="password" type="password"
                    placeholder="{{ 'common.enter-password' | translate }}" autocomplete="new-password"/>
+            <tb-toggle-password matSuffix></tb-toggle-password>
           </mat-form-field>
           <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
             <button mat-raised-button type="button"

ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html

@@ -504,6 +504,7 @@
                                                 <mat-form-field fxFlex class="mat-block">
                                                   <mat-label translate>common.password</mat-label>
                                                   <input matInput type="password" formControlName="password" autocomplete="new-password">
+                                                  <tb-toggle-password matSuffix></tb-toggle-password>
                                                 </mat-form-field>
                                               </div>
                                             </section>

ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts

@@ -98,9 +98,9 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
   mapperConfigType = MapperConfigType;
   mapperConfigTypes = Object.keys(MapperConfigType);
   tenantNameStrategies = Object.keys(TenantNameStrategy);
-  protocols = Object.keys(DomainSchema);
+  protocols = Object.values(DomainSchema);
   domainSchemaTranslations = domainSchemaTranslations;
-  platformTypes = Object.keys(PlatformType);
+  platformTypes = Object.values(PlatformType);
   platformTypeTranslations = platformTypeTranslations;
 
   templateProvider = ['Custom'];

ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html

@@ -33,16 +33,19 @@
       <mat-label translate>profile.current-password</mat-label>
       <input matInput type="password" formControlName="currentPassword"/>
       <mat-icon class="material-icons" matPrefix>lock</mat-icon>
+      <tb-toggle-password matSuffix></tb-toggle-password>
     </mat-form-field>
     <mat-form-field class="mat-block">
       <mat-label translate>login.new-password</mat-label>
       <input matInput type="password" formControlName="newPassword"/>
       <mat-icon class="material-icons" matPrefix>lock</mat-icon>
+      <tb-toggle-password matSuffix></tb-toggle-password>
     </mat-form-field>
     <mat-form-field class="mat-block">
       <mat-label translate>login.new-password-again</mat-label>
       <input matInput type="password" formControlName="newPassword2"/>
       <mat-icon class="material-icons" matPrefix>lock</mat-icon>
+      <tb-toggle-password matSuffix></tb-toggle-password>
     </mat-form-field>
   </div>
   <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">

ui-ngx/src/app/modules/login/pages/login/create-password.component.html

@@ -32,11 +32,13 @@
               <mat-label translate>common.password</mat-label>
               <input matInput type="password" autofocus formControlName="password"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
+              <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
             <mat-form-field class="mat-block">
               <mat-label translate>login.password-again</mat-label>
               <input matInput type="password" formControlName="password2"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
+              <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
             <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
                  fxLayoutAlign.gt-xs="center start">

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -51,12 +51,8 @@
             </mat-form-field>
             <mat-form-field>
               <mat-label translate>common.password</mat-label>
-              <input id="password-input" matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password"/>
+              <input id="password-input" matInput type="password" formControlName="password"/>
-	                   <button mat-icon-button matSuffix type="button"
+              <tb-toggle-password matSuffix></tb-toggle-password>
-                         (click)="hidePassword = !hidePassword"
-                         [attr.aria-pressed]="hidePassword">
-                         <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
-                     </button>
               <mat-icon matPrefix>lock</mat-icon>
             </mat-form-field>
             <div fxLayoutAlign="end center" class="forgot-password">

ui-ngx/src/app/modules/login/pages/login/login.component.ts

@@ -37,8 +37,7 @@ export class LoginComponent extends PageComponent implements OnInit {
     password: ''
   });
   oauth2Clients: Array<OAuth2ClientInfo> = null;
-  hidePassword = true;
+
-  
   constructor(protected store: Store<AppState>,
               private authService: AuthService,
               public fb: FormBuilder,

ui-ngx/src/app/modules/login/pages/login/reset-password.component.html

@@ -35,11 +35,13 @@
               <mat-label translate>login.new-password</mat-label>
               <input matInput type="password" autofocus formControlName="newPassword"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
+              <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
             <mat-form-field class="mat-block">
               <mat-label translate>login.new-password-again</mat-label>
               <input matInput type="password" formControlName="newPassword2"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
+              <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
             <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
                  fxLayoutAlign.gt-sm="center start">

ui-ngx/src/app/shared/components/button/toggle-password.component.html

@@ -0,0 +1,20 @@
+<!--
+
+    Copyright © 2016-2021 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<button mat-icon-button (click)="togglePassword($event)" [attr.aria-pressed]="showPassword" *ngIf="!hideToggle">
+  <mat-icon>{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>
+</button>

ui-ngx/src/app/shared/components/button/toggle-password.component.ts

@@ -0,0 +1,44 @@
+///
+/// Copyright © 2016-2021 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { AfterViewInit, Component, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'tb-toggle-password',
+  templateUrl: 'toggle-password.component.html',
+  styleUrls: [],
+})
+export class TogglePasswordComponent implements AfterViewInit {
+  showPassword = false;
+  hideToggle = false;
+  private input: HTMLInputElement = null;
+
+  constructor(private hostElement: ElementRef) { }
+
+  togglePassword($event: Event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    this.showPassword = !this.showPassword;
+    this.input.type = this.showPassword ? 'text' : 'password';
+  }
+
+  ngAfterViewInit() {
+    this.input = this.hostElement.nativeElement.closest('mat-form-field').querySelector('input[type="password"]');
+    if (this.input === null) {
+      this.hideToggle = true;
+    }
+  }
+}

ui-ngx/src/app/shared/shared.module.ts

@@ -144,6 +144,7 @@ import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-i
 import { OtaPackageAutocompleteComponent } from '@shared/components/ota-package/ota-package-autocomplete.component';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
 import { CopyButtonComponent } from '@shared/components/button/copy-button.component';
+import { TogglePasswordComponent } from '@shared/components/button/toggle-password.component';
 
 @NgModule({
   providers: [
@@ -242,7 +243,8 @@ import { CopyButtonComponent } from '@shared/components/button/copy-button.compo
     ContactComponent,
     OtaPackageAutocompleteComponent,
     WidgetsBundleSearchComponent,
-    CopyButtonComponent
+    CopyButtonComponent,
+    TogglePasswordComponent
   ],
   imports: [
     CommonModule,
@@ -415,7 +417,8 @@ import { CopyButtonComponent } from '@shared/components/button/copy-button.compo
     ContactComponent,
     OtaPackageAutocompleteComponent,
     WidgetsBundleSearchComponent,
-    CopyButtonComponent
+    CopyButtonComponent,
+    TogglePasswordComponent
   ]
 })
 export class SharedModule { }