Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00
Code Issues Projects Releases Wiki Activity

[PM-8524] Add optional passwordInput to BitPasswordInputToggle to support conditionally rendered password toggle buttons

Browse Source
This commit is contained in:
Shane Melton 2024-07-09 13:00:53 -07:00
parent 9c1c85155b
commit e76a0ccfe8
No known key found for this signature in database
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
libs/components/src/form-field/password-input-toggle.directive.ts
View File

@ -29,6 +29,17 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
@HostBinding("attr.title") title = this.i18nService.t("toggleVisibility"); @HostBinding("attr.title") title = this.i18nService.t("toggleVisibility");
@HostBinding("attr.aria-label") label = this.i18nService.t("toggleVisibility"); @HostBinding("attr.aria-label") label = this.i18nService.t("toggleVisibility");
/**
* Optional input control element to toggle the type of. If not provided, it will use the input element from the parent form field.
* Primarily used for scenarios where the toggle button is used with an *ngIf directive and the parent form field may be unavailable.
*/
@Input()
passwordInput?: HTMLInputElement;
get formFieldInput() {
return this.passwordInput ?? this.formField.input;
}
/** /**
* Click handler to toggle the state of the input type. * Click handler to toggle the state of the input type.
*/ */
@ -38,7 +49,7 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
this.update(); this.update();
this.formField.input?.focus(); this.formFieldInput?.focus();
} }
constructor( constructor(
@ -56,15 +67,15 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
} }
ngAfterContentInit(): void { ngAfterContentInit(): void {
this.toggled = this.formField.input.type !== "password"; this.toggled = this.formFieldInput?.type !== "password";
this.button.icon = this.icon; this.button.icon = this.icon;
} }
private update() { private update() {
this.button.icon = this.icon; this.button.icon = this.icon;
if (this.formField.input?.type != null) { if (this.formFieldInput?.type != null) {
this.formField.input.type = this.toggled ? "text" : "password"; this.formFieldInput.type = this.toggled ? "text" : "password";
this.formField.input.spellcheck = this.toggled ? false : undefined; this.formFieldInput.spellcheck = this.toggled ? false : undefined;
} }
} }
} }