bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 07:43:35 +00:00
Code Issues Releases Wiki Activity

refactor(auth): [PM-9179] remove deprecated TwoFactorComponents

Browse Source 
Remove deprecated TwoFactorComponentsV1 and TwoFactorOptionsComponentV1 components, related functionality (unauthUiRefreshSwap) and orphaned styles/translation messages.
This commit is contained in:
Alec Rippberger
2025-03-28 12:51:20 -05:00
committed by GitHub
parent 6204e2a092
commit d5f033efa2
27 changed files with 55 additions and 2652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/browser/src/_locales/en/messages.json
View File

@@ -1391,24 +1391,12 @@
"premiumRequiredDesc": {
"message": "A Premium membership is required to use this feature."
},
"enterVerificationCodeApp": {
"message": "Enter the 6 digit verification code from your authenticator app."
},
"authenticationTimeout": {
"message": "Authentication timeout"
},
"authenticationSessionTimedOut": {
"message": "The authentication session timed out. Please restart the login process."
},
"enterVerificationCodeEmail": {
"message": "Enter the 6 digit verification code that was emailed to $EMAIL$.",
"placeholders": {
"email": {
"content": "$1",
"example": "example@gmail.com"
}
}
},
"verificationCodeEmailSent": {
"message": "Verification email sent to $EMAIL$.",
"placeholders": {
@@ -1418,18 +1406,9 @@
}
}
},
"rememberMe": {
"message": "Remember me"
},
"dontAskAgainOnThisDeviceFor30Days": {
"message": "Don't ask again on this device for 30 days"
},
"sendVerificationCodeEmailAgain": {
"message": "Send verification code email again"
},
"useAnotherTwoStepMethod": {
"message": "Use another two-step login method"
},
"selectAnotherMethod": {
"message": "Select another method",
"description": "Select another two-step login method"
@@ -1437,18 +1416,9 @@
"useYourRecoveryCode": {
"message": "Use your recovery code"
},
"insertYubiKey": {
"message": "Insert your YubiKey into your computer's USB port, then touch its button."
},
"insertU2f": {
"message": "Insert your security key into your computer's USB port. If it has a button, touch it."
},
"webAuthnNewTab": {
"message": "To start the WebAuthn 2FA verification. Click the button below to open a new tab and follow the instructions provided in the new tab."
},
"webAuthnNewTabOpen": {
"message": "Open new tab"
},
"openInNewTab": {
"message": "Open in new tab"
},
@@ -3848,15 +3818,9 @@
"duoHealthCheckResultsInNullAuthUrlError": {
"message": "Error connecting with the Duo service. Use a different two-step login method or contact Duo for assistance."
},
"launchDuoAndFollowStepsToFinishLoggingIn": {
"message": "Launch Duo and follow the steps to finish logging in."
},
"duoRequiredForAccount": {
"message": "Duo two-step login is required for your account."
},
"popoutTheExtensionToCompleteLogin": {
"message": "Popout the extension to complete login."
},
"popoutExtension": {
"message": "Popout extension"
},

29
apps/browser/src/auth/popup/two-factor-options-v1.component.html
View File

@@ -1,29 +0,0 @@
<header>
<div class="left">
<button type="button" (click)="close()">{{ "close" | i18n }}</button>
</div>
<h1 class="center">
<span class="title">{{ "twoStepOptions" | i18n }}</span>
</h1>
<div class="right"></div>
</header>
<main tabindex="-1">
<div class="box">
<div class="box-content">
<button
type="button"
appStopClick
*ngFor="let p of providers"
class="box-content-row"
(click)="choose(p)"
>
<span class="text">{{ p.name }}</span>
<span class="detail">{{ p.description }}</span>
</button>
<button type="button" appStopClick class="box-content-row" (click)="recover()">
<span class="text">{{ "recoveryCodeTitle" | i18n }}</span>
<span class="detail">{{ "recoveryCodeDesc" | i18n }}</span>
</button>
</div>
</div>
</main>

56
apps/browser/src/auth/popup/two-factor-options-v1.component.ts
View File

@@ -1,56 +0,0 @@
import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { TwoFactorOptionsComponentV1 as BaseTwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-options-v1.component";
import {
TwoFactorProviderDetails,
TwoFactorService,
} from "@bitwarden/common/auth/abstractions/two-factor.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@Component({
selector: "app-two-factor-options",
templateUrl: "two-factor-options-v1.component.html",
})
export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponent {
constructor(
twoFactorService: TwoFactorService,
router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
private activatedRoute: ActivatedRoute,
) {
super(twoFactorService, router, i18nService, platformUtilsService, window, environmentService);
}
close() {
this.navigateTo2FA();
}
override async choose(p: TwoFactorProviderDetails) {
await super.choose(p);
await this.twoFactorService.setSelectedProvider(p.type);
this.navigateTo2FA();
}
navigateTo2FA() {
const sso = this.activatedRoute.snapshot.queryParamMap.get("sso") === "true";
if (sso) {
// Persist SSO flag back to the 2FA comp if it exists
// in order for successful login logic to work properly for
// SSO + 2FA in browser extension
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["2fa"], { queryParams: { sso: true } });
} else {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["2fa"]);
}
}
}

196
apps/browser/src/auth/popup/two-factor-v1.component.html
View File

