PM-187 - Allow autofill to work on web vault two step login page by rendering the password form in a hidden state and preventing the continue button from wiping out the autofilled password (#4844)

apps/web/src/auth/login/login.component.html

@@ -16,7 +16,7 @@
       <div
         class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
       >
-        <ng-container *ngIf="!validatedEmail; else loginPage">
+        <ng-container *ngIf="!validatedEmail">
           <div class="tw-mb-3">
             <bit-form-field>
               <bit-label>{{ "emailAddress" | i18n }}</bit-label>
@@ -59,12 +59,8 @@
             <a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
           </p>
         </ng-container>
-      </div>
-    </div>
-  </div>
-</form>
 
-<ng-template [formGroup]="formGroup" #loginPage>
+        <div [ngClass]="{ 'tw-hidden': !validatedEmail }">
           <div class="tw-mb-6 tw-h-28">
             <bit-form-field class="!tw-mb-1">
               <bit-label>{{ "masterPass" | i18n }}</bit-label>
@@ -77,9 +73,13 @@
               />
               <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
             </bit-form-field>
-    <a class="-tw-mt-2" routerLink="/hint" (mousedown)="goToHint()" (click)="setFormValues()">{{
-      "getMasterPasswordHint" | i18n
-    }}</a>
+            <a
+              class="-tw-mt-2"
+              routerLink="/hint"
+              (mousedown)="goToHint()"
+              (click)="setFormValues()"
+              >{{ "getMasterPasswordHint" | i18n }}</a
+            >
           </div>
 
           <div [hidden]="!showCaptcha()">
@@ -87,7 +87,13 @@
           </div>
 
           <div class="tw-mb-3 tw-flex tw-space-x-4">
-    <button bitButton buttonType="primary" type="submit" [block]="true" [loading]="form.loading">
+            <button
+              bitButton
+              buttonType="primary"
+              type="submit"
+              [block]="true"
+              [loading]="form.loading"
+            >
               <span> {{ "loginWithMasterPassword" | i18n }} </span>
             </button>
           </div>
@@ -124,4 +130,8 @@
             <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
             <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
           </div>
-</ng-template>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -238,8 +238,12 @@ 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)
+      // so that autofill can work properly
       this.formGroup.controls.masterPassword.reset();
     }
+  }
 
   setFormValues() {
     this.loginService.setEmail(this.formGroup.value.email);