From 00a29b3795ea03664077bec370baf968bcbc3ad7 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Mon, 9 Sep 2024 09:51:06 -0700
Subject: [PATCH] handle master password input focus

---
 libs/auth/src/angular/login/login.component.html | 10 ++++++++--
 libs/auth/src/angular/login/login.component.ts   | 11 ++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index bf8f7d9dcf6..e333fbd292c 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -70,7 +70,13 @@
   <!-----------------------------------
     UI STATE 2: Master Password Entry
   ------------------------------------>
-  <ng-container *ngIf="validatedEmail">
+  <!--
+    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 class="tw-mb-6 tw-h-28">
       <!-- Master Password input -->
       <bit-form-field class="!tw-mb-1">
@@ -133,5 +139,5 @@
       <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
       <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
     </div>
-  </ng-container>
+  </div>
 </form>
diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index dd45d1d66d1..f8d0581fe2f 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -31,6 +31,7 @@ import {
   ButtonModule,
   CheckboxModule,
   FormFieldModule,
+  IconButtonModule,
   ToastService,
 } from "@bitwarden/components";
 
@@ -45,6 +46,7 @@ import { LoginService } from "./login.service";
     CheckboxModule,
     CommonModule,
     FormFieldModule,
+    IconButtonModule,
     JslibModule,
     ReactiveFormsModule,
     RouterModule,
@@ -117,12 +119,11 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
 
     if (this.clientType === ClientType.Web) {
       // If there's an existing org invite, use it to get the password policies
-      const { policies, isPolicyAndAutoEnrollEnabled, enforcedPasswordPolicyOptions } =
-        await this.loginService.getOrgPolicies();
+      const orgPolicies = await this.loginService.getOrgPolicies();
 
-      this.policies = policies;
-      this.showResetPasswordAutoEnrollWarning = isPolicyAndAutoEnrollEnabled;
-      this.enforcedPasswordPolicyOptions = enforcedPasswordPolicyOptions;
+      this.policies = orgPolicies?.policies;
+      this.showResetPasswordAutoEnrollWarning = orgPolicies?.isPolicyAndAutoEnrollEnabled;
+      this.enforcedPasswordPolicyOptions = orgPolicies?.enforcedPasswordPolicyOptions;
     }
   }