@@ -1,196 +0,0 @@
<form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<button type="button" routerLink="/login">{{ "back" | i18n }}</button>
</div>
<h1 class="center">
<span class="title">{{ title }}</span>
</h1>
<div class="right">
<button
type="submit"
[disabled]="form.loading"
*ngIf="
selectedProviderType != null &&
!isDuoProvider &&
(selectedProviderType !== providerType.WebAuthn || form.loading)
"
>
<span [hidden]="form.loading">{{ "continue" | i18n }}</span>
<i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
</header>
<main tabindex="-1">
<!-- Authenticator / Email -->
<ng-container
*ngIf="
selectedProviderType === providerType.Authenticator ||
selectedProviderType === providerType.Email
"
>
<div class="content text-center">
<span *ngIf="selectedProviderType === providerType.Authenticator">
{{ "enterVerificationCodeApp" | i18n }}
</span>
<span *ngIf="selectedProviderType === providerType.Email">
{{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
</span>
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="text"
name="Code"
[(ngModel)]="token"
required
appAutofocus
inputmode="tel"
appInputVerbatim
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<!-- YubiKey -->
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<div class="content text-center">
<p class="text-center">{{ "insertYubiKey" | i18n }}</p>
<img src="../../popup/images/yubikey.jpg" class="img-rounded img-responsive" alt="" />
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="password"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<!-- WebAuthN (not-webAuthN tab) -->
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn && !webAuthnNewTab">
<div id="web-authn-frame">
<iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<!-- WebAuthN (webAuthN tab) -->
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn && webAuthnNewTab">
<div class="content text-center" *ngIf="webAuthnNewTab">
<p class="text-center">{{ "webAuthnNewTab" | i18n }}</p>
<button type="button" class="btn primary block" (click)="authWebAuthn()" appStopClick>
{{ "webAuthnNewTabOpen" | i18n }}
</button>
</div>
</ng-container>
<!-- Duo -->
<ng-container *ngIf="isDuoProvider">
<div class="tw-my-4">
<p class="tw-mb-0 tw-text-center">
{{ "duoRequiredForAccount" | i18n }}
</p>
<p class="tw-text-center" *ngIf="!inPopout">
{{ "popoutTheExtensionToCompleteLogin" | i18n }}
</p>
<ng-container *ngIf="inPopout">
<p class="tw-text-center">{{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}</p>
<ng-container *ngTemplateOutlet="duoRememberMe"></ng-container>
</ng-container>
</div>
<ng-template #duoRememberMe>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-template>
</ng-container>
<div class="box-content-row" [hidden]="!showCaptcha()">
<iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<div class="content" *ngIf="selectedProviderType == null">
<p class="text-center">{{ "noTwoStepProviders" | i18n }}</p>
<p class="text-center">{{ "noTwoStepProviders2" | i18n }}</p>
</div>
<!-- Buttons -->
<div class="content no-vpad" *ngIf="selectedProviderType != null">
<ng-container *ngIf="isDuoProvider">
<button
*ngIf="inPopout"
bitButton
type="button"
class="tw-mb-2"
buttonType="primary"
[block]="true"
appStopClick
(click)="launchDuoFrameless()"
>
{{ "launchDuo" | i18n }}
</button>
<button
*ngIf="!inPopout"
bitButton
type="button"
class="tw-mb-2"
buttonType="primary"
[block]="true"
appStopClick
(click)="popoutCurrentPage()"
>
{{ "popoutExtension" | i18n }}
</button>
</ng-container>
<button
bitButton
type="button"
buttonType="secondary"
[block]="true"
appStopClick
(click)="anotherMethod()"
>
{{ "useAnotherTwoStepMethod" | i18n }}
</button>
<p *ngIf="selectedProviderType === providerType.Email" class="text-center">
<button type="button" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise">
{{ "sendVerificationCodeEmailAgain" | i18n }}
</button>
</p>
</div>
</main>
</form>

260
apps/browser/src/auth/popup/two-factor-v1.component.ts
View File

@@ -1,260 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Subject, Subscription, firstValueFrom } from "rxjs";
import { filter, first, takeUntil } from "rxjs/operators";
import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import {
LoginStrategyServiceAbstraction,
LoginEmailServiceAbstraction,
UserDecryptionOptionsServiceAbstraction,
} from "@bitwarden/auth/common";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
import { DialogService, ToastService } from "@bitwarden/components";
import { BrowserApi } from "../../platform/browser/browser-api";
import { ZonedMessageListenerService } from "../../platform/browser/zoned-message-listener.service";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
import { closeTwoFactorAuthWebAuthnPopout } from "./utils/auth-popout-window";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor-v1.component.html",
})
export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
inPopout = BrowserPopupUtils.inPopout(window);
constructor(
loginStrategyService: LoginStrategyServiceAbstraction,
router: Router,
i18nService: I18nService,
apiService: ApiService,
platformUtilsService: PlatformUtilsService,
private syncService: SyncService,
environmentService: EnvironmentService,
stateService: StateService,
route: ActivatedRoute,
private messagingService: MessagingService,
logService: LogService,
twoFactorService: TwoFactorService,
appIdService: AppIdService,
loginEmailService: LoginEmailServiceAbstraction,
userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
configService: ConfigService,
ssoLoginService: SsoLoginServiceAbstraction,
private dialogService: DialogService,
masterPasswordService: InternalMasterPasswordServiceAbstraction,
accountService: AccountService,
toastService: ToastService,
@Inject(WINDOW) protected win: Window,
private browserMessagingApi: ZonedMessageListenerService,
) {
super(
loginStrategyService,
router,
i18nService,
apiService,
platformUtilsService,
win,
environmentService,
stateService,
route,
logService,
twoFactorService,
appIdService,
loginEmailService,
userDecryptionOptionsService,
ssoLoginService,
configService,
masterPasswordService,
accountService,
toastService,
);
this.onSuccessfulLogin = async () => {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
syncService.fullSync(true);
};
this.onSuccessfulLoginTde = async () => {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
syncService.fullSync(true);
};
this.onSuccessfulLoginTdeNavigate = async () => {
this.win.close();
};
this.successRoute = "/tabs/vault";
// FIXME: Chromium 110 has broken WebAuthn support in extensions via an iframe
this.webAuthnNewTab = true;
}
async ngOnInit() {
if (this.route.snapshot.paramMap.has("webAuthnResponse")) {
// WebAuthn fallback response
this.selectedProviderType = TwoFactorProviderType.WebAuthn;
this.token = this.route.snapshot.paramMap.get("webAuthnResponse");
this.onSuccessfulLogin = async () => {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.syncService.fullSync(true);
this.messagingService.send("reloadPopup");
window.close();
};
this.remember = this.route.snapshot.paramMap.get("remember") === "true";
await this.doSubmit();
return;
}
await super.ngOnInit();
if (this.selectedProviderType == null) {
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 &&
BrowserPopupUtils.inPopup(window)
) {
const confirmed = await this.dialogService.openSimpleDialog({
title: { key: "warning" },
content: { key: "popup2faCloseMessage" },
type: "warning",
});
if (confirmed) {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
BrowserPopupUtils.openCurrentPagePopout(window);
}
}
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
if (qParams.sso === "true") {
this.onSuccessfulLogin = async () => {
// This is not awaited so we don't pause the application while the sync is happening.
// This call is executed by the service that lives in the background script so it will continue
// the sync even if this tab closes.
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.syncService.fullSync(true);
// Force sidebars (FF && Opera) to reload while exempting current window
// because we are just going to close the current window.
BrowserApi.reloadOpenWindows(true);
// We don't need this window anymore because the intent is for the user to be left
// on the web vault screen which tells them to continue in the browser extension (sidebar or popup)
await closeTwoFactorAuthWebAuthnPopout();
};
}
});
}
async ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && (await this.isLinux())) {
document.body.classList.remove("linux-webauthn");
}
super.ngOnDestroy();
}
anotherMethod() {
const sso = this.route.snapshot.queryParamMap.get("sso") === "true";
if (sso) {
// We must persist this so when the user returns to the 2FA comp, the
// proper onSuccessfulLogin logic is executed.
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["2fa-options"], { queryParams: { sso: true } });
} else {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["2fa-options"]);
}
}
async popoutCurrentPage() {
await BrowserPopupUtils.openCurrentPagePopout(window);
}
async isLinux() {
return (await BrowserApi.getPlatformInfo()).os === "linux";
}
duoResultSubscription: Subscription;
protected override setupDuoResultListener() {
if (!this.duoResultSubscription) {
this.duoResultSubscription = this.browserMessagingApi
.messageListener$()
.pipe(
filter((msg: any) => msg.command === "duoResult"),
takeUntil(this.destroy$),
)
.subscribe((msg: { command: string; code: string; state: string }) => {
this.token = msg.code + "|" + msg.state;
// This floating promise is intentional. We don't need to await the submit + awaiting in a subscription is not recommended.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.submit();
});
}
}
override async launchDuoFrameless() {
if (this.duoFramelessUrl === null) {
this.toastService.showToast({
variant: "error",
title: null,
message: this.i18nService.t("duoHealthCheckResultsInNullAuthUrlError"),
});
return;
}
const duoHandOffMessage = {
title: this.i18nService.t("youSuccessfullyLoggedIn"),
message: this.i18nService.t("youMayCloseThisWindow"),
isCountdown: false,
};
// we're using the connector here as a way to set a cookie with translations
// before continuing to the duo frameless url
const env = await firstValueFrom(this.environmentService.environment$);
const launchUrl =
env.getWebVaultUrl() +
"/duo-redirect-connector.html" +
"?duoFramelessUrl=" +
encodeURIComponent(this.duoFramelessUrl) +
"&handOffMessage=" +
encodeURIComponent(JSON.stringify(duoHandOffMessage));
this.platformUtilsService.launchUri(launchUrl);
}
}

