Support toggle password field visibility

src-ui/src/app/components/common/input/password/password.component.html

@@ -1,8 +1,15 @@
 <div class="mb-3">
   <label class="form-label" [for]="inputId">{{title}}</label>
-  <input #inputField type="password" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
-  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+  <div class="input-group" [class.is-invalid]="error">
+    <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
+    <button *ngIf="showReveal" type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#eye" />
+      </svg>
+    </button>
+  </div>
   <div class="invalid-feedback">
     {{error}}
   </div>
+  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
 </div>

src-ui/src/app/components/common/input/password/password.component.spec.ts

@@ -5,6 +5,7 @@ import {
   NG_VALUE_ACCESSOR,
 } from '@angular/forms'
 import { PasswordComponent } from './password.component'
+import { By } from '@angular/platform-browser'
 
 describe('PasswordComponent', () => {
   let component: PasswordComponent
@@ -33,4 +34,21 @@ describe('PasswordComponent', () => {
     // fixture.detectChanges()
     // expect(component.value).toEqual('foo')
   })
+
+  it('should support toggling field visibility', () => {
+    expect(component.inputField.nativeElement.type).toEqual('password')
+    component.showReveal = true
+    fixture.detectChanges()
+    fixture.debugElement.query(By.css('button')).triggerEventHandler('click')
+    fixture.detectChanges()
+    expect(component.inputField.nativeElement.type).toEqual('text')
+  })
+
+  it('should empty field if password is obfuscated', () => {
+    component.value = '*********'
+    component.toggleVisibility()
+    expect(component.value).toEqual('')
+    component.toggleVisibility()
+    expect(component.value).toEqual('*********')
+  })
 })

src-ui/src/app/components/common/input/password/password.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core'
+import { Component, Input, forwardRef } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -15,6 +15,20 @@ import { AbstractInputComponent } from '../abstract-input'
   styleUrls: ['./password.component.scss'],
 })
 export class PasswordComponent extends AbstractInputComponent<string> {
+  @Input()
+  showReveal: boolean = false
+
+  public textVisible: boolean = false
+
+  public toggleVisibility(): void {
+    this.textVisible = !this.textVisible
+    if (this.textVisible && this.value?.replace(/\*/g, '').length === 0) {
+      this.writeValue('')
+    } else if (!this.textVisible && this.value?.length === 0) {
+      this.writeValue('*********')
+    }
+  }
+
   constructor() {
     super()
   }

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html

@@ -15,7 +15,7 @@
             </div>
           </div>
         </div>
-        <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [error]="error?.password"></pngx-input-password>
+        <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [showReveal]="true" [error]="error?.password"></pngx-input-password>
         <div ngbAccordion>
           <div ngbAccordionItem="first" [collapsed]="!showPasswordConfirm" class="border-0 bg-transparent">
             <div ngbAccordionCollapse>