bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-23 16:13:21 +00:00
Code Issues Releases Wiki Activity

Merge branch 'main' into dirt/pm-26676/risk-insights-refresh-when-org-changes

Browse Source
This commit is contained in:
voommen-livefront
2025-10-22 14:42:40 -05:00
parent d2cea60f28 8154613462
commit a2a62dbb74
79 changed files with 1711 additions and 1120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
apps/browser/project.json
View File

@@ -315,164 +315,53 @@
}
},
"serve": {
"executor": "@nx/webpack:webpack",
"executor": "nx:run-commands",
"defaultConfiguration": "chrome-dev",
"options": {
"outputPath": "dist/apps/browser",
"webpackConfig": "apps/browser/webpack.config.js",
"tsConfig": "apps/browser/tsconfig.json",
"main": "apps/browser/src/popup/main.ts",
"target": "web",
"compiler": "tsc",
"watch": true
"cwd": "apps/browser"
},
"configurations": {
"chrome-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/chrome-dev",
"env": {
"BROWSER": "chrome",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=chrome MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack --watch --output-path=../../dist/apps/browser/chrome-dev"
},
"firefox-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/firefox-dev",
"env": {
"BROWSER": "firefox",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=firefox MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack --watch --output-path=../../dist/apps/browser/firefox-dev"
},
"firefox-mv2-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/firefox-mv2-dev",
"env": {
"BROWSER": "firefox",
"MANIFEST_VERSION": "2",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=firefox MANIFEST_VERSION=2 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack --watch --output-path=../../dist/apps/browser/firefox-mv2-dev"
},
"safari-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/safari-dev",
"env": {
"BROWSER": "safari",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=safari MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack --watch --output-path=../../dist/apps/browser/safari-dev"
},
"safari-mv2-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/safari-mv2-dev",
"env": {
"BROWSER": "safari",
"MANIFEST_VERSION": "2",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=safari MANIFEST_VERSION=2 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack --watch --output-path=../../dist/apps/browser/safari-mv2-dev"
},
"edge-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/edge-dev",
"env": {
"BROWSER": "edge",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=edge MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack --watch --output-path=../../dist/apps/browser/edge-dev"
},
"opera-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/opera-dev",
"env": {
"BROWSER": "opera",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=opera MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack --watch --output-path=../../dist/apps/browser/opera-dev"
},
"commercial-chrome-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/commercial-chrome-dev",
"webpackConfig": "bitwarden_license/bit-browser/webpack.config.js",
"main": "bitwarden_license/bit-browser/src/popup/main.ts",
"tsConfig": "bitwarden_license/bit-browser/tsconfig.json",
"env": {
"BROWSER": "chrome",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=chrome MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack -c ../../bitwarden_license/bit-browser/webpack.config.js --watch --output-path=../../dist/apps/browser/commercial-chrome-dev"
},
"commercial-firefox-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/commercial-firefox-dev",
"webpackConfig": "bitwarden_license/bit-browser/webpack.config.js",
"main": "bitwarden_license/bit-browser/src/popup/main.ts",
"tsConfig": "bitwarden_license/bit-browser/tsconfig.json",
"env": {
"BROWSER": "firefox",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=firefox MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack -c ../../bitwarden_license/bit-browser/webpack.config.js --watch --output-path=../../dist/apps/browser/commercial-firefox-dev"
},
"commercial-firefox-mv2-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/commercial-firefox-mv2-dev",
"webpackConfig": "bitwarden_license/bit-browser/webpack.config.js",
"main": "bitwarden_license/bit-browser/src/popup/main.ts",
"tsConfig": "bitwarden_license/bit-browser/tsconfig.json",
"env": {
"BROWSER": "firefox",
"MANIFEST_VERSION": "2",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=firefox MANIFEST_VERSION=2 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack -c ../../bitwarden_license/bit-browser/webpack.config.js --watch --output-path=../../dist/apps/browser/commercial-firefox-mv2-dev"
},
"commercial-safari-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/commercial-safari-dev",
"webpackConfig": "bitwarden_license/bit-browser/webpack.config.js",
"main": "bitwarden_license/bit-browser/src/popup/main.ts",
"tsConfig": "bitwarden_license/bit-browser/tsconfig.json",
"env": {
"BROWSER": "safari",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=safari MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack -c ../../bitwarden_license/bit-browser/webpack.config.js --watch --output-path=../../dist/apps/browser/commercial-safari-dev"
},
"commercial-safari-mv2-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/commercial-safari-mv2-dev",
"webpackConfig": "bitwarden_license/bit-browser/webpack.config.js",
"main": "bitwarden_license/bit-browser/src/popup/main.ts",
"tsConfig": "bitwarden_license/bit-browser/tsconfig.json",
"env": {
"BROWSER": "safari",
"MANIFEST_VERSION": "2",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=safari MANIFEST_VERSION=2 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack -c ../../bitwarden_license/bit-browser/webpack.config.js --watch --output-path=../../dist/apps/browser/commercial-safari-mv2-dev"
},
"commercial-edge-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/commercial-edge-dev",
"webpackConfig": "bitwarden_license/bit-browser/webpack.config.js",
"main": "bitwarden_license/bit-browser/src/popup/main.ts",
"tsConfig": "bitwarden_license/bit-browser/tsconfig.json",
"env": {
"BROWSER": "edge",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=edge MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack -c ../../bitwarden_license/bit-browser/webpack.config.js --watch --output-path=../../dist/apps/browser/commercial-edge-dev"
},
"commercial-opera-dev": {
"mode": "development",
"outputPath": "dist/apps/browser/commercial-opera-dev",
"webpackConfig": "bitwarden_license/bit-browser/webpack.config.js",
"main": "bitwarden_license/bit-browser/src/popup/main.ts",
"tsConfig": "bitwarden_license/bit-browser/tsconfig.json",
"env": {
"BROWSER": "opera",
"MANIFEST_VERSION": "3",
"NODE_ENV": "development"
}
"command": "cross-env BROWSER=opera MANIFEST_VERSION=3 NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192\" webpack -c ../../bitwarden_license/bit-browser/webpack.config.js --watch --output-path=../../dist/apps/browser/commercial-opera-dev"
}
}
},

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

