diff --git a/apps/desktop/src/app/accounts/settings.component.spec.ts b/apps/desktop/src/app/accounts/settings.component.spec.ts
index cafc4138628..115f7436979 100644
--- a/apps/desktop/src/app/accounts/settings.component.spec.ts
+++ b/apps/desktop/src/app/accounts/settings.component.spec.ts
@@ -191,7 +191,7 @@ describe("SettingsComponent", () => {
desktopAutotypeService.autotypeEnabledUserSetting$ = of(false);
desktopAutotypeService.autotypeKeyboardShortcut$ = of(["Control", "Shift", "B"]);
billingAccountProfileStateService.hasPremiumFromAnySource$.mockReturnValue(of(false));
- configService.getFeatureFlag$.mockReturnValue(of(true));
+ configService.getFeatureFlag$.mockReturnValue(of(false));
});
afterEach(() => {
diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts
index abebdfa5fc3..3db6c08a6c8 100644
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/apps/desktop/src/app/accounts/settings.component.ts
@@ -55,6 +55,7 @@ import {
TypographyModule,
} from "@bitwarden/components";
import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/key-management";
+import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui";
import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
import { SetPinComponent } from "../../auth/components/set-pin.component";
@@ -95,6 +96,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
SelectModule,
TypographyModule,
VaultTimeoutInputComponent,
+ SessionTimeoutSettingsComponent,
PermitCipherDetailsPopoverComponent,
PremiumBadgeComponent,
],
@@ -146,6 +148,8 @@ export class SettingsComponent implements OnInit, OnDestroy {
pinEnabled$: Observable
= of(true);
isWindowsV2BiometricsEnabled: boolean = false;
+ consolidatedSessionTimeoutComponent$: Observable;
+
form = this.formBuilder.group({
// Security
vaultTimeout: [null as VaultTimeout | null],
@@ -184,7 +188,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
locale: [null as string | null],
});
- private refreshTimeoutSettings$ = new BehaviorSubject(undefined);
+ protected refreshTimeoutSettings$ = new BehaviorSubject(undefined);
private destroy$ = new Subject();
constructor(
@@ -282,12 +286,17 @@ export class SettingsComponent implements OnInit, OnDestroy {
value: SshAgentPromptType.RememberUntilLock,
},
];
+
+ this.consolidatedSessionTimeoutComponent$ = this.configService.getFeatureFlag$(
+ FeatureFlag.ConsolidatedSessionTimeoutComponent,
+ );
}
async ngOnInit() {
+ this.vaultTimeoutOptions = await this.generateVaultTimeoutOptions();
+
this.isWindowsV2BiometricsEnabled = await this.biometricsService.isWindowsV2BiometricsEnabled();
- this.vaultTimeoutOptions = await this.generateVaultTimeoutOptions();
const activeAccount = await firstValueFrom(this.accountService.activeAccount$);
// Autotype is for Windows initially
diff --git a/apps/desktop/src/app/services/services.module.ts b/apps/desktop/src/app/services/services.module.ts
index be91c309875..03d6eb5c908 100644
--- a/apps/desktop/src/app/services/services.module.ts
+++ b/apps/desktop/src/app/services/services.module.ts
@@ -109,7 +109,10 @@ import {
BiometricStateService,
BiometricsService,
} from "@bitwarden/key-management";
-import { LockComponentService } from "@bitwarden/key-management-ui";
+import {
+ LockComponentService,
+ SessionTimeoutSettingsComponentService,
+} from "@bitwarden/key-management-ui";
import { SerializedMemoryStorageService } from "@bitwarden/storage-core";
import { DefaultSshImportPromptService, SshImportPromptService } from "@bitwarden/vault";
@@ -125,6 +128,7 @@ import { DesktopBiometricsService } from "../../key-management/biometrics/deskto
import { RendererBiometricsService } from "../../key-management/biometrics/renderer-biometrics.service";
import { ElectronKeyService } from "../../key-management/electron-key.service";
import { DesktopLockComponentService } from "../../key-management/lock/services/desktop-lock-component.service";
+import { DesktopSessionTimeoutSettingsComponentService } from "../../key-management/session-timeout/services/desktop-session-timeout-settings-component.service";
import { flagEnabled } from "../../platform/flags";
import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
import { ElectronLogRendererService } from "../../platform/services/electron-log.renderer.service";
@@ -480,6 +484,11 @@ const safeProviders: SafeProvider[] = [
useClass: DesktopAutotypeDefaultSettingPolicy,
deps: [AccountServiceAbstraction, AuthServiceAbstraction, InternalPolicyService, ConfigService],
}),
+ safeProvider({
+ provide: SessionTimeoutSettingsComponentService,
+ useClass: DesktopSessionTimeoutSettingsComponentService,
+ deps: [I18nServiceAbstraction],
+ }),
];
@NgModule({
diff --git a/apps/desktop/src/key-management/session-timeout/services/desktop-session-timeout-settings-component.service.ts b/apps/desktop/src/key-management/session-timeout/services/desktop-session-timeout-settings-component.service.ts
new file mode 100644
index 00000000000..91c8126cdd7
--- /dev/null
+++ b/apps/desktop/src/key-management/session-timeout/services/desktop-session-timeout-settings-component.service.ts
@@ -0,0 +1,48 @@
+import { defer, from, map, Observable } from "rxjs";
+
+import {
+ VaultTimeout,
+ VaultTimeoutOption,
+ VaultTimeoutStringType,
+} from "@bitwarden/common/key-management/vault-timeout";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SessionTimeoutSettingsComponentService } from "@bitwarden/key-management-ui";
+
+export class DesktopSessionTimeoutSettingsComponentService
+ implements SessionTimeoutSettingsComponentService
+{
+ availableTimeoutOptions$: Observable = defer(() =>
+ from(ipc.platform.powermonitor.isLockMonitorAvailable()).pipe(
+ map((isLockMonitorAvailable) => {
+ const options: VaultTimeoutOption[] = [
+ { name: this.i18nService.t("oneMinute"), value: 1 },
+ { name: this.i18nService.t("fiveMinutes"), value: 5 },
+ { name: this.i18nService.t("fifteenMinutes"), value: 15 },
+ { name: this.i18nService.t("thirtyMinutes"), value: 30 },
+ { name: this.i18nService.t("oneHour"), value: 60 },
+ { name: this.i18nService.t("fourHours"), value: 240 },
+ { name: this.i18nService.t("onIdle"), value: VaultTimeoutStringType.OnIdle },
+ { name: this.i18nService.t("onSleep"), value: VaultTimeoutStringType.OnSleep },
+ ];
+
+ if (isLockMonitorAvailable) {
+ options.push({
+ name: this.i18nService.t("onLocked"),
+ value: VaultTimeoutStringType.OnLocked,
+ });
+ }
+
+ options.push(
+ { name: this.i18nService.t("onRestart"), value: VaultTimeoutStringType.OnRestart },
+ { name: this.i18nService.t("never"), value: VaultTimeoutStringType.Never },
+ );
+
+ return options;
+ }),
+ ),
+ );
+
+ constructor(private readonly i18nService: I18nService) {}
+
+ onTimeoutSave(_: VaultTimeout): void {}
+}
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index da8d9ea0e34..981066d9612 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -4220,5 +4220,11 @@
},
"upgradeToPremium": {
"message": "Upgrade to Premium"
+ },
+ "sessionTimeoutSettingsAction": {
+ "message": "Timeout action"
+ },
+ "sessionTimeoutHeader": {
+ "message": "Session timeout"
}
}
diff --git a/apps/web/src/app/auth/settings/security/security-routing.module.ts b/apps/web/src/app/auth/settings/security/security-routing.module.ts
index ba476dc9106..dbcfc7cb18b 100644
--- a/apps/web/src/app/auth/settings/security/security-routing.module.ts
+++ b/apps/web/src/app/auth/settings/security/security-routing.module.ts
@@ -2,7 +2,10 @@ import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { DeviceManagementComponent } from "@bitwarden/angular/auth/device-management/device-management.component";
+import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { SessionTimeoutComponent } from "../../../key-management/session-timeout/session-timeout.component";
import { TwoFactorSetupComponent } from "../two-factor/two-factor-setup.component";
import { PasswordSettingsComponent } from "./password-settings/password-settings.component";
@@ -15,7 +18,20 @@ const routes: Routes = [
component: SecurityComponent,
data: { titleId: "security" },
children: [
- { path: "", pathMatch: "full", redirectTo: "password" },
+ { path: "", pathMatch: "full", redirectTo: "session-timeout" },
+ {
+ path: "session-timeout",
+ component: SessionTimeoutComponent,
+ canActivate: [
+ canAccessFeature(
+ FeatureFlag.ConsolidatedSessionTimeoutComponent,
+ true,
+ "/settings/security/password",
+ false,
+ ),
+ ],
+ data: { titleId: "sessionTimeoutHeader" },
+ },
{
path: "password",
component: PasswordSettingsComponent,
diff --git a/apps/web/src/app/auth/settings/security/security.component.html b/apps/web/src/app/auth/settings/security/security.component.html
index 355a33d4427..6942713443f 100644
--- a/apps/web/src/app/auth/settings/security/security.component.html
+++ b/apps/web/src/app/auth/settings/security/security.component.html
@@ -1,8 +1,11 @@
-
+ @if (consolidatedSessionTimeoutComponent$ | async) {
+ {{ "sessionTimeoutHeader" | i18n }}
+ }
+ @if (showChangePassword) {
{{ "masterPassword" | i18n }}
-
+ }
{{ "twoStepLogin" | i18n }}
{{ "devices" | i18n }}
{{ "keys" | i18n }}
diff --git a/apps/web/src/app/auth/settings/security/security.component.ts b/apps/web/src/app/auth/settings/security/security.component.ts
index ff13515eec0..629de32efc4 100644
--- a/apps/web/src/app/auth/settings/security/security.component.ts
+++ b/apps/web/src/app/auth/settings/security/security.component.ts
@@ -1,6 +1,9 @@
import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { HeaderModule } from "../../../layouts/header/header.module";
import { SharedModule } from "../../../shared";
@@ -14,8 +17,16 @@ import { SharedModule } from "../../../shared";
export class SecurityComponent implements OnInit {
showChangePassword = true;
changePasswordRoute = "password";
+ consolidatedSessionTimeoutComponent$: Observable;
- constructor(private userVerificationService: UserVerificationService) {}
+ constructor(
+ private userVerificationService: UserVerificationService,
+ private configService: ConfigService,
+ ) {
+ this.consolidatedSessionTimeoutComponent$ = this.configService.getFeatureFlag$(
+ FeatureFlag.ConsolidatedSessionTimeoutComponent,
+ );
+ }
async ngOnInit() {
this.showChangePassword = await this.userVerificationService.hasMasterPassword();
diff --git a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.spec.ts b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.spec.ts
index 32c67df1434..7f698ae50d1 100644
--- a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.spec.ts
+++ b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.spec.ts
@@ -1,8 +1,10 @@
import { Component, input, output } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { Router } from "@angular/router";
import { mock } from "jest-mock-extended";
+import { PremiumInterestStateService } from "@bitwarden/angular/billing/services/premium-interest/premium-interest-state.service.abstraction";
import { Account } from "@bitwarden/common/auth/abstractions/account.service";
import {
PersonalSubscriptionPricingTierId,
@@ -58,6 +60,8 @@ describe("UnifiedUpgradeDialogComponent", () => {
let component: UnifiedUpgradeDialogComponent;
let fixture: ComponentFixture;
const mockDialogRef = mock();
+ const mockRouter = mock();
+ const mockPremiumInterestStateService = mock();
const mockAccount: Account = {
id: "user-id" as UserId,
@@ -74,11 +78,16 @@ describe("UnifiedUpgradeDialogComponent", () => {
};
beforeEach(async () => {
+ // Reset mocks
+ jest.clearAllMocks();
+
await TestBed.configureTestingModule({
imports: [NoopAnimationsModule, UnifiedUpgradeDialogComponent],
providers: [
{ provide: DialogRef, useValue: mockDialogRef },
{ provide: DIALOG_DATA, useValue: defaultDialogData },
+ { provide: Router, useValue: mockRouter },
+ { provide: PremiumInterestStateService, useValue: mockPremiumInterestStateService },
],
})
.overrideComponent(UnifiedUpgradeDialogComponent, {
@@ -121,6 +130,8 @@ describe("UnifiedUpgradeDialogComponent", () => {
providers: [
{ provide: DialogRef, useValue: mockDialogRef },
{ provide: DIALOG_DATA, useValue: customDialogData },
+ { provide: Router, useValue: mockRouter },
+ { provide: PremiumInterestStateService, useValue: mockPremiumInterestStateService },
],
})
.overrideComponent(UnifiedUpgradeDialogComponent, {
@@ -161,6 +172,8 @@ describe("UnifiedUpgradeDialogComponent", () => {
providers: [
{ provide: DialogRef, useValue: mockDialogRef },
{ provide: DIALOG_DATA, useValue: customDialogData },
+ { provide: Router, useValue: mockRouter },
+ { provide: PremiumInterestStateService, useValue: mockPremiumInterestStateService },
],
})
.overrideComponent(UnifiedUpgradeDialogComponent, {
@@ -191,11 +204,11 @@ describe("UnifiedUpgradeDialogComponent", () => {
});
describe("previousStep", () => {
- it("should go back to plan selection and clear selected plan", () => {
+ it("should go back to plan selection and clear selected plan", async () => {
component["step"].set(UnifiedUpgradeDialogStep.Payment);
component["selectedPlan"].set(PersonalSubscriptionPricingTierIds.Premium);
- component["previousStep"]();
+ await component["previousStep"]();
expect(component["step"]()).toBe(UnifiedUpgradeDialogStep.PlanSelection);
expect(component["selectedPlan"]()).toBeNull();
@@ -222,6 +235,8 @@ describe("UnifiedUpgradeDialogComponent", () => {
providers: [
{ provide: DialogRef, useValue: mockDialogRef },
{ provide: DIALOG_DATA, useValue: customDialogData },
+ { provide: Router, useValue: mockRouter },
+ { provide: PremiumInterestStateService, useValue: mockPremiumInterestStateService },
],
})
.overrideComponent(UnifiedUpgradeDialogComponent, {
@@ -241,4 +256,169 @@ describe("UnifiedUpgradeDialogComponent", () => {
expect(customComponent["hideContinueWithoutUpgradingButton"]()).toBe(true);
});
});
+
+ describe("onComplete with premium interest", () => {
+ it("should check premium interest, clear it, and route to /vault when premium interest exists", async () => {
+ mockPremiumInterestStateService.getPremiumInterest.mockResolvedValue(true);
+ mockPremiumInterestStateService.clearPremiumInterest.mockResolvedValue();
+ mockRouter.navigate.mockResolvedValue(true);
+
+ const result: UpgradePaymentResult = {
+ status: "upgradedToPremium",
+ organizationId: null,
+ };
+
+ await component["onComplete"](result);
+
+ expect(mockPremiumInterestStateService.getPremiumInterest).toHaveBeenCalledWith(
+ mockAccount.id,
+ );
+ expect(mockPremiumInterestStateService.clearPremiumInterest).toHaveBeenCalledWith(
+ mockAccount.id,
+ );
+ expect(mockRouter.navigate).toHaveBeenCalledWith(["/vault"]);
+ expect(mockDialogRef.close).toHaveBeenCalledWith({
+ status: "upgradedToPremium",
+ organizationId: null,
+ });
+ });
+
+ it("should not clear premium interest when upgrading to families", async () => {
+ const result: UpgradePaymentResult = {
+ status: "upgradedToFamilies",
+ organizationId: "org-123",
+ };
+
+ await component["onComplete"](result);
+
+ expect(mockPremiumInterestStateService.getPremiumInterest).not.toHaveBeenCalled();
+ expect(mockPremiumInterestStateService.clearPremiumInterest).not.toHaveBeenCalled();
+ expect(mockDialogRef.close).toHaveBeenCalledWith({
+ status: "upgradedToFamilies",
+ organizationId: "org-123",
+ });
+ });
+
+ it("should use standard redirect when no premium interest exists", async () => {
+ TestBed.resetTestingModule();
+
+ const customDialogData: UnifiedUpgradeDialogParams = {
+ account: mockAccount,
+ redirectOnCompletion: true,
+ };
+
+ mockPremiumInterestStateService.getPremiumInterest.mockResolvedValue(false);
+ mockRouter.navigate.mockResolvedValue(true);
+
+ await TestBed.configureTestingModule({
+ imports: [NoopAnimationsModule, UnifiedUpgradeDialogComponent],
+ providers: [
+ { provide: DialogRef, useValue: mockDialogRef },
+ { provide: DIALOG_DATA, useValue: customDialogData },
+ { provide: Router, useValue: mockRouter },
+ { provide: PremiumInterestStateService, useValue: mockPremiumInterestStateService },
+ ],
+ })
+ .overrideComponent(UnifiedUpgradeDialogComponent, {
+ remove: {
+ imports: [UpgradeAccountComponent, UpgradePaymentComponent],
+ },
+ add: {
+ imports: [MockUpgradeAccountComponent, MockUpgradePaymentComponent],
+ },
+ })
+ .compileComponents();
+
+ const customFixture = TestBed.createComponent(UnifiedUpgradeDialogComponent);
+ const customComponent = customFixture.componentInstance;
+ customFixture.detectChanges();
+
+ const result: UpgradePaymentResult = {
+ status: "upgradedToPremium",
+ organizationId: null,
+ };
+
+ await customComponent["onComplete"](result);
+
+ expect(mockPremiumInterestStateService.getPremiumInterest).toHaveBeenCalledWith(
+ mockAccount.id,
+ );
+ expect(mockPremiumInterestStateService.clearPremiumInterest).not.toHaveBeenCalled();
+ expect(mockRouter.navigate).toHaveBeenCalledWith([
+ "/settings/subscription/user-subscription",
+ ]);
+ expect(mockDialogRef.close).toHaveBeenCalledWith({
+ status: "upgradedToPremium",
+ organizationId: null,
+ });
+ });
+ });
+
+ describe("onCloseClicked with premium interest", () => {
+ it("should clear premium interest when modal is closed", async () => {
+ mockPremiumInterestStateService.clearPremiumInterest.mockResolvedValue();
+
+ await component["onCloseClicked"]();
+
+ expect(mockPremiumInterestStateService.clearPremiumInterest).toHaveBeenCalledWith(
+ mockAccount.id,
+ );
+ expect(mockDialogRef.close).toHaveBeenCalledWith({ status: "closed" });
+ });
+ });
+
+ describe("previousStep with premium interest", () => {
+ it("should NOT clear premium interest when navigating between steps", async () => {
+ component["step"].set(UnifiedUpgradeDialogStep.Payment);
+ component["selectedPlan"].set(PersonalSubscriptionPricingTierIds.Premium);
+
+ await component["previousStep"]();
+
+ expect(mockPremiumInterestStateService.clearPremiumInterest).not.toHaveBeenCalled();
+ expect(component["step"]()).toBe(UnifiedUpgradeDialogStep.PlanSelection);
+ expect(component["selectedPlan"]()).toBeNull();
+ });
+
+ it("should clear premium interest when backing out of dialog completely", async () => {
+ TestBed.resetTestingModule();
+
+ const customDialogData: UnifiedUpgradeDialogParams = {
+ account: mockAccount,
+ initialStep: UnifiedUpgradeDialogStep.Payment,
+ selectedPlan: PersonalSubscriptionPricingTierIds.Premium,
+ };
+
+ mockPremiumInterestStateService.clearPremiumInterest.mockResolvedValue();
+
+ await TestBed.configureTestingModule({
+ imports: [NoopAnimationsModule, UnifiedUpgradeDialogComponent],
+ providers: [
+ { provide: DialogRef, useValue: mockDialogRef },
+ { provide: DIALOG_DATA, useValue: customDialogData },
+ { provide: Router, useValue: mockRouter },
+ { provide: PremiumInterestStateService, useValue: mockPremiumInterestStateService },
+ ],
+ })
+ .overrideComponent(UnifiedUpgradeDialogComponent, {
+ remove: {
+ imports: [UpgradeAccountComponent, UpgradePaymentComponent],
+ },
+ add: {
+ imports: [MockUpgradeAccountComponent, MockUpgradePaymentComponent],
+ },
+ })
+ .compileComponents();
+
+ const customFixture = TestBed.createComponent(UnifiedUpgradeDialogComponent);
+ const customComponent = customFixture.componentInstance;
+ customFixture.detectChanges();
+
+ await customComponent["previousStep"]();
+
+ expect(mockPremiumInterestStateService.clearPremiumInterest).toHaveBeenCalledWith(
+ mockAccount.id,
+ );
+ expect(mockDialogRef.close).toHaveBeenCalledWith({ status: "closed" });
+ });
+ });
});
diff --git a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts
index 07b21a9fb4b..02d48e8d8f4 100644
--- a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts
+++ b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts
@@ -3,6 +3,7 @@ import { CommonModule } from "@angular/common";
import { Component, Inject, OnInit, signal } from "@angular/core";
import { Router } from "@angular/router";
+import { PremiumInterestStateService } from "@bitwarden/angular/billing/services/premium-interest/premium-interest-state.service.abstraction";
import { Account } from "@bitwarden/common/auth/abstractions/account.service";
import { PersonalSubscriptionPricingTierId } from "@bitwarden/common/billing/types/subscription-pricing-tier";
import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
@@ -94,6 +95,7 @@ export class UnifiedUpgradeDialogComponent implements OnInit {
private dialogRef: DialogRef,
@Inject(DIALOG_DATA) private params: UnifiedUpgradeDialogParams,
private router: Router,
+ private premiumInterestStateService: PremiumInterestStateService,
) {}
ngOnInit(): void {
@@ -110,7 +112,9 @@ export class UnifiedUpgradeDialogComponent implements OnInit {
this.selectedPlan.set(planId);
this.nextStep();
}
- protected onCloseClicked(): void {
+ protected async onCloseClicked(): Promise {
+ // Clear premium interest when user closes/abandons modal
+ await this.premiumInterestStateService.clearPremiumInterest(this.params.account.id);
this.close({ status: UnifiedUpgradeDialogStatus.Closed });
}
@@ -124,18 +128,20 @@ export class UnifiedUpgradeDialogComponent implements OnInit {
}
}
- protected previousStep(): void {
+ protected async previousStep(): Promise {
// If we are on the payment step and there was no initial step, go back to plan selection this is to prevent
// going back to payment step if the dialog was opened directly to payment step
if (this.step() === UnifiedUpgradeDialogStep.Payment && this.params?.initialStep == null) {
this.step.set(UnifiedUpgradeDialogStep.PlanSelection);
this.selectedPlan.set(null);
} else {
+ // Clear premium interest when backing out of dialog completely
+ await this.premiumInterestStateService.clearPremiumInterest(this.params.account.id);
this.close({ status: UnifiedUpgradeDialogStatus.Closed });
}
}
- protected onComplete(result: UpgradePaymentResult): void {
+ protected async onComplete(result: UpgradePaymentResult): Promise {
let status: UnifiedUpgradeDialogStatus;
switch (result.status) {
case "upgradedToPremium":
@@ -153,6 +159,19 @@ export class UnifiedUpgradeDialogComponent implements OnInit {
this.close({ status, organizationId: result.organizationId });
+ // Check premium interest and route to vault for marketing-initiated premium upgrades
+ if (status === UnifiedUpgradeDialogStatus.UpgradedToPremium) {
+ const hasPremiumInterest = await this.premiumInterestStateService.getPremiumInterest(
+ this.params.account.id,
+ );
+ if (hasPremiumInterest) {
+ await this.premiumInterestStateService.clearPremiumInterest(this.params.account.id);
+ await this.router.navigate(["/vault"]);
+ return; // Exit early, don't use redirectOnCompletion
+ }
+ }
+
+ // Use redirectOnCompletion for standard upgrade flows
if (
this.params.redirectOnCompletion &&
(status === UnifiedUpgradeDialogStatus.UpgradedToPremium ||
@@ -162,7 +181,7 @@ export class UnifiedUpgradeDialogComponent implements OnInit {
status === UnifiedUpgradeDialogStatus.UpgradedToFamilies
? `/organizations/${result.organizationId}/vault`
: "/settings/subscription/user-subscription";
- void this.router.navigate([redirectUrl]);
+ await this.router.navigate([redirectUrl]);
}
}
diff --git a/apps/web/src/app/core/core.module.ts b/apps/web/src/app/core/core.module.ts
index bf741132b00..c0716d99716 100644
--- a/apps/web/src/app/core/core.module.ts
+++ b/apps/web/src/app/core/core.module.ts
@@ -117,10 +117,14 @@ import {
KeyService as KeyServiceAbstraction,
BiometricsService,
} from "@bitwarden/key-management";
-import { LockComponentService } from "@bitwarden/key-management-ui";
+import {
+ LockComponentService,
+ SessionTimeoutSettingsComponentService,
+} from "@bitwarden/key-management-ui";
import { SerializedMemoryStorageService } from "@bitwarden/storage-core";
import { DefaultSshImportPromptService, SshImportPromptService } from "@bitwarden/vault";
import { WebOrganizationInviteService } from "@bitwarden/web-vault/app/auth/core/services/organization-invite/web-organization-invite.service";
+import { WebSessionTimeoutSettingsComponentService } from "@bitwarden/web-vault/app/key-management/session-timeout/services/web-session-timeout-settings-component.service";
import { WebVaultPremiumUpgradePromptService } from "@bitwarden/web-vault/app/vault/services/web-premium-upgrade-prompt.service";
import { flagEnabled } from "../../utils/flags";
@@ -465,6 +469,11 @@ const safeProviders: SafeProvider[] = [
useClass: WebSystemService,
deps: [],
}),
+ safeProvider({
+ provide: SessionTimeoutSettingsComponentService,
+ useClass: WebSessionTimeoutSettingsComponentService,
+ deps: [I18nServiceAbstraction, PlatformUtilsService],
+ }),
];
@NgModule({
diff --git a/apps/web/src/app/key-management/session-timeout/services/web-session-timeout-settings-component.service.ts b/apps/web/src/app/key-management/session-timeout/services/web-session-timeout-settings-component.service.ts
new file mode 100644
index 00000000000..61836c98252
--- /dev/null
+++ b/apps/web/src/app/key-management/session-timeout/services/web-session-timeout-settings-component.service.ts
@@ -0,0 +1,39 @@
+import { defer, Observable, of } from "rxjs";
+
+import {
+ VaultTimeout,
+ VaultTimeoutOption,
+ VaultTimeoutStringType,
+} from "@bitwarden/common/key-management/vault-timeout";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { SessionTimeoutSettingsComponentService } from "@bitwarden/key-management-ui";
+
+export class WebSessionTimeoutSettingsComponentService
+ implements SessionTimeoutSettingsComponentService
+{
+ availableTimeoutOptions$: Observable = defer(() => {
+ const options: VaultTimeoutOption[] = [
+ { name: this.i18nService.t("oneMinute"), value: 1 },
+ { name: this.i18nService.t("fiveMinutes"), value: 5 },
+ { name: this.i18nService.t("fifteenMinutes"), value: 15 },
+ { name: this.i18nService.t("thirtyMinutes"), value: 30 },
+ { name: this.i18nService.t("oneHour"), value: 60 },
+ { name: this.i18nService.t("fourHours"), value: 240 },
+ { name: this.i18nService.t("onRefresh"), value: VaultTimeoutStringType.OnRestart },
+ ];
+
+ if (this.platformUtilsService.isDev()) {
+ options.push({ name: this.i18nService.t("never"), value: VaultTimeoutStringType.Never });
+ }
+
+ return of(options);
+ });
+
+ constructor(
+ private readonly i18nService: I18nService,
+ private readonly platformUtilsService: PlatformUtilsService,
+ ) {}
+
+ onTimeoutSave(_: VaultTimeout): void {}
+}
diff --git a/apps/web/src/app/key-management/session-timeout/session-timeout.component.html b/apps/web/src/app/key-management/session-timeout/session-timeout.component.html
new file mode 100644
index 00000000000..0ca6267da50
--- /dev/null
+++ b/apps/web/src/app/key-management/session-timeout/session-timeout.component.html
@@ -0,0 +1,5 @@
+{{ "sessionTimeoutHeader" | i18n }}
+
+
+
+
diff --git a/apps/web/src/app/key-management/session-timeout/session-timeout.component.ts b/apps/web/src/app/key-management/session-timeout/session-timeout.component.ts
new file mode 100644
index 00000000000..566484ddcee
--- /dev/null
+++ b/apps/web/src/app/key-management/session-timeout/session-timeout.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui";
+
+@Component({
+ templateUrl: "session-timeout.component.html",
+ imports: [SessionTimeoutSettingsComponent, JslibModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SessionTimeoutComponent {}
diff --git a/apps/web/src/app/layouts/user-layout.component.html b/apps/web/src/app/layouts/user-layout.component.html
index 23f22d263cf..9f474062120 100644
--- a/apps/web/src/app/layouts/user-layout.component.html
+++ b/apps/web/src/app/layouts/user-layout.component.html
@@ -13,7 +13,11 @@
-
+ @if (consolidatedSessionTimeoutComponent$ | async) {
+
+ } @else {
+
+ }
;
protected showSponsoredFamilies$: Observable;
protected showSubscription$: Observable;
+ protected consolidatedSessionTimeoutComponent$: Observable;
constructor(
private syncService: SyncService,
@@ -74,6 +75,10 @@ export class UserLayoutComponent implements OnInit {
}),
),
);
+
+ this.consolidatedSessionTimeoutComponent$ = this.configService.getFeatureFlag$(
+ FeatureFlag.ConsolidatedSessionTimeoutComponent,
+ );
}
async ngOnInit() {
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 4db6e50bc6d..b40b9143991 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -14,6 +14,7 @@ import {
import { LoginViaWebAuthnComponent } from "@bitwarden/angular/auth/login-via-webauthn/login-via-webauthn.component";
import { ChangePasswordComponent } from "@bitwarden/angular/auth/password-management/change-password";
import { SetInitialPasswordComponent } from "@bitwarden/angular/auth/password-management/set-initial-password/set-initial-password.component";
+import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
import {
DevicesIcon,
RegistrationUserAddIcon,
@@ -48,6 +49,7 @@ import {
NewDeviceVerificationComponent,
} from "@bitwarden/auth/angular";
import { canAccessEmergencyAccess } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { AnonLayoutWrapperComponent, AnonLayoutWrapperData } from "@bitwarden/components";
import { LockComponent } from "@bitwarden/key-management-ui";
import { premiumInterestRedirectGuard } from "@bitwarden/web-vault/app/vault/guards/premium-interest-redirect/premium-interest-redirect.guard";
@@ -82,6 +84,7 @@ import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";
import { UserLayoutComponent } from "./layouts/user-layout.component";
import { RequestSMAccessComponent } from "./secrets-manager/secrets-manager-landing/request-sm-access.component";
import { SMLandingComponent } from "./secrets-manager/secrets-manager-landing/sm-landing.component";
+import { AppearanceComponent } from "./settings/appearance.component";
import { DomainRulesComponent } from "./settings/domain-rules.component";
import { PreferencesComponent } from "./settings/preferences.component";
import { CredentialGeneratorComponent } from "./tools/credential-generator/credential-generator.component";
@@ -663,9 +666,30 @@ const routes: Routes = [
component: AccountComponent,
data: { titleId: "myAccount" } satisfies RouteDataProperties,
},
+ {
+ path: "appearance",
+ component: AppearanceComponent,
+ canActivate: [
+ canAccessFeature(
+ FeatureFlag.ConsolidatedSessionTimeoutComponent,
+ true,
+ "/settings/preferences",
+ false,
+ ),
+ ],
+ data: { titleId: "appearance" } satisfies RouteDataProperties,
+ },
{
path: "preferences",
component: PreferencesComponent,
+ canActivate: [
+ canAccessFeature(
+ FeatureFlag.ConsolidatedSessionTimeoutComponent,
+ false,
+ "/settings/appearance",
+ false,
+ ),
+ ],
data: { titleId: "preferences" } satisfies RouteDataProperties,
},
{
diff --git a/apps/web/src/app/settings/appearance.component.html b/apps/web/src/app/settings/appearance.component.html
new file mode 100644
index 00000000000..840895eea42
--- /dev/null
+++ b/apps/web/src/app/settings/appearance.component.html
@@ -0,0 +1,48 @@
+
+
+
+
+
diff --git a/apps/web/src/app/settings/appearance.component.spec.ts b/apps/web/src/app/settings/appearance.component.spec.ts
new file mode 100644
index 00000000000..53ae9f81a80
--- /dev/null
+++ b/apps/web/src/app/settings/appearance.component.spec.ts
@@ -0,0 +1,215 @@
+import { ComponentFixture, fakeAsync, flush, TestBed } from "@angular/core/testing";
+import { ReactiveFormsModule } from "@angular/forms";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { mock, MockProxy } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
+
+import { AppearanceComponent } from "./appearance.component";
+
+describe("AppearanceComponent", () => {
+ let component: AppearanceComponent;
+ let fixture: ComponentFixture;
+ let mockI18nService: MockProxy;
+ let mockThemeStateService: MockProxy;
+ let mockDomainSettingsService: MockProxy;
+
+ const mockShowFavicons$ = new BehaviorSubject(true);
+ const mockSelectedTheme$ = new BehaviorSubject(ThemeTypes.Light);
+ const mockUserSetLocale$ = new BehaviorSubject("en");
+
+ const mockSupportedLocales = ["en", "es", "fr", "de"];
+ const mockLocaleNames = new Map([
+ ["en", "English"],
+ ["es", "Español"],
+ ["fr", "Français"],
+ ["de", "Deutsch"],
+ ]);
+
+ beforeEach(async () => {
+ mockI18nService = mock();
+ mockThemeStateService = mock();
+ mockDomainSettingsService = mock();
+
+ mockI18nService.supportedTranslationLocales = mockSupportedLocales;
+ mockI18nService.localeNames = mockLocaleNames;
+ mockI18nService.collator = {
+ compare: jest.fn((a: string, b: string) => a.localeCompare(b)),
+ } as any;
+ mockI18nService.t.mockImplementation((key: string) => `${key}-used-i18n`);
+ mockI18nService.userSetLocale$ = mockUserSetLocale$;
+
+ mockThemeStateService.selectedTheme$ = mockSelectedTheme$;
+ mockDomainSettingsService.showFavicons$ = mockShowFavicons$;
+
+ mockDomainSettingsService.setShowFavicons.mockResolvedValue(undefined);
+ mockThemeStateService.setSelectedTheme.mockResolvedValue(undefined);
+ mockI18nService.setLocale.mockResolvedValue(undefined);
+
+ await TestBed.configureTestingModule({
+ imports: [AppearanceComponent, ReactiveFormsModule, NoopAnimationsModule],
+ providers: [
+ { provide: I18nService, useValue: mockI18nService },
+ { provide: ThemeStateService, useValue: mockThemeStateService },
+ { provide: DomainSettingsService, useValue: mockDomainSettingsService },
+ ],
+ })
+ .overrideComponent(AppearanceComponent, {
+ set: {
+ template: "",
+ imports: [],
+ },
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(AppearanceComponent);
+ component = fixture.componentInstance;
+ });
+
+ afterEach(() => {
+ jest.restoreAllMocks();
+ });
+
+ it("should create", () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe("constructor", () => {
+ describe("locale options setup", () => {
+ it("should create locale options sorted by name from supported locales with display names", () => {
+ expect(component.localeOptions).toHaveLength(5);
+ expect(component.localeOptions[0]).toEqual({ name: "default-used-i18n", value: null });
+ expect(component.localeOptions[1]).toEqual({ name: "de - Deutsch", value: "de" });
+ expect(component.localeOptions[2]).toEqual({ name: "en - English", value: "en" });
+ expect(component.localeOptions[3]).toEqual({ name: "es - Español", value: "es" });
+ expect(component.localeOptions[4]).toEqual({ name: "fr - Français", value: "fr" });
+ });
+ });
+
+ describe("theme options setup", () => {
+ it("should create theme options with Light, Dark, and System", () => {
+ expect(component.themeOptions).toEqual([
+ { name: "themeLight-used-i18n", value: ThemeTypes.Light },
+ { name: "themeDark-used-i18n", value: ThemeTypes.Dark },
+ { name: "themeSystem-used-i18n", value: ThemeTypes.System },
+ ]);
+ });
+ });
+ });
+
+ describe("ngOnInit", () => {
+ it("should initialize form with values", fakeAsync(() => {
+ mockShowFavicons$.next(false);
+ mockSelectedTheme$.next(ThemeTypes.Dark);
+ mockUserSetLocale$.next("es");
+
+ fixture.detectChanges();
+ flush();
+
+ expect(component.form.value).toEqual({
+ enableFavicons: false,
+ theme: ThemeTypes.Dark,
+ locale: "es",
+ });
+ }));
+
+ it("should set locale to null when user locale not set", fakeAsync(() => {
+ mockUserSetLocale$.next(undefined);
+
+ fixture.detectChanges();
+ flush();
+
+ expect(component.form.value.locale).toBeNull();
+ }));
+ });
+
+ describe("enableFavicons value changes", () => {
+ beforeEach(fakeAsync(() => {
+ fixture.detectChanges();
+ flush();
+ jest.clearAllMocks();
+ }));
+
+ it("should call setShowFavicons when enableFavicons changes to true", fakeAsync(() => {
+ component.form.controls.enableFavicons.setValue(true);
+ flush();
+
+ expect(mockDomainSettingsService.setShowFavicons).toHaveBeenCalledWith(true);
+ }));
+
+ it("should call setShowFavicons when enableFavicons changes to false", fakeAsync(() => {
+ component.form.controls.enableFavicons.setValue(false);
+ flush();
+
+ expect(mockDomainSettingsService.setShowFavicons).toHaveBeenCalledWith(false);
+ }));
+
+ it("should not call setShowFavicons when value is null", fakeAsync(() => {
+ component.form.controls.enableFavicons.setValue(null);
+ flush();
+
+ expect(mockDomainSettingsService.setShowFavicons).not.toHaveBeenCalled();
+ }));
+ });
+
+ describe("theme value changes", () => {
+ beforeEach(fakeAsync(() => {
+ fixture.detectChanges();
+ flush();
+ jest.clearAllMocks();
+ }));
+
+ it.each([ThemeTypes.Light, ThemeTypes.Dark, ThemeTypes.System])(
+ "should call setSelectedTheme when theme changes to %s",
+ fakeAsync((themeType: Theme) => {
+ component.form.controls.theme.setValue(themeType);
+ flush();
+
+ expect(mockThemeStateService.setSelectedTheme).toHaveBeenCalledWith(themeType);
+ }),
+ );
+
+ it("should not call setSelectedTheme when value is null", fakeAsync(() => {
+ component.form.controls.theme.setValue(null);
+ flush();
+
+ expect(mockThemeStateService.setSelectedTheme).not.toHaveBeenCalled();
+ }));
+ });
+
+ describe("locale value changes", () => {
+ let reloadMock: jest.Mock;
+
+ beforeEach(fakeAsync(() => {
+ reloadMock = jest.fn();
+ Object.defineProperty(window, "location", {
+ value: { reload: reloadMock },
+ writable: true,
+ });
+
+ fixture.detectChanges();
+ flush();
+ jest.clearAllMocks();
+ }));
+
+ it("should call setLocale and reload window when locale changes to english", fakeAsync(() => {
+ component.form.controls.locale.setValue("es");
+ flush();
+
+ expect(mockI18nService.setLocale).toHaveBeenCalledWith("es");
+ expect(reloadMock).toHaveBeenCalled();
+ }));
+
+ it("should call setLocale and reload window when locale changes to default", fakeAsync(() => {
+ component.form.controls.locale.setValue(null);
+ flush();
+
+ expect(mockI18nService.setLocale).toHaveBeenCalledWith(null);
+ expect(reloadMock).toHaveBeenCalled();
+ }));
+ });
+});
diff --git a/apps/web/src/app/settings/appearance.component.ts b/apps/web/src/app/settings/appearance.component.ts
new file mode 100644
index 00000000000..d1bcf2c28f4
--- /dev/null
+++ b/apps/web/src/app/settings/appearance.component.ts
@@ -0,0 +1,107 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormBuilder } from "@angular/forms";
+import { filter, firstValueFrom, switchMap } from "rxjs";
+
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
+import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
+
+import { HeaderModule } from "../layouts/header/header.module";
+import { SharedModule } from "../shared";
+
+type LocaleOption = {
+ name: string;
+ value: string | null;
+};
+
+type ThemeOption = {
+ name: string;
+ value: Theme;
+};
+
+@Component({
+ selector: "app-appearance",
+ templateUrl: "appearance.component.html",
+ imports: [SharedModule, HeaderModule, PermitCipherDetailsPopoverComponent],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppearanceComponent implements OnInit {
+ localeOptions: LocaleOption[];
+ themeOptions: ThemeOption[];
+
+ form = this.formBuilder.group({
+ enableFavicons: true,
+ theme: [ThemeTypes.Light as Theme],
+ locale: [null as string | null],
+ });
+
+ constructor(
+ private formBuilder: FormBuilder,
+ private i18nService: I18nService,
+ private themeStateService: ThemeStateService,
+ private domainSettingsService: DomainSettingsService,
+ private destroyRef: DestroyRef,
+ ) {
+ const localeOptions: LocaleOption[] = [];
+ i18nService.supportedTranslationLocales.forEach((locale) => {
+ let name = locale;
+ if (i18nService.localeNames.has(locale)) {
+ name += " - " + i18nService.localeNames.get(locale);
+ }
+ localeOptions.push({ name: name, value: locale });
+ });
+ localeOptions.sort(Utils.getSortFunction(i18nService, "name"));
+ localeOptions.splice(0, 0, { name: i18nService.t("default"), value: null });
+ this.localeOptions = localeOptions;
+ this.themeOptions = [
+ { name: i18nService.t("themeLight"), value: ThemeTypes.Light },
+ { name: i18nService.t("themeDark"), value: ThemeTypes.Dark },
+ { name: i18nService.t("themeSystem"), value: ThemeTypes.System },
+ ];
+ }
+
+ async ngOnInit() {
+ this.form.setValue(
+ {
+ enableFavicons: await firstValueFrom(this.domainSettingsService.showFavicons$),
+ theme: await firstValueFrom(this.themeStateService.selectedTheme$),
+ locale: (await firstValueFrom(this.i18nService.userSetLocale$)) ?? null,
+ },
+ { emitEvent: false },
+ );
+
+ this.form.controls.enableFavicons.valueChanges
+ .pipe(
+ filter((enableFavicons) => enableFavicons != null),
+ switchMap(async (enableFavicons) => {
+ await this.domainSettingsService.setShowFavicons(enableFavicons);
+ }),
+ takeUntilDestroyed(this.destroyRef),
+ )
+ .subscribe();
+
+ this.form.controls.theme.valueChanges
+ .pipe(
+ filter((theme) => theme != null),
+ switchMap(async (theme) => {
+ await this.themeStateService.setSelectedTheme(theme);
+ }),
+ takeUntilDestroyed(this.destroyRef),
+ )
+ .subscribe();
+
+ this.form.controls.locale.valueChanges
+ .pipe(
+ switchMap(async (locale) => {
+ await this.i18nService.setLocale(locale);
+ window.location.reload();
+ }),
+ takeUntilDestroyed(this.destroyRef),
+ )
+ .subscribe();
+ }
+}
diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html
index 40f2f596a13..4af7e51b800 100644
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/apps/web/src/app/settings/preferences.component.html
@@ -48,8 +48,8 @@
- {{ "language" | i18n }}
+
+ {{ "language" | i18n }}
implements OnInit, OnDestr
await this.editCipherId(cipherId);
}
} else {
- this.toastService.showToast({
- variant: "error",
- title: null,
- message: this.i18nService.t("unknownCipher"),
- });
- await this.router.navigate([], {
- queryParams: { itemId: null, cipherId: null },
- queryParamsHandling: "merge",
- });
+ await this.handleUnknownCipher();
}
}
}),
@@ -714,6 +706,18 @@ export class VaultComponent implements OnInit, OnDestr
}
}
+ async handleUnknownCipher() {
+ this.toastService.showToast({
+ variant: "error",
+ title: null,
+ message: this.i18nService.t("unknownCipher"),
+ });
+ await this.router.navigate([], {
+ queryParams: { itemId: null, cipherId: null },
+ queryParamsHandling: "merge",
+ });
+ }
+
async archive(cipher: C) {
const repromptPassed = await this.passwordRepromptService.passwordRepromptCheck(cipher);
@@ -997,6 +1001,10 @@ export class VaultComponent implements OnInit, OnDestr
async editCipherId(id: string, cloneMode?: boolean) {
const activeUserId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
const cipher = await this.cipherService.get(id, activeUserId);
+ if (!cipher) {
+ await this.handleUnknownCipher();
+ return;
+ }
if (
cipher &&
@@ -1034,6 +1042,10 @@ export class VaultComponent implements OnInit, OnDestr
async viewCipherById(id: string) {
const activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
const cipher = await this.cipherService.get(id, activeUserId);
+ if (!cipher) {
+ await this.handleUnknownCipher();
+ return;
+ }
// If cipher exists (cipher is null when new) and MP reprompt
// is on for this cipher, then show password reprompt.
if (
diff --git a/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.spec.ts b/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.spec.ts
index ad16baee42e..f9319e87656 100644
--- a/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.spec.ts
+++ b/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.spec.ts
@@ -187,6 +187,13 @@ describe("WebVaultPremiumUpgradePromptService", () => {
expect(routerMock.navigate).toHaveBeenCalledWith(["settings/subscription/premium"]);
expect(dialogServiceMock.openSimpleDialog).not.toHaveBeenCalled();
});
+
+ it("should close dialog when redirecting to subscription page", async () => {
+ await service.promptForPremium();
+
+ expect(dialogRefMock.close).toHaveBeenCalledWith(VaultItemDialogResult.PremiumUpgrade);
+ expect(routerMock.navigate).toHaveBeenCalledWith(["settings/subscription/premium"]);
+ });
});
describe("when not self-hosted", () => {
diff --git a/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.ts b/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.ts
index c456cf6cc13..917a2761e24 100644
--- a/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.ts
+++ b/apps/web/src/app/vault/services/web-premium-upgrade-prompt.service.ts
@@ -107,6 +107,9 @@ export class WebVaultPremiumUpgradePromptService implements PremiumUpgradePrompt
private async redirectToSubscriptionPage() {
await this.router.navigate([this.subscriptionPageRoute]);
+ if (this.dialog) {
+ this.dialog.close(VaultItemDialogResult.PremiumUpgrade);
+ }
}
private async openUpgradeDialog(account: Account) {
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 186bf29c441..49e29f00748 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -373,6 +373,21 @@
"noNewApplicationsToReviewAtThisTime": {
"message": "No new applications to review at this time"
},
+ "organizationHasItemsSavedForApplications": {
+ "message": "Your organization has items saved for $COUNT$ applications",
+ "placeholders": {
+ "count": {
+ "content": "$1",
+ "example": "310"
+ }
+ }
+ },
+ "reviewApplicationsToSecureItems": {
+ "message": "Review applications to secure the items most critical to your organization's security"
+ },
+ "reviewApplications": {
+ "message": "Review applications"
+ },
"prioritizeCriticalApplications": {
"message": "Prioritize critical applications"
},
@@ -12095,7 +12110,7 @@
"encryptionKeySettingsAlgorithmPopoverArgon2Id": {
"message": "Argon2id offers stronger protection against modern attacks. Best for advanced users with powerful devices."
},
- "zipPostalCodeLabel": {
+ "zipPostalCodeLabel": {
"message": "ZIP / Postal code"
},
"cardNumberLabel": {
@@ -12103,5 +12118,39 @@
},
"startFreeFamiliesTrial": {
"message": "Start free Families trial"
+ },
+ "unlockMethodNeededToChangeTimeoutActionDesc": {
+ "message": "Set up an unlock method to change your vault timeout action."
+ },
+ "vaultTimeoutPolicyAffectingOptions": {
+ "message": "Enterprise policy requirements have been applied to your timeout options"
+ },
+ "vaultTimeoutTooLarge": {
+ "message": "Your vault timeout exceeds the restrictions set by your organization."
+ },
+ "neverLockWarning": {
+ "message": "Are you sure you want to use the \"Never\" option? Setting your lock options to \"Never\" stores your vault's encryption key on your device. If you use this option you should ensure that you keep your device properly protected."
+ },
+ "sessionTimeoutSettingsAction": {
+ "message": "Timeout action"
+ },
+ "sessionTimeoutHeader": {
+ "message": "Session timeout"
+ },
+ "appearance": {
+ "message": "Appearance"
+ },
+ "vaultTimeoutPolicyMaximumError": {
+ "message": "Timeout exceeds the restriction set by your organization: $HOURS$ hour(s) and $MINUTES$ minute(s) maximum",
+ "placeholders": {
+ "hours": {
+ "content": "$1",
+ "example": "5"
+ },
+ "minutes": {
+ "content": "$2",
+ "example": "5"
+ }
+ }
}
}
diff --git a/bitwarden_license/bit-common/src/dirt/reports/risk-insights/models/drawer-models.types.ts b/bitwarden_license/bit-common/src/dirt/reports/risk-insights/models/drawer-models.types.ts
index dffb22af3ee..fc500f6fd1f 100644
--- a/bitwarden_license/bit-common/src/dirt/reports/risk-insights/models/drawer-models.types.ts
+++ b/bitwarden_license/bit-common/src/dirt/reports/risk-insights/models/drawer-models.types.ts
@@ -1,14 +1,15 @@
import { MemberDetails } from "./report-models";
// -------------------- Drawer and UI Models --------------------
-// FIXME: update to use a const object instead of a typescript enum
-// eslint-disable-next-line @bitwarden/platform/no-enums
-export enum DrawerType {
- None = 0,
- AppAtRiskMembers = 1,
- OrgAtRiskMembers = 2,
- OrgAtRiskApps = 3,
-}
+
+export const DrawerType = {
+ None: 0,
+ AppAtRiskMembers: 1,
+ OrgAtRiskMembers: 2,
+ OrgAtRiskApps: 3,
+} as const;
+
+export type DrawerType = (typeof DrawerType)[keyof typeof DrawerType];
export type DrawerDetails = {
open: boolean;
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.html
index d8ad785ff14..43cf936e1a1 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.html
@@ -44,26 +44,53 @@
-
-
-
-
+
+ @if (isAllCaughtUp) {
+
+
+
+
+ }
+
+ @else if (showNeedsReviewState) {
+
+
+
+
+ }
+
+ @else {
+
+
+
+
+ }
}
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.ts
index 06073d93c85..907e8883a43 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/all-activity.component.ts
@@ -39,12 +39,14 @@ export class AllActivityComponent implements OnInit {
totalCriticalAppsAtRiskMemberCount = 0;
totalCriticalAppsCount = 0;
totalCriticalAppsAtRiskCount = 0;
+ totalApplicationCount = 0;
newApplicationsCount = 0;
newApplications: ApplicationHealthReportDetail[] = [];
extendPasswordChangeWidget = false;
allAppsHaveReviewDate = false;
isAllCaughtUp = false;
hasLoadedApplicationData = false;
+ showNeedsReviewState = false;
destroyRef = inject(DestroyRef);
@@ -65,6 +67,12 @@ export class AllActivityComponent implements OnInit {
this.totalCriticalAppsAtRiskMemberCount = summary.totalCriticalAtRiskMemberCount;
this.totalCriticalAppsCount = summary.totalCriticalApplicationCount;
this.totalCriticalAppsAtRiskCount = summary.totalCriticalAtRiskApplicationCount;
+ this.totalApplicationCount = summary.totalApplicationCount;
+ // If we have application data, mark as loaded
+ if (summary.totalApplicationCount > 0) {
+ this.hasLoadedApplicationData = true;
+ }
+ this.updateShowNeedsReviewState();
});
this.dataService.newApplications$
@@ -73,6 +81,7 @@ export class AllActivityComponent implements OnInit {
this.newApplications = newApps;
this.newApplicationsCount = newApps.length;
this.updateIsAllCaughtUp();
+ this.updateShowNeedsReviewState();
});
this.allActivitiesService.extendPasswordChangeWidget$
@@ -112,6 +121,20 @@ export class AllActivityComponent implements OnInit {
this.allAppsHaveReviewDate;
}
+ /**
+ * Updates the showNeedsReviewState flag based on current state.
+ * This state is shown when:
+ * - Data has been loaded
+ * - There are applications (totalApplicationCount > 0)
+ * - ALL apps do NOT have a review date (newApplicationsCount === totalApplicationCount)
+ */
+ private updateShowNeedsReviewState(): void {
+ this.showNeedsReviewState =
+ this.hasLoadedApplicationData &&
+ this.totalApplicationCount > 0 &&
+ this.newApplicationsCount === this.totalApplicationCount;
+ }
+
/**
* Handles the review new applications button click.
* Opens a dialog showing the list of new applications that can be marked as critical.
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html
index 4b7d51af174..9dbfe582ac9 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html
@@ -109,112 +109,4 @@
}
}
-
- @if (dataService.drawerDetails$ | async; as drawerDetails) {
-
-
-
-
-
- {{
- (drawerDetails.atRiskMemberDetails.length > 0
- ? "atRiskMembersDescription"
- : "atRiskMembersDescriptionNone"
- ) | i18n
- }}
-
-
-
-
- {{ "email" | i18n }}
-
-
- {{ "atRiskPasswords" | i18n }}
-
-
-
{{ member.email }}
-
{{ member.atRiskPasswordCount }}
-
- {{ "atRiskMembersWithCount" | i18n: drawerDetails.appAtRiskMembers.members.length }}
-
-
- {{
- (drawerDetails.appAtRiskMembers.members.length > 0
- ? "atRiskMembersDescriptionWithApp"
- : "atRiskMembersDescriptionWithAppNone"
- ) | i18n: drawerDetails.appAtRiskMembers.applicationName
- }}
-
-
-
- {{ member.email }}
-
-
-
- {{ "application" | i18n }}
-
-
- {{ "atRiskPasswords" | i18n }}
-
-
-
{{ app.applicationName }}
-
{{ app.atRiskPasswordCount }}
-
- }
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.ts
index 5a5efa8225d..eddc26cbc77 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.ts
@@ -1,10 +1,17 @@
import { animate, style, transition, trigger } from "@angular/animations";
import { CommonModule } from "@angular/common";
-import { Component, DestroyRef, OnDestroy, OnInit, inject } from "@angular/core";
+import {
+ Component,
+ DestroyRef,
+ OnDestroy,
+ OnInit,
+ inject,
+ ChangeDetectionStrategy,
+} from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute, Router } from "@angular/router";
import { combineLatest, EMPTY, firstValueFrom } from "rxjs";
-import { map, tap } from "rxjs/operators";
+import { distinctUntilChanged, map, tap } from "rxjs/operators";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
@@ -21,9 +28,8 @@ import { OrganizationId } from "@bitwarden/common/types/guid";
import {
AsyncActionsModule,
ButtonModule,
- DrawerBodyComponent,
- DrawerComponent,
- DrawerHeaderComponent,
+ DialogRef,
+ DialogService,
TabsModule,
} from "@bitwarden/components";
import { ExportHelper } from "@bitwarden/vault-export-core";
@@ -36,11 +42,11 @@ import { CriticalApplicationsComponent } from "./critical-applications/critical-
import { EmptyStateCardComponent } from "./empty-state-card.component";
import { RiskInsightsTabType } from "./models/risk-insights.models";
import { PageLoadingComponent } from "./shared/page-loading.component";
+import { RiskInsightsDrawerDialogComponent } from "./shared/risk-insights-drawer-dialog.component";
import { ApplicationsLoadingComponent } from "./shared/risk-insights-loading.component";
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
+ changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: "./risk-insights.component.html",
imports: [
AllApplicationsComponent,
@@ -52,9 +58,6 @@ import { ApplicationsLoadingComponent } from "./shared/risk-insights-loading.com
JslibModule,
HeaderModule,
TabsModule,
- DrawerComponent,
- DrawerBodyComponent,
- DrawerHeaderComponent,
AllActivityComponent,
ApplicationsLoadingComponent,
PageLoadingComponent,
@@ -70,7 +73,6 @@ import { ApplicationsLoadingComponent } from "./shared/risk-insights-loading.com
})
export class RiskInsightsComponent implements OnInit, OnDestroy {
private destroyRef = inject(DestroyRef);
- private _isDrawerOpen: boolean = false;
protected ReportStatusEnum = ReportStatus;
tabIndex: RiskInsightsTabType = RiskInsightsTabType.AllApps;
@@ -94,6 +96,7 @@ export class RiskInsightsComponent implements OnInit, OnDestroy {
protected emptyStateVideoSrc: string | null = "/videos/risk-insights-mark-as-critical.mp4";
protected IMPORT_ICON = "bwi bwi-download";
+ protected currentDialogRef: DialogRef
| null = null;
// TODO: See https://github.com/bitwarden/clients/pull/16832#discussion_r2474523235
@@ -103,6 +106,7 @@ export class RiskInsightsComponent implements OnInit, OnDestroy {
private configService: ConfigService,
protected dataService: RiskInsightsDataService,
protected i18nService: I18nService,
+ protected dialogService: DialogService,
private fileDownloadService: FileDownloadService,
private logService: LogService,
) {
@@ -151,14 +155,32 @@ export class RiskInsightsComponent implements OnInit, OnDestroy {
// Subscribe to drawer state changes
this.dataService.drawerDetails$
- .pipe(takeUntilDestroyed(this.destroyRef))
+ .pipe(
+ distinctUntilChanged(
+ (prev, curr) =>
+ prev.activeDrawerType === curr.activeDrawerType && prev.invokerId === curr.invokerId,
+ ),
+ takeUntilDestroyed(this.destroyRef),
+ )
.subscribe((details) => {
- this._isDrawerOpen = details.open;
+ if (details.activeDrawerType !== DrawerType.None) {
+ this.currentDialogRef = this.dialogService.openDrawer(RiskInsightsDrawerDialogComponent, {
+ data: details,
+ });
+ } else {
+ this.currentDialogRef?.close();
+ }
});
+
+ // if any dialogs are open close it
+ // this happens when navigating between orgs
+ // or just navigating away from the page and back
+ this.currentDialogRef?.close();
}
ngOnDestroy(): void {
this.dataService.destroy();
+ this.currentDialogRef?.close();
}
/**
@@ -179,35 +201,7 @@ export class RiskInsightsComponent implements OnInit, OnDestroy {
});
// close drawer when tabs are changed
- this.dataService.closeDrawer();
- }
-
- // Get a list of drawer types
- get drawerTypes(): typeof DrawerType {
- return DrawerType;
- }
-
- /**
- * Special case getter for syncing drawer state from service to component.
- * This allows the template to use two-way binding while staying reactive.
- */
- get isDrawerOpen() {
- return this._isDrawerOpen;
- }
-
- /**
- * Special case setter for syncing drawer state from component to service.
- * When the drawer component closes the drawer, this syncs the state back to the service.
- */
- set isDrawerOpen(value: boolean) {
- if (this._isDrawerOpen !== value) {
- this._isDrawerOpen = value;
-
- // Close the drawer in the service if the drawer component closed the drawer
- if (!value) {
- this.dataService.closeDrawer();
- }
- }
+ this.currentDialogRef?.close();
}
// Empty state methods
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.html
new file mode 100644
index 00000000000..d4ab4c5e98f
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.html
@@ -0,0 +1,98 @@
+@if (isActiveDrawerType(drawerTypes.OrgAtRiskMembers)) {
+
+
+ {{
+ "atRiskMembersWithCount" | i18n: drawerDetails.atRiskMemberDetails?.length ?? 0
+ }}
+
+
+ {{
+ (drawerDetails.atRiskMemberDetails?.length > 0
+ ? "atRiskMembersDescription"
+ : "atRiskMembersDescriptionNone"
+ ) | i18n
+ }}
+
+ @if (drawerDetails.atRiskMemberDetails?.length > 0) {
+
+
+
+ {{ "email" | i18n }}
+
+
+ {{ "atRiskPasswords" | i18n }}
+
+
+
{{ member.email }}
+
{{ member.atRiskPasswordCount }}
+
+ {{ "atRiskMembersWithCount" | i18n: drawerDetails.appAtRiskMembers?.members.length }}
+
+
+ {{
+ (drawerDetails.appAtRiskMembers?.members.length > 0
+ ? "atRiskMembersDescriptionWithApp"
+ : "atRiskMembersDescriptionWithAppNone"
+ ) | i18n: drawerDetails.appAtRiskMembers?.applicationName
+ }}
+
+
+ @for (member of drawerDetails.appAtRiskMembers?.members; track $index) {
+
{{ member.email }}
+ }
+
+
+ {{ "application" | i18n }}
+
+
+ {{ "atRiskPasswords" | i18n }}
+
+
+
{{ app.applicationName }}
+
{{ app.atRiskPasswordCount }}
+
+
+
+
+
+ {{ "sessionTimeoutSettingsAction" | i18n }}
+
+ @for (action of availableTimeoutActions(); track action) {
+
+ }
+
+
+ @if (!canLock) {
+ {{ "unlockMethodNeededToChangeTimeoutActionDesc" | i18n }}
+ }
+
+
+ @if (hasVaultTimeoutPolicy$ | async) {
+
+ {{ "vaultTimeoutPolicyAffectingOptions" | i18n }}
+
+ }
+