1
0
mirror of https://github.com/bitwarden/browser synced 2026-01-03 09:03:32 +00:00

feat(2FA-UI-Refresh): [Auth/PM-8113] - 2FA Components Consolidation and UI Refresh (#12087)

* PM-8113 - Deprecate TwoFactorComponentRefactor feature flag in favor of UnauthenticatedExtensionUIRefresh flag

* PM-8113 - Rename all existing 2FA components as V1.

* PM-8113 - TwoFactorAuthComp - Add comment explaining that tagged unused import is used a dialog.

* PM-8113 - 2FA Auth Comp - deprecate captcha

* PM-8113 - LoginStrategySvc - add todo for deprecation of captcha response

* PM-8113 - TwoFactorAuth tests - remove captcha

* PM-8113  - TwoFactorAuthComp HTML - remove captcha

* PM-8113  - Web Two Factor Auth - update deps

* PM-8113 - Move all new two-factor-auth components into libs/auth instead of libs/angular/src/auth

* PM-8113 - Add new child-components folder to help differentiate between top level page component and child components

* PM-8113 - Add todo for browser TwoFactorAuthEmailComponent

* PM-8113 - TwoFactorAuth - progress on consolidation

* PM-8113 - TwoFactorAuth - add TODO to ensure I don't miss web on success logic

* PM-8113 - TwoFactorAuth - Deprecate browser implementation of two-factor-auth and move all logic into single component - WIP

* PM-8113 - Bring across 2FA session timeout to new 2FA orchestrator comp

* PM-8113 - Export TwoFactorAuth from libs/auth

* PM-8113 - Fix 2FA Auth Comp tests by adding new service deps.

* PM-8113 - Fix TwoFactorAuthExpiredComp imports + TwoFactorAuthComponent imports on other clients.

* PM-8113 - 2FA Auth Comp - Progress on removing onSuccessfulLogin callback

* PM-8113 - 2FA Auth - update deps to private as inheritance will no longer be used.

* PM-8113 - TwoFactorAuthComp - Refactor init a bit.

* PM-8113  - TwoFactorAuthComp - More naming refactors

* PM-8113  - TwoFactorAuth - (1) more refactoring (2) removed onSuccessfulLoginNavigate (3) after successful login we always loginEmailService.clearValues()

* PM-8113 - TwoFactorAuthComp Tests - clean up tests for removed callbacks.

* PM-8113 - TwoFactorAuthComponent - refactor default success route handling

* PM-8113 - TwoFactorAuthComp - More refactoring

* PM-8113 - TwoFactorAuthComp - more refactors

* PM-8113 - TwoFactorAuth - Remove unused service dep

* PM-8113 - TwoFactorAuthComp - Refactor out unused button action text and move checks for continue button visibility into component

* PM-8113 - TwoFactorAuthComponent - Add type for providerData

* PM-8113 - TwoFactorAuthComponent - Add todo

* PM-8113 - TwoFactorAuthComponent - Add client type

* PM-8113 - TwoFactorAuth - implement browser specific SSO + 2FA logic

* PM-8113 - TwoFactorService Abstraction - refactor to use proper functions + mark methods as abstract properly + add null return to getProviders

* PM-8113 - Refactor 2FA Guard logic out of ngOnInit and into own tested guard. Updated all routes.

* PM-8113 - TwoFactorAuthComponent - WIP on webauthn init.

* PM-8113 - TwoFactorAuthComponent - pull webauthn fallback response handling into primary init with checks based on client for if it should be processed.

* PM-8113 - TwoFactorAuthComponent - move linux popup width extension logic into ExtensionTwoFactorAuthComponentService

* PM-8113 - WebTwoFactorAuthComponentService - add explicit override for web's determineLegacyKeyMigrationAction method.

* PM-8113 - Implement new TwoFactorAuthComponentService .openPopoutIfApprovedForEmail2fa to replace extension specific init logic.

* PM-8113 - TwoFactorAuthComponent - misc cleanup

* PM-8113 - TwoFactorAuthComponent - more clean up

* PM-8113 - TwoFactorAuthComponent - WIP on removing TDE callbacks

* PM-8113 - TwoFactorAuthComponent - finish refactoring out all callbacks

* PM-8113 - TwoFactorAuthComponent - remove now unused method

* PM-8113 - TwoFactorAuthComponent - refactor routes.

* PM-8113 - TwoFactorAuthComponent - add TODO

* PM-8113 - TwoFactorAuthComp - isTrustedDeviceEncEnabled - add undefined check for optional window close. + Add todo

* PM-8113 - TwoFactorAuthComponent tests - updated to pass

* PM-8113 - (1) Consolidate TwoFactorAuthEmail component into new service architecture (2) Move openPopoutIfApprovedForEmail2fa to new TwoFactorAuthEmailComponentService

* PM-8113 - Refactor libs/auth/2fa into barrel files.

* PM-8113 - Move TwoFactorAuthEmail content to own folder.

* PM-8113 - Move 2FA Duo to own comp folder.

* PM-8113 - ExtensionTwoFactorAuthEmailComponentService - Add comment

* PM-8113 - TwoFactorAuthEmailComponentService - add docs

* PM-8113  - TwoFactorAuthDuoComponentService - define top level abstraction and each clients implementation of the duo2faResultListener

* PM-8113 - TwoFactorAuthDuoCompService - add client specific handling for launchDuoFrameless

* PM-8113 - Delete no longer used client specific two factor auth duo components.

* PM-8113 - Register TwoFactorAuthDuoComponentService implementation in each client.

* PM-8113 - TwoFactorAuthComp - add destroy ref to fix warnings.

* PM-8113 - Remove accidentally checked in dev change

* PM-8113 - TwoFactorAuthComp - (1) Add loading state (2) Add missing  CheckboxModule import

* PM-8113 - TwoFactorAuthDuoComponent - update takeUntilDestroyed to pass in destroy context as you can't use takeUntilDestroyed in ngOnInit without it.

* PM-8113 - TwoFactorAuthWebAuthnComponent - remove no longer necessary webauthn new tab check as webauthn seems to work without it

* PM-8113 - TwoFactorAuthWebAuthnComp - refactor names and add todo

* PM-8113 - (1) Move WebAuthn 2FA comp to own folder (2) build out client service for new tab logic

* PM-8113 - Register TwoFactorAuthWebAuthnComponentServices

* PM-8113 - Tweak TwoFactorAuthWebAuthnComponentService and add to TwoFactorAuthWebAuthnComponent

* PM-8113 - WebTwoFactorAuthDuoComponentService - fix type issue

* PM-8113 - ExtensionTwoFactorAuthDuoComponentService - attempt to fix type issue.

* PM-8113 - Remove ts-strict-ignore

* PM-8113 - TwoFactorAuthWebAuthnComponent - satisfy strict typescript reqs.

* PM-8113 - TwoFactorAuthComponent - some progress on strict TS conversion

* PM-8113 - TwoFactorAuthComp - fixed all strict typescript issues.

* PM-8113 - TwoFactorAuthComp - remove no longer necessary webauthn code

* PM-8113 - ExtensionTwoFactorAuthComponentService - handleSso2faFlowSuccess - add more context

* PM-8113 - TwoFactorAuthComp - TDE should use same success handler method

* PM-8113 - Fix SSO + 2FA result handling by closing proper popout window

* PM-8113 - Add todo

* PM-8113 - Webauthn 2FA - As webauthn popout doesn't persist SSO state, have to genercize success logic (which should be a good thing but requires confirmation testing).

* PM-8113 - Per main changes, remove deprecated I18nPipe from 2fa comps that use it.

* PM-8113 - Remove more incorrect i18nPipes

* PM-8113 - TwoFactorAuth + Webauthn - Refactor logic

* PM-8113 - TwoFactorAuth - build submitting loading logic

* PM-8113 - TwoFactorAuth - remove loading as submitting.

* PM-8113 - TwoFactorAuth - update to latest authN session timeout logic

* PM-8113 - AuthPopoutWindow - Add new single action popout for email 2FA so we can close it programmatically

* PM-8113 - Update  ExtensionTwoFactorAuthComponentService to close email 2FA single action popouts.

* PM-8113 - Fix build after merge conflict issue

* PM-8113 - 2FA - Duo & Email comps - strict typescript adherence.

* PM-8113 - TwoFactorAuth - Clean up unused stuff and get tests passing

* PM-8113 - Clean up used service method + TODO as I've confirmed it works for other flows.

* PM-8113 - TODO: test all comp services

* PM-8113 - TwoFactorAuthComponent Tests - fix tests by removing mock of removed method.

* PM-8113 - Revert changes to login strategies to avoid scope creep for the sake of typescript strictness.

* PM-8113 - ExtensionTwoFactorAuthComponentService tests

* PM-8113 - Test ExtensionTwoFactorAuthDuoComponentService

* PM-8113 - ExtensionTwoFactorAuthEmailComponentService - add tests

* PM-8113 - Test ExtensionTwoFactorAuthWebAuthnComponentService

* PM-8113 - Add 2fa icons (icons need tweaking still)

* PM-8113 - TwoFactorAuthComponent - add setAnonLayoutDataByTwoFactorProviderType and handle email case as POC

* PM-8113 - TwoFactorEmailComp - work on converting to new design

* PM-8113 - Update icons with proper svg with scaling via viewbox

* PM-8113 - Update icons to use proper classes

* PM-8113 - 2FA Auth Comp - Progress on implementing design changes

* PM-8113 - TwoFactorOptionsComponent - add todos

* PM-8113 - 2fa Email Comp - add style changes per discussion with design

* PM-8113 - TwoFactorAuthComponent - use2faRecoveryCode - build out method per discussion with design

* PM-8113 - TwoFactorAuthComp - fix comp tests

* PM-8113 - TwoFactorAuthComp - progress on adding 2fa provider page icons and subtitles

* PM-8113 - Browser Translations - update duoTwoFactorRequiredPageSubtitle to match design discussion

* PM-8113 - TwoFactorAuthComp - more work on getting page title / icons working

* PM-8113 - Add todo

* PM-8113 - TwoFactorAuthDuoComponent Html - remove text that was moved to page subtitle.

* PM-8113 - 2FA Auth Comp - Duo icon works

* PM-8113 - (1) Add Yubico logo icon (2) Rename Yubikey icon to security key icon

* PM-8113 - TwoFactorAuthComp - remove icon from launch duo button per figma

* PM-8113 - Mark old two-factor-options component as v1.

* PM-8113 - Web - TwoFactorOptionsComponentV1 - Fix import

* PM-8113 - Fix more imports

* PM-8113 - Adjust translations based on meeting with Design

* PM-8113 - TwoFactorOptionsComponent - deprecate recovery code functionality

* PM-8113 - TwoFactorOptionsComponent - remove icon disable logic and unused imports

* PM-8113 - 2FA Options Comp rewritten to match figma

* PM-8113 - TwoFactorOptions - (1) Sort providers like setup screen (2) Add responsive scaling

* PM-8113 - Webauthn 2FA - WIP on updating connectors to latest style

* PM-8113 - Webauthn connector - clean up commented out code and restore block style

* PM-8113 - TwoFactorAuthWebAuthn - Add loading state for iframe until webauthn ready

* PM-8113 - Webauthn Iframe - update translation per figma

* PM-8113 - TwoFactorAuthComp - per figma, put webauthn after checkbox.

* PM-8113 - WebAuthn Fallback connector - UI refreshed

* PM-8113 - Two Factor Options - Implement wrapping

* PM-8113 - TwoFactorAuthAuthenticator - Remove text per figma

* PM-8113 - TwoFactorAuthYubikey - Clean up design per figma

* PM-8113 - Refactor all 2FA flows to use either reactive forms or programmatic submission so we get the benefit of onSubmit form validation like we have elsewhere.

* PM-8113 - 2FA Auth Comp - for form validated 2FA methods, add enter support.

* PM-8113 - TwoFactorAuthComp - Add loginSuccessHandlerService

* PM-8113 - DesktopTwoFactorAuthDuoComponentService - add tests

* PM-8113 - WebTwoFactorAuthDuoComponentService test file - WIP on tests

* PM-8113 - WebTwoFactorAuthDuoComponentService - test listenForDuo2faResult

* PM-8113 - TwoFactorAuthComp - (1) remove unused deps (2) get tests passing

* PM-8113 - Add required to inputs

* PM-8113 - TwoFactorAuth - Save off 2FA providers map so we can only show the select another 2FA method if the user actually has more than 1 configured 2FA method.

* PM-8113 - Webauthn iframe styling must be adjusted per client so adjust desktop and browser extension

* PM-8113 - TwoFactorAuthComp - Integrate latest ssoLoginService changes

* PM-8113 - Desktop & Browser routing modules - add new page title per figma

* PM-8113 - WebAuthn - added optional awaiting security key interaction button state to improve UX.

* PM-8113 - TwoFactorAuthComp - refactor to avoid reactive race condition with retrieval of active user id.

* PM-8113 - ExtensionTwoFactorAuthEmailComponentService - force close the popup since it has stopped closing when the popup opens.

* PM-8113 - TwoFactorAuth - refactor enter key press to exempt non-applicable flows from enter key handling

* PM-8113 - Refactor ExtensionTwoFactorAuthComponentService methods to solve issues with submission

* PM-8113 - TwoFactorAuth - fix programmatic submit of form

* PM-8113 - Fix ExtensionTwoFactorAuthComponentService tests

* PM-8113 - Extension - Webauthn iframe - remove -10px margin

* PM-8113 - Extension Routing module - 2FA screens need back button

* PM-8113 - Get Duo working in extension

* PM-8113 - TwoFactorOptions - tweak styling of row styling to better work for extension

* PM-8113 - TwoFactorWebauthnComp - new tab button styling per figma

* PM-8113 - 2FA Comp - Update logic for hiding / showing the remember me checkbox

* PM-8113 - TwoFactorAuthWebAuthnComp - new tab flow - fix remember me

* PM-8113 - Per PR feedback, add TODO for better provider and module structure for auth component client logic services.

* PM-8113 - TwoFactorAuth - add missing TDE offboarding logic.

* PM-8113 - TwoFactorAuthComponent tests - fix tests

* PM-8113 - 2FA Auth Comp HTML - per PR feedback, remove unnecessary margin bottom

* PM-8113 - 2FA Comp - per PR feedback, remove inSsoFlow as it isn't used.

* PM-8113 - TwoFactorOptionsComp - Clean up no longer needed emitters.

* PM-8113 - TwoFactorOptions - per PR feedback, clean up any usage

* PM-8113 - TwoFactorAuthComp - per PR feedback, rename method from selectOtherTwofactorMethod to selectOtherTwoFactorMethod

* PM-8113 - Per PR feedback, fix translations misspelling

* PM-8113 - TwoFactorAuthSecurityKeyIcon - fix hardcoded value

* PM-8113 - TwoFactorAuthSecurityKeyIcon - fix extra "

* PM-8113 - TwoFactorAuthDuo - Per PR feedback, remove empty template.

* PM-8113 - LooseComponentsModule - re-add accidentally removed component

* PM-8113 - TwoFactorAuthWebAuthnIcon - per PR feedback, fix hardcoded stroke value.

* PM-8113 - Desktop AppRoutingModule - per PR feedback, remove unnecessary AnonLayoutWrapperComponent component property.

* PM-8113 - Update apps/browser/src/auth/services/extension-two-factor-auth-duo-component.service.spec.ts to fix misspelling

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

* PM-8113 - TwoFactorAuthComp - Per PR feedback, add trim to token value

* PM-8113 - TwoFactorService - add typescript strict

* PM-8113 - TwoFactorService - per PR feedback, add jsdocs

* PM-8113 - Per PR feedback, fix misspelling

* PM-8113 - Webauthn fallback - per PR feedback fix stroke

* PM-8113 - Update apps/web/src/connectors/webauthn-fallback.html

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

* PM-8113 - Update libs/auth/src/angular/icons/two-factor-auth/two-factor-auth-webauthn.icon.ts

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

---------

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>
This commit is contained in:
Jared Snider
2025-02-24 09:59:14 -05:00
committed by GitHub
parent 886cf48e77
commit acbff6953c
112 changed files with 3225 additions and 1925 deletions

View File

@@ -3,3 +3,4 @@ export * from "./login-decryption-options";
export * from "./webauthn-login";
export * from "./set-password-jit";
export * from "./registration";
export * from "./two-factor-auth";

View File

@@ -0,0 +1,2 @@
export * from "./web-two-factor-auth-component.service";
export * from "./web-two-factor-auth-duo-component.service";

View File

@@ -0,0 +1,14 @@
import {
DefaultTwoFactorAuthComponentService,
TwoFactorAuthComponentService,
LegacyKeyMigrationAction,
} from "@bitwarden/auth/angular";
export class WebTwoFactorAuthComponentService
extends DefaultTwoFactorAuthComponentService
implements TwoFactorAuthComponentService
{
override determineLegacyKeyMigrationAction(): LegacyKeyMigrationAction {
return LegacyKeyMigrationAction.NAVIGATE_TO_MIGRATION_COMPONENT;
}
}

View File

@@ -0,0 +1,83 @@
import { MockProxy, mock } from "jest-mock-extended";
import { Duo2faResult } from "@bitwarden/auth/angular";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { WebTwoFactorAuthDuoComponentService } from "./web-two-factor-auth-duo-component.service";
describe("WebTwoFactorAuthDuoComponentService", () => {
let webTwoFactorAuthDuoComponentService: WebTwoFactorAuthDuoComponentService;
let platformUtilsService: MockProxy<PlatformUtilsService>;
let mockBroadcastChannel: jest.Mocked<BroadcastChannel>;
let eventTarget: EventTarget;
beforeEach(() => {
jest.clearAllMocks();
platformUtilsService = mock<PlatformUtilsService>();
eventTarget = new EventTarget();
mockBroadcastChannel = {
name: "duoResult",
postMessage: jest.fn(),
close: jest.fn(),
onmessage: jest.fn(),
onmessageerror: jest.fn(),
addEventListener: jest.fn().mockImplementation((type, listener) => {
eventTarget.addEventListener(type, listener);
}),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
};
global.BroadcastChannel = jest.fn(() => mockBroadcastChannel);
webTwoFactorAuthDuoComponentService = new WebTwoFactorAuthDuoComponentService(
platformUtilsService,
);
});
afterEach(() => {
// reset global object
jest.restoreAllMocks();
});
describe("listenForDuo2faResult$", () => {
it("should return an observable that emits a duo 2FA result when a duo result message is received", (done) => {
const expectedResult: Duo2faResult = {
code: "123456",
state: "verified",
token: "123456|verified",
};
const mockMessageEvent = new MessageEvent("message", {
data: {
code: "123456",
state: "verified",
},
lastEventId: "",
origin: "",
ports: [],
source: null,
});
webTwoFactorAuthDuoComponentService.listenForDuo2faResult$().subscribe((result) => {
expect(result).toEqual(expectedResult);
done();
});
// Trigger the message event
eventTarget.dispatchEvent(mockMessageEvent);
});
});
describe("launchDuoFrameless", () => {
it("should launch the duo frameless URL", async () => {
const duoFramelessUrl = "https://duo.com/frameless";
await webTwoFactorAuthDuoComponentService.launchDuoFrameless(duoFramelessUrl);
expect(platformUtilsService.launchUri).toHaveBeenCalledWith(duoFramelessUrl);
});
});
});

View File

@@ -0,0 +1,31 @@
import { fromEvent, map, Observable, share } from "rxjs";
import { TwoFactorAuthDuoComponentService, Duo2faResult } from "@bitwarden/auth/angular";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
export class WebTwoFactorAuthDuoComponentService implements TwoFactorAuthDuoComponentService {
private duo2faResult$: Observable<Duo2faResult>;
constructor(private platformUtilsService: PlatformUtilsService) {
const duoResultChannel: BroadcastChannel = new BroadcastChannel("duoResult");
this.duo2faResult$ = fromEvent<MessageEvent>(duoResultChannel, "message").pipe(
map((msg: MessageEvent) => {
return {
code: msg.data.code,
state: msg.data.state,
token: `${msg.data.code}|${msg.data.state}`,
} as Duo2faResult;
}),
// share the observable so that multiple subscribers can listen to the same event
share(),
);
}
listenForDuo2faResult$(): Observable<Duo2faResult> {
return this.duo2faResult$;
}
async launchDuoFrameless(duoFramelessUrl: string): Promise<void> {
this.platformUtilsService.launchUri(duoFramelessUrl);
}
}

View File

@@ -1,77 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthDuoComponent as TwoFactorAuthDuoBaseComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { AsyncActionsModule } from "../../../../../libs/components/src/async-actions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { ButtonModule } from "../../../../../libs/components/src/button";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { FormFieldModule } from "../../../../../libs/components/src/form-field";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { LinkModule } from "../../../../../libs/components/src/link";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TypographyModule } from "../../../../../libs/components/src/typography";
@Component({
standalone: true,
selector: "app-two-factor-auth-duo",
templateUrl:
"../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.html",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
FormsModule,
],
providers: [I18nPipe],
})
export class TwoFactorAuthDuoComponent
extends TwoFactorAuthDuoBaseComponent
implements OnInit, OnDestroy
{
async ngOnInit(): Promise<void> {
await super.ngOnInit();
}
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.emit(msg.data.code + "|" + msg.data.state);
};
async ngOnDestroy() {
if (this.duoResultChannel) {
// clean up duo listener if it was initialized.
this.duoResultChannel.removeEventListener("message", this.handleDuoResultMessage);
this.duoResultChannel.close();
}
}
}

