From 4d6d3c4bd52b066a30eaefb483e1a7c265aa4962 Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Tue, 4 Apr 2023 16:39:49 -0400
Subject: [PATCH] PM-1354 - Fix master password not auto focused on web login
 flow (#5139)

---
 apps/web/src/auth/login/login.component.html       |  2 +-
 .../angular/src/auth/components/login.component.ts | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/auth/login/login.component.html b/apps/web/src/auth/login/login.component.html
index 22f92cc01c2..52507223eba 100644
--- a/apps/web/src/auth/login/login.component.html
+++ b/apps/web/src/auth/login/login.component.html
@@ -68,8 +68,8 @@
                 id="login_input_master-password"
                 type="password"
                 bitInput
+                #masterPasswordInput
                 formControlName="masterPassword"
-                appAutofocus
               />
               <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
             </bit-form-field>
diff --git a/libs/angular/src/auth/components/login.component.ts b/libs/angular/src/auth/components/login.component.ts
index 640461a6f8b..b76fd14593f 100644
--- a/libs/angular/src/auth/components/login.component.ts
+++ b/libs/angular/src/auth/components/login.component.ts
@@ -1,4 +1,4 @@
-import { Directive, NgZone, OnInit } from "@angular/core";
+import { Directive, ElementRef, NgZone, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { take } from "rxjs/operators";
@@ -26,6 +26,8 @@ import { CaptchaProtectedComponent } from "./captcha-protected.component";
 
 @Directive()
 export class LoginComponent extends CaptchaProtectedComponent implements OnInit {
+  @ViewChild("masterPasswordInput", { static: true }) masterPasswordInput: ElementRef;
+
   showPassword = false;
   formPromise: Promise<AuthResult>;
   onSuccessfulLogin: () => Promise<any>;
@@ -238,10 +240,16 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
 
   toggleValidateEmail(value: boolean) {
     this.validatedEmail = value;
-    if (!value) {
-      // Reset master password only when going from validated to not validated (not you btn press)
+    if (!this.validatedEmail) {
+      // Reset master password only when going from validated to not validated
       // so that autofill can work properly
       this.formGroup.controls.masterPassword.reset();
+    } else {
+      // When email is validated, focus on master password after
+      // waiting for input to be rendered
+      this.ngZone.onStable
+        .pipe(take(1))
+        .subscribe(() => this.masterPasswordInput?.nativeElement?.focus());
     }
   }