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

refactor to use a uiState enum for UI states

Browse Source
This commit is contained in:
rr-bw 2024-09-11 16:47:43 -07:00
parent 96f31ecf61
commit f9dc91228b
No known key found for this signature in database
GPG Key ID: 3FA13C3ADEE51D5D
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,11 +42,7 @@
[bitSubmit]="submit"
[formGroup]="formGroup"
>
<!-----------------------------
Web UI State 1: Email Entry
------------------------------>
<!-- TODO-rr-bw: consider refactoring this *ngIf check to something like LoginState.EmailEntry and LoginState.MasterPasswordEntry -->
<ng-container *ngIf="!validatedEmail">
<ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
<!-- Email Address input -->
<div class="tw-mb-3">
<bit-form-field>
@ -105,16 +101,13 @@
</p>
</ng-container>
<!---------------------------------------
Web UI State 2: Master Password Entry
---------------------------------------->
<!--
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': !validatedEmail }">
<div [ngClass]="{ 'tw-hidden': uiState !== LoginUiState.MASTER_PASSWORD_ENTRY }">
<div class="tw-mb-6 tw-h-28">
<!-- Master Password input -->
<bit-form-field class="!tw-mb-1">

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

@ -1,6 +1,6 @@
import { CommonModule } from "@angular/common";
import { Component, ElementRef, Input, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import { ActivatedRoute, Router, RouterModule } from "@angular/router";
import { first, firstValueFrom, of, Subject, switchMap, take, takeUntil } from "rxjs";
@ -43,6 +43,11 @@ import { LoginService } from "./login.service";
const BroadcasterSubscriptionId = "LoginComponent";
export enum LoginUiState {
EMAIL_ENTRY = "EmailEntry",
MASTER_PASSWORD_ENTRY = "MasterPasswordEntry",
}
@Component({
standalone: true,
templateUrl: "./login.component.html",
@ -68,6 +73,7 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
captchaToken: string = null;
clientType: ClientType;
ClientType = ClientType;
LoginUiState = LoginUiState;
registerRoute$ = this.registerRouteService.registerRoute$(); // TODO: remove when email verification flag is removed
showLoginWithDevice = false;
validatedEmail = false;
@ -81,14 +87,18 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
rememberEmail: [false],
});
get emailFormControl() {
get emailFormControl(): FormControl<string> {
return this.formGroup.controls.email;
}
get loggedEmail() {
get loggedEmail(): string {
return this.formGroup.value.email;
}
get uiState(): LoginUiState {
return this.validatedEmail ? LoginUiState.MASTER_PASSWORD_ENTRY : LoginUiState.EMAIL_ENTRY;
}
// Web properties
enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
policies: Policy[];