diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 52ad849a23..529ead2d6c 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/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." } } diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index ecd8e9a596..365d5bb2b6 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/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." } } diff --git a/libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.html b/libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.html index 1b933ec987..ab4cd6a622 100644 --- a/libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.html +++ b/libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.html @@ -5,7 +5,7 @@
-

{{ description | i18n }}

+

{{ descriptionI18nKey | i18n }}

{{ "passcode" | i18n }} diff --git a/libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.ts b/libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.ts index f0094111c9..c3167bfea4 100644 --- a/libs/importer/src/components/lastpass/dialog/lastpass-multifactor-prompt.component.ts +++ b/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(LastPassMultifactorPromptComponent, { data }); } } diff --git a/libs/importer/src/components/lastpass/lastpass-direct-import-ui.service.ts b/libs/importer/src/components/lastpass/lastpass-direct-import-ui.service.ts index 036f340299..256b2b226c 100644 --- a/libs/importer/src/components/lastpass/lastpass-direct-import-ui.service.ts +++ b/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; +type OobDialogVariant = Extract; @Injectable({ providedIn: "root", @@ -17,43 +21,46 @@ export class LastPassDirectImportUIService implements Ui { constructor(private dialogService: DialogService) {} - private async getOTPResult() { - this.mfaDialogRef = LastPassMultifactorPromptComponent.open(this.dialogService); - const passcode = await firstValueFrom(this.mfaDialogRef.closed); + private async getOTPResult(variant: OtpDialogVariant) { + const passcode = await this.openMFADialog(variant); return new OtpResult(passcode, false); } - private async getOOBResult() { - this.mfaDialogRef = LastPassMultifactorPromptComponent.open(this.dialogService, { - isOOB: true, - }); - const passcode = await firstValueFrom(this.mfaDialogRef.closed); + private async getOOBResult(variant: OobDialogVariant) { + const passcode = await this.openMFADialog(variant); 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"); } }