@@ -5715,6 +5715,9 @@
"confirmKeyConnectorDomain": {
"message": "Confirm Key Connector domain"
},
"atRiskLoginsSecured": {
"message": "Great job securing your at-risk logins!"
},
"settingDisabledByPolicy": {
"message": "This setting is disabled by your organization's policy.",
"description": "This hint text is displayed when a user setting is disabled due to an organization policy."

6
apps/browser/src/background/main.background.ts
View File

@@ -319,6 +319,7 @@ import I18nService from "../platform/services/i18n.service";
import { LocalBackedSessionStorageService } from "../platform/services/local-backed-session-storage.service";
import { BackgroundPlatformUtilsService } from "../platform/services/platform-utils/background-platform-utils.service";
import { BrowserPlatformUtilsService } from "../platform/services/platform-utils/browser-platform-utils.service";
import { PopupRouterCacheBackgroundService } from "../platform/services/popup-router-cache-background.service";
import { PopupViewCacheBackgroundService } from "../platform/services/popup-view-cache-background.service";
import { BrowserSdkLoadService } from "../platform/services/sdk/browser-sdk-load.service";
import { BackgroundTaskSchedulerService } from "../platform/services/task-scheduler/background-task-scheduler.service";
@@ -488,6 +489,7 @@ export default class MainBackground {
private nativeMessagingBackground: NativeMessagingBackground;
private popupViewCacheBackgroundService: PopupViewCacheBackgroundService;
private popupRouterCacheBackgroundService: PopupRouterCacheBackgroundService;
constructor() {
// Services
@@ -684,6 +686,9 @@ export default class MainBackground {
this.globalStateProvider,
this.taskSchedulerService,
);
this.popupRouterCacheBackgroundService = new PopupRouterCacheBackgroundService(
this.globalStateProvider,
);
this.migrationRunner = new MigrationRunner(
this.storageService,
@@ -1514,6 +1519,7 @@ export default class MainBackground {
(this.eventUploadService as EventUploadService).init(true);
this.popupViewCacheBackgroundService.startObservingMessages();
this.popupRouterCacheBackgroundService.init();
await this.vaultTimeoutService.init(true);
this.fido2Background.init();

50
apps/browser/src/platform/popup/view-cache/popup-router-cache.service.ts
View File

@@ -5,6 +5,7 @@ import { Injectable, inject } from "@angular/core";
import {
ActivatedRouteSnapshot,
CanActivateFn,
Data,
NavigationEnd,
Router,
UrlSerializer,
@@ -14,7 +15,10 @@ import { filter, first, firstValueFrom, map, Observable, of, switchMap, tap } fr
import { GlobalStateProvider } from "@bitwarden/common/platform/state";
import { POPUP_ROUTE_HISTORY_KEY } from "../../../platform/services/popup-view-cache-background.service";
import {
POPUP_ROUTE_HISTORY_KEY,
RouteHistoryCacheState,
} from "../../../platform/services/popup-view-cache-background.service";
import BrowserPopupUtils from "../../browser/browser-popup-utils";
/**
@@ -42,8 +46,7 @@ export class PopupRouterCacheService {
this.history$()
.pipe(first())
.subscribe(
(history) =>
Array.isArray(history) && history.forEach((location) => this.location.go(location)),
(history) => Array.isArray(history) && history.forEach(({ url }) => this.location.go(url)),
);
// update state when route change occurs
@@ -54,31 +57,33 @@ export class PopupRouterCacheService {
// `Location.back()` can now be called successfully
this.hasNavigated = true;
}),
filter((_event: NavigationEnd) => {
map((event) => {
const state: ActivatedRouteSnapshot = this.router.routerState.snapshot.root;
let child = state.firstChild;
while (child.firstChild) {
child = child.firstChild;
}
return !child?.data?.doNotSaveUrl;
return { event, data: child.data };
}),
switchMap((event) => this.push(event.url)),
filter(({ data }) => {
return !data?.doNotSaveUrl;
}),
switchMap(({ event, data }) => this.push(event.url, data)),
)
.subscribe();
}
history$(): Observable<string[]> {
history$(): Observable<RouteHistoryCacheState[]> {
return this.state.state$;
}
async setHistory(state: string[]): Promise<string[]> {
async setHistory(state: RouteHistoryCacheState[]): Promise<RouteHistoryCacheState[]> {
return this.state.update(() => state);
}
/** Get the last item from the history stack, or `null` if empty */
last$(): Observable<string | null> {
last$(): Observable<RouteHistoryCacheState | null> {
return this.history$().pipe(
map((history) => {
if (!history || history.length === 0) {
@@ -92,11 +97,24 @@ export class PopupRouterCacheService {
/**
* If in browser popup, push new route onto history stack
*/
private async push(url: string) {
if (!BrowserPopupUtils.inPopup(window) || url === (await firstValueFrom(this.last$()))) {
private async push(url: string, data: Data) {
if (
!BrowserPopupUtils.inPopup(window) ||
url === (await firstValueFrom(this.last$().pipe(map((h) => h?.url))))
) {
return;
}
await this.state.update((prevState) => (prevState == null ? [url] : prevState.concat(url)));
const routeEntry: RouteHistoryCacheState = {
url,
options: {
resetRouterCacheOnTabChange: data?.resetRouterCacheOnTabChange ?? false,
},
};
await this.state.update((prevState) =>
prevState == null ? [routeEntry] : prevState.concat(routeEntry),
);
}
/**
@@ -142,13 +160,13 @@ export const popupRouterCacheGuard = ((): Observable<true | UrlTree> => {
}
return popupHistoryService.last$().pipe(
map((url: string) => {
if (!url) {
map((entry) => {
if (!entry) {
return true;
}
popupHistoryService.markCacheRestored();
return urlSerializer.parse(url);
return urlSerializer.parse(entry.url);
}),
);
}) satisfies CanActivateFn;

33
apps/browser/src/platform/popup/view-cache/popup-router-cache.spec.ts
View File

@@ -96,11 +96,31 @@ describe("Popup router cache guard", () => {
// wait for router events subscription
await flushPromises();
expect(await firstValueFrom(service.history$())).toEqual(["/a", "/b"]);
expect(await firstValueFrom(service.history$())).toEqual([
{
options: {
resetRouterCacheOnTabChange: false,
},
url: "/a",
},
{
options: {
resetRouterCacheOnTabChange: false,
},
url: "/b",
},
]);
await service.back();
expect(await firstValueFrom(service.history$())).toEqual(["/a"]);
expect(await firstValueFrom(service.history$())).toEqual([
{
options: {
resetRouterCacheOnTabChange: false,
},
url: "/a",
},
]);
});
it("does not save ignored routes", async () => {
@@ -121,6 +141,13 @@ describe("Popup router cache guard", () => {
await flushPromises();
expect(await firstValueFrom(service.history$())).toEqual(["/a"]);
expect(await firstValueFrom(service.history$())).toEqual([
{
options: {
resetRouterCacheOnTabChange: false,
},
url: "/a",
},
]);
});
});

55
apps/browser/src/platform/services/popup-router-cache-background.service.ts Normal file
View File

@@ -0,0 +1,55 @@
import { switchMap, filter, map, first, of } from "rxjs";
import { GlobalStateProvider } from "@bitwarden/common/platform/state";
import { BrowserApi } from "../browser/browser-api";
import { fromChromeEvent } from "../browser/from-chrome-event";
import { POPUP_ROUTE_HISTORY_KEY } from "./popup-view-cache-background.service";
export class PopupRouterCacheBackgroundService {
private popupRouteHistoryState = this.globalStateProvider.get(POPUP_ROUTE_HISTORY_KEY);
constructor(private globalStateProvider: GlobalStateProvider) {}
init() {
fromChromeEvent(chrome.tabs.onActivated)
.pipe(
switchMap((tabs) => BrowserApi.getTab(tabs[0].tabId)!),
switchMap((tab) => {
// FireFox sets the `url` to "about:blank" and won't populate the `url` until the `onUpdated` event
if (tab.url !== "about:blank") {
return of(tab);
}
return fromChromeEvent(chrome.tabs.onUpdated).pipe(
first(),
switchMap(([tabId]) => BrowserApi.getTab(tabId)!),
);
}),
map((tab) => tab.url || tab.pendingUrl),
filter((url) => !url?.startsWith(chrome.runtime.getURL(""))),
switchMap(() =>
this.popupRouteHistoryState.update((state) => {
if (!state || state.length === 0) {
return state;
}
const lastRoute = state.at(-1);
if (!lastRoute) {
return state;
}
// When the last route has resetRouterCacheOnTabChange set
// Reset the route history to empty to force the user to the default route
if (lastRoute.options?.resetRouterCacheOnTabChange) {
return [];
}
return state;
}),
),
)
.subscribe();
}
}

20
apps/browser/src/platform/services/popup-view-cache-background.service.ts
View File

@@ -42,6 +42,22 @@ export type ViewCacheState = {
options?: ViewCacheOptions;
};
export type RouteCacheOptions = {
/**
* When true, the route history will be reset on tab change and respective route was the last visited route.
* i.e. Upon the user re-opening the extension the route history will be empty and the user will be taken to the default route.
*/
resetRouterCacheOnTabChange?: boolean;
};
export type RouteHistoryCacheState = {
/** Route URL */
url: string;
/** Options for managing the route history cache */
options?: RouteCacheOptions;
};
/** We cannot use `UserKeyDefinition` because we must be able to store state when there is no active user. */
export const POPUP_VIEW_CACHE_KEY = KeyDefinition.record<ViewCacheState>(
POPUP_VIEW_MEMORY,
@@ -51,9 +67,9 @@ export const POPUP_VIEW_CACHE_KEY = KeyDefinition.record<ViewCacheState>(
},
);
export const POPUP_ROUTE_HISTORY_KEY = new KeyDefinition<string[]>(
export const POPUP_ROUTE_HISTORY_KEY = new KeyDefinition<RouteHistoryCacheState[]>(
POPUP_VIEW_MEMORY,
"popup-route-history",
"popup-route-history-details",
{
deserializer: (jsonValue) => jsonValue,
},

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

@@ -59,6 +59,7 @@ import { ProtectedByComponent } from "../dirt/phishing-detection/pages/protected
import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
import BrowserPopupUtils from "../platform/browser/browser-popup-utils";
import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
import { RouteCacheOptions } from "../platform/services/popup-view-cache-background.service";
import { CredentialGeneratorHistoryComponent } from "../tools/popup/generator/credential-generator-history.component";
import { CredentialGeneratorComponent } from "../tools/popup/generator/credential-generator.component";
import { SendAddEditComponent as SendAddEditV2Component } from "../tools/popup/send-v2/add-edit/send-add-edit.component";
@@ -76,7 +77,10 @@ import { IntroCarouselComponent } from "../vault/popup/components/vault-v2/intro
import { PasswordHistoryV2Component } from "../vault/popup/components/vault-v2/vault-password-history-v2/vault-password-history-v2.component";
import { VaultV2Component } from "../vault/popup/components/vault-v2/vault-v2.component";
import { ViewV2Component } from "../vault/popup/components/vault-v2/view-v2/view-v2.component";
import { canAccessAtRiskPasswords } from "../vault/popup/guards/at-risk-passwords.guard";
import {
canAccessAtRiskPasswords,
hasAtRiskPasswords,
} from "../vault/popup/guards/at-risk-passwords.guard";
import { clearVaultStateGuard } from "../vault/popup/guards/clear-vault-state.guard";
import { IntroCarouselGuard } from "../vault/popup/guards/intro-carousel.guard";
import { AppearanceV2Component } from "../vault/popup/settings/appearance-v2.component";
@@ -98,7 +102,7 @@ import { TabsV2Component } from "./tabs-v2.component";
/**
* Data properties acceptable for use in extension route objects
*/
export interface RouteDataProperties {
export interface RouteDataProperties extends RouteCacheOptions {
elevation: RouteElevation;
/**
@@ -204,7 +208,7 @@ const routes: Routes = [
path: "add-cipher",
component: AddEditV2Component,
canActivate: [authGuard, debounceNavigationGuard()],
data: { elevation: 1 } satisfies RouteDataProperties,
data: { elevation: 1, resetRouterCacheOnTabChange: true } satisfies RouteDataProperties,
runGuardsAndResolvers: "always",
},
{
@@ -214,6 +218,7 @@ const routes: Routes = [
data: {
// Above "trash"
elevation: 3,
resetRouterCacheOnTabChange: true,
} satisfies RouteDataProperties,
runGuardsAndResolvers: "always",
},
@@ -690,7 +695,7 @@ const routes: Routes = [
{
path: "at-risk-passwords",
component: AtRiskPasswordsComponent,
canActivate: [authGuard, canAccessAtRiskPasswords],
canActivate: [authGuard, canAccessAtRiskPasswords, hasAtRiskPasswords],
},
{
path: "account-switcher",

36
apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.html
View File

@@ -1,8 +1,28 @@
<bit-callout *ngIf="(pendingTasks$ | async)?.length as taskCount" type="warning" [title]="''">
<a bitLink [routerLink]="'/at-risk-passwords'">
{{
(taskCount === 1 ? "reviewAndChangeAtRiskPassword" : "reviewAndChangeAtRiskPasswordsPlural")
| i18n: taskCount.toString()
}}
</a>
</bit-callout>
@if ((currentPendingTasks$ | async)?.length > 0) {
<bit-banner
class="-tw-m-5 tw-flex tw-flex-col tw-pt-2 tw-px-2 tw-mb-3"
bannerType="warning"
[showClose]="false"
>
<a bitLink linkType="secondary" [routerLink]="'/at-risk-passwords'">
{{
((currentPendingTasks$ | async)?.length === 1
? "reviewAndChangeAtRiskPassword"
: "reviewAndChangeAtRiskPasswordsPlural"
) | i18n: (currentPendingTasks$ | async)?.length.toString()
}}
</a>
</bit-banner>
}
@if (showCompletedTasksBanner$ | async) {
<bit-banner
class="-tw-m-5 tw-flex tw-flex-col tw-pt-2 tw-px-2 tw-mb-3"
bannerType="info"
[icon]="null"
[showClose]="true"
(onClose)="successBannerDismissed()"
>
{{ "atRiskLoginsSecured" | i18n }}
</bit-banner>
}

55
apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts
View File

@@ -1,42 +1,47 @@
import { CommonModule } from "@angular/common";
import { Component, inject } from "@angular/core";
import { RouterModule } from "@angular/router";
import { combineLatest, map, switchMap } from "rxjs";
import { firstValueFrom, switchMap } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { getUserId } from "@bitwarden/common/auth/services/account.service";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { SecurityTaskType, TaskService } from "@bitwarden/common/vault/tasks";
import { AnchorLinkDirective, CalloutModule } from "@bitwarden/components";
import { AnchorLinkDirective, CalloutModule, BannerModule } from "@bitwarden/components";
import { I18nPipe } from "@bitwarden/ui-common";
import { AtRiskPasswordCalloutData, AtRiskPasswordCalloutService } from "@bitwarden/vault";
@Component({
selector: "vault-at-risk-password-callout",
imports: [CommonModule, AnchorLinkDirective, RouterModule, CalloutModule, I18nPipe],
imports: [
AnchorLinkDirective,
CommonModule,
RouterModule,
CalloutModule,
I18nPipe,
BannerModule,
JslibModule,
],
providers: [AtRiskPasswordCalloutService],
templateUrl: "./at-risk-password-callout.component.html",
})
export class AtRiskPasswordCalloutComponent {
private taskService = inject(TaskService);
private cipherService = inject(CipherService);
private activeAccount$ = inject(AccountService).activeAccount$.pipe(getUserId);
private atRiskPasswordCalloutService = inject(AtRiskPasswordCalloutService);
protected pendingTasks$ = this.activeAccount$.pipe(
switchMap((userId) =>
combineLatest([
this.taskService.pendingTasks$(userId),
this.cipherService.cipherViews$(userId),
]),
),
map(([tasks, ciphers]) =>
tasks.filter((t) => {
const associatedCipher = ciphers.find((c) => c.id === t.cipherId);
return (
t.type === SecurityTaskType.UpdateAtRiskCredential &&
associatedCipher &&
!associatedCipher.isDeleted
);
}),
),
showCompletedTasksBanner$ = this.activeAccount$.pipe(
switchMap((userId) => this.atRiskPasswordCalloutService.showCompletedTasksBanner$(userId)),
);
currentPendingTasks$ = this.activeAccount$.pipe(
switchMap((userId) => this.atRiskPasswordCalloutService.pendingTasks$(userId)),
);
async successBannerDismissed() {
const updateObject: AtRiskPasswordCalloutData = {
hasInteractedWithTasks: true,
tasksBannerDismissed: true,
};
const userId = await firstValueFrom(this.activeAccount$);
this.atRiskPasswordCalloutService.updateAtRiskPasswordState(userId, updateObject);
}
}

16
apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts
View File

@@ -14,6 +14,9 @@ import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/s
import { InlineMenuVisibilitySetting } from "@bitwarden/common/autofill/types";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { StateProvider } from "@bitwarden/common/platform/state";
import { FakeAccountService, FakeStateProvider } from "@bitwarden/common/spec";
import { UserId } from "@bitwarden/common/types/guid";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { EndUserNotificationService } from "@bitwarden/common/vault/notifications";
@@ -24,6 +27,7 @@ import {
ChangeLoginPasswordService,
DefaultChangeLoginPasswordService,
PasswordRepromptService,
AtRiskPasswordCalloutService,
} from "@bitwarden/vault";
import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
@@ -68,6 +72,9 @@ describe("AtRiskPasswordsComponent", () => {
let mockNotifications$: BehaviorSubject<NotificationView[]>;
let mockInlineMenuVisibility$: BehaviorSubject<InlineMenuVisibilitySetting>;
let calloutDismissed$: BehaviorSubject<boolean>;
let mockAtRiskPasswordCalloutService: any;
let stateProvider: FakeStateProvider;
let mockAccountService: FakeAccountService;
const setInlineMenuVisibility = jest.fn();
const mockToastService = mock<ToastService>();
const mockAtRiskPasswordPageService = mock<AtRiskPasswordPageService>();
@@ -112,6 +119,11 @@ describe("AtRiskPasswordsComponent", () => {
mockToastService.showToast.mockClear();
mockDialogService.open.mockClear();
mockAtRiskPasswordPageService.isCalloutDismissed.mockReturnValue(calloutDismissed$);
mockAccountService = {
activeAccount$: of({ id: "user" as UserId }),
activeUserId: "user" as UserId,
} as unknown as FakeAccountService;
stateProvider = new FakeStateProvider(mockAccountService);
await TestBed.configureTestingModule({
imports: [AtRiskPasswordsComponent],
@@ -141,7 +153,7 @@ describe("AtRiskPasswordsComponent", () => {
},
},
{ provide: I18nService, useValue: { t: (key: string) => key } },
{ provide: AccountService, useValue: { activeAccount$: of({ id: "user" }) } },
{ provide: AccountService, useValue: mockAccountService },
{ provide: PlatformUtilsService, useValue: mock<PlatformUtilsService>() },
{ provide: PasswordRepromptService, useValue: mock<PasswordRepromptService>() },
{
@@ -152,6 +164,8 @@ describe("AtRiskPasswordsComponent", () => {
},
},
{ provide: ToastService, useValue: mockToastService },
{ provide: StateProvider, useValue: stateProvider },
{ provide: AtRiskPasswordCalloutService, useValue: mockAtRiskPasswordCalloutService },
],
})
.overrideModule(JslibModule, {

10
apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.ts
View File

@@ -41,6 +41,7 @@ import {
TypographyModule,
} from "@bitwarden/components";
import {
AtRiskPasswordCalloutService,
ChangeLoginPasswordService,
DefaultChangeLoginPasswordService,
PasswordRepromptService,
@@ -75,6 +76,7 @@ import { AtRiskPasswordPageService } from "./at-risk-password-page.service";
providers: [
AtRiskPasswordPageService,
{ provide: ChangeLoginPasswordService, useClass: DefaultChangeLoginPasswordService },
AtRiskPasswordCalloutService,
],
selector: "vault-at-risk-passwords",
templateUrl: "./at-risk-passwords.component.html",
@@ -95,13 +97,14 @@ export class AtRiskPasswordsComponent implements OnInit {
private dialogService = inject(DialogService);
private endUserNotificationService = inject(EndUserNotificationService);
private destroyRef = inject(DestroyRef);
private atRiskPasswordCalloutService = inject(AtRiskPasswordCalloutService);
/**
* The cipher that is currently being launched. Used to show a loading spinner on the badge button.
* The UI utilize a bitBadge which does not support async actions (like bitButton does).
* @protected
*/
protected launchingCipher = signal<CipherView | null>(null);
protected readonly launchingCipher = signal<CipherView | null>(null);
private activeUserData$ = this.accountService.activeAccount$.pipe(
filterOutNullish(),
@@ -199,6 +202,11 @@ export class AtRiskPasswordsComponent implements OnInit {
}
this.markTaskNotificationsAsRead();
this.atRiskPasswordCalloutService.updateAtRiskPasswordState(userId, {
hasInteractedWithTasks: true,
tasksBannerDismissed: false,
});
}
private markTaskNotificationsAsRead() {

4
apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
View File

@@ -41,6 +41,9 @@
</bit-spotlight>
</ng-container>
<ng-container *ngIf="vaultState !== VaultStateEnum.Empty">
<!-- At-Risk callout displays as a banner and should always remain visually above all other callouts -->
<vault-at-risk-password-callout></vault-at-risk-password-callout>
<div class="tw-mb-4" *ngIf="showHasItemsVaultSpotlight$ | async">
<bit-spotlight
[title]="'hasItemsVaultNudgeTitle' | i18n"
@@ -53,7 +56,6 @@
</ul>
</bit-spotlight>
</div>
<vault-at-risk-password-callout></vault-at-risk-password-callout>
<app-vault-header-v2></app-vault-header-v2>
</ng-container>
</ng-container>

40
apps/browser/src/vault/popup/guards/at-risk-passwords.guard.ts
View File

@@ -1,10 +1,11 @@
import { inject } from "@angular/core";
import { CanActivateFn, Router } from "@angular/router";
import { map, switchMap } from "rxjs";
import { combineLatest, map, switchMap } from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { TaskService } from "@bitwarden/common/vault/tasks";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { SecurityTaskType, TaskService } from "@bitwarden/common/vault/tasks";
import { filterOutNullish } from "@bitwarden/common/vault/utils/observable-utilities";
import { ToastService } from "@bitwarden/components";
@@ -32,3 +33,38 @@ export const canAccessAtRiskPasswords: CanActivateFn = () => {
}),
);
};
export const hasAtRiskPasswords: CanActivateFn = () => {
const accountService = inject(AccountService);
const taskService = inject(TaskService);
const cipherService = inject(CipherService);
const router = inject(Router);
return accountService.activeAccount$.pipe(
filterOutNullish(),
switchMap((user) =>
combineLatest([
taskService.pendingTasks$(user.id),
cipherService.cipherViews$(user.id).pipe(
filterOutNullish(),
map((ciphers) => Object.fromEntries(ciphers.map((c) => [c.id, c]))),
),
]).pipe(
map(([tasks, ciphers]) => {
const hasAtRiskCiphers = tasks.some(
(t) =>
t.type === SecurityTaskType.UpdateAtRiskCredential &&
t.cipherId != null &&
ciphers[t.cipherId] != null &&
!ciphers[t.cipherId].isDeleted,
);
if (!hasAtRiskCiphers) {
return router.createUrlTree(["/tabs/vault"]);
}
return true;
}),
),
),
);
};

6
apps/web/src/app/admin-console/organizations/members/members.component.ts
View File

@@ -105,14 +105,14 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
memberTab = MemberDialogTab;
protected dataSource = new MembersTableDataSource();
organization: Signal<Organization | undefined>;
readonly organization: Signal<Organization | undefined>;
status: OrganizationUserStatusType | undefined;
orgResetPasswordPolicyEnabled = false;
protected canUseSecretsManager: Signal<boolean> = computed(
protected readonly canUseSecretsManager: Signal<boolean> = computed(
() => this.organization()?.useSecretsManager ?? false,
);
protected showUserManagementControls: Signal<boolean> = computed(
protected readonly showUserManagementControls: Signal<boolean> = computed(
() => this.organization()?.canManageUsers ?? false,
);
private refreshBillingMetadata$: BehaviorSubject<null> = new BehaviorSubject(null);

8
apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.spec.ts
View File

@@ -32,8 +32,8 @@ import {
standalone: true,
})
class MockUpgradeAccountComponent {
dialogTitleMessageOverride = input<string | null>(null);
hideContinueWithoutUpgradingButton = input<boolean>(false);
readonly dialogTitleMessageOverride = input<string | null>(null);
readonly hideContinueWithoutUpgradingButton = input<boolean>(false);
planSelected = output<PersonalSubscriptionPricingTierId>();
closeClicked = output<UpgradeAccountStatus>();
}
@@ -44,8 +44,8 @@ class MockUpgradeAccountComponent {
standalone: true,
})
class MockUpgradePaymentComponent {
selectedPlanId = input<PersonalSubscriptionPricingTierId | null>(null);
account = input<Account | null>(null);
readonly selectedPlanId = input<PersonalSubscriptionPricingTierId | null>(null);
readonly account = input<Account | null>(null);
goBack = output<void>();
complete = output<UpgradePaymentResult>();
}

12
apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts
View File

@@ -77,11 +77,13 @@ export type UnifiedUpgradeDialogParams = {
})
export class UnifiedUpgradeDialogComponent implements OnInit {
// Use signals for dialog state because inputs depend on parent component
protected step = signal<UnifiedUpgradeDialogStep>(UnifiedUpgradeDialogStep.PlanSelection);
protected selectedPlan = signal<PersonalSubscriptionPricingTierId | null>(null);
protected account = signal<Account | null>(null);
protected planSelectionStepTitleOverride = signal<string | null>(null);
protected hideContinueWithoutUpgradingButton = signal<boolean>(false);
protected readonly step = signal<UnifiedUpgradeDialogStep>(
UnifiedUpgradeDialogStep.PlanSelection,
);
protected readonly selectedPlan = signal<PersonalSubscriptionPricingTierId | null>(null);
protected readonly account = signal<Account | null>(null);
protected readonly planSelectionStepTitleOverride = signal<string | null>(null);
protected readonly hideContinueWithoutUpgradingButton = signal<boolean>(false);
protected readonly PaymentStep = UnifiedUpgradeDialogStep.Payment;
protected readonly PlanSelectionStep = UnifiedUpgradeDialogStep.PlanSelection;

8
apps/web/src/app/billing/individual/upgrade/upgrade-account/upgrade-account.component.ts
View File

@@ -52,11 +52,11 @@ type CardDetails = {
templateUrl: "./upgrade-account.component.html",
})
export class UpgradeAccountComponent implements OnInit {
dialogTitleMessageOverride = input<string | null>(null);
hideContinueWithoutUpgradingButton = input<boolean>(false);
readonly dialogTitleMessageOverride = input<string | null>(null);
readonly hideContinueWithoutUpgradingButton = input<boolean>(false);
planSelected = output<PersonalSubscriptionPricingTierId>();
closeClicked = output<UpgradeAccountStatus>();
protected loading = signal(true);
protected readonly loading = signal(true);
protected premiumCardDetails!: CardDetails;
protected familiesCardDetails!: CardDetails;
@@ -64,7 +64,7 @@ export class UpgradeAccountComponent implements OnInit {
protected premiumPlanType = PersonalSubscriptionPricingTierIds.Premium;
protected closeStatus = UpgradeAccountStatus.Closed;
protected dialogTitle = computed(() => {
protected readonly dialogTitle = computed(() => {
return this.dialogTitleMessageOverride() || "individualUpgradeWelcomeMessage";
});

6
apps/web/src/app/billing/individual/upgrade/upgrade-payment/upgrade-payment.component.ts
View File

@@ -75,8 +75,8 @@ export type UpgradePaymentParams = {
templateUrl: "./upgrade-payment.component.html",
})
export class UpgradePaymentComponent implements OnInit, AfterViewInit {
protected selectedPlanId = input.required<PersonalSubscriptionPricingTierId>();
protected account = input.required<Account>();
protected readonly selectedPlanId = input.required<PersonalSubscriptionPricingTierId>();
protected readonly account = input.required<Account>();
protected goBack = output<void>();
protected complete = output<UpgradePaymentResult>();
protected selectedPlan: PlanDetails | null = null;
@@ -90,7 +90,7 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
billingAddress: EnterBillingAddressComponent.getFormGroup(),
});
protected loading = signal(true);
protected readonly loading = signal(true);
private pricingTiers$!: Observable<PersonalSubscriptionPricingTier[]>;
// Cart Summary data

14
apps/web/src/app/key-management/change-kdf/change-kdf-confirmation.component.html
View File

@@ -1,12 +1,14 @@
<form [formGroup]="form" [bitSubmit]="submit" autocomplete="off">
<bit-dialog>
<span bitDialogTitle>
{{ "changeKdf" | i18n }}
{{ "updateYourEncryptionSettings" | i18n }}
</span>
<span bitDialogContent>
<bit-callout type="warning">{{ "kdfSettingsChangeLogoutWarning" | i18n }}</bit-callout>
<bit-form-field>
@if (!(noLogoutOnKdfChangeFeatureFlag$ | async)) {
<bit-callout type="warning">{{ "kdfSettingsChangeLogoutWarning" | i18n }}</bit-callout>
}
<bit-form-field disableMargin>
<bit-label>{{ "masterPass" | i18n }}</bit-label>
<input bitInput type="password" formControlName="masterPassword" appAutofocus />
<button
@@ -18,12 +20,12 @@
></button>
<bit-hint>
{{ "confirmIdentity" | i18n }}
</bit-hint></bit-form-field
>
</bit-hint>
</bit-form-field>
</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary" type="submit" bitFormButton>
<span>{{ "changeKdf" | i18n }}</span>
<span>{{ "updateSettings" | i18n }}</span>
</button>
<button bitButton buttonType="secondary" type="button" bitFormButton bitDialogClose>
{{ "cancel" | i18n }}

243
apps/web/src/app/key-management/change-kdf/change-kdf-confirmation.component.spec.ts Normal file
View File

@@ -0,0 +1,243 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { FormControl } from "@angular/forms";
import { mock, MockProxy } from "jest-mock-extended";
import { of } from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { ChangeKdfService } from "@bitwarden/common/key-management/kdf/change-kdf-service.abstraction";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
import { UserId } from "@bitwarden/common/types/guid";
import { DIALOG_DATA, DialogRef, ToastService } from "@bitwarden/components";
import { KdfType, PBKDF2KdfConfig, Argon2KdfConfig } from "@bitwarden/key-management";
import { SharedModule } from "../../shared";
import { ChangeKdfConfirmationComponent } from "./change-kdf-confirmation.component";
describe("ChangeKdfConfirmationComponent", () => {
let component: ChangeKdfConfirmationComponent;
let fixture: ComponentFixture<ChangeKdfConfirmationComponent>;
// Mock Services
let mockI18nService: MockProxy<I18nService>;
let mockMessagingService: MockProxy<MessagingService>;
let mockToastService: MockProxy<ToastService>;
let mockDialogRef: MockProxy<DialogRef<ChangeKdfConfirmationComponent>>;
let mockConfigService: MockProxy<ConfigService>;
let accountService: FakeAccountService;
let mockChangeKdfService: MockProxy<ChangeKdfService>;
const mockUserId = "user-id" as UserId;
const mockEmail = "email";
const mockMasterPassword = "master-password";
const mockDialogData = jest.fn();
const kdfConfig = new PBKDF2KdfConfig(600_001);
beforeEach(() => {
mockI18nService = mock<I18nService>();
mockMessagingService = mock<MessagingService>();
mockToastService = mock<ToastService>();
mockDialogRef = mock<DialogRef<ChangeKdfConfirmationComponent>>();
mockConfigService = mock<ConfigService>();
accountService = mockAccountServiceWith(mockUserId, { email: mockEmail });
mockChangeKdfService = mock<ChangeKdfService>();
mockI18nService.t.mockImplementation((key) => `${key}-used-i18n`);
// Mock config service feature flag
mockConfigService.getFeatureFlag$.mockReturnValue(of(false));
mockDialogData.mockReturnValue({
kdf: KdfType.PBKDF2_SHA256,
kdfConfig,
});
TestBed.configureTestingModule({
declarations: [ChangeKdfConfirmationComponent],
imports: [SharedModule],
providers: [
{ provide: I18nService, useValue: mockI18nService },
{ provide: MessagingService, useValue: mockMessagingService },
{ provide: AccountService, useValue: accountService },
{ provide: ToastService, useValue: mockToastService },
{ provide: DialogRef, useValue: mockDialogRef },
{ provide: ConfigService, useValue: mockConfigService },
{ provide: ChangeKdfService, useValue: mockChangeKdfService },
{
provide: DIALOG_DATA,
useFactory: mockDialogData,
},
],
});
});
describe("Component Initialization", () => {
it("should create component with PBKDF2 config", () => {
const fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
const component = fixture.componentInstance;
expect(component).toBeTruthy();
expect(component.kdfConfig).toBeInstanceOf(PBKDF2KdfConfig);
expect(component.kdfConfig.iterations).toBe(600_001);
});
it("should create component with Argon2id config", () => {
mockDialogData.mockReturnValue({
kdf: KdfType.Argon2id,
kdfConfig: new Argon2KdfConfig(4, 65, 5),
});
const fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
const component = fixture.componentInstance;
expect(component).toBeTruthy();
expect(component.kdfConfig).toBeInstanceOf(Argon2KdfConfig);
const kdfConfig = component.kdfConfig as Argon2KdfConfig;
expect(kdfConfig.iterations).toBe(4);
expect(kdfConfig.memory).toBe(65);
expect(kdfConfig.parallelism).toBe(5);
});
it("should initialize form with required master password field", () => {
const fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
const component = fixture.componentInstance;
expect(component.form.controls.masterPassword).toBeInstanceOf(FormControl);
expect(component.form.controls.masterPassword.value).toEqual(null);
expect(component.form.controls.masterPassword.hasError("required")).toBe(true);
});
});
describe("Form Validation", () => {
beforeEach(() => {
fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
component = fixture.componentInstance;
});
it("should be invalid when master password is empty", () => {
component.form.controls.masterPassword.setValue("");
expect(component.form.invalid).toBe(true);
});
it("should be valid when master password is provided", () => {
component.form.controls.masterPassword.setValue(mockMasterPassword);
expect(component.form.valid).toBe(true);
});
});
describe("submit method", () => {
describe("should not update kdf and not show success toast", () => {
beforeEach(() => {
fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
component = fixture.componentInstance;
component.form.controls.masterPassword.setValue(mockMasterPassword);
});
it("when form is invalid", async () => {
// Arrange
component.form.controls.masterPassword.setValue("");
expect(component.form.invalid).toBe(true);
// Act
await component.submit();
// Assert
expect(mockChangeKdfService.updateUserKdfParams).not.toHaveBeenCalled();
});
it("when no active account", async () => {
accountService.activeAccount$ = of(null);
await expect(component.submit()).rejects.toThrow("Null or undefined account");
expect(mockChangeKdfService.updateUserKdfParams).not.toHaveBeenCalled();
});
it("when kdf is invalid", async () => {
// Arrange
component.kdfConfig = new PBKDF2KdfConfig(1);
// Act
await expect(component.submit()).rejects.toThrow();
expect(mockChangeKdfService.updateUserKdfParams).not.toHaveBeenCalled();
});
});
describe("should update kdf and show success toast", () => {
it("should set loading to true during submission", async () => {
// Arrange
let loadingDuringExecution = false;
mockChangeKdfService.updateUserKdfParams.mockImplementation(async () => {
loadingDuringExecution = component.loading;
});
const fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
const component = fixture.componentInstance;
component.form.controls.masterPassword.setValue(mockMasterPassword);
// Act
await component.submit();
expect(loadingDuringExecution).toBe(true);
expect(component.loading).toBe(false);
});
it("doesn't logout and closes the dialog when feature flag is enabled", async () => {
// Arrange
mockConfigService.getFeatureFlag$.mockReturnValue(of(true));
const fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
const component = fixture.componentInstance;
component.form.controls.masterPassword.setValue(mockMasterPassword);
// Act
await component.submit();
// Assert
expect(mockChangeKdfService.updateUserKdfParams).toHaveBeenCalledWith(
mockMasterPassword,
kdfConfig,
mockUserId,
);
expect(mockToastService.showToast).toHaveBeenCalledWith({
variant: "success",
message: "encKeySettingsChanged-used-i18n",
});
expect(mockDialogRef.close).toHaveBeenCalled();
expect(mockMessagingService.send).not.toHaveBeenCalled();
});
it("sends a logout and displays a log back in toast when feature flag is disabled", async () => {
// Arrange
const fixture = TestBed.createComponent(ChangeKdfConfirmationComponent);
const component = fixture.componentInstance;
component.form.controls.masterPassword.setValue(mockMasterPassword);
// Act
await component.submit();
// Assert
expect(mockChangeKdfService.updateUserKdfParams).toHaveBeenCalledWith(
mockMasterPassword,
kdfConfig,
mockUserId,
);
expect(mockToastService.showToast).toHaveBeenCalledWith({
variant: "success",
title: "encKeySettingsChanged-used-i18n",
message: "logBackIn-used-i18n",
});
expect(mockMessagingService.send).toHaveBeenCalledWith("logout");
expect(mockDialogRef.close).not.toHaveBeenCalled();
});
});
});
});

49
apps/web/src/app/key-management/change-kdf/change-kdf-confirmation.component.ts
View File

@@ -1,15 +1,15 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, Inject } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { firstValueFrom } from "rxjs";
import { firstValueFrom, Observable } from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { getUserId } from "@bitwarden/common/auth/services/account.service";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ChangeKdfService } from "@bitwarden/common/key-management/kdf/change-kdf-service.abstraction";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { DIALOG_DATA, ToastService } from "@bitwarden/components";
import { DIALOG_DATA, DialogRef, ToastService } from "@bitwarden/components";
import { KdfConfig, KdfType } from "@bitwarden/key-management";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -23,12 +23,13 @@ export class ChangeKdfConfirmationComponent {
kdfConfig: KdfConfig;
form = new FormGroup({
masterPassword: new FormControl(null, Validators.required),
masterPassword: new FormControl<string | null>(null, Validators.required),
});
showPassword = false;
masterPassword: string;
loading = false;
noLogoutOnKdfChangeFeatureFlag$: Observable<boolean>;
constructor(
private i18nService: I18nService,
private messagingService: MessagingService,
@@ -36,9 +37,13 @@ export class ChangeKdfConfirmationComponent {
private accountService: AccountService,
private toastService: ToastService,
private changeKdfService: ChangeKdfService,
private dialogRef: DialogRef<ChangeKdfConfirmationComponent>,
configService: ConfigService,
) {
this.kdfConfig = params.kdfConfig;
this.masterPassword = null;
this.noLogoutOnKdfChangeFeatureFlag$ = configService.getFeatureFlag$(
FeatureFlag.NoLogoutOnKdfChange,
);
}
submit = async () => {
@@ -46,24 +51,32 @@ export class ChangeKdfConfirmationComponent {
return;
}
this.loading = true;
await this.makeKeyAndSaveAsync();
this.toastService.showToast({
variant: "success",
title: this.i18nService.t("encKeySettingsChanged"),
message: this.i18nService.t("logBackIn"),
});
this.messagingService.send("logout");
await this.makeKeyAndSave();
if (await firstValueFrom(this.noLogoutOnKdfChangeFeatureFlag$)) {
this.toastService.showToast({
variant: "success",
message: this.i18nService.t("encKeySettingsChanged"),
});
this.dialogRef.close();
} else {
this.toastService.showToast({
variant: "success",
title: this.i18nService.t("encKeySettingsChanged"),
message: this.i18nService.t("logBackIn"),
});
this.messagingService.send("logout");
}
this.loading = false;
};
private async makeKeyAndSaveAsync() {
const masterPassword = this.form.value.masterPassword;
private async makeKeyAndSave() {
const activeAccountId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
const masterPassword = this.form.value.masterPassword!;
// Ensure the KDF config is valid.
this.kdfConfig.validateKdfConfigForSetting();
const activeAccountId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
await this.changeKdfService.updateUserKdfParams(
masterPassword,
this.kdfConfig,

153
apps/web/src/app/key-management/change-kdf/change-kdf.component.html
View File

@@ -1,31 +1,30 @@
<h2 bitTypography="h2">{{ "encKeySettings" | i18n }}</h2>
<bit-callout type="warning">{{ "kdfSettingsChangeLogoutWarning" | i18n }}</bit-callout>
<p bitTypography="body1">
{{ "higherKDFIterations" | i18n }}
<h2 bitTypography="h2" class="tw-mt-6">
{{ "encKeySettings" | i18n }}
</h2>
@if (!(noLogoutOnKdfChangeFeatureFlag$ | async)) {
<bit-callout type="warning">{{ "kdfSettingsChangeLogoutWarning" | i18n }}</bit-callout>
}
<p bitTypography="body1" class="tw-mt-4">
{{ "encryptionKeySettingsHowShouldWeEncryptYourData" | i18n }}
</p>
<p bitTypography="body1">
{{
"kdfToHighWarningIncreaseInIncrements"
| i18n: (isPBKDF2(kdfConfig) ? ("incrementsOf100,000" | i18n) : ("smallIncrements" | i18n))
}}
{{ "encryptionKeySettingsIncreaseImproveSecurity" | i18n }}
</p>
<form [formGroup]="formGroup" autocomplete="off">
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="tw-grid tw-grid-cols-12 tw-gap-x-4">
<div class="tw-col-span-6">
<bit-form-field>
<bit-label
>{{ "kdfAlgorithm" | i18n }}
<a
class="tw-ml-auto"
<bit-label>
{{ "algorithm" | i18n }}
<button
type="button"
class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-p-0"
[bitPopoverTriggerFor]="algorithmPopover"
appA11yTitle="{{ 'encryptionKeySettingsAlgorithmPopoverTitle' | i18n }}"
bitLink
href="https://bitwarden.com/help/kdf-algorithms"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMoreAboutEncryptionAlgorithms' | i18n }}"
slot="end"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</button>
</bit-label>
<bit-select formControlName="kdf">
<bit-option
@@ -35,33 +34,12 @@
></bit-option>
</bit-select>
</bit-form-field>
<bit-form-field formGroupName="kdfConfig" *ngIf="isArgon2(kdfConfig)">
<bit-label>{{ "kdfMemory" | i18n }}</bit-label>
<input
bitInput
formControlName="memory"
type="number"
[min]="ARGON2_MEMORY.min"
[max]="ARGON2_MEMORY.max"
/>
</bit-form-field>
</div>
<div class="tw-col-span-6">
<div class="tw-mb-0">
<bit-form-field formGroupName="kdfConfig" *ngIf="isPBKDF2(kdfConfig)">
@if (isPBKDF2(kdfConfig)) {
<bit-form-field formGroupName="kdfConfig">
<bit-label>
{{ "kdfIterations" | i18n }}
<a
bitLink
class="tw-ml-auto"
href="https://bitwarden.com/help/what-encryption-is-used/#changing-kdf-iterations"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMoreAboutKDFIterations' | i18n }}"
slot="end"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</bit-label>
<input
bitInput
@@ -72,34 +50,49 @@
/>
<bit-hint>{{ "kdfIterationRecommends" | i18n }}</bit-hint>
</bit-form-field>
<ng-container *ngIf="isArgon2(kdfConfig)">
<bit-form-field formGroupName="kdfConfig">
<bit-label>
{{ "kdfIterations" | i18n }}
</bit-label>
<input
bitInput
type="number"
formControlName="iterations"
[min]="ARGON2_ITERATIONS.min"
[max]="ARGON2_ITERATIONS.max"
/>
</bit-form-field>
<bit-form-field formGroupName="kdfConfig">
<bit-label>
{{ "kdfParallelism" | i18n }}
</bit-label>
<input
bitInput
type="number"
formControlName="parallelism"
[min]="ARGON2_PARALLELISM.min"
[max]="ARGON2_PARALLELISM.max"
/>
</bit-form-field>
</ng-container>
</div>
} @else if (isArgon2(kdfConfig)) {
<bit-form-field formGroupName="kdfConfig">
<bit-label>{{ "kdfMemory" | i18n }}</bit-label>
<input
bitInput
formControlName="memory"
type="number"
[min]="ARGON2_MEMORY.min"
[max]="ARGON2_MEMORY.max"
/>
</bit-form-field>
}
</div>
@if (isArgon2(kdfConfig)) {
<div class="tw-col-span-6">
<bit-form-field formGroupName="kdfConfig">
<bit-label>
{{ "kdfIterations" | i18n }}
</bit-label>
<input
bitInput
type="number"
formControlName="iterations"
[min]="ARGON2_ITERATIONS.min"
[max]="ARGON2_ITERATIONS.max"
/>
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field formGroupName="kdfConfig">
<bit-label>
{{ "kdfParallelism" | i18n }}
</bit-label>
<input
bitInput
type="number"
formControlName="parallelism"
[min]="ARGON2_PARALLELISM.min"
[max]="ARGON2_PARALLELISM.max"
/>
</bit-form-field>
</div>
}
</div>
<button
(click)="openConfirmationModal()"
@@ -107,7 +100,27 @@
buttonType="primary"
bitButton
bitFormButton
class="tw-mt-2"
>
{{ "changeKdf" | i18n }}
{{ "updateEncryptionSettings" | i18n }}
</button>
</form>
<bit-popover [title]="'encryptionKeySettingsAlgorithmPopoverTitle' | i18n" #algorithmPopover>
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li class="tw-mb-2">{{ "encryptionKeySettingsAlgorithmPopoverPBKDF2" | i18n }}</li>
<li>{{ "encryptionKeySettingsAlgorithmPopoverArgon2Id" | i18n }}</li>
</ul>
<div class="tw-mt-4 tw-mb-1">
<a
href="https://bitwarden.com/help/kdf-algorithms/"
bitLink
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMoreAboutEncryptionAlgorithms' | i18n }}"
>
{{ "learnMore" | i18n }}
<i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
</a>
</div>
</bit-popover>

365
apps/web/src/app/key-management/change-kdf/change-kdf.component.spec.ts Normal file
View File

@@ -0,0 +1,365 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { FormBuilder, FormControl } from "@angular/forms";
import { mock, MockProxy } from "jest-mock-extended";
import { of } from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
import { UserId } from "@bitwarden/common/types/guid";
import { DialogService, PopoverModule, CalloutModule } from "@bitwarden/components";
import {
KdfConfigService,
Argon2KdfConfig,
PBKDF2KdfConfig,
KdfType,
} from "@bitwarden/key-management";
import { SharedModule } from "../../shared";
import { ChangeKdfComponent } from "./change-kdf.component";
describe("ChangeKdfComponent", () => {
let component: ChangeKdfComponent;
let fixture: ComponentFixture<ChangeKdfComponent>;
// Mock Services
let mockDialogService: MockProxy<DialogService>;
let mockKdfConfigService: MockProxy<KdfConfigService>;
let mockConfigService: MockProxy<ConfigService>;
let mockI18nService: MockProxy<I18nService>;
let accountService: FakeAccountService;
let formBuilder: FormBuilder;
const mockUserId = "user-id" as UserId;
// Helper functions for validation testing
function expectPBKDF2Validation(
iterationsControl: FormControl<number | null>,
memoryControl: FormControl<number | null>,
parallelismControl: FormControl<number | null>,
) {
// Assert current validators state
expect(iterationsControl.hasError("required")).toBe(false);
expect(iterationsControl.hasError("min")).toBe(false);
expect(iterationsControl.hasError("max")).toBe(false);
expect(memoryControl.validator).toBeNull();
expect(parallelismControl.validator).toBeNull();
// Test validation boundaries
iterationsControl.setValue(PBKDF2KdfConfig.ITERATIONS.min - 1);
expect(iterationsControl.hasError("min")).toBe(true);
iterationsControl.setValue(PBKDF2KdfConfig.ITERATIONS.max + 1);
expect(iterationsControl.hasError("max")).toBe(true);
}
function expectArgon2Validation(
iterationsControl: FormControl<number | null>,
memoryControl: FormControl<number | null>,
parallelismControl: FormControl<number | null>,
) {
// Assert current validators state
expect(iterationsControl.hasError("required")).toBe(false);
expect(memoryControl.hasError("required")).toBe(false);
expect(parallelismControl.hasError("required")).toBe(false);
// Test validation boundaries - min values
iterationsControl.setValue(Argon2KdfConfig.ITERATIONS.min - 1);
expect(iterationsControl.hasError("min")).toBe(true);
memoryControl.setValue(Argon2KdfConfig.MEMORY.min - 1);
expect(memoryControl.hasError("min")).toBe(true);
parallelismControl.setValue(Argon2KdfConfig.PARALLELISM.min - 1);
expect(parallelismControl.hasError("min")).toBe(true);
// Test validation boundaries - max values
iterationsControl.setValue(Argon2KdfConfig.ITERATIONS.max + 1);
expect(iterationsControl.hasError("max")).toBe(true);
memoryControl.setValue(Argon2KdfConfig.MEMORY.max + 1);
expect(memoryControl.hasError("max")).toBe(true);
parallelismControl.setValue(Argon2KdfConfig.PARALLELISM.max + 1);
expect(parallelismControl.hasError("max")).toBe(true);
}
beforeEach(() => {
mockDialogService = mock<DialogService>();
mockKdfConfigService = mock<KdfConfigService>();
mockConfigService = mock<ConfigService>();
mockI18nService = mock<I18nService>();
accountService = mockAccountServiceWith(mockUserId);
formBuilder = new FormBuilder();
mockConfigService.getFeatureFlag$.mockReturnValue(of(false));
mockI18nService.t.mockImplementation((key) => `${key}-used-i18n`);
TestBed.configureTestingModule({
declarations: [ChangeKdfComponent],
imports: [SharedModule, PopoverModule, CalloutModule],
providers: [
{ provide: DialogService, useValue: mockDialogService },
{ provide: KdfConfigService, useValue: mockKdfConfigService },
{ provide: AccountService, useValue: accountService },
{ provide: FormBuilder, useValue: formBuilder },
{ provide: ConfigService, useValue: mockConfigService },
{ provide: I18nService, useValue: mockI18nService },
],
});
});
describe("Component Initialization", () => {
describe("given PBKDF2 configuration", () => {
it("should initialize form with PBKDF2 values and validators when component loads", async () => {
// Arrange
const mockPBKDF2Config = new PBKDF2KdfConfig(600_000);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockPBKDF2Config);
// Act
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
// Extract form controls
const formGroup = component["formGroup"];
// Assert form values
expect(formGroup.controls.kdf.value).toBe(KdfType.PBKDF2_SHA256);
const kdfConfigFormGroup = formGroup.controls.kdfConfig;
expect(kdfConfigFormGroup.controls.iterations.value).toBe(600_000);
expect(kdfConfigFormGroup.controls.memory.value).toBeNull();
expect(kdfConfigFormGroup.controls.parallelism.value).toBeNull();
expect(component.kdfConfig).toEqual(mockPBKDF2Config);
// Assert validators
expectPBKDF2Validation(
kdfConfigFormGroup.controls.iterations,
kdfConfigFormGroup.controls.memory,
kdfConfigFormGroup.controls.parallelism,
);
});
});
describe("given Argon2id configuration", () => {
it("should initialize form with Argon2id values and validators when component loads", async () => {
// Arrange
const mockArgon2Config = new Argon2KdfConfig(3, 64, 4);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockArgon2Config);
// Act
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
// Extract form controls
const formGroup = component["formGroup"];
// Assert form values
expect(formGroup.controls.kdf.value).toBe(KdfType.Argon2id);
const kdfConfigFormGroup = formGroup.controls.kdfConfig;
expect(kdfConfigFormGroup.controls.iterations.value).toBe(3);
expect(kdfConfigFormGroup.controls.memory.value).toBe(64);
expect(kdfConfigFormGroup.controls.parallelism.value).toBe(4);
expect(component.kdfConfig).toEqual(mockArgon2Config);
// Assert validators
expectArgon2Validation(
kdfConfigFormGroup.controls.iterations,
kdfConfigFormGroup.controls.memory,
kdfConfigFormGroup.controls.parallelism,
);
});
});
it.each([
[true, false],
[false, true],
])(
"should show log out banner = %s when feature flag observable is %s",
async (showLogOutBanner, forceUpgradeKdfFeatureFlag) => {
// Arrange
const mockPBKDF2Config = new PBKDF2KdfConfig(600_000);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockPBKDF2Config);
mockConfigService.getFeatureFlag$.mockReturnValue(of(forceUpgradeKdfFeatureFlag));
// Act
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
fixture.detectChanges();
// Assert
const calloutElement = fixture.debugElement.query((el) =>
el.nativeElement.textContent?.includes("kdfSettingsChangeLogoutWarning"),
);
if (showLogOutBanner) {
expect(calloutElement).not.toBeNull();
expect(calloutElement.nativeElement.textContent).toContain(
"kdfSettingsChangeLogoutWarning-used-i18n",
);
} else {
expect(calloutElement).toBeNull();
}
},
);
});
describe("KDF Type Switching", () => {
describe("switching from PBKDF2 to Argon2id", () => {
beforeEach(async () => {
// Setup component with initial PBKDF2 configuration
const mockPBKDF2Config = new PBKDF2KdfConfig(600_001);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockPBKDF2Config);
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
});
it("should update form structure and default values when KDF type changes to Argon2id", () => {
// Arrange
const formGroup = component["formGroup"];
// Act - change KDF type to Argon2id
formGroup.controls.kdf.setValue(KdfType.Argon2id);
// Assert form values update to Argon2id defaults
expect(formGroup.controls.kdf.value).toBe(KdfType.Argon2id);
const kdfConfigFormGroup = formGroup.controls.kdfConfig;
expect(kdfConfigFormGroup.controls.iterations.value).toBe(3); // Argon2id default
expect(kdfConfigFormGroup.controls.memory.value).toBe(64); // Argon2id default
expect(kdfConfigFormGroup.controls.parallelism.value).toBe(4); // Argon2id default
});
it("should update validators when KDF type changes to Argon2id", () => {
// Arrange
const formGroup = component["formGroup"];
// Act - change KDF type to Argon2id
formGroup.controls.kdf.setValue(KdfType.Argon2id);
// Assert validators update to Argon2id validation rules
const kdfConfigFormGroup = formGroup.controls.kdfConfig;
expectArgon2Validation(
kdfConfigFormGroup.controls.iterations,
kdfConfigFormGroup.controls.memory,
kdfConfigFormGroup.controls.parallelism,
);
});
});
describe("switching from Argon2id to PBKDF2", () => {
beforeEach(async () => {
// Setup component with initial Argon2id configuration
const mockArgon2IdConfig = new Argon2KdfConfig(4, 65, 5);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockArgon2IdConfig);
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
});
it("should update form structure and default values when KDF type changes to PBKDF2", () => {
// Arrange
const formGroup = component["formGroup"];
// Act - change KDF type back to PBKDF2
formGroup.controls.kdf.setValue(KdfType.PBKDF2_SHA256);
// Assert form values update to PBKDF2 defaults
expect(formGroup.controls.kdf.value).toBe(KdfType.PBKDF2_SHA256);
const kdfConfigFormGroup = formGroup.controls.kdfConfig;
expect(kdfConfigFormGroup.controls.iterations.value).toBe(600_000); // PBKDF2 default
expect(kdfConfigFormGroup.controls.memory.value).toBeNull(); // PBKDF2 doesn't use memory
expect(kdfConfigFormGroup.controls.parallelism.value).toBeNull(); // PBKDF2 doesn't use parallelism
});
it("should update validators when KDF type changes to PBKDF2", () => {
// Arrange
const formGroup = component["formGroup"];
// Act - change KDF type back to PBKDF2
formGroup.controls.kdf.setValue(KdfType.PBKDF2_SHA256);
// Assert validators update to PBKDF2 validation rules
const kdfConfigFormGroup = formGroup.controls.kdfConfig;
expectPBKDF2Validation(
kdfConfigFormGroup.controls.iterations,
kdfConfigFormGroup.controls.memory,
kdfConfigFormGroup.controls.parallelism,
);
});
});
});
describe("openConfirmationModal", () => {
describe("when form is valid", () => {
it("should open confirmation modal with PBKDF2 config when form is submitted", async () => {
// Arrange
const mockPBKDF2Config = new PBKDF2KdfConfig(600_001);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockPBKDF2Config);
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
// Act
await component.openConfirmationModal();
// Assert
expect(mockDialogService.open).toHaveBeenCalledWith(
expect.any(Function),
expect.objectContaining({
data: expect.objectContaining({
kdfConfig: mockPBKDF2Config,
}),
}),
);
});
it("should open confirmation modal with Argon2id config when form is submitted", async () => {
// Arrange
const mockArgon2Config = new Argon2KdfConfig(4, 65, 5);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockArgon2Config);
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
// Act
await component.openConfirmationModal();
// Assert
expect(mockDialogService.open).toHaveBeenCalledWith(
expect.any(Function),
expect.objectContaining({
data: expect.objectContaining({
kdfConfig: mockArgon2Config,
}),
}),
);
});
it("should not open modal when form is invalid", async () => {
// Arrange
const mockPBKDF2Config = new PBKDF2KdfConfig(PBKDF2KdfConfig.ITERATIONS.min - 1);
mockKdfConfigService.getKdfConfig.mockResolvedValue(mockPBKDF2Config);
fixture = TestBed.createComponent(ChangeKdfComponent);
component = fixture.componentInstance;
await component.ngOnInit();
// Act
await component.openConfirmationModal();
// Assert
expect(mockDialogService.open).not.toHaveBeenCalled();
});
});
});
});

125
apps/web/src/app/key-management/change-kdf/change-kdf.component.ts
View File

@@ -1,11 +1,11 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder, FormControl, ValidatorFn, Validators } from "@angular/forms";
import { Subject, firstValueFrom, takeUntil } from "rxjs";
import { FormBuilder, FormControl, Validators } from "@angular/forms";
import { Subject, firstValueFrom, takeUntil, Observable } from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { getUserId } from "@bitwarden/common/auth/services/account.service";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { DialogService } from "@bitwarden/components";
import {
KdfConfigService,
@@ -31,11 +31,11 @@ export class ChangeKdfComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
protected formGroup = this.formBuilder.group({
kdf: new FormControl(KdfType.PBKDF2_SHA256, [Validators.required]),
kdf: new FormControl<KdfType>(KdfType.PBKDF2_SHA256, [Validators.required]),
kdfConfig: this.formBuilder.group({
iterations: [this.kdfConfig.iterations],
memory: [null as number],
parallelism: [null as number],
iterations: new FormControl<number | null>(null),
memory: new FormControl<number | null>(null),
parallelism: new FormControl<number | null>(null),
}),
});
@@ -45,95 +45,102 @@ export class ChangeKdfComponent implements OnInit, OnDestroy {
protected ARGON2_MEMORY = Argon2KdfConfig.MEMORY;
protected ARGON2_PARALLELISM = Argon2KdfConfig.PARALLELISM;
noLogoutOnKdfChangeFeatureFlag$: Observable<boolean>;
constructor(
private dialogService: DialogService,
private kdfConfigService: KdfConfigService,
private accountService: AccountService,
private formBuilder: FormBuilder,
configService: ConfigService,
) {
this.kdfOptions = [
{ name: "PBKDF2 SHA-256", value: KdfType.PBKDF2_SHA256 },
{ name: "Argon2id", value: KdfType.Argon2id },
];
this.noLogoutOnKdfChangeFeatureFlag$ = configService.getFeatureFlag$(
FeatureFlag.NoLogoutOnKdfChange,
);
}
async ngOnInit() {
const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
this.kdfConfig = await this.kdfConfigService.getKdfConfig(userId);
this.formGroup.get("kdf").setValue(this.kdfConfig.kdfType);
this.formGroup.controls.kdf.setValue(this.kdfConfig.kdfType);
this.setFormControlValues(this.kdfConfig);
this.setFormValidators(this.kdfConfig.kdfType);
this.formGroup
.get("kdf")
.valueChanges.pipe(takeUntil(this.destroy$))
this.formGroup.controls.kdf.valueChanges
.pipe(takeUntil(this.destroy$))
.subscribe((newValue) => {
this.updateKdfConfig(newValue);
this.updateKdfConfig(newValue!);
});
}
private updateKdfConfig(newValue: KdfType) {
let config: KdfConfig;
const validators: { [key: string]: ValidatorFn[] } = {
iterations: [],
memory: [],
parallelism: [],
};
switch (newValue) {
case KdfType.PBKDF2_SHA256:
config = new PBKDF2KdfConfig();
validators.iterations = [
Validators.required,
Validators.min(PBKDF2KdfConfig.ITERATIONS.min),
Validators.max(PBKDF2KdfConfig.ITERATIONS.max),
];
break;
case KdfType.Argon2id:
config = new Argon2KdfConfig();
validators.iterations = [
Validators.required,
Validators.min(Argon2KdfConfig.ITERATIONS.min),
Validators.max(Argon2KdfConfig.ITERATIONS.max),
];
validators.memory = [
Validators.required,
Validators.min(Argon2KdfConfig.MEMORY.min),
Validators.max(Argon2KdfConfig.MEMORY.max),
];
validators.parallelism = [
Validators.required,
Validators.min(Argon2KdfConfig.PARALLELISM.min),
Validators.max(Argon2KdfConfig.PARALLELISM.max),
];
break;
default:
throw new Error("Unknown KDF type.");
}
this.kdfConfig = config;
this.setFormValidators(validators);
this.setFormValidators(newValue);
this.setFormControlValues(this.kdfConfig);
}
private setFormValidators(validators: { [key: string]: ValidatorFn[] }) {
this.setValidators("kdfConfig.iterations", validators.iterations);
this.setValidators("kdfConfig.memory", validators.memory);
this.setValidators("kdfConfig.parallelism", validators.parallelism);
}
private setValidators(controlName: string, validators: ValidatorFn[]) {
const control = this.formGroup.get(controlName);
if (control) {
control.setValidators(validators);
control.updateValueAndValidity();
private setFormValidators(kdfType: KdfType) {
const kdfConfigFormGroup = this.formGroup.controls.kdfConfig;
switch (kdfType) {
case KdfType.PBKDF2_SHA256:
kdfConfigFormGroup.controls.iterations.setValidators([
Validators.required,
Validators.min(PBKDF2KdfConfig.ITERATIONS.min),
Validators.max(PBKDF2KdfConfig.ITERATIONS.max),
]);
kdfConfigFormGroup.controls.memory.setValidators([]);
kdfConfigFormGroup.controls.parallelism.setValidators([]);
break;
case KdfType.Argon2id:
kdfConfigFormGroup.controls.iterations.setValidators([
Validators.required,
Validators.min(Argon2KdfConfig.ITERATIONS.min),
Validators.max(Argon2KdfConfig.ITERATIONS.max),
]);
kdfConfigFormGroup.controls.memory.setValidators([
Validators.required,
Validators.min(Argon2KdfConfig.MEMORY.min),
Validators.max(Argon2KdfConfig.MEMORY.max),
]);
kdfConfigFormGroup.controls.parallelism.setValidators([
Validators.required,
Validators.min(Argon2KdfConfig.PARALLELISM.min),
Validators.max(Argon2KdfConfig.PARALLELISM.max),
]);
break;
default:
throw new Error("Unknown KDF type.");
}
kdfConfigFormGroup.controls.iterations.updateValueAndValidity();
kdfConfigFormGroup.controls.memory.updateValueAndValidity();
kdfConfigFormGroup.controls.parallelism.updateValueAndValidity();
}
private setFormControlValues(kdfConfig: KdfConfig) {
this.formGroup.get("kdfConfig").reset();
const kdfConfigFormGroup = this.formGroup.controls.kdfConfig;
kdfConfigFormGroup.reset();
if (kdfConfig.kdfType === KdfType.PBKDF2_SHA256) {
this.formGroup.get("kdfConfig.iterations").setValue(kdfConfig.iterations);
kdfConfigFormGroup.controls.iterations.setValue(kdfConfig.iterations);
} else if (kdfConfig.kdfType === KdfType.Argon2id) {
this.formGroup.get("kdfConfig.iterations").setValue(kdfConfig.iterations);
this.formGroup.get("kdfConfig.memory").setValue(kdfConfig.memory);
this.formGroup.get("kdfConfig.parallelism").setValue(kdfConfig.parallelism);
kdfConfigFormGroup.controls.iterations.setValue(kdfConfig.iterations);
kdfConfigFormGroup.controls.memory.setValue(kdfConfig.memory);
kdfConfigFormGroup.controls.parallelism.setValue(kdfConfig.parallelism);
}
}
@@ -155,12 +162,14 @@ export class ChangeKdfComponent implements OnInit, OnDestroy {
if (this.formGroup.invalid) {
return;
}
const kdfConfigFormGroup = this.formGroup.controls.kdfConfig;
if (this.kdfConfig.kdfType === KdfType.PBKDF2_SHA256) {
this.kdfConfig.iterations = this.formGroup.get("kdfConfig.iterations").value;
this.kdfConfig.iterations = kdfConfigFormGroup.controls.iterations.value!;
} else if (this.kdfConfig.kdfType === KdfType.Argon2id) {
this.kdfConfig.iterations = this.formGroup.get("kdfConfig.iterations").value;
this.kdfConfig.memory = this.formGroup.get("kdfConfig.memory").value;
this.kdfConfig.parallelism = this.formGroup.get("kdfConfig.parallelism").value;
this.kdfConfig.iterations = kdfConfigFormGroup.controls.iterations.value!;
this.kdfConfig.memory = kdfConfigFormGroup.controls.memory.value!;
this.kdfConfig.parallelism = kdfConfigFormGroup.controls.parallelism.value!;
}
this.dialogService.open(ChangeKdfConfirmationComponent, {
data: {

4
apps/web/src/app/key-management/change-kdf/change-kdf.module.ts
View File

@@ -1,13 +1,15 @@
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { PopoverModule } from "@bitwarden/components";
import { SharedModule } from "../../shared";
import { ChangeKdfConfirmationComponent } from "./change-kdf-confirmation.component";
import { ChangeKdfComponent } from "./change-kdf.component";
@NgModule({
imports: [CommonModule, SharedModule],
imports: [CommonModule, SharedModule, PopoverModule],
declarations: [ChangeKdfComponent, ChangeKdfConfirmationComponent],
exports: [ChangeKdfComponent, ChangeKdfConfirmationComponent],
})

2
apps/web/src/app/vault/components/vault-items/vault-items.component.ts
View File

@@ -67,7 +67,7 @@ export class VaultItemsComponent<C extends CipherViewLike> {
@Input() userCanArchive: boolean;
@Input() enforceOrgDataOwnershipPolicy: boolean;
private restrictedPolicies = toSignal(this.restrictedItemTypesService.restricted$);
private readonly restrictedPolicies = toSignal(this.restrictedItemTypesService.restricted$);
private _ciphers?: C[] = [];
@Input() get ciphers(): C[] {

18
apps/web/src/app/vault/individual-vault/vault.component.ts
View File

@@ -692,6 +692,12 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
}
async archive(cipher: C) {
const repromptPassed = await this.passwordRepromptService.passwordRepromptCheck(cipher);
if (!repromptPassed) {
return;
}
const confirmed = await this.dialogService.openSimpleDialog({
title: { key: "archiveItem" },
content: { key: "archiveItemConfirmDesc" },
@@ -702,10 +708,6 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
return;
}
const repromptPassed = await this.passwordRepromptService.passwordRepromptCheck(cipher);
if (!repromptPassed) {
return;
}
const activeUserId = await firstValueFrom(this.userId$);
try {
await this.cipherArchiveService.archiveWithServer(cipher.id as CipherId, activeUserId);
@@ -724,6 +726,10 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
}
async bulkArchive(ciphers: C[]) {
if (!(await this.repromptCipher(ciphers))) {
return;
}
const confirmed = await this.dialogService.openSimpleDialog({
title: { key: "archiveBulkItems" },
content: { key: "archiveBulkItemsConfirmDesc" },
@@ -734,10 +740,6 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
return;
}
if (!(await this.repromptCipher(ciphers))) {
return;
}
const activeUserId = await firstValueFrom(this.userId$);
const cipherIds = ciphers.map((c) => c.id as CipherId);
try {

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

@@ -11,7 +11,7 @@
"criticalApplications": {
"message": "Critical applications"
},
"noCriticalAppsAtRisk":{
"noCriticalAppsAtRisk": {
"message": "No critical applications at risk"
},
"accessIntelligence": {
@@ -1719,7 +1719,6 @@
}
}
},
"dontAskAgainOnThisDeviceFor30Days": {
"message": "Don't ask again on this device for 30 days"
},
@@ -2090,9 +2089,6 @@
"encKeySettings": {
"message": "Encryption key settings"
},
"kdfAlgorithm": {
"message": "KDF algorithm"
},
"kdfIterations": {
"message": "KDF iterations"
},
@@ -2127,9 +2123,6 @@
"argon2Desc": {
"message": "Higher KDF iterations, memory, and parallelism can help protect your master password from being brute forced by an attacker."
},
"changeKdf": {
"message": "Change KDF"
},
"encKeySettingsChanged": {
"message": "Encryption key settings saved"
},
@@ -2146,22 +2139,22 @@
"message": "Proceeding will also log you out of your current session, requiring you to log back in. You will also be prompted for two-step login again, if set up. Active sessions on other devices may continue to remain active for up to one hour."
},
"newDeviceLoginProtection": {
"message":"New device login"
"message": "New device login"
},
"turnOffNewDeviceLoginProtection": {
"message":"Turn off new device login protection"
"message": "Turn off new device login protection"
},
"turnOnNewDeviceLoginProtection": {
"message":"Turn on new device login protection"
"message": "Turn on new device login protection"
},
"turnOffNewDeviceLoginProtectionModalDesc": {
"message":"Proceed below to turn off the verification emails bitwarden sends when you login from a new device."
"message": "Proceed below to turn off the verification emails bitwarden sends when you login from a new device."
},
"turnOnNewDeviceLoginProtectionModalDesc": {
"message":"Proceed below to have bitwarden send you verification emails when you login from a new device."
"message": "Proceed below to have bitwarden send you verification emails when you login from a new device."
},
"turnOffNewDeviceLoginProtectionWarning": {
"message":"With new device login protection turned off, anyone with your master password can access your account from any device. To protect your account without verification emails, set up two-step login."
"message": "With new device login protection turned off, anyone with your master password can access your account from any device. To protect your account without verification emails, set up two-step login."
},
"accountNewDeviceLoginProtectionSaved": {
"message": "New device login protection changes saved"
@@ -2297,7 +2290,7 @@
"selectImportCollection": {
"message": "Select a collection"
},
"importTargetHintCollection": {
"importTargetHintCollection": {
"message": "Select this option if you want the imported file contents moved to a collection"
},
"importTargetHintFolder": {
@@ -5700,7 +5693,7 @@
"message": "All items will be owned and saved to the organization, enabling organization-wide controls, visibility, and reporting. When turned on, a default collection be available for each member to store items. Learn more about managing the ",
"description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'All items will be owned and saved to the organization, enabling organization-wide controls, visibility, and reporting. When turned on, a default collection be available for each member to store items. Learn more about managing the credential lifecycle.'"
},
"organizationDataOwnershipContentAnchor":{
"organizationDataOwnershipContentAnchor": {
"message": "credential lifecycle",
"description": "This will be used as a hyperlink"
},
@@ -10374,27 +10367,9 @@
"memberAccessReportAuthenticationEnabledFalse": {
"message": "Off"
},
"higherKDFIterations": {
"message": "Higher KDF iterations can help protect your master password from being brute forced by an attacker."
},
"incrementsOf100,000": {
"message": "increments of 100,000"
},
"smallIncrements": {
"message": "small increments"
},
"kdfIterationRecommends": {
"message": "We recommend 600,000 or more"
},
"kdfToHighWarningIncreaseInIncrements": {
"message": "For older devices, setting your KDF too high may lead to performance issues. Increase the value in $VALUE$ and test your devices.",
"placeholders": {
"value": {
"content": "$1",
"example": "increments of 100,000"
}
}
},
"providerReinstate": {
"message": " Contact Customer Support to reinstate your subscription."
},
@@ -11079,7 +11054,7 @@
"orgTrustWarning1": {
"message": "This organization has an Enterprise policy that will enroll you in account recovery. Enrollment will allow organization administrators to change your password. Only proceed if you recognize this organization and the fingerprint phrase displayed below matches the organization's fingerprint."
},
"trustUser":{
"trustUser": {
"message": "Trust user"
},
"sshKeyWrongPassword": {
@@ -11115,7 +11090,7 @@
"openingExtension": {
"message": "Opening the Bitwarden browser extension"
},
"somethingWentWrong":{
"somethingWentWrong": {
"message": "Something went wrong..."
},
"openingExtensionError": {
@@ -11202,7 +11177,7 @@
}
}
},
"accountDeprovisioningNotification" : {
"accountDeprovisioningNotification": {
"message": "Administrators now have the ability to delete member accounts that belong to a claimed domain."
},
"deleteManagedUserWarningDesc": {
@@ -11293,14 +11268,14 @@
"upgradeForFullEventsMessage": {
"message": "Event logs are not stored for your organization. Upgrade to a Teams or Enterprise plan to get full access to organization event logs."
},
"upgradeEventLogTitleMessage" : {
"message" : "Upgrade to see event logs from your organization."
"upgradeEventLogTitleMessage": {
"message": "Upgrade to see event logs from your organization."
},
"upgradeEventLogMessage":{
"message" : "These events are examples only and do not reflect real events within your Bitwarden organization."
"upgradeEventLogMessage": {
"message": "These events are examples only and do not reflect real events within your Bitwarden organization."
},
"viewEvents":{
"message" : "View Events"
"viewEvents": {
"message": "View Events"
},
"cannotCreateCollection": {
"message": "Free organizations may have up to 2 collections. Upgrade to a paid plan to add more collections."
@@ -11619,14 +11594,14 @@
}
}
},
"unlimitedSecretsAndProjects": {
"unlimitedSecretsAndProjects": {
"message": "Unlimited secrets and projects"
},
"providersubscriptionCanceled": {
"providersubscriptionCanceled": {
"message": "Subscription canceled"
},
"providersubCanceledmessage": {
"message" : "To resubscribe, contact Bitwarden Customer Support."
"message": "To resubscribe, contact Bitwarden Customer Support."
},
"showMore": {
"message": "Show more"
@@ -11878,5 +11853,32 @@
},
"viewbusinessplans": {
"message": "View business plans"
},
"updateEncryptionSettings": {
"message": "Update encryption settings"
},
"updateYourEncryptionSettings": {
"message": "Update your encryption settings"
},
"updateSettings": {
"message": "Update settings"
},
"algorithm": {
"message": "Algorithm"
},
"encryptionKeySettingsHowShouldWeEncryptYourData": {
"message": "Choose how Bitwarden should encrypt your vault data. All options are secure, but stronger methods offer better protection - especially against brute-force attacks. Bitwarden recommends the default setting for most users."
},
"encryptionKeySettingsIncreaseImproveSecurity": {
"message": "Increasing the values above the default will improve security, but your vault may take longer to unlock as a result."
},
"encryptionKeySettingsAlgorithmPopoverTitle": {
"message": "About encryption algorithms"
},
"encryptionKeySettingsAlgorithmPopoverPBKDF2": {
"message": "PBKDF2-SHA256 is a well-tested encryption method that balances security and performance. Good for all users."
},
"encryptionKeySettingsAlgorithmPopoverArgon2Id": {
"message": "Argon2id offers stronger protection against modern attacks. Best for advanced users with powerful devices."
}
}