diff --git a/apps/browser/src/auth/popup/settings/account-security.component.html b/apps/browser/src/auth/popup/settings/account-security.component.html index 2babd2a7ef6..37efcee9012 100644 --- a/apps/browser/src/auth/popup/settings/account-security.component.html +++ b/apps/browser/src/auth/popup/settings/account-security.component.html @@ -86,12 +86,12 @@ - - + {{ "vaultTimeoutAction1" | i18n }} diff --git a/apps/browser/src/auth/popup/settings/account-security.component.ts b/apps/browser/src/auth/popup/settings/account-security.component.ts index c5423a5f1d1..e6e7be96c08 100644 --- a/apps/browser/src/auth/popup/settings/account-security.component.ts +++ b/apps/browser/src/auth/popup/settings/account-security.component.ts @@ -24,7 +24,7 @@ import { import { JslibModule } from "@bitwarden/angular/jslib.module"; import { NudgesService, NudgeType } from "@bitwarden/angular/vault"; import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component"; -import { FingerprintDialogComponent, VaultTimeoutInputComponent } from "@bitwarden/auth/angular"; +import { FingerprintDialogComponent } from "@bitwarden/auth/angular"; import { LockService } from "@bitwarden/auth/common"; import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction"; import { PolicyType } from "@bitwarden/common/admin-console/enums"; @@ -69,7 +69,10 @@ import { BiometricStateService, BiometricsStatus, } from "@bitwarden/key-management"; -import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui"; +import { + SessionTimeoutInputComponent, + SessionTimeoutSettingsComponent, +} from "@bitwarden/key-management-ui"; import { BiometricErrors, BiometricErrorTypes } from "../../../models/biometricErrors"; import { BrowserApi } from "../../../platform/browser/browser-api"; @@ -106,7 +109,7 @@ import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component"; SessionTimeoutSettingsComponent, SpotlightComponent, TypographyModule, - VaultTimeoutInputComponent, + SessionTimeoutInputComponent, ], }) export class AccountSecurityComponent implements OnInit, OnDestroy { diff --git a/apps/desktop/src/app/accounts/settings.component.html b/apps/desktop/src/app/accounts/settings.component.html index 79e21480a76..bf3c46a311f 100644 --- a/apps/desktop/src/app/accounts/settings.component.html +++ b/apps/desktop/src/app/accounts/settings.component.html @@ -44,12 +44,12 @@

{{ "vaultTimeoutHeader" | i18n }}

- - + {{ diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts index ebab653fc85..c0798f1bdf0 100644 --- a/apps/desktop/src/app/accounts/settings.component.ts +++ b/apps/desktop/src/app/accounts/settings.component.ts @@ -9,7 +9,6 @@ import { concatMap, map, pairwise, startWith, switchMap, takeUntil, timeout } fr import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge"; import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular"; import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction"; import { PolicyType } from "@bitwarden/common/admin-console/enums"; import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service"; @@ -55,7 +54,10 @@ import { TypographyModule, } from "@bitwarden/components"; import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/key-management"; -import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui"; +import { + SessionTimeoutInputComponent, + SessionTimeoutSettingsComponent, +} from "@bitwarden/key-management-ui"; import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault"; import { SetPinComponent } from "../../auth/components/set-pin.component"; @@ -95,7 +97,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man SectionHeaderComponent, SelectModule, TypographyModule, - VaultTimeoutInputComponent, + SessionTimeoutInputComponent, SessionTimeoutSettingsComponent, PermitCipherDetailsPopoverComponent, PremiumBadgeComponent, diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html index 4af7e51b800..a2e90dd5889 100644 --- a/apps/web/src/app/settings/preferences.component.html +++ b/apps/web/src/app/settings/preferences.component.html @@ -17,12 +17,12 @@ {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }} - - + { - let component: VaultTimeoutInputComponent; - let fixture: ComponentFixture; +describe("SessionTimeoutInputComponent", () => { + let component: SessionTimeoutInputComponent; + let fixture: ComponentFixture; const policiesByType$ = jest.fn().mockReturnValue(new BehaviorSubject({})); const availableVaultTimeoutActions$ = jest.fn().mockReturnValue(new BehaviorSubject([])); const mockUserId = Utils.newGuid() as UserId; @@ -24,7 +24,7 @@ describe("VaultTimeoutInputComponent", () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [VaultTimeoutInputComponent], + imports: [SessionTimeoutInputComponent], providers: [ { provide: PolicyService, useValue: { policiesByType$ } }, { provide: AccountService, useValue: accountService }, @@ -33,7 +33,7 @@ describe("VaultTimeoutInputComponent", () => { ], }).compileComponents(); - fixture = TestBed.createComponent(VaultTimeoutInputComponent); + fixture = TestBed.createComponent(SessionTimeoutInputComponent); component = fixture.componentInstance; component.vaultTimeoutOptions = [ { name: "oneMinute", value: 1 }, diff --git a/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts similarity index 88% rename from libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts rename to libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts index 2335de34c21..e9a5722ff4e 100644 --- a/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts +++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts @@ -30,8 +30,6 @@ import { VaultTimeoutSettingsService, } from "@bitwarden/common/key-management/vault-timeout"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop. -// eslint-disable-next-line no-restricted-imports import { FormFieldModule, SelectModule } from "@bitwarden/components"; type VaultTimeoutForm = FormGroup<{ @@ -47,34 +45,66 @@ type VaultTimeoutFormValue = VaultTimeoutForm["value"]; // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection @Component({ - selector: "auth-vault-timeout-input", - templateUrl: "vault-timeout-input.component.html", + selector: "bit-session-timeout-input", + templateUrl: "session-timeout-input.component.html", imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, SelectModule], providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, - useExisting: VaultTimeoutInputComponent, + useExisting: SessionTimeoutInputComponent, }, { provide: NG_VALIDATORS, multi: true, - useExisting: VaultTimeoutInputComponent, + useExisting: SessionTimeoutInputComponent, }, ], }) -export class VaultTimeoutInputComponent +export class SessionTimeoutInputComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy, OnChanges { + static CUSTOM_VALUE = -100; + static MIN_CUSTOM_MINUTES = 0; + form: VaultTimeoutForm = this.formBuilder.group({ + vaultTimeout: [null], + custom: this.formBuilder.group({ + hours: [null], + minutes: [null], + }), + }); + + // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals + // eslint-disable-next-line @angular-eslint/prefer-signals + @Input() vaultTimeoutOptions: VaultTimeoutOption[]; + + vaultTimeoutPolicy: Policy; + vaultTimeoutPolicyHours: number; + vaultTimeoutPolicyMinutes: number; + protected readonly VaultTimeoutAction = VaultTimeoutAction; + protected canLockVault$: Observable; + private onChange: (vaultTimeout: VaultTimeout) => void; + private validatorChange: () => void; + private destroy$ = new Subject(); + + constructor( + private formBuilder: FormBuilder, + private policyService: PolicyService, + private vaultTimeoutSettingsService: VaultTimeoutSettingsService, + private i18nService: I18nService, + private accountService: AccountService, + ) {} + get showCustom() { - return this.form.get("vaultTimeout").value === VaultTimeoutInputComponent.CUSTOM_VALUE; + return this.form.get("vaultTimeout").value === SessionTimeoutInputComponent.CUSTOM_VALUE; } get exceedsMinimumTimeout(): boolean { return ( - !this.showCustom || this.customTimeInMinutes() > VaultTimeoutInputComponent.MIN_CUSTOM_MINUTES + !this.showCustom || + this.customTimeInMinutes() > SessionTimeoutInputComponent.MIN_CUSTOM_MINUTES ); } @@ -101,39 +131,6 @@ export class VaultTimeoutInputComponent }); } - static CUSTOM_VALUE = -100; - static MIN_CUSTOM_MINUTES = 0; - - form: VaultTimeoutForm = this.formBuilder.group({ - vaultTimeout: [null], - custom: this.formBuilder.group({ - hours: [null], - minutes: [null], - }), - }); - - // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals - // eslint-disable-next-line @angular-eslint/prefer-signals - @Input() vaultTimeoutOptions: VaultTimeoutOption[]; - - vaultTimeoutPolicy: Policy; - vaultTimeoutPolicyHours: number; - vaultTimeoutPolicyMinutes: number; - - protected canLockVault$: Observable; - - private onChange: (vaultTimeout: VaultTimeout) => void; - private validatorChange: () => void; - private destroy$ = new Subject(); - - constructor( - private formBuilder: FormBuilder, - private policyService: PolicyService, - private vaultTimeoutSettingsService: VaultTimeoutSettingsService, - private i18nService: I18nService, - private accountService: AccountService, - ) {} - async ngOnInit() { this.accountService.activeAccount$ .pipe( @@ -163,7 +160,7 @@ export class VaultTimeoutInputComponent // ex: user picks 5 min, goes to custom, we want to show 0 hr, 5 min in the custom fields this.form.controls.vaultTimeout.valueChanges .pipe( - filter((value) => value !== VaultTimeoutInputComponent.CUSTOM_VALUE), + filter((value) => value !== SessionTimeoutInputComponent.CUSTOM_VALUE), takeUntil(this.destroy$), ) .subscribe((value) => { @@ -195,17 +192,17 @@ export class VaultTimeoutInputComponent ngOnChanges() { if ( - !this.vaultTimeoutOptions.find((p) => p.value === VaultTimeoutInputComponent.CUSTOM_VALUE) + !this.vaultTimeoutOptions.find((p) => p.value === SessionTimeoutInputComponent.CUSTOM_VALUE) ) { this.vaultTimeoutOptions.push({ name: this.i18nService.t("custom"), - value: VaultTimeoutInputComponent.CUSTOM_VALUE, + value: SessionTimeoutInputComponent.CUSTOM_VALUE, }); } } getVaultTimeout(value: VaultTimeoutFormValue) { - if (value.vaultTimeout !== VaultTimeoutInputComponent.CUSTOM_VALUE) { + if (value.vaultTimeout !== SessionTimeoutInputComponent.CUSTOM_VALUE) { return value.vaultTimeout; } @@ -219,7 +216,7 @@ export class VaultTimeoutInputComponent if (this.vaultTimeoutOptions.every((p) => p.value !== value)) { this.form.setValue({ - vaultTimeout: VaultTimeoutInputComponent.CUSTOM_VALUE, + vaultTimeout: SessionTimeoutInputComponent.CUSTOM_VALUE, custom: { hours: Math.floor(value / 60), minutes: value % 60, @@ -271,7 +268,7 @@ export class VaultTimeoutInputComponent this.vaultTimeoutOptions = this.vaultTimeoutOptions.filter((vaultTimeoutOption) => { // Always include the custom option - if (vaultTimeoutOption.value === VaultTimeoutInputComponent.CUSTOM_VALUE) { + if (vaultTimeoutOption.value === SessionTimeoutInputComponent.CUSTOM_VALUE) { return true; } 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 index 467a51ee1b0..4d607ce5d7b 100644 --- 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 @@ -1,10 +1,10 @@
- - + {{ "sessionTimeoutSettingsAction" | i18n }} diff --git a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts index 379a2c982c8..4c3f41d738c 100644 --- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts +++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts @@ -4,7 +4,6 @@ import { NoopAnimationsModule } from "@angular/platform-browser/animations"; import { mock, MockProxy } from "jest-mock-extended"; import { BehaviorSubject, filter, firstValueFrom, of } from "rxjs"; -import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular"; import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction"; import { Policy } from "@bitwarden/common/admin-console/models/domain/policy"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; @@ -22,6 +21,7 @@ import { UserId } from "@bitwarden/common/types/guid"; import { DialogService, ToastService } from "@bitwarden/components"; import { LogService } from "@bitwarden/logging"; +import { SessionTimeoutInputComponent } from "../components/session-timeout-input.component"; import { SessionTimeoutSettingsComponentService } from "../services/session-timeout-settings-component.service"; import { SessionTimeoutSettingsComponent } from "./session-timeout-settings.component"; @@ -87,7 +87,7 @@ describe("SessionTimeoutSettingsComponent", () => { imports: [ SessionTimeoutSettingsComponent, ReactiveFormsModule, - VaultTimeoutInputComponent, + SessionTimeoutInputComponent, NoopAnimationsModule, ], providers: [ diff --git a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts index 7124e3f14c5..ecdd0ee89ad 100644 --- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts +++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts @@ -25,7 +25,6 @@ import { } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular"; import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction"; import { PolicyType } from "@bitwarden/common/admin-console/enums"; import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service"; @@ -56,6 +55,8 @@ import { LogService } from "@bitwarden/logging"; import { SessionTimeoutSettingsComponentService } from "../services/session-timeout-settings-component.service"; +import { SessionTimeoutInputComponent } from "./session-timeout-input.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({ @@ -74,7 +75,7 @@ import { SessionTimeoutSettingsComponentService } from "../services/session-time RouterModule, SelectModule, TypographyModule, - VaultTimeoutInputComponent, + SessionTimeoutInputComponent, ], }) export class SessionTimeoutSettingsComponent implements OnInit {