View File

@@ -1,144 +0,0 @@
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, Inject } from "@angular/core";
import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
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 { 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 {
LinkModule,
TypographyModule,
CheckboxModule,
DialogService,
ToastService,
} from "@bitwarden/components";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthAuthenticatorComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthEmailComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthWebAuthnComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthYubikeyComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorOptionsComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-options.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import {
LoginStrategyServiceAbstraction,
LoginEmailServiceAbstraction,
UserDecryptionOptionsServiceAbstraction,
} from "../../../../../libs/auth/src/common/abstractions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { AsyncActionsModule } from "../../../../../libs/components/src/async-actions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { ButtonModule } from "../../../../../libs/components/src/button";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { FormFieldModule } from "../../../../../libs/components/src/form-field";
import { TwoFactorAuthDuoComponent } from "./two-factor-auth-duo.component";
@Component({
standalone: true,
templateUrl:
"../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
selector: "app-two-factor-auth",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
RouterLink,
CheckboxModule,
TwoFactorOptionsComponent,
TwoFactorAuthEmailComponent,
TwoFactorAuthAuthenticatorComponent,
TwoFactorAuthYubikeyComponent,
TwoFactorAuthDuoComponent,
TwoFactorAuthWebAuthnComponent,
],
providers: [I18nPipe],
})
export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {
constructor(
protected loginStrategyService: LoginStrategyServiceAbstraction,
protected router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
dialogService: DialogService,
protected route: ActivatedRoute,
logService: LogService,
protected twoFactorService: TwoFactorService,
loginEmailService: LoginEmailServiceAbstraction,
userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
protected ssoLoginService: SsoLoginServiceAbstraction,
protected configService: ConfigService,
masterPasswordService: InternalMasterPasswordServiceAbstraction,
accountService: AccountService,
formBuilder: FormBuilder,
@Inject(WINDOW) protected win: Window,
toastService: ToastService,
) {
super(
loginStrategyService,
router,
i18nService,
platformUtilsService,
environmentService,
dialogService,
route,
logService,
twoFactorService,
loginEmailService,
userDecryptionOptionsService,
ssoLoginService,
configService,
masterPasswordService,
accountService,
formBuilder,
win,
toastService,
);
this.onSuccessfulLoginNavigate = this.goAfterLogIn;
}
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;
}
}

