diff --git a/src/browser/browserApi.ts b/src/browser/browserApi.ts index 8f23c0911c..0ebadb71d9 100644 --- a/src/browser/browserApi.ts +++ b/src/browser/browserApi.ts @@ -176,4 +176,13 @@ export class BrowserApi { chrome.permissions.request(permission, resolve); }); } + + static getPlatformInfo(): Promise { + if (BrowserApi.isWebExtensionsApi) { + return browser.runtime.getPlatformInfo(); + } + return new Promise((resolve) => { + chrome.runtime.getPlatformInfo(resolve); + }); + } } diff --git a/src/popup/accounts/two-factor.component.ts b/src/popup/accounts/two-factor.component.ts index a6ac66e5bb..1c3b3d995f 100644 --- a/src/popup/accounts/two-factor.component.ts +++ b/src/popup/accounts/two-factor.component.ts @@ -74,6 +74,12 @@ export class TwoFactorComponent extends BaseTwoFactorComponent { return; } + // WebAuthn prompt appears inside the popup on linux, and requires a larger popup width + // than usual to avoid cutting off the dialog. + if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && await this.isLinux()) { + document.body.classList.add('linux-webauthn'); + } + if (this.selectedProviderType === TwoFactorProviderType.Email && this.popupUtilsService.inPopup(window)) { const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('popup2faCloseMessage'), @@ -98,12 +104,20 @@ export class TwoFactorComponent extends BaseTwoFactorComponent { }); } - ngOnDestroy() { + async ngOnDestroy() { this.broadcasterService.unsubscribe(BroadcasterSubscriptionId); + + if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && await this.isLinux()) { + document.body.classList.remove('linux-webauthn'); + } super.ngOnDestroy(); } anotherMethod() { this.router.navigate(['2fa-options']); } + + async isLinux() { + return (await BrowserApi.getPlatformInfo()).os === "linux"; + } } diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss index 49fc31ab73..7a0ea79be6 100644 --- a/src/popup/scss/misc.scss +++ b/src/popup/scss/misc.scss @@ -189,6 +189,16 @@ p.lead { } } +body.linux-webauthn { + width: 485px !important; + #web-authn-frame { + iframe { + width: 375px; + margin: 0 55px; + } + } +} + app-root > #loading { display: flex; text-align: center;