diff --git a/apps/desktop/src/app/accounts/settings.component.spec.ts b/apps/desktop/src/app/accounts/settings.component.spec.ts
index cafc413862..115f743697 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 abebdfa5fc..3db6c08a6c 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 be91c30987..03d6eb5c90 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 0000000000..91c8126cdd
--- /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 da8d9ea0e3..981066d961 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 ba476dc910..dbcfc7cb18 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 355a33d442..6942713443 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 ff13515eec..629de32efc 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/core/core.module.ts b/apps/web/src/app/core/core.module.ts
index bf741132b0..c0716d9971 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 0000000000..61836c9825
--- /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 0000000000..0ca6267da5
--- /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 0000000000..566484ddce
--- /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 23f22d263c..9f47406212 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 4db6e50bc6..b40b914399 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 0000000000..840895eea4
--- /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 0000000000..53ae9f81a8
--- /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 0000000000..d1bcf2c28f
--- /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 40f2f596a1..4af7e51b80 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 }}
;
abstract locale$: Observable;
- abstract setLocale(locale: string): Promise;
+ abstract setLocale(locale: string | null): Promise;
abstract init(): Promise;
}
diff --git a/libs/common/src/platform/services/i18n.service.ts b/libs/common/src/platform/services/i18n.service.ts
index 87c9e211ed..e9396b907f 100644
--- a/libs/common/src/platform/services/i18n.service.ts
+++ b/libs/common/src/platform/services/i18n.service.ts
@@ -29,7 +29,7 @@ export class I18nService extends TranslationService implements I18nServiceAbstra
this.locale$ = this.userSetLocale$.pipe(map((locale) => locale ?? this.translationLocale));
}
- async setLocale(locale: string): Promise {
+ async setLocale(locale: string | null): Promise {
await this.translationLocaleState.update(() => locale);
}
diff --git a/libs/key-management-ui/src/index.ts b/libs/key-management-ui/src/index.ts
index 6754722440..fee3b3250e 100644
--- a/libs/key-management-ui/src/index.ts
+++ b/libs/key-management-ui/src/index.ts
@@ -9,3 +9,5 @@ export { AccountRecoveryTrustComponent } from "./trust/account-recovery-trust.co
export { EmergencyAccessTrustComponent } from "./trust/emergency-access-trust.component";
export { RemovePasswordComponent } from "./key-connector/remove-password.component";
export { ConfirmKeyConnectorDomainComponent } from "./key-connector/confirm-key-connector-domain.component";
+export { SessionTimeoutSettingsComponent } from "./session-timeout/components/session-timeout-settings.component";
+export { SessionTimeoutSettingsComponentService } from "./session-timeout/services/session-timeout-settings-component.service";
diff --git a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html
new file mode 100644
index 0000000000..467a51ee1b
--- /dev/null
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ {{ "sessionTimeoutSettingsAction" | i18n }}
+
+ @for (action of availableTimeoutActions(); track action) {
+
+ }
+
+
+ @if (!canLock) {
+ {{ "unlockMethodNeededToChangeTimeoutActionDesc" | i18n }}
+ }
+
+
+ @if (hasVaultTimeoutPolicy$ | async) {
+
+ {{ "vaultTimeoutPolicyAffectingOptions" | i18n }}
+
+ }
+