View File

@@ -2,7 +2,7 @@ import { DialogRef } from "@angular/cdk/dialog";
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-options.component";
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";
@@ -22,9 +22,9 @@ export type TwoFactorOptionsDialogResultType = {
@Component({
selector: "app-two-factor-options",
templateUrl: "two-factor-options.component.html",
templateUrl: "two-factor-options-v1.component.html",
})
export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponentV1 {
constructor(
twoFactorService: TwoFactorService,
router: Router,
@@ -47,6 +47,6 @@ export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
}
static open(dialogService: DialogService) {
return dialogService.open<TwoFactorOptionsDialogResultType>(TwoFactorOptionsComponent);
return dialogService.open<TwoFactorOptionsDialogResultType>(TwoFactorOptionsComponentV1);
}
}

View File

@@ -5,7 +5,7 @@ import { FormBuilder, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { Subject, takeUntil, lastValueFrom } from "rxjs";
import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import {
LoginStrategyServiceAbstraction,
@@ -29,16 +29,16 @@ import { DialogService, ToastService } from "@bitwarden/components";
import {
TwoFactorOptionsDialogResult,
TwoFactorOptionsComponent,
TwoFactorOptionsComponentV1,
TwoFactorOptionsDialogResultType,
} from "./two-factor-options.component";
} from "./two-factor-options-v1.component";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor.component.html",
templateUrl: "two-factor-v1.component.html",
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit, OnDestroy {
export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnInit, OnDestroy {
@ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
twoFactorOptionsModal: ViewContainerRef;
formGroup = this.formBuilder.group({
@@ -110,7 +110,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit
};
async anotherMethod() {
const dialogRef = TwoFactorOptionsComponent.open(this.dialogService);
const dialogRef = TwoFactorOptionsComponentV1.open(this.dialogService);
const response: TwoFactorOptionsDialogResultType = await lastValueFrom(dialogRef.closed);
if (response.result === TwoFactorOptionsDialogResult.Provider) {
this.selectedProviderType = response.type;

View File

@@ -33,6 +33,8 @@ import {
SetPasswordJitService,
SsoComponentService,
LoginDecryptionOptionsService,
TwoFactorAuthComponentService,
TwoFactorAuthDuoComponentService,
} from "@bitwarden/auth/angular";
import {
InternalUserDecryptionOptionsServiceAbstraction,
@@ -108,6 +110,8 @@ import {
WebRegistrationFinishService,
WebLoginComponentService,
WebLoginDecryptionOptionsService,
WebTwoFactorAuthComponentService,
WebTwoFactorAuthDuoComponentService,
} from "../auth";
import { WebSsoComponentService } from "../auth/core/services/login/web-sso-component.service";
import { AcceptOrganizationInviteService } from "../auth/organization-invite/accept-organization.service";
@@ -261,6 +265,12 @@ const safeProviders: SafeProvider[] = [
useClass: WebLockComponentService,
deps: [],
}),
// TODO: PM-18182 - Refactor component services into lazy loaded modules
safeProvider({
provide: TwoFactorAuthComponentService,
useClass: WebTwoFactorAuthComponentService,
deps: [],
}),
safeProvider({
provide: SetPasswordJitService,
useClass: WebSetPasswordJitService,
@@ -328,6 +338,11 @@ const safeProviders: SafeProvider[] = [
useClass: WebSsoComponentService,
deps: [I18nServiceAbstraction],
}),
safeProvider({
provide: TwoFactorAuthDuoComponentService,
useClass: WebTwoFactorAuthDuoComponentService,
deps: [PlatformUtilsService],
}),
safeProvider({
provide: LoginDecryptionOptionsService,
useClass: WebLoginDecryptionOptionsService,

View File

@@ -12,7 +12,6 @@ import {
activeAuthGuard,
} from "@bitwarden/angular/auth/guards";
import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
import { twofactorRefactorSwap } from "@bitwarden/angular/utils/two-factor-component-refactor-route-swap";
import { NewDeviceVerificationNoticeGuard } from "@bitwarden/angular/vault/guards";
import {
AnonLayoutWrapperComponent,
@@ -38,6 +37,8 @@ import {
SsoComponent,
VaultIcon,
LoginDecryptionOptionsComponent,
TwoFactorAuthComponent,
TwoFactorAuthGuard,
NewDeviceVerificationComponent,
DeviceVerificationIcon,
} from "@bitwarden/auth/angular";
@@ -71,8 +72,7 @@ import { EmergencyAccessComponent } from "./auth/settings/emergency-access/emerg
import { EmergencyAccessViewComponent } from "./auth/settings/emergency-access/view/emergency-access-view.component";
import { SecurityRoutingModule } from "./auth/settings/security/security-routing.module";
import { SsoComponentV1 } from "./auth/sso-v1.component";
import { TwoFactorAuthComponent } from "./auth/two-factor-auth.component";
import { TwoFactorComponent } from "./auth/two-factor.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";
@@ -505,6 +505,50 @@ const routes: Routes = [
},
},
},
...unauthUiRefreshSwap(
TwoFactorComponentV1,
TwoFactorAuthComponent,
{
path: "2fa",
canActivate: [unauthGuardFn()],
children: [
{
path: "",
component: TwoFactorComponentV1,
},
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
{
path: "2fa",
canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
),
{
path: "lock",
canActivate: [deepLinkGuard(), lockGuard()],
@@ -522,25 +566,6 @@ const routes: Routes = [
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
},
{
path: "2fa",
canActivate: [unauthGuardFn()],
children: [
...twofactorRefactorSwap(TwoFactorComponent, TwoFactorAuthComponent, {
path: "",
}),
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
{
path: "authentication-timeout",
canActivate: [unauthGuardFn()],

View File

@@ -44,8 +44,8 @@ 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 { TwoFactorOptionsComponent } from "../auth/two-factor-options.component";
import { TwoFactorComponent } from "../auth/two-factor.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";
@@ -152,12 +152,12 @@ import { SharedModule } from "./shared.module";
SetPasswordComponent,
SponsoredFamiliesComponent,
SponsoringOrgRowComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorSetupAuthenticatorComponent,
TwoFactorComponent,
TwoFactorSetupDuoComponent,
TwoFactorSetupEmailComponent,
TwoFactorOptionsComponent,
TwoFactorOptionsComponentV1,
TwoFactorRecoveryComponent,
TwoFactorSetupComponent,
TwoFactorVerifyComponent,
@@ -216,19 +216,18 @@ import { SharedModule } from "./shared.module";
SetPasswordComponent,
SponsoredFamiliesComponent,
SponsoringOrgRowComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorSetupAuthenticatorComponent,
TwoFactorComponent,
TwoFactorSetupDuoComponent,
TwoFactorSetupEmailComponent,
TwoFactorOptionsComponent,
TwoFactorRecoveryComponent,
TwoFactorOptionsComponentV1,
TwoFactorSetupComponent,
TwoFactorVerifyComponent,
TwoFactorSetupWebAuthnComponent,
TwoFactorSetupYubiKeyComponent,
UpdatePasswordComponent,
UpdateTempPasswordComponent,
UpdatePasswordComponent,
UserLayoutComponent,
VerifyEmailTokenComponent,
VerifyRecoverDeleteComponent,