53
apps/browser/src/popup/app-routing.module.ts
View File

@@ -7,7 +7,6 @@ import {
EnvironmentSelectorRouteData,
ExtensionDefaultOverlayPosition,
} from "@bitwarden/angular/auth/components/environment-selector.component";
import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-route-swap";
import {
activeAuthGuard,
authGuard,
@@ -59,8 +58,6 @@ import {
import { RemovePasswordComponent } from "../auth/popup/remove-password.component";
import { SetPasswordComponent } from "../auth/popup/set-password.component";
import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
import { TwoFactorOptionsComponentV1 } from "../auth/popup/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/popup/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
import { Fido2Component } from "../autofill/popup/fido2/fido2.component";
import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
@@ -142,32 +139,6 @@ const routes: Routes = [
canActivate: [fido2AuthGuard],
data: { elevation: 1 } satisfies RouteDataProperties,
},
...unauthUiRefreshSwap(
TwoFactorComponentV1,
ExtensionAnonLayoutWrapperComponent,
{
path: "2fa",
canActivate: [unauthGuardFn(unauthRouteOverrides)],
data: { elevation: 1 } satisfies RouteDataProperties,
},
{
path: "2fa",
canActivate: [unauthGuardFn(unauthRouteOverrides), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
],
data: {
elevation: 1,
pageTitle: {
key: "verifyYourIdentity",
},
showBackButton: true,
} satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
},
),
{
path: "",
component: ExtensionAnonLayoutWrapperComponent,
@@ -191,12 +162,6 @@ const routes: Routes = [
},
],
},
{
path: "2fa-options",
component: TwoFactorOptionsComponentV1,
canActivate: [unauthGuardFn(unauthRouteOverrides)],
data: { elevation: 1 } satisfies RouteDataProperties,
},
{
path: "device-verification",
component: ExtensionAnonLayoutWrapperComponent,
@@ -371,7 +336,6 @@ const routes: Routes = [
canActivate: [authGuard],
data: { elevation: 1 } satisfies RouteDataProperties,
},
{
path: "",
component: ExtensionAnonLayoutWrapperComponent,
@@ -567,6 +531,23 @@ const routes: Routes = [
},
],
},
{
path: "2fa",
canActivate: [unauthGuardFn(unauthRouteOverrides), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
],
data: {
elevation: 1,
pageTitle: {
key: "verifyYourIdentity",
},
showBackButton: true,
} satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
},
],
},
{

4
apps/browser/src/popup/app.module.ts
View File

@@ -25,8 +25,6 @@ import { SetPasswordComponent } from "../auth/popup/set-password.component";
import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
import { VaultTimeoutInputComponent } from "../auth/popup/settings/vault-timeout-input.component";
import { SsoComponentV1 } from "../auth/popup/sso-v1.component";
import { TwoFactorOptionsComponentV1 } from "../auth/popup/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/popup/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
@@ -93,8 +91,6 @@ import "../platform/popup/locales";
SetPasswordComponent,
SsoComponentV1,
TabsV2Component,
TwoFactorComponentV1,
TwoFactorOptionsComponentV1,
UpdateTempPasswordComponent,
UserVerificationComponent,
VaultTimeoutInputComponent,

10
apps/browser/src/popup/scss/misc.scss
View File

@@ -103,16 +103,6 @@ p.lead {
margin: 0 !important;
}
.no-vmargin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.no-vpad {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.display-block {
display: block !important;
}

39
apps/desktop/src/app/app-routing.module.ts
View File

@@ -6,7 +6,6 @@ import {
DesktopDefaultOverlayPosition,
EnvironmentSelectorComponent,
} from "@bitwarden/angular/auth/components/environment-selector.component";
import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-route-swap";
import {
authGuard,
lockGuard,
@@ -53,7 +52,6 @@ import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.compo
import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
import { RemovePasswordComponent } from "../auth/remove-password.component";
import { SetPasswordComponent } from "../auth/set-password.component";
import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
import { VaultComponent } from "../vault/app/vault/vault.component";
@@ -76,28 +74,6 @@ const routes: Routes = [
children: [], // Children lets us have an empty component.
canActivate: [redirectGuard({ loggedIn: "/vault", loggedOut: "/login", locked: "/lock" })],
},
...unauthUiRefreshSwap(
TwoFactorComponentV1,
AnonLayoutWrapperComponent,
{
path: "2fa",
},
{
path: "2fa",
canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
],
data: {
pageTitle: {
key: "verifyYourIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
),
{
path: "authentication-timeout",
component: AnonLayoutWrapperComponent,
@@ -360,6 +336,21 @@ const routes: Routes = [
},
} satisfies AnonLayoutWrapperData,
},
{
path: "2fa",
canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
],
data: {
pageTitle: {
key: "verifyYourIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
],
},
];

4
apps/desktop/src/app/app.module.ts
View File

@@ -16,8 +16,6 @@ import { LoginModule } from "../auth/login/login.module";
import { RemovePasswordComponent } from "../auth/remove-password.component";
import { SetPasswordComponent } from "../auth/set-password.component";
import { SsoComponentV1 } from "../auth/sso-v1.component";
import { TwoFactorOptionsComponentV1 } from "../auth/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
import { SshAgentService } from "../autofill/services/ssh-agent.service";
import { PremiumComponent } from "../billing/app/accounts/premium.component";
@@ -78,9 +76,7 @@ import { SharedModule } from "./shared/shared.module";
SetPasswordComponent,
SettingsComponent,
ShareComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorOptionsComponentV1,
UpdateTempPasswordComponent,
VaultComponent,
VaultTimeoutInputComponent,

33
apps/desktop/src/auth/two-factor-options-v1.component.html
View File

@@ -1,33 +0,0 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepTitle">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="box">
<h1 class="box-header" id="twoStepTitle">
{{ "twoStepOptions" | i18n }}
</h1>
<div class="box-content">
<button
type="button"
appStopClick
*ngFor="let p of providers"
class="box-content-row"
(click)="choose(p)"
>
<img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="img-right" />
<span class="text">{{ p.name }}</span>
<span class="detail">{{ p.description }}</span>
</button>
<button type="button" appStopClick class="box-content-row" (click)="recover()">
<span class="text">{{ "recoveryCodeTitle" | i18n }}</span>
<span class="detail">{{ "recoveryCodeDesc" | i18n }}</span>
</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
</div>
</div>
</div>
</div>

24
apps/desktop/src/auth/two-factor-options-v1.component.ts
View File

@@ -1,24 +0,0 @@
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { TwoFactorOptionsComponentV1 as BaseTwoFactorOptionsComponentV1 } from "@bitwarden/angular/auth/components/two-factor-options-v1.component";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@Component({
selector: "app-two-factor-options",
templateUrl: "two-factor-options-v1.component.html",
})
export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponentV1 {
constructor(
twoFactorService: TwoFactorService,
router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
) {
super(twoFactorService, router, i18nService, platformUtilsService, window, environmentService);
}
}

175
apps/desktop/src/auth/two-factor-v1.component.html
View File

@@ -1,175 +0,0 @@
<div class="page-top-padding">
<form
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
class="container"
autocomplete="off"
id="two-factor-page"
attr.aria-hidden="{{ showingModal }}"
>
<div id="content" class="content tw-mt-5">
<img class="logo-image" alt="Bitwarden" />
<p class="lead text-center mb-4">{{ title }}</p>
<!-- Providers -->
<div class="box last">
<!-- Authenticator / Email TOTP -->
<ng-container
*ngIf="
selectedProviderType === providerType.Email ||
selectedProviderType === providerType.Authenticator
"
>
<p *ngIf="selectedProviderType === providerType.Authenticator">
{{ "enterVerificationCodeApp" | i18n }}
</p>
<p *ngIf="selectedProviderType === providerType.Email">
{{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
</p>
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="text"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
</div>
<small class="form-text" *ngIf="selectedProviderType === providerType.Email">
<a
href="#"
appStopClick
(click)="sendEmail(true)"
[appApiAction]="emailPromise"
*ngIf="selectedProviderType === providerType.Email"
>
{{ "sendVerificationCodeEmailAgain" | i18n }}
</a>
</small>
</ng-container>
<!-- Yubikey -->
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<p>{{ "insertYubiKey" | i18n }}</p>
<picture>
<source srcset="images/yubikey.avif" type="image/avif" />
<source srcset="images/yubikey.webp" type="image/webp" />
<img src="images/yubikey.jpg" class="rounded img-fluid mb-3" alt="" />
</picture>
<div class="box last">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="password"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
</div>
</div>
</ng-container>
<!-- WebAuthn -->
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
<div class="tw-flex tw-justify-center">
<div id="web-authn-frame">
<iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
</div>
</ng-container>
<!-- Duo -->
<ng-container *ngIf="isDuoProvider">
<div>
<span *ngIf="selectedProviderType === providerType.OrganizationDuo" class="tw-mb-0">
{{ "duoRequiredByOrgForAccount" | i18n }}
</span>
{{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}
</div>
</ng-container>
</div>
<div class="box last" *ngIf="selectedProviderType == null">
<div class="box-content">
<div class="box-content-row">
<p>{{ "noTwoStepProviders" | i18n }}</p>
<p>{{ "noTwoStepProviders2" | i18n }}</p>
</div>
</div>
</div>
<div class="box last" [hidden]="!showCaptcha()">
<div class="box-content">
<div class="box-content-row">
<iframe
id="hcaptcha_iframe"
height="80"
sandbox="allow-scripts allow-same-origin"
></iframe>
<button class="btn block" type="button" routerLink="/accessibility-cookie">
<i class="bwi bwi-universal-access" aria-hidden="true"></i>
{{ "loadAccessibilityCookie" | i18n }}
</button>
</div>
</div>
</div>
<!-- Remember me -->
<div class="checkbox tw-mb-2">
<label for="remember" class="flex align-items-center flex-fill">
<input
id="remember"
type="checkbox"
name="Remember"
class="tw-mr-2"
[(ngModel)]="remember"
/>
{{ "rememberMe" | i18n }}
</label>
</div>
<!-- Submit Buttons -->
<div class="buttons with-rows">
<div class="buttons-row" *ngIf="selectedProviderType != null && isDuoProvider">
<button
(click)="launchDuoFrameless()"
type="button"
class="btn primary block"
[disabled]="form.loading"
>
<b> {{ "launchDuo" | i18n }} </b>
</button>
</div>
<div class="buttons-row" *ngIf="selectedProviderType != null && !isDuoProvider">
<button type="submit" class="btn primary block" [disabled]="form.loading">
<span [hidden]="form.loading"
><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}</span
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
<div class="buttons-row">
<button type="button" routerLink="/login" class="btn block">
{{ "cancel" | i18n }}
</button>
</div>
</div>
<div class="sub-options">
<button type="button" class="text text-primary" appStopClick (click)="anotherMethod()">
<b>{{ "useAnotherTwoStepMethod" | i18n }}</b>
</button>
</div>
</div>
</form>
</div>
<ng-template #twoFactorOptions></ng-template>

190
apps/desktop/src/auth/two-factor-v1.component.ts
View File

@@ -1,190 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, Inject, NgZone, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { firstValueFrom } from "rxjs";
import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import {
LoginStrategyServiceAbstraction,
LoginEmailServiceAbstraction,
UserDecryptionOptionsServiceAbstraction,
} from "@bitwarden/auth/common";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
import { ToastService } from "@bitwarden/components";
import { TwoFactorOptionsComponentV1 } from "./two-factor-options-v1.component";
const BroadcasterSubscriptionId = "TwoFactorComponent";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor-v1.component.html",
})
export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnDestroy {
@ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
twoFactorOptionsModal: ViewContainerRef;
showingModal = false;
duoCallbackSubscriptionEnabled: boolean = false;
constructor(
loginStrategyService: LoginStrategyServiceAbstraction,
router: Router,
i18nService: I18nService,
apiService: ApiService,
platformUtilsService: PlatformUtilsService,
syncService: SyncService,
environmentService: EnvironmentService,
private broadcasterService: BroadcasterService,
private modalService: ModalService,
stateService: StateService,
private ngZone: NgZone,
route: ActivatedRoute,
logService: LogService,
twoFactorService: TwoFactorService,
appIdService: AppIdService,
loginEmailService: LoginEmailServiceAbstraction,
userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
ssoLoginService: SsoLoginServiceAbstraction,
configService: ConfigService,
masterPasswordService: InternalMasterPasswordServiceAbstraction,
accountService: AccountService,
toastService: ToastService,
@Inject(WINDOW) protected win: Window,
) {
super(
loginStrategyService,
router,
i18nService,
apiService,
platformUtilsService,
win,
environmentService,
stateService,
route,
logService,
twoFactorService,
appIdService,
loginEmailService,
userDecryptionOptionsService,
ssoLoginService,
configService,
masterPasswordService,
accountService,
toastService,
);
this.onSuccessfulLogin = async () => {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
syncService.fullSync(true);
};
this.onSuccessfulLoginTde = async () => {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
syncService.fullSync(true);
};
}
async anotherMethod() {
const [modal, childComponent] = await this.modalService.openViewRef(
TwoFactorOptionsComponentV1,
this.twoFactorOptionsModal,
);
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
modal.onShown.subscribe(() => {
this.showingModal = true;
});
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
modal.onClosed.subscribe(() => {
this.showingModal = false;
});
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
modal.close();
this.selectedProviderType = provider;
await this.init();
});
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
childComponent.onRecoverSelected.subscribe(() => {
modal.close();
});
}
async submit() {
await super.submit();
if (this.captchaSiteKey) {
const content = document.getElementById("content") as HTMLDivElement;
content.setAttribute("style", "width:335px");
}
}
protected override setupDuoResultListener() {
if (!this.duoCallbackSubscriptionEnabled) {
this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
await this.ngZone.run(async () => {
if (message.command === "duoCallback") {
this.token = message.code + "|" + message.state;
await this.submit();
}
});
});
this.duoCallbackSubscriptionEnabled = true;
}
}
override async launchDuoFrameless() {
if (this.duoFramelessUrl === null) {
this.toastService.showToast({
variant: "error",
title: null,
message: this.i18nService.t("duoHealthCheckResultsInNullAuthUrlError"),
});
return;
}
const duoHandOffMessage = {
title: this.i18nService.t("youSuccessfullyLoggedIn"),
message: this.i18nService.t("youMayCloseThisWindow"),
isCountdown: false,
};
// we're using the connector here as a way to set a cookie with translations
// before continuing to the duo frameless url
const env = await firstValueFrom(this.environmentService.environment$);
const launchUrl =
env.getWebVaultUrl() +
"/duo-redirect-connector.html" +
"?duoFramelessUrl=" +
encodeURIComponent(this.duoFramelessUrl) +
"&handOffMessage=" +
encodeURIComponent(JSON.stringify(duoHandOffMessage));
this.platformUtilsService.launchUri(launchUrl);
}
ngOnDestroy(): void {
if (this.duoCallbackSubscriptionEnabled) {
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
this.duoCallbackSubscriptionEnabled = false;
}
}
}

