From bb5f88f8c76c8476768e94a8755e2e1eec639dca Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 12 Sep 2024 13:29:11 -0700
Subject: [PATCH] remove static element ref

---
 .../src/angular/login/login.component.html    | 50 ++++++-------------
 .../auth/src/angular/login/login.component.ts |  6 +--
 2 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index 4c4ffc2742..ec51f66bce 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -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
diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index cf2cedb3be..0642f3dbdf 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -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();
         });
       }
     }