,
private authService: AuthService,
public fb: FormBuilder,
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index 3e1923ef37..59d03d7a9a 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -35,11 +35,13 @@
login.new-password
lock
+
login.new-password-again
lock
+
diff --git a/ui-ngx/src/app/shared/components/button/toggle-password.component.html b/ui-ngx/src/app/shared/components/button/toggle-password.component.html
new file mode 100644
index 0000000000..0f3843f65d
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/button/toggle-password.component.html
@@ -0,0 +1,20 @@
+
+
diff --git a/ui-ngx/src/app/shared/components/button/toggle-password.component.ts b/ui-ngx/src/app/shared/components/button/toggle-password.component.ts
new file mode 100644
index 0000000000..a4c4bb9aec
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index f2bcdc97a4..02c5824807 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/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 { }