From f948113c0f27bb671d4fb16c112095e2860fe92e Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 21 Nov 2023 21:40:11 -0800
Subject: [PATCH] Support toggle password field visibility

---
 .../input/password/password.component.html     | 11 +++++++++--
 .../input/password/password.component.spec.ts  | 18 ++++++++++++++++++
 .../input/password/password.component.ts       | 16 +++++++++++++++-
 .../profile-edit-dialog.component.html         |  2 +-
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/common/input/password/password.component.html b/src-ui/src/app/components/common/input/password/password.component.html
index 4822be877..92ddce96c 100644
--- a/src-ui/src/app/components/common/input/password/password.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/common/input/password/password.component.spec.ts b/src-ui/src/app/components/common/input/password/password.component.spec.ts
index 80ad853d7..6d387473e 100644
--- a/src-ui/src/app/components/common/input/password/password.component.spec.ts
+++ b/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('*********')
+  })
 })
diff --git a/src-ui/src/app/components/common/input/password/password.component.ts b/src-ui/src/app/components/common/input/password/password.component.ts
index ce0284a77..450ae58c7 100644
--- a/src-ui/src/app/components/common/input/password/password.component.ts
+++ b/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()
   }
diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
index 67332e236..cfeb24b3b 100644
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+++ b/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>