moving ownership of Auth vault timeout input component to KM (#17180)

(cherry picked from commit 5e595dabf71cdb312ae9e1e3bcc3121b3aebf19f)

apps/browser/src/auth/popup/settings/account-security.component.html

@@ -86,12 +86,12 @@
         </bit-section-header>
 
         <bit-card>
-          <auth-vault-timeout-input
+          <bit-session-timeout-input
             [vaultTimeoutOptions]="vaultTimeoutOptions"
             [formControl]="form.controls.vaultTimeout"
             ngDefaultControl
           >
-          </auth-vault-timeout-input>
+          </bit-session-timeout-input>
 
           <bit-form-field disableMargin>
             <bit-label for="vaultTimeoutAction">{{ "vaultTimeoutAction1" | i18n }}</bit-label>

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 {

apps/desktop/src/app/accounts/settings.component.html

@@ -44,12 +44,12 @@
                     <h2 bitTypography="h6">{{ "vaultTimeoutHeader" | i18n }}</h2>
                   </bit-section-header>
 
-                  <auth-vault-timeout-input
+                  <bit-session-timeout-input
                     [vaultTimeoutOptions]="vaultTimeoutOptions"
                     [formControl]="form.controls.vaultTimeout"
                     ngDefaultControl
                   >
-                  </auth-vault-timeout-input>
+                  </bit-session-timeout-input>
 
                   <bit-form-field disableMargin>
                     <bit-label for="vaultTimeoutAction">{{

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,

apps/web/src/app/settings/preferences.component.html

@@ -17,12 +17,12 @@
         {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
       </span>
     </bit-callout>
-    <auth-vault-timeout-input
+    <bit-session-timeout-input
       [vaultTimeoutOptions]="vaultTimeoutOptions"
       [formControl]="form.controls.vaultTimeout"
       ngDefaultControl
     >
-    </auth-vault-timeout-input>
+    </bit-session-timeout-input>
     <ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
       <bit-radio-group
         formControlName="vaultTimeoutAction"

apps/web/src/app/settings/preferences.component.ts

@@ -14,7 +14,6 @@ import {
   tap,
 } from "rxjs";
 
-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";
@@ -34,6 +33,7 @@ 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 { DialogService } from "@bitwarden/components";
+import { SessionTimeoutInputComponent } from "@bitwarden/key-management-ui";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
 
 import { HeaderModule } from "../layouts/header/header.module";
@@ -52,7 +52,7 @@ import { SharedModule } from "../shared";
   imports: [
     SharedModule,
     HeaderModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
     PermitCipherDetailsPopoverComponent,
   ],
 })

libs/auth/src/angular/index.ts

@@ -43,9 +43,6 @@ export * from "./user-verification/user-verification-dialog.component";
 export * from "./user-verification/user-verification-dialog.types";
 export * from "./user-verification/user-verification-form-input.component";
 
-// vault timeout
-export * from "./vault-timeout-input/vault-timeout-input.component";
-
 // sso
 export * from "./sso/sso.component";
 export * from "./sso/sso-component.service";

libs/key-management-ui/src/index.ts

@@ -11,3 +11,4 @@ export { RemovePasswordComponent } from "./key-connector/remove-password.compone
 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";
+export { SessionTimeoutInputComponent } from "./session-timeout/components/session-timeout-input.component";

libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.spec.ts

@@ -12,11 +12,11 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
 
-import { VaultTimeoutInputComponent } from "./vault-timeout-input.component";
+import { SessionTimeoutInputComponent } from "./session-timeout-input.component";
 
-describe("VaultTimeoutInputComponent", () => {
+describe("SessionTimeoutInputComponent", () => {
-  let component: VaultTimeoutInputComponent;
+  let component: SessionTimeoutInputComponent;
-  let fixture: ComponentFixture<VaultTimeoutInputComponent>;
+  let fixture: ComponentFixture<SessionTimeoutInputComponent>;
   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 },

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",
+  selector: "bit-session-timeout-input",
-  templateUrl: "vault-timeout-input.component.html",
+  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<boolean>;
+  private onChange: (vaultTimeout: VaultTimeout) => void;
+  private validatorChange: () => void;
+  private destroy$ = new Subject<void>();
+
+  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<boolean>;
-
-  private onChange: (vaultTimeout: VaultTimeout) => void;
-  private validatorChange: () => void;
-  private destroy$ = new Subject<void>();
-
-  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;
       }
 

libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html

@@ -1,10 +1,10 @@
 <div [formGroup]="formGroup">
-  <auth-vault-timeout-input
+  <bit-session-timeout-input
     [vaultTimeoutOptions]="availableTimeoutOptions$ | async"
     [formControl]="formGroup.controls.timeout"
     ngDefaultControl
   >
-  </auth-vault-timeout-input>
+  </bit-session-timeout-input>
 
   <bit-form-field [disableMargin]="true">
     <bit-label>{{ "sessionTimeoutSettingsAction" | i18n }}</bit-label>

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: [

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 {