remove static element ref

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

View File

@ -12,29 +12,15 @@
# UI States # 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 1: displays the email input field + continue button
State 2: displays the master password input field + login button State 2: displays the master password input field + login button
--> -->
<!---------------------------------> <!---------------------------------------------->
<!-- Web Template --> <!-- Web Template -->
<!---------------------------------> <!---------------------------------------------->
<!-- <form *ngIf="clientType === ClientType.Web" [bitSubmit]="submit" [formGroup]="formGroup">
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"
>
<ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY"> <ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
<!-- Email Address input --> <!-- Email Address input -->
<bit-form-field class="!tw-mb-4"> <bit-form-field class="!tw-mb-4">
@ -82,19 +68,11 @@
</div> </div>
</ng-container> </ng-container>
<!-- <ng-container *ngIf="uiState === LoginUiState.MASTER_PASSWORD_ENTRY">
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 }">
<!-- Master Password input --> <!-- Master Password input -->
<bit-form-field class="!tw-mb-1"> <bit-form-field class="!tw-mb-1">
<bit-label>{{ "masterPass" | i18n }}</bit-label> <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> <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field> </bit-form-field>
@ -135,19 +113,19 @@
</button> </button>
</ng-container> </ng-container>
</div> </div>
</div> </ng-container>
</form> </form>
<!---------------------------------> <!---------------------------------------------->
<!-- Browser Template --> <!-- Browser Template -->
<!---------------------------------> <!---------------------------------------------->
<form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup"> <form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup">
<main tabindex="-1"></main> <main tabindex="-1"></main>
</form> </form>
<!---------------------------------> <!---------------------------------------------->
<!-- Desktop Template --> <!-- Desktop Template -->
<!---------------------------------> <!---------------------------------------------->
<form *ngIf="clientType === ClientType.Desktop" [bitSubmit]="submit" [formGroup]="formGroup"> <form *ngIf="clientType === ClientType.Desktop" [bitSubmit]="submit" [formGroup]="formGroup">
<!--------------------------------- <!---------------------------------
Desktop UI State 1: Email Entry Desktop UI State 1: Email Entry

View File

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