From a613d9c26848bcaa41f4568da5493f8236fbc808 Mon Sep 17 00:00:00 2001
From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Date: Fri, 28 Jun 2024 17:41:17 +0200
Subject: [PATCH] [PM-8397] Make vault timeout input standalone (#9366)

* Move vault-timeout-input to @bitwarden/auth/angular

Move vault-timeout-input.component.ts to @bitwarden/auth/angular/vault-timeout-input
Expose via barrel file
Fix imports on clients

* Add dependencies to package.json

Not necessary right now, but good practice for once we move to building each package independently

* Make VaultTimeoutInputComponent a standalone component

* Update selector to present team ownership

* Use new standalone on web

Move vault-timeout-input.component.html to @bitwarden/auth/angular/vault-timeout-input/
Delete old vault-timeout-input.component on web
Register new component on loose-components-module
Update used selector in preferences.component

* Remove unneeded export of VaultTimeoutInputComponent

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
---
 .../settings/vault-timeout-input.component.ts |  2 +-
 .../accounts/vault-timeout-input.component.ts |  2 +-
 .../app/settings/preferences.component.html   |  4 +--
 .../settings/vault-timeout-input.component.ts | 22 ---------------
 .../src/app/shared/loose-components.module.ts |  5 ++--
 libs/auth/package.json                        |  5 ++++
 libs/auth/src/angular/index.ts                |  1 +
 .../vault-timeout-input.component.html        |  0
 .../vault-timeout-input.component.ts          | 27 +++++++++++++++++--
 9 files changed, 37 insertions(+), 31 deletions(-)
 delete mode 100644 apps/web/src/app/settings/vault-timeout-input.component.ts
 rename {apps/web/src/app/settings => libs/auth/src/angular/vault-timeout-input}/vault-timeout-input.component.html (100%)
 rename libs/{angular/src/components/settings => auth/src/angular/vault-timeout-input}/vault-timeout-input.component.ts (89%)

diff --git a/apps/browser/src/auth/popup/settings/vault-timeout-input.component.ts b/apps/browser/src/auth/popup/settings/vault-timeout-input.component.ts
index 75c3c9e9e0e..c56e6578a0b 100644
--- a/apps/browser/src/auth/popup/settings/vault-timeout-input.component.ts
+++ b/apps/browser/src/auth/popup/settings/vault-timeout-input.component.ts
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
 
-import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/angular/components/settings/vault-timeout-input.component";
+import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/auth/angular";
 
 @Component({
   selector: "app-vault-timeout-input",
diff --git a/apps/desktop/src/app/accounts/vault-timeout-input.component.ts b/apps/desktop/src/app/accounts/vault-timeout-input.component.ts
index 75c3c9e9e0e..c56e6578a0b 100644
--- a/apps/desktop/src/app/accounts/vault-timeout-input.component.ts
+++ b/apps/desktop/src/app/accounts/vault-timeout-input.component.ts
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
 
-import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/angular/components/settings/vault-timeout-input.component";
+import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/auth/angular";
 
 @Component({
   selector: "app-vault-timeout-input",
diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html
index 0fe96a69ed3..876c5d3bdea 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) }}
       </span>
     </bit-callout>
-    <app-vault-timeout-input
+    <auth-vault-timeout-input
       [vaultTimeoutOptions]="vaultTimeoutOptions"
       [formControl]="form.controls.vaultTimeout"
       ngDefaultControl
     >
-    </app-vault-timeout-input>
+    </auth-vault-timeout-input>
     <ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
       <bit-radio-group
         formControlName="vaultTimeoutAction"
diff --git a/apps/web/src/app/settings/vault-timeout-input.component.ts b/apps/web/src/app/settings/vault-timeout-input.component.ts
deleted file mode 100644
index 75c3c9e9e0e..00000000000
--- a/apps/web/src/app/settings/vault-timeout-input.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from "@angular/core";
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
-
-import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/angular/components/settings/vault-timeout-input.component";
-
-@Component({
-  selector: "app-vault-timeout-input",
-  templateUrl: "vault-timeout-input.component.html",
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      multi: true,
-      useExisting: VaultTimeoutInputComponent,
-    },
-    {
-      provide: NG_VALIDATORS,
-      multi: true,
-      useExisting: VaultTimeoutInputComponent,
-    },
-  ],
-})
-export class VaultTimeoutInputComponent extends VaultTimeoutInputComponentBase {}
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index b8cfbd34013..107cdd040e4 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import {
   PasswordCalloutComponent,
   UserVerificationFormInputComponent,
+  VaultTimeoutInputComponent,
 } from "@bitwarden/auth/angular";
 import { LayoutComponent, NavigationModule } from "@bitwarden/components";
 
