add lastpass mfa dialog variant scaffolding; add yubikey variant (#6687)

apps/browser/src/_locales/en/messages.json

@@ -2674,5 +2674,8 @@
   },
   "collection": {
     "message": "Collection"
+  },
+  "lastPassYubikeyDesc": {
+    "message": "Insert the YubiKey associated with your LastPass account into your computer's USB port, then touch its button."
   }
 }

apps/desktop/src/locales/en/messages.json

@@ -2602,5 +2602,8 @@
   },
   "collection": {
     "message": "Collection"
+  },
+  "lastPassYubikeyDesc": {
+    "message": "Insert the YubiKey associated with your LastPass account into your computer's USB port, then touch its button."
   }
 }

libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.html

@@ -5,7 +5,7 @@
     </span>
 
     <div bitDialogContent>
-      <p>{{ description | i18n }}</p>
+      <p>{{ descriptionI18nKey | i18n }}</p>
       <bit-form-field class="!tw-mb-0">
         <bit-label>{{ "passcode" | i18n }}</bit-label>
         <input bitInput type="text" formControlName="passcode" appAutofocus appInputVerbatim />

libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.ts

@@ -14,8 +14,10 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 
+export type LastPassMultifactorPromptVariant = "otp" | "oob" | "yubikey";
+
 type LastPassMultifactorPromptData = {
-  isOOB?: boolean;
+  variant: LastPassMultifactorPromptVariant;
 };
 
 @Component({
@@ -34,7 +36,19 @@ type LastPassMultifactorPromptData = {
   ],
 })
 export class LastPassMultifactorPromptComponent {
-  protected description = this.data?.isOOB ? "lastPassOOBDesc" : "lastPassMFADesc";
+  private variant = this.data.variant;
+
+  protected get descriptionI18nKey(): string {
+    switch (this.variant) {
+      case "oob":
+        return "lastPassOOBDesc";
+      case "yubikey":
+        return "lastPassYubikeyDesc";
+      case "otp":
+      default:
+        return "lastPassMFADesc";
+    }
+  }
 
   protected formGroup = new FormGroup({
     passcode: new FormControl("", {
@@ -56,7 +70,7 @@ export class LastPassMultifactorPromptComponent {
     this.dialogRef.close(this.formGroup.value.passcode);
   };
 
-  static open(dialogService: DialogService, data?: LastPassMultifactorPromptData) {
+  static open(dialogService: DialogService, data: LastPassMultifactorPromptData) {
     return dialogService.open<string>(LastPassMultifactorPromptComponent, { data });
   }
 }

libs/importer/src/components/lastpass/lastpass-direct-import-ui.service.ts

@@ -8,6 +8,10 @@ import { OtpResult, OobResult } from "../../importers/lastpass/access/models";
 import { Ui } from "../../importers/lastpass/access/ui";
 
 import { LastPassMultifactorPromptComponent } from "./dialog";
+import { LastPassMultifactorPromptVariant } from "./dialog/lastpass-multifactor-prompt.component";
+
+type OtpDialogVariant = Extract<LastPassMultifactorPromptVariant, "otp" | "yubikey">;
+type OobDialogVariant = Extract<LastPassMultifactorPromptVariant, "oob">;
 
 @Injectable({
   providedIn: "root",
@@ -17,43 +21,46 @@ export class LastPassDirectImportUIService implements Ui {
 
   constructor(private dialogService: DialogService) {}
 
-  private async getOTPResult() {
+  private async getOTPResult(variant: OtpDialogVariant) {
-    this.mfaDialogRef = LastPassMultifactorPromptComponent.open(this.dialogService);
+    const passcode = await this.openMFADialog(variant);
-    const passcode = await firstValueFrom(this.mfaDialogRef.closed);
     return new OtpResult(passcode, false);
   }
 
-  private async getOOBResult() {
+  private async getOOBResult(variant: OobDialogVariant) {
-    this.mfaDialogRef = LastPassMultifactorPromptComponent.open(this.dialogService, {
+    const passcode = await this.openMFADialog(variant);
-      isOOB: true,
-    });
-    const passcode = await firstValueFrom(this.mfaDialogRef.closed);
     return new OobResult(false, passcode, false);
   }
 
+  private openMFADialog(variant: LastPassMultifactorPromptVariant) {
+    this.mfaDialogRef = LastPassMultifactorPromptComponent.open(this.dialogService, {
+      variant,
+    });
+    return firstValueFrom(this.mfaDialogRef.closed);
+  }
+
   closeMFADialog() {
     this.mfaDialogRef?.close();
   }
 
   async provideGoogleAuthPasscode() {
-    return this.getOTPResult();
+    return this.getOTPResult("otp");
   }
 
   async provideMicrosoftAuthPasscode() {
-    return this.getOTPResult();
+    return this.getOTPResult("otp");
   }
 
   async provideYubikeyPasscode() {
-    return this.getOTPResult();
+    return this.getOTPResult("yubikey");
   }
 
   async approveLastPassAuth() {
-    return this.getOOBResult();
+    return this.getOOBResult("oob");
   }
   async approveDuo() {
-    return this.getOOBResult();
+    return this.getOOBResult("oob");
   }
   async approveSalesforceAuth() {
-    return this.getOOBResult();
+    return this.getOOBResult("oob");
   }
 }