remove static element ref
This commit is contained in:
parent
6ffaeae331
commit
bb5f88f8c7
|
@ -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
|
||||||
|
|
|
@ -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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue