refactor to use a uiState enum for UI states

libs/auth/src/angular/login/login.component.html

@@ -42,11 +42,7 @@
   [bitSubmit]="submit"
   [formGroup]="formGroup"
 >
-  <!-----------------------------
+  <ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
-    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">
     <!-- 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">

libs/auth/src/angular/login/login.component.ts

@@ -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[];