27
apps/desktop/src/locales/en/messages.json
View File

@@ -833,18 +833,6 @@
"continue": {
"message": "Continue"
},
"enterVerificationCodeApp": {
"message": "Enter the 6 digit verification code from your authenticator app."
},
"enterVerificationCodeEmail": {
"message": "Enter the 6 digit verification code that was emailed to $EMAIL$.",
"placeholders": {
"email": {
"content": "$1",
"example": "example@gmail.com"
}
}
},
"verificationCodeEmailSent": {
"message": "Verification email sent to $EMAIL$.",
"placeholders": {
@@ -854,18 +842,9 @@
}
}
},
"rememberMe": {
"message": "Remember me"
},
"dontAskAgainOnThisDeviceFor30Days": {
"message": "Don't ask again on this device for 30 days"
},
"sendVerificationCodeEmailAgain": {
"message": "Send verification code email again"
},
"useAnotherTwoStepMethod": {
"message": "Use another two-step login method"
},
"selectAnotherMethod": {
"message": "Select another method",
"description": "Select another two-step login method"
@@ -873,9 +852,6 @@
"useYourRecoveryCode": {
"message": "Use your recovery code"
},
"insertYubiKey": {
"message": "Insert your YubiKey into your computer's USB port, then touch its button."
},
"insertU2f": {
"message": "Insert your security key into your computer's USB port. If it has a button, touch it."
},
@@ -3224,9 +3200,6 @@
"duoHealthCheckResultsInNullAuthUrlError": {
"message": "Error connecting with the Duo service. Use a different two-step login method or contact Duo for assistance."
},
"launchDuoAndFollowStepsToFinishLoggingIn": {
"message": "Launch Duo and follow the steps to finish logging in."
},
"duoRequiredByOrgForAccount": {
"message": "Duo two-step login is required for your account."
},

2
apps/desktop/src/scss/pages.scss
View File

@@ -27,7 +27,6 @@
#accessibility-cookie-page,
#register-page,
#hint-page,
#two-factor-page,
#update-temp-password-page,
#remove-password-page {
padding-top: 20px;
@@ -48,7 +47,6 @@
#accessibility-cookie-page,
#register-page,
#hint-page,
#two-factor-page,
#lock-page,
#update-temp-password-page {
.content {

45
apps/web/src/app/auth/two-factor-options-v1.component.html
View File

@@ -1,45 +0,0 @@
<bit-dialog dialogSize="large">
<span bitDialogTitle>
{{ "twoStepOptions" | i18n }}
</span>
<ng-container bitDialogContent>
<div *ngFor="let p of providers" class="tw-m-2">
<div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
<div class="tw-flex tw-items-center tw-justify-center tw-min-w-[120px]">
<auth-two-factor-icon [provider]="p.type" />
</div>
<div class="tw-flex-1">
<h3 bitTypography="h3">{{ p.name }}</h3>
<p bitTypography="body1">{{ p.description }}</p>
</div>
<div class="tw-min-w-20">
<button bitButton type="button" buttonType="secondary" (click)="choose(p)">
{{ "select" | i18n }}
</button>
</div>
</div>
<hr />
</div>
<div class="tw-m-2" (click)="recover()">
<div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
<div class="tw-flex tw-items-center tw-justify-center tw-min-w-[120px]">
<auth-two-factor-icon provider="rc" />
</div>
<div class="tw-flex-1">
<h3 bitTypography="h3">{{ "recoveryCodeTitle" | i18n }}</h3>
<p bitTypography="body1">{{ "recoveryCodeDesc" | i18n }}</p>
</div>
<div class="tw-min-w-20">
<button bitButton type="button" buttonType="secondary" (click)="recover()">
{{ "select" | i18n }}
</button>
</div>
</div>
</div>
</ng-container>
<ng-container bitDialogFooter>
<button bitButton type="button" buttonType="secondary" bitDialogClose>
{{ "close" | i18n }}
</button>
</ng-container>
</bit-dialog>

52
apps/web/src/app/auth/two-factor-options-v1.component.ts
View File

@@ -1,52 +0,0 @@
import { DialogRef } from "@angular/cdk/dialog";
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { TwoFactorOptionsComponentV1 as BaseTwoFactorOptionsComponentV1 } from "@bitwarden/angular/auth/components/two-factor-options-v1.component";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { DialogService } from "@bitwarden/components";
export enum TwoFactorOptionsDialogResult {
Provider = "Provider selected",
Recover = "Recover selected",
}
export type TwoFactorOptionsDialogResultType = {
result: TwoFactorOptionsDialogResult;
type: TwoFactorProviderType;
};
@Component({
selector: "app-two-factor-options",
templateUrl: "two-factor-options-v1.component.html",
})
export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponentV1 {
constructor(
twoFactorService: TwoFactorService,
router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
private dialogRef: DialogRef,
) {
super(twoFactorService, router, i18nService, platformUtilsService, window, environmentService);
}
async choose(p: any) {
await super.choose(p);
this.dialogRef.close({ result: TwoFactorOptionsDialogResult.Provider, type: p.type });
}
async recover() {
await super.recover();
this.dialogRef.close({ result: TwoFactorOptionsDialogResult.Recover });
}
static open(dialogService: DialogService) {
return dialogService.open<TwoFactorOptionsDialogResultType>(TwoFactorOptionsComponentV1);
}
}

106
apps/web/src/app/auth/two-factor-v1.component.html
View File

@@ -1,106 +0,0 @@
<form [bitSubmit]="submitForm" [formGroup]="formGroup" autocomplete="off">
<div class="tw-min-w-96">
<ng-container
*ngIf="
selectedProviderType === providerType.Email ||
selectedProviderType === providerType.Authenticator
"
>
<p bitTypography="body1" *ngIf="selectedProviderType === providerType.Authenticator">
{{ "enterVerificationCodeApp" | i18n }}
</p>
<p bitTypography="body1" *ngIf="selectedProviderType === providerType.Email">
{{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
</p>
<bit-form-field>
<bit-label>{{ "verificationCode" | i18n }}</bit-label>
<input bitInput type="text" formControlName="token" appAutofocus appInputVerbatim />
<bit-hint *ngIf="selectedProviderType === providerType.Email">
<a
bitLink
href="#"
appStopClick
(click)="sendEmail(true)"
*ngIf="selectedProviderType === providerType.Email"
>
{{ "sendVerificationCodeEmailAgain" | i18n }}
</a></bit-hint
>
</bit-form-field>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<p bitTypography="body1" class="tw-text-center">{{ "insertYubiKey" | i18n }}</p>
<picture>
<source srcset="../../images/yubikey.avif" type="image/avif" />
<source srcset="../../images/yubikey.webp" type="image/webp" />
<img src="../../images/yubikey.jpg" class="tw-rounded img-fluid tw-mb-3" alt="" />
</picture>
<bit-form-field>
<bit-label>{{ "verificationCode" | i18n }}</bit-label>
<input type="password" bitInput formControlName="token" appAutofocus appInputVerbatim />
</bit-form-field>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
<div id="web-authn-frame" class="tw-mb-3">
<iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
</ng-container>
<!-- Duo -->
<ng-container *ngIf="isDuoProvider">
<p
bitTypography="body1"
*ngIf="selectedProviderType === providerType.OrganizationDuo"
class="tw-mb-0"
>
{{ "duoRequiredByOrgForAccount" | i18n }}
</p>
<p bitTypography="body1">{{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}</p>
</ng-container>
<bit-form-control *ngIf="selectedProviderType != null">
<bit-label>{{ "rememberMe" | i18n }}</bit-label>
<input type="checkbox" bitCheckbox formControlName="remember" />
</bit-form-control>
<ng-container *ngIf="selectedProviderType == null">
<p bitTypography="body1">{{ "noTwoStepProviders" | i18n }}</p>
<p bitTypography="body1">{{ "noTwoStepProviders2" | i18n }}</p>
</ng-container>
<hr />
<div [hidden]="!showCaptcha()">
<iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<!-- Buttons -->
<div class="tw-flex tw-flex-col tw-space-y-2.5 tw-mb-3">
<button
type="submit"
buttonType="primary"
bitButton
bitFormButton
*ngIf="
selectedProviderType != null &&
!isDuoProvider &&
selectedProviderType !== providerType.WebAuthn
"
>
<span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }} </span>
</button>
<button
(click)="launchDuoFrameless()"
type="button"
buttonType="primary"
bitButton
bitFormButton
*ngIf="isDuoProvider"
>
<span> {{ "launchDuo" | i18n }} </span>
</button>
<a routerLink="/login" bitButton buttonType="secondary">
{{ "cancel" | i18n }}
</a>
</div>
<div class="text-center">
<a bitLink href="#" appStopClick (click)="anotherMethod()">{{
"useAnotherTwoStepMethod" | i18n
}}</a>
</div>
</div>
</form>

164
apps/web/src/app/auth/two-factor-v1.component.ts
View File

@@ -1,164 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { Subject, takeUntil, lastValueFrom } from "rxjs";
import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import {
LoginStrategyServiceAbstraction,
LoginEmailServiceAbstraction,
UserDecryptionOptionsServiceAbstraction,
} from "@bitwarden/auth/common";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
import { DialogService, ToastService } from "@bitwarden/components";
import {
TwoFactorOptionsDialogResult,
TwoFactorOptionsComponentV1,
TwoFactorOptionsDialogResultType,
} from "./two-factor-options-v1.component";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor-v1.component.html",
})
export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnInit, OnDestroy {
@ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
twoFactorOptionsModal: ViewContainerRef;
formGroup = this.formBuilder.group({
token: [
"",
{
validators: [Validators.required],
updateOn: "submit",
},
],
remember: [false],
});
private destroy$ = new Subject<void>();
constructor(
loginStrategyService: LoginStrategyServiceAbstraction,
router: Router,
i18nService: I18nService,
apiService: ApiService,
platformUtilsService: PlatformUtilsService,
stateService: StateService,
environmentService: EnvironmentService,
private dialogService: DialogService,
route: ActivatedRoute,
logService: LogService,
twoFactorService: TwoFactorService,
appIdService: AppIdService,
loginEmailService: LoginEmailServiceAbstraction,
userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
ssoLoginService: SsoLoginServiceAbstraction,
configService: ConfigService,
masterPasswordService: InternalMasterPasswordServiceAbstraction,
accountService: AccountService,
toastService: ToastService,
private formBuilder: FormBuilder,
@Inject(WINDOW) protected win: Window,
) {
super(
loginStrategyService,
router,
i18nService,
apiService,
platformUtilsService,
win,
environmentService,
stateService,
route,
logService,
twoFactorService,
appIdService,
loginEmailService,
userDecryptionOptionsService,
ssoLoginService,
configService,
masterPasswordService,
accountService,
toastService,
);
this.onSuccessfulLoginNavigate = this.goAfterLogIn;
}
async ngOnInit() {
await super.ngOnInit();
this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
this.token = value.token;
this.remember = value.remember;
});
}
submitForm = async () => {
await this.submit();
};
async anotherMethod() {
const dialogRef = TwoFactorOptionsComponentV1.open(this.dialogService);
const response: TwoFactorOptionsDialogResultType = await lastValueFrom(dialogRef.closed);
if (response.result === TwoFactorOptionsDialogResult.Provider) {
this.selectedProviderType = response.type;
await this.init();
}
}
protected override handleMigrateEncryptionKey(result: AuthResult): boolean {
if (!result.requiresEncryptionKeyMigration) {
return false;
}
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["migrate-legacy-encryption"]);
return true;
}
goAfterLogIn = async () => {
this.loginEmailService.clearValues();
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate([this.successRoute], {
queryParams: {
identifier: this.orgIdentifier,
},
});
};
private duoResultChannel: BroadcastChannel;
protected override setupDuoResultListener() {
if (!this.duoResultChannel) {
this.duoResultChannel = new BroadcastChannel("duoResult");
this.duoResultChannel.addEventListener("message", this.handleDuoResultMessage);
}
}
private handleDuoResultMessage = async (msg: { data: { code: string; state: string } }) => {
this.token = msg.data.code + "|" + msg.data.state;
await this.submit();
};
async ngOnDestroy() {
super.ngOnDestroy();
if (this.duoResultChannel) {
// clean up duo listener if it was initialized.
this.duoResultChannel.removeEventListener("message", this.handleDuoResultMessage);
this.duoResultChannel.close();
}
}
}

