Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-13 00:51:45 +01:00
Code Issues Projects Releases Wiki Activity

remove static element ref

Browse Source
This commit is contained in:
rr-bw 2024-09-12 13:29:11 -07:00
parent 6ffaeae331
commit bb5f88f8c7
No known key found for this signature in database
GPG Key ID: 3FA13C3ADEE51D5D
2 changed files with 17 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
libs/auth/src/angular/login/login.component.html
View File

@ -12,29 +12,15 @@
# UI States
Each client template has two UI states, defined by `LoginUiState` enum:
Each client template has two UI states, defined by the `LoginUiState` enum:
State 1: displays the email input field + continue button
State 2: displays the master password input field + login button
-->
<!--------------------------------->
<!-- Web Template -->
<!--------------------------------->
<!--
TODO-rr-bw: Clarify this comment if necessary. Also check if there's a better way to handle this.
Why not use <form *ngIf="clientType === ClientType.Web"> to display this section?
Because this file contains 3 separate templates for Web, Browser, and Desktop. For Web,
we want access to the masterPasswordInput reference in the class file.
- If we used *ngIf, we would not be able to access the reference initially.
- Using a hidden form allows us to access the reference, because it ensures that the element
reference does exist (it's just potentially hidden instead of non-existent).
-->
<form
[ngClass]="{ 'tw-hidden': clientType !== ClientType.Web }"
[bitSubmit]="submit"
[formGroup]="formGroup"
>
<!---------------------------------------------->
<!-- Web Template -->
<!---------------------------------------------->
<form *ngIf="clientType === ClientType.Web" [bitSubmit]="submit" [formGroup]="formGroup">
<ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
<!-- Email Address input -->
<bit-form-field class="!tw-mb-4">
@ -82,19 +68,11 @@
</div>
</ng-container>
<!--
TODO-rr-bw: Clarify this comment if necessary. Also check if there's a better way to handle this.
Why not use <ng-container *ngIf="validatedEmail"> to display this section?
Because we want access to the masterPasswordInput reference in the class file.
- Using a hidden div allows us to access the reference without rendering the div initially.
- Using *ngIf would not allow us to access the reference without rendering the ng-container initially.
-->
<div [ngClass]="{ 'tw-hidden': uiState !== LoginUiState.MASTER_PASSWORD_ENTRY }">
<ng-container *ngIf="uiState === LoginUiState.MASTER_PASSWORD_ENTRY">
<!-- Master Password input -->
<bit-form-field class="!tw-mb-1">
<bit-label>{{ "masterPass" | i18n }}</bit-label>
<input type="password" formControlName="masterPassword" bitInput #masterPasswordInput />
<input type="password" formControlName="masterPassword" bitInput #masterPasswordInputRef />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field>
@ -135,19 +113,19 @@
</button>
</ng-container>
</div>
</div>
</ng-container>
</form>
<!--------------------------------->
<!-- Browser Template -->
<!--------------------------------->
<!---------------------------------------------->
<!-- Browser Template -->
<!---------------------------------------------->
<form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup">
<main tabindex="-1"></main>
</form>
<!--------------------------------->
<!-- Desktop Template -->
<!--------------------------------->
<!---------------------------------------------->
<!-- Desktop Template -->
<!---------------------------------------------->
<form *ngIf="clientType === ClientType.Desktop" [bitSubmit]="submit" [formGroup]="formGroup">
<!---------------------------------
Desktop UI State 1: Email Entry

6
libs/auth/src/angular/login/login.component.ts
View File

@ -67,7 +67,7 @@ export enum LoginUiState {
],
})
export class LoginComponentV2 implements OnInit, OnDestroy {
@ViewChild("masterPasswordInput", { static: true }) masterPasswordInput: ElementRef;
@ViewChild("masterPasswordInputRef") masterPasswordInputRef: ElementRef;
@Input() captchaSiteKey: string = null;
private destroy$ = new Subject<void>();
@ -360,10 +360,10 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
// When email is validated, focus on master password after waiting for input to be rendered
if (this.ngZone.isStable) {
this.masterPasswordInput?.nativeElement?.focus();
this.masterPasswordInputRef?.nativeElement?.focus();
} else {
this.ngZone.onStable.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {
this.masterPasswordInput?.nativeElement?.focus();
this.masterPasswordInputRef?.nativeElement?.focus();
});
}
}