From 954782ca3b826eddc84c7c38bc0696d8f08c12de Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:48:40 -0800
Subject: [PATCH] Make password field empty on focus & disable visibility
 toggle if dummy password

---
 .../input/password/password.component.html     |  4 ++--
 .../input/password/password.component.spec.ts  | 17 +++++++++++------
 .../input/password/password.component.ts       | 18 +++++++++++++-----
 .../profile-edit-dialog.component.ts           |  2 ++
 4 files changed, 28 insertions(+), 13 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 92ddce96c..5414f034a 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,8 @@
 <div class="mb-3">
   <label class="form-label" [for]="inputId">{{title}}</label>
   <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">
+    <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled">
+    <button *ngIf="showReveal" type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#eye" />
       </svg>
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 6d387473e..1788104a6 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
@@ -36,19 +36,24 @@ describe('PasswordComponent', () => {
   })
 
   it('should support toggling field visibility', () => {
-    expect(component.inputField.nativeElement.type).toEqual('password')
+    expect(input.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')
+    expect(input.type).toEqual('text')
   })
 
-  it('should empty field if password is obfuscated', () => {
+  it('should empty field if password is obfuscated on focus', () => {
     component.value = '*********'
-    component.toggleVisibility()
+    component.onFocus()
     expect(component.value).toEqual('')
-    component.toggleVisibility()
-    expect(component.value).toEqual('*********')
+    component.onFocusOut()
+    expect(component.value).toEqual('**********')
+  })
+
+  it('should disable toggle button if no real password', () => {
+    component.value = '*********'
+    expect(component.disableRevealToggle).toBeTruthy()
   })
 })
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 450ae58c7..b1f03354f 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
@@ -22,14 +22,22 @@ export class PasswordComponent extends AbstractInputComponent<string> {
 
   public toggleVisibility(): void {
     this.textVisible = !this.textVisible
-    if (this.textVisible && this.value?.replace(/\*/g, '').length === 0) {
+  }
+
+  public onFocus() {
+    if (this.value?.replace(/\*/g, '').length === 0) {
       this.writeValue('')
-    } else if (!this.textVisible && this.value?.length === 0) {
-      this.writeValue('*********')
     }
   }
 
-  constructor() {
-    super()
+  public onFocusOut() {
+    if (this.value?.length === 0) {
+      this.writeValue('**********')
+      this.onChange(this.value)
+    }
+  }
+
+  get disableRevealToggle(): boolean {
+    return this.value?.replace(/\*/g, '').length === 0
   }
 }
diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
index d9e31b522..57196846a 100644
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
@@ -112,6 +112,8 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
   }
 
   onPasswordChange(): void {
+    console.log(this.currentPassword, this.newPassword)
+
     this.showPasswordConfirm = this.currentPassword !== this.newPassword
 
     if (this.showPasswordConfirm) {