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,69 +59,79 @@
             <a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
           </p>
         </ng-container>
+
+        <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>
+              <input
+                id="login_input_master-password"
+                type="password"
+                bitInput
+                formControlName="masterPassword"
+                appAutofocus
+              />
+              <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
+            </bit-form-field>
+            <a
+              class="-tw-mt-2"
+              routerLink="/hint"
+              (mousedown)="goToHint()"
+              (click)="setFormValues()"
+              >{{ "getMasterPasswordHint" | i18n }}</a
+            >
+          </div>
+
+          <div [hidden]="!showCaptcha()">
+            <iframe id="hcaptcha_iframe" height="80"></iframe>
+          </div>
+
+          <div class="tw-mb-3 tw-flex tw-space-x-4">
+            <button
+              bitButton
+              buttonType="primary"
+              type="submit"
+              [block]="true"
+              [loading]="form.loading"
+            >
+              <span> {{ "loginWithMasterPassword" | i18n }} </span>
+            </button>
+          </div>
+
+          <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
+            <button
+              bitButton
+              type="button"
+              [block]="true"
+              buttonType="secondary"
+              (click)="startPasswordlessLogin()"
+            >
+              <span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
+            </button>
+          </div>
+
+          <div class="tw-mb-3">
+            <a
+              routerLink="/sso"
+              [queryParams]="{ email: formGroup.value.email }"
+              (click)="saveEmailSettings()"
+              bitButton
+              buttonType="secondary"
+              class="tw-w-full"
+            >
+              <i class="bwi bwi-provider tw-mr-2"></i>
+              {{ "enterpriseSingleSignOn" | i18n }}
+            </a>
+          </div>
+
+          <hr />
+
+          <div class="tw-m-0 tw-text-sm">
+            <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
+            <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </form>
-
-<ng-template [formGroup]="formGroup" #loginPage>
-  <div class="tw-mb-6 tw-h-28">
-    <bit-form-field class="!tw-mb-1">
-      <bit-label>{{ "masterPass" | i18n }}</bit-label>
-      <input
-        id="login_input_master-password"
-        type="password"
-        bitInput
-        formControlName="masterPassword"
-        appAutofocus
-      />
-      <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
-    </bit-form-field>
-    <a class="-tw-mt-2" routerLink="/hint" (mousedown)="goToHint()" (click)="setFormValues()">{{
-      "getMasterPasswordHint" | i18n
-    }}</a>
-  </div>
-
-  <div [hidden]="!showCaptcha()">
-    <iframe id="hcaptcha_iframe" height="80"></iframe>
-  </div>
-
-  <div class="tw-mb-3 tw-flex tw-space-x-4">
-    <button bitButton buttonType="primary" type="submit" [block]="true" [loading]="form.loading">
-      <span> {{ "loginWithMasterPassword" | i18n }} </span>
-    </button>
-  </div>
-
-  <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
-    <button
-      bitButton
-      type="button"
-      [block]="true"
-      buttonType="secondary"
-      (click)="startPasswordlessLogin()"
-    >
-      <span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
-    </button>
-  </div>
-
-  <div class="tw-mb-3">
-    <a
-      routerLink="/sso"
-      [queryParams]="{ email: formGroup.value.email }"
-      (click)="saveEmailSettings()"
-      bitButton
-      buttonType="secondary"
-      class="tw-w-full"
-    >
-      <i class="bwi bwi-provider tw-mr-2"></i>
-      {{ "enterpriseSingleSignOn" | i18n }}
-    </a>
-  </div>
-
-  <hr />
-
-  <div class="tw-m-0 tw-text-sm">
-    <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
-    <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
-  </div>
-</ng-template>

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

@@ -238,7 +238,11 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
 
   toggleValidateEmail(value: boolean) {
     this.validatedEmail = value;
-    this.formGroup.controls.masterPassword.reset();
+    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() {