69
apps/web/src/app/oss-routing.module.ts
View File

@@ -2,7 +2,6 @@ import { NgModule } from "@angular/core";
import { Route, RouterModule, Routes } from "@angular/router";
import { AuthenticationTimeoutComponent } from "@bitwarden/angular/auth/components/authentication-timeout.component";
import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-route-swap";
import {
authGuard,
lockGuard,
@@ -65,7 +64,6 @@ import { AccountComponent } from "./auth/settings/account/account.component";
import { EmergencyAccessComponent } from "./auth/settings/emergency-access/emergency-access.component";
import { EmergencyAccessViewComponent } from "./auth/settings/emergency-access/view/emergency-access-view.component";
import { SecurityRoutingModule } from "./auth/settings/security/security-routing.module";
import { TwoFactorComponentV1 } from "./auth/two-factor-v1.component";
import { UpdatePasswordComponent } from "./auth/update-password.component";
import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";
import { VerifyEmailTokenComponent } from "./auth/verify-email-token.component";
@@ -378,51 +376,28 @@ const routes: Routes = [
},
],
},
...unauthUiRefreshSwap(
TwoFactorComponentV1,
TwoFactorAuthComponent,
{
path: "2fa",
canActivate: [unauthGuardFn()],
children: [
{
path: "",
component: TwoFactorComponentV1,
},
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyYourIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
{
path: "2fa",
canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyYourIdentity",
},
titleAreaMaxWidth: "md",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
),
{
path: "2fa",
component: TwoFactorAuthComponent,
canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyYourIdentity",
},
titleAreaMaxWidth: "md",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
{
path: "lock",
canActivate: [deepLinkGuard(), lockGuard()],

6
apps/web/src/app/shared/loose-components.module.ts
View File

@@ -43,8 +43,6 @@ import { TwoFactorSetupComponent } from "../auth/settings/two-factor/two-factor-
import { TwoFactorVerifyComponent } from "../auth/settings/two-factor/two-factor-verify.component";
import { UserVerificationModule } from "../auth/shared/components/user-verification";
import { SsoComponentV1 } from "../auth/sso-v1.component";
import { TwoFactorOptionsComponentV1 } from "../auth/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
import { UpdatePasswordComponent } from "../auth/update-password.component";
import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
@@ -148,12 +146,10 @@ import { SharedModule } from "./shared.module";
SetPasswordComponent,
SponsoredFamiliesComponent,
SponsoringOrgRowComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorSetupAuthenticatorComponent,
TwoFactorSetupDuoComponent,
TwoFactorSetupEmailComponent,
TwoFactorOptionsComponentV1,
TwoFactorRecoveryComponent,
TwoFactorSetupComponent,
TwoFactorVerifyComponent,
@@ -210,12 +206,10 @@ import { SharedModule } from "./shared.module";
SetPasswordComponent,
SponsoredFamiliesComponent,
SponsoringOrgRowComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorSetupAuthenticatorComponent,
TwoFactorSetupDuoComponent,
TwoFactorSetupEmailComponent,
TwoFactorOptionsComponentV1,
TwoFactorSetupComponent,
TwoFactorVerifyComponent,
TwoFactorSetupWebAuthnComponent,

28
apps/web/src/locales/en/messages.json
View File

@@ -1456,18 +1456,6 @@
}
}
},
"enterVerificationCodeApp": {
"message": "Enter the 6 digit verification code from your authenticator app."
},
"enterVerificationCodeEmail": {
"message": "Enter the 6 digit verification code that was emailed to $EMAIL$.",
"placeholders": {
"email": {
"content": "$1",
"example": "example@gmail.com"
}
}
},
"verificationCodeEmailSent": {
"message": "Verification email sent to $EMAIL$.",
"placeholders": {
@@ -1477,18 +1465,10 @@
}
}
},
"rememberMe": {
"message": "Remember me"
},
"dontAskAgainOnThisDeviceFor30Days": {
"message": "Don't ask again on this device for 30 days"
},
"sendVerificationCodeEmailAgain": {
"message": "Send verification code email again"
},
"useAnotherTwoStepMethod": {
"message": "Use another two-step login method"
},
"selectAnotherMethod": {
"message": "Select another method",
"description": "Select another two-step login method"
@@ -1496,9 +1476,6 @@
"useYourRecoveryCode": {
"message": "Use your recovery code"
},
"insertYubiKey": {
"message": "Insert your YubiKey into your computer's USB port, then touch its button."
},
"insertU2f": {
"message": "Insert your security key into your computer's USB port. If it has a button, touch it."
},
@@ -7273,9 +7250,6 @@
"duoHealthCheckResultsInNullAuthUrlError": {
"message": "Error connecting with the Duo service. Use a different two-step login method or contact Duo for assistance."
},
"launchDuoAndFollowStepsToFinishLoggingIn": {
"message": "Launch Duo and follow the steps to finish logging in."
},
"duoRequiredByOrgForAccount": {
"message": "Duo two-step login is required for your account."
},