@@ -70,7 +71,6 @@ import { ProductSwitcherModule } from "../layouts/product-switcher/product-switc
 import { UserLayoutComponent } from "../layouts/user-layout.component";
 import { DomainRulesComponent } from "../settings/domain-rules.component";
 import { PreferencesComponent } from "../settings/preferences.component";
-import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component";
 import { GeneratorComponent } from "../tools/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component";
 import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component";
@@ -116,6 +116,7 @@ import { SharedModule } from "./shared.module";
     UserLayoutComponent,
     PaymentMethodWarningsModule,
     VerifyRecoverDeleteOrgComponent,
+    VaultTimeoutInputComponent,
   ],
   declarations: [
     AcceptFamilySponsorshipComponent,
@@ -183,7 +184,6 @@ import { SharedModule } from "./shared.module";
     TwoFactorYubiKeyComponent,
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
-    VaultTimeoutInputComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
     VerifyRecoverDeleteProviderComponent,
@@ -258,7 +258,6 @@ import { SharedModule } from "./shared.module";
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
     UserLayoutComponent,
-    VaultTimeoutInputComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
     VerifyRecoverDeleteProviderComponent,
diff --git a/libs/auth/package.json b/libs/auth/package.json
index 52c1be63f81..3a915d727b1 100644
--- a/libs/auth/package.json
+++ b/libs/auth/package.json
@@ -16,5 +16,10 @@
     "clean": "rimraf dist",
     "build": "npm run clean && tsc",
     "build:watch": "npm run clean && tsc -watch"
+  },
+  "dependencies": {
+    "@bitwarden/angular": "file:../angular",
+    "@bitwarden/common": "file:../common",
+    "@bitwarden/components": "file:../components"
   }
 }
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index 6cb08db6f72..cf7f7e2d49a 100644
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -10,6 +10,7 @@ export * from "./anon-layout/anon-layout-wrapper.component";
 export * from "./fingerprint-dialog/fingerprint-dialog.component";
 export * from "./input-password/input-password.component";
 export * from "./password-callout/password-callout.component";
+export * from "./vault-timeout-input/vault-timeout-input.component";
 
 // user verification
 export * from "./user-verification/user-verification-dialog.component";
diff --git a/apps/web/src/app/settings/vault-timeout-input.component.html b/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.html
similarity index 100%
rename from apps/web/src/app/settings/vault-timeout-input.component.html
rename to libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.html
diff --git a/libs/angular/src/components/settings/vault-timeout-input.component.ts b/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts
similarity index 89%
rename from libs/angular/src/components/settings/vault-timeout-input.component.ts
rename to libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts
index f5afd181f2f..f1cfcec8c3e 100644
--- a/libs/angular/src/components/settings/vault-timeout-input.component.ts
+++ b/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts
@@ -1,13 +1,18 @@
-import { Directive, Input, OnChanges, OnDestroy, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnChanges, OnDestroy, OnInit } from "@angular/core";
 import {
   AbstractControl,
   ControlValueAccessor,
   FormBuilder,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
   ValidationErrors,
   Validator,
 } from "@angular/forms";
 import { filter, map, Observable, Subject, takeUntil } from "rxjs";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -15,6 +20,7 @@ import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { VaultTimeout, VaultTimeoutOption } from "@bitwarden/common/types/vault-timeout.type";
+import { FormFieldModule, SelectModule } from "@bitwarden/components";
 
 interface VaultTimeoutFormValue {
   vaultTimeout: VaultTimeout | null;
@@ -24,7 +30,24 @@ interface VaultTimeoutFormValue {
   };
 }
 
-@Directive()
+@Component({
+  selector: "auth-vault-timeout-input",
+  templateUrl: "vault-timeout-input.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, SelectModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: VaultTimeoutInputComponent,
+    },
+    {
+      provide: NG_VALIDATORS,
+      multi: true,
+      useExisting: VaultTimeoutInputComponent,
+    },
+  ],
+})
 export class VaultTimeoutInputComponent
   implements ControlValueAccessor, Validator, OnInit, OnDestroy, OnChanges
 {