3

I've seen many posts about disabling Update Password prompts, but these are all about completely disabling autocomplete of passwords.

What I want to do is conditionally prevent Update Password prompts, specifically when I click Cancel in a change-password dialog. After all, if you decide you want to cancel doing a password change, you wouldn't want to update your web browser with the change you decided not to make.

I've tried a like having the cancel button empty all password fields (original, new, confirmed new), any changing the input type of password fields from password to hidden, but that doesn't help. I think the browser's decision to offer the Update Password happens sooner than any of my attempts to defeat it can kick in.

Any ideas? Here are the relevant parts of the dialog HTML:


  <mat-form-field appearance="fill" >
    <mat-label>Username</mat-label>
    <input matInput [ngModel]="userName" disabled>
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Current Password</mat-label>
    <input matInput type="password" [(ngModel)]="currentPassword" (input)="onInput()" (focus)="onFocus('curr')" (blur)="onBlur('curr')"
        [errorStateMatcher]="esm('currentPassword')">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>New Password</mat-label>
    <input matInput [(ngModel)]="newPassword" type="password" (input)="onInput()" (focus)="onFocus('new')" (blur)="onBlur('new')"
        [errorStateMatcher]="esm('newPassword')">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Confirm New Password</mat-label>
    <input matInput [(ngModel)]="confirmPassword" type="password" (input)="onInput()" (focus)="onFocus('conf')" (blur)="onBlur('conf')"
        [errorStateMatcher]="esm('confirmPassword')">
  </mat-form-field>

  <mat-dialog-actions fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center">
    <button mat-stroked-button type="button" class="cancel-btn" (click)="onCancel()">CANCEL</button>

    <button mat-flat-button type="submit" class="submit-btn" ngbAutofocus (click)="onSubmit()"
        [disabled]="!valid || processing" [style.opacity]="!valid || processing ? '0.33' : '1'">
      SUBMIT<app-spinner-overlay [processing]="processing"></app-spinner-overlay>
    </button>
  </mat-dialog-actions>
kshetline
  • 12,547
  • 4
  • 37
  • 73

2 Answers2

0

I tried various solutions:

  • emptying the input value on click
  • changing the input type on click
  • using a button type=button instead of submit
  • leaving the page with document.location
  • ..

The only working one I found was to use an <a>, and even then, catching click event and playing with document.location was popping out the Update Password dialog.

So I ended up with a full URL with parameters in the href of my anchor. This works on Chrome and Edge.

I hope this help.

Henry Woody
  • 14,024
  • 7
  • 39
  • 56
Pierre del Perugia
  • 1
  • 1
-1

It has to do with the type of the input field. It should be changed to "text" instead but this makes things a bit trickier.

This might help.

Sami
  • 16
  • 1
  • 4
  • It looks like that code would _always_ disable the save prompt, rather than conditionally after hitting my Cancel button. I tried similar tricks already myself, but with the input field starting out as a normal password field (so that password autofill can work when I want it to), and it seems that once I click my Cancel button, any JavaScript games I try to play come too late. – kshetline Sep 04 '22 at 18:50