Make password field empty on focus & disable visibility toggle if dummy password

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>

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()
   })
 })

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
   }
 }

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) {