I'm currently developing an Angular application with a "change current password" functionality. But if I type my old password and new password in the associated input fields, Chrome recognises them as a username and password, although the fields were each declared as password types. So in my understandings, Chrome should not have the opportunity to save a username out of the form, because there is no input field with type="text" or autocomplete="username". Here's some code to specify my problem:
<form class="changePwForm" [formGroup]="changePwForm">
<mat-form-field appearance="legacy">
<mat-label>Old Password</mat-label>
<input matInput [type]="hideOldPw ? 'password' : text" formControlName="oldPassword" autocomplete="current-password">
<button mat-icon-button matSuffix (click)="hideOldPw = !hideOldPw" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hideOldPw ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<br>
<mat-form-field appearance="legacy">
<mat-label>New password</mat-label>
<input matInput [type]="hideNewPw ? 'password' : text" formControlName="newPassword" autocomplete="new-password">
<button mat-icon-button matSuffix (click)="hideNewPw = !hideNewPw" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hideNewPw ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<mat-form-field appearance="legacy">
<mat-label>Repeat new password</mat-label>
<input matInput [type]="hideNewPwRepeat ? 'password' : text" formControlName="newPasswordRepeat" [errorStateMatcher]="errorStateMatcher" autocomplete="new-password">
<button mat-icon-button matSuffix (click)="hideNewPwRepeat = !hideNewPwRepeat" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hideNewPwRepeat ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-error *ngIf="changePwForm.hasError('notSame')">
Passwords do not match
</mat-error>
</mat-form-field>
<button mat-stroked-button type="submit" [disabled]="!changePwForm.valid" (click)="onSubmit()">Submit</button>
</form>
Results in:
If I type "foo" in the Old Password input and "bar" as the new password and navigate away from my "change password" view, it will result in the following save password prompt:
Wrong save password prompt:
As you can see, the old password is interpreted as the username. That's quite problematic if somebody wants to demonstrate the functionality in front of a group of people in a live environment. Especially if he or she uses his "old password" in other domains.
Has anybody any idea how to disable or suppress this behaviour? Or if it isn't possible to disable it, maybe there is a way to change the behaviour so that the current user is the value of the username part. I've already tried to add a readonly input field with type=text and autocomplete="username", but it hasn't worked for me.
