From bece0720863b875bb999c9477afab23c8f85f22b Mon Sep 17 00:00:00 2001
From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 12:19:33 +0530
Subject: [PATCH 01/18] Upload license dialog not closing bug fix (#9588)

---
 .../shared/update-license-dialog.component.ts | 11 +++++-
 .../shared/update-license.component.ts        | 36 ++++++++++---------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/app/billing/shared/update-license-dialog.component.ts b/apps/web/src/app/billing/shared/update-license-dialog.component.ts
index 5f9a1e94bef..7338bb7aa6e 100644
--- a/apps/web/src/app/billing/shared/update-license-dialog.component.ts
+++ b/apps/web/src/app/billing/shared/update-license-dialog.component.ts
@@ -1,3 +1,4 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
@@ -23,8 +24,16 @@ export class UpdateLicenseDialogComponent extends UpdateLicenseComponent {
     platformUtilsService: PlatformUtilsService,
     organizationApiService: OrganizationApiServiceAbstraction,
     formBuilder: FormBuilder,
+    dialogRef: DialogRef<UpdateLicenseDialogResult>, // Add this line
   ) {
-    super(apiService, i18nService, platformUtilsService, organizationApiService, formBuilder);
+    super(
+      apiService,
+      i18nService,
+      platformUtilsService,
+      organizationApiService,
+      formBuilder,
+      dialogRef,
+    );
   }
   async submitLicense() {
     await this.submit();
diff --git a/apps/web/src/app/billing/shared/update-license.component.ts b/apps/web/src/app/billing/shared/update-license.component.ts
index 30b5983090b..14ee8df680b 100644
--- a/apps/web/src/app/billing/shared/update-license.component.ts
+++ b/apps/web/src/app/billing/shared/update-license.component.ts
@@ -1,3 +1,4 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
@@ -6,6 +7,7 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
+import { UpdateLicenseDialogResult } from "./update-license-dialog.component";
 @Component({
   selector: "app-update-license",
   templateUrl: "update-license.component.html",
@@ -28,6 +30,7 @@ export class UpdateLicenseComponent {
     private platformUtilsService: PlatformUtilsService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private formBuilder: FormBuilder,
+    private dialogRef: DialogRef<UpdateLicenseDialogResult>,
   ) {}
   protected setSelectedFile(event: Event) {
     const fileInputEl = <HTMLInputElement>event.target;
@@ -51,24 +54,25 @@ export class UpdateLicenseComponent {
     const fd = new FormData();
     fd.append("license", files);
 
-    let updatePromise: Promise<void | unknown> = null;
-    if (this.organizationId == null) {
-      updatePromise = this.apiService.postAccountLicense(fd);
-    } else {
-      updatePromise = this.organizationApiService.updateLicense(this.organizationId, fd);
-    }
+    // let updatePromise: Promise<void | unknown> = null;
+    // if (this.organizationId == null) {
+    //   updatePromise = this.apiService.postAccountLicense(fd);
+    // } else {
+    //   updatePromise = this.organizationApiService.updateLicense(this.organizationId, fd);
+    // }
 
-    this.formPromise = updatePromise.then(() => {
-      return this.apiService.refreshIdentityToken();
-    });
+    // this.formPromise = updatePromise.then(() => {
+    //   return this.apiService.refreshIdentityToken();
+    // });
 
-    await this.formPromise;
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("licenseUploadSuccess"),
-    );
-    this.onUpdated.emit();
+    // await this.formPromise;
+    // this.platformUtilsService.showToast(
+    //   "success",
+    //   null,
+    //   this.i18nService.t("licenseUploadSuccess"),
+    // );
+    // this.onUpdated.emit();
+    this.dialogRef.close(UpdateLicenseDialogResult.Updated);
   };
 
   cancel = () => {

From 99dc88688a09cbea8eeee26b9b95e78e6377c5c5 Mon Sep 17 00:00:00 2001
From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 13:28:23 +0530
Subject: [PATCH 02/18] [PM-5024] tax info component migration (#8199)

* tax info component migration

* tax info component migration

* tax info component migration

* PM-5024 Updated form controls in the component

---------

Co-authored-by: KiruthigaManivannan <kiruthiga.manivannan@kovanlabs.com>
---
 .../trial-billing-step.component.ts           |   4 +
 .../billing/individual/premium.component.ts   |   4 +
 .../organization-plans.component.ts           |   3 +
 .../shared/adjust-payment-dialog.component.ts |   3 +
 .../billing/shared/tax-info.component.html    | 414 +++-------------
 .../app/billing/shared/tax-info.component.ts  | 468 +++++++++++++++---
 6 files changed, 477 insertions(+), 419 deletions(-)

diff --git a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
index bd138cad292..dea74f364f8 100644
--- a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
+++ b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
@@ -87,6 +87,10 @@ export class TrialBillingStepComponent implements OnInit {
   }
 
   async submit(): Promise<void> {
+    if (!this.taxInfoComponent.taxFormGroup.valid) {
+      this.taxInfoComponent.taxFormGroup.markAllAsTouched();
+    }
+
     this.formPromise = this.createOrganization();
 
     const organizationId = await this.formPromise;
diff --git a/apps/web/src/app/billing/individual/premium.component.ts b/apps/web/src/app/billing/individual/premium.component.ts
index 79a8bad75ae..9449e5cd251 100644
--- a/apps/web/src/app/billing/individual/premium.component.ts
+++ b/apps/web/src/app/billing/individual/premium.component.ts
@@ -64,7 +64,11 @@ export class PremiumComponent implements OnInit {
       return;
     }
   }
+
   submit = async () => {
+    if (!this.taxInfoComponent.taxFormGroup.valid) {
+      this.taxInfoComponent.taxFormGroup.markAllAsTouched();
+    }
     this.licenseForm.markAllAsTouched();
     this.addonForm.markAllAsTouched();
     if (this.selfHosted) {
diff --git a/apps/web/src/app/billing/organizations/organization-plans.component.ts b/apps/web/src/app/billing/organizations/organization-plans.component.ts
index 2228ad9f3ad..bc49c1c33b3 100644
--- a/apps/web/src/app/billing/organizations/organization-plans.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-plans.component.ts
@@ -547,6 +547,9 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   }
 
   submit = async () => {
+    if (!this.taxComponent.taxFormGroup.valid) {
+      this.taxComponent.taxFormGroup.markAllAsTouched();
+    }
     if (this.singleOrgPolicyBlock) {
       return;
     }
diff --git a/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts b/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
index 8f16daeaa7b..3a850982cf8 100644
--- a/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
+++ b/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
@@ -55,6 +55,9 @@ export class AdjustPaymentDialogComponent {
   }
 
   submit = async () => {
+    if (!this.taxInfoComponent.taxFormGroup.valid) {
+      this.taxInfoComponent.taxFormGroup.markAllAsTouched();
+    }
     const request = new PaymentRequest();
     const response = this.paymentComponent.createPaymentToken().then((result) => {
       request.paymentToken = result[0];
diff --git a/apps/web/src/app/billing/shared/tax-info.component.html b/apps/web/src/app/billing/shared/tax-info.component.html
index 30cca550d37..c254ffa4a4d 100644
--- a/apps/web/src/app/billing/shared/tax-info.component.html
+++ b/apps/web/src/app/billing/shared/tax-info.component.html
@@ -1,363 +1,63 @@
-<div class="row">
-  <div [ngClass]="trialFlow ? 'col-7' : 'col-6'">
-    <div class="form-group">
-      <label for="addressCountry">{{ "country" | i18n }}</label>
-      <select
-        id="addressCountry"
-        class="form-control"
-        [(ngModel)]="taxInfo.country"
-        required
-        name="addressCountry"
-        autocomplete="country"
-        (change)="changeCountry()"
-      >
-        <option value="">-- Select --</option>
-        <option value="US">United States</option>
-        <option value="CN">China</option>
-        <option value="FR">France</option>
-        <option value="DE">Germany</option>
-        <option value="CA">Canada</option>
-        <option value="GB">United Kingdom</option>
-        <option value="AU">Australia</option>
-        <option value="IN">India</option>
-        <option value="-" disabled></option>
-        <option value="AF">Afghanistan</option>
-        <option value="AX">Åland Islands</option>
-        <option value="AL">Albania</option>
-        <option value="DZ">Algeria</option>
-        <option value="AS">American Samoa</option>
-        <option value="AD">Andorra</option>
-        <option value="AO">Angola</option>
-        <option value="AI">Anguilla</option>
-        <option value="AQ">Antarctica</option>
-        <option value="AG">Antigua and Barbuda</option>
-        <option value="AR">Argentina</option>
-        <option value="AM">Armenia</option>
-        <option value="AW">Aruba</option>
-        <option value="AT">Austria</option>
-        <option value="AZ">Azerbaijan</option>
-        <option value="BS">Bahamas</option>
-        <option value="BH">Bahrain</option>
-        <option value="BD">Bangladesh</option>
-        <option value="BB">Barbados</option>
-        <option value="BY">Belarus</option>
-        <option value="BE">Belgium</option>
-        <option value="BZ">Belize</option>
-        <option value="BJ">Benin</option>
-        <option value="BM">Bermuda</option>
-        <option value="BT">Bhutan</option>
-        <option value="BO">Bolivia, Plurinational State of</option>
-        <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
-        <option value="BA">Bosnia and Herzegovina</option>
-        <option value="BW">Botswana</option>
-        <option value="BV">Bouvet Island</option>
-        <option value="BR">Brazil</option>
-        <option value="IO">British Indian Ocean Territory</option>
-        <option value="BN">Brunei Darussalam</option>
-        <option value="BG">Bulgaria</option>
-        <option value="BF">Burkina Faso</option>
-        <option value="BI">Burundi</option>
-        <option value="KH">Cambodia</option>
-        <option value="CM">Cameroon</option>
-        <option value="CV">Cape Verde</option>
-        <option value="KY">Cayman Islands</option>
-        <option value="CF">Central African Republic</option>
-        <option value="TD">Chad</option>
-        <option value="CL">Chile</option>
-        <option value="CX">Christmas Island</option>
-        <option value="CC">Cocos (Keeling) Islands</option>
-        <option value="CO">Colombia</option>
-        <option value="KM">Comoros</option>
-        <option value="CG">Congo</option>
-        <option value="CD">Congo, the Democratic Republic of the</option>
-        <option value="CK">Cook Islands</option>
-        <option value="CR">Costa Rica</option>
-        <option value="CI">Côte d'Ivoire</option>
-        <option value="HR">Croatia</option>
-        <option value="CU">Cuba</option>
-        <option value="CW">Curaçao</option>
-        <option value="CY">Cyprus</option>
-        <option value="CZ">Czech Republic</option>
-        <option value="DK">Denmark</option>
-        <option value="DJ">Djibouti</option>
-        <option value="DM">Dominica</option>
-        <option value="DO">Dominican Republic</option>
-        <option value="EC">Ecuador</option>
-        <option value="EG">Egypt</option>
-        <option value="SV">El Salvador</option>
-        <option value="GQ">Equatorial Guinea</option>
-        <option value="ER">Eritrea</option>
-        <option value="EE">Estonia</option>
-        <option value="ET">Ethiopia</option>
-        <option value="FK">Falkland Islands (Malvinas)</option>
-        <option value="FO">Faroe Islands</option>
-        <option value="FJ">Fiji</option>
-        <option value="FI">Finland</option>
-        <option value="GF">French Guiana</option>
-        <option value="PF">French Polynesia</option>
-        <option value="TF">French Southern Territories</option>
-        <option value="GA">Gabon</option>
-        <option value="GM">Gambia</option>
-        <option value="GE">Georgia</option>
-        <option value="GH">Ghana</option>
-        <option value="GI">Gibraltar</option>
-        <option value="GR">Greece</option>
-        <option value="GL">Greenland</option>
-        <option value="GD">Grenada</option>
-        <option value="GP">Guadeloupe</option>
-        <option value="GU">Guam</option>
-        <option value="GT">Guatemala</option>
-        <option value="GG">Guernsey</option>
-        <option value="GN">Guinea</option>
-        <option value="GW">Guinea-Bissau</option>
-        <option value="GY">Guyana</option>
-        <option value="HT">Haiti</option>
-        <option value="HM">Heard Island and McDonald Islands</option>
-        <option value="VA">Holy See (Vatican City State)</option>
-        <option value="HN">Honduras</option>
-        <option value="HK">Hong Kong</option>
-        <option value="HU">Hungary</option>
-        <option value="IS">Iceland</option>
-        <option value="ID">Indonesia</option>
-        <option value="IR">Iran, Islamic Republic of</option>
-        <option value="IQ">Iraq</option>
-        <option value="IE">Ireland</option>
-        <option value="IM">Isle of Man</option>
-        <option value="IL">Israel</option>
-        <option value="IT">Italy</option>
-        <option value="JM">Jamaica</option>
-        <option value="JP">Japan</option>
-        <option value="JE">Jersey</option>
-        <option value="JO">Jordan</option>
-        <option value="KZ">Kazakhstan</option>
-        <option value="KE">Kenya</option>
-        <option value="KI">Kiribati</option>
-        <option value="KP">Korea, Democratic People's Republic of</option>
-        <option value="KR">Korea, Republic of</option>
-        <option value="KW">Kuwait</option>
-        <option value="KG">Kyrgyzstan</option>
-        <option value="LA">Lao People's Democratic Republic</option>
-        <option value="LV">Latvia</option>
-        <option value="LB">Lebanon</option>
-        <option value="LS">Lesotho</option>
-        <option value="LR">Liberia</option>
-        <option value="LY">Libya</option>
-        <option value="LI">Liechtenstein</option>
-        <option value="LT">Lithuania</option>
-        <option value="LU">Luxembourg</option>
-        <option value="MO">Macao</option>
-        <option value="MK">Macedonia, the former Yugoslav Republic of</option>
-        <option value="MG">Madagascar</option>
-        <option value="MW">Malawi</option>
-        <option value="MY">Malaysia</option>
-        <option value="MV">Maldives</option>
-        <option value="ML">Mali</option>
-        <option value="MT">Malta</option>
-        <option value="MH">Marshall Islands</option>
-        <option value="MQ">Martinique</option>
-        <option value="MR">Mauritania</option>
-        <option value="MU">Mauritius</option>
-        <option value="YT">Mayotte</option>
-        <option value="MX">Mexico</option>
-        <option value="FM">Micronesia, Federated States of</option>
-        <option value="MD">Moldova, Republic of</option>
-        <option value="MC">Monaco</option>
-        <option value="MN">Mongolia</option>
-        <option value="ME">Montenegro</option>
-        <option value="MS">Montserrat</option>
-        <option value="MA">Morocco</option>
-        <option value="MZ">Mozambique</option>
-        <option value="MM">Myanmar</option>
-        <option value="NA">Namibia</option>
-        <option value="NR">Nauru</option>
-        <option value="NP">Nepal</option>
-        <option value="NL">Netherlands</option>
-        <option value="NC">New Caledonia</option>
-        <option value="NZ">New Zealand</option>
-        <option value="NI">Nicaragua</option>
-        <option value="NE">Niger</option>
-        <option value="NG">Nigeria</option>
-        <option value="NU">Niue</option>
-        <option value="NF">Norfolk Island</option>
-        <option value="MP">Northern Mariana Islands</option>
-        <option value="NO">Norway</option>
-        <option value="OM">Oman</option>
-        <option value="PK">Pakistan</option>
-        <option value="PW">Palau</option>
-        <option value="PS">Palestinian Territory, Occupied</option>
-        <option value="PA">Panama</option>
-        <option value="PG">Papua New Guinea</option>
-        <option value="PY">Paraguay</option>
-        <option value="PE">Peru</option>
-        <option value="PH">Philippines</option>
-        <option value="PN">Pitcairn</option>
-        <option value="PL">Poland</option>
-        <option value="PT">Portugal</option>
-        <option value="PR">Puerto Rico</option>
-        <option value="QA">Qatar</option>
-        <option value="RE">Réunion</option>
-        <option value="RO">Romania</option>
-        <option value="RU">Russian Federation</option>
-        <option value="RW">Rwanda</option>
-        <option value="BL">Saint Barthélemy</option>
-        <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
-        <option value="KN">Saint Kitts and Nevis</option>
-        <option value="LC">Saint Lucia</option>
-        <option value="MF">Saint Martin (French part)</option>
-        <option value="PM">Saint Pierre and Miquelon</option>
-        <option value="VC">Saint Vincent and the Grenadines</option>
-        <option value="WS">Samoa</option>
-        <option value="SM">San Marino</option>
-        <option value="ST">Sao Tome and Principe</option>
-        <option value="SA">Saudi Arabia</option>
-        <option value="SN">Senegal</option>
-        <option value="RS">Serbia</option>
-        <option value="SC">Seychelles</option>
-        <option value="SL">Sierra Leone</option>
-        <option value="SG">Singapore</option>
-        <option value="SX">Sint Maarten (Dutch part)</option>
-        <option value="SK">Slovakia</option>
-        <option value="SI">Slovenia</option>
-        <option value="SB">Solomon Islands</option>
-        <option value="SO">Somalia</option>
-        <option value="ZA">South Africa</option>
-        <option value="GS">South Georgia and the South Sandwich Islands</option>
-        <option value="SS">South Sudan</option>
-        <option value="ES">Spain</option>
-        <option value="LK">Sri Lanka</option>
-        <option value="SD">Sudan</option>
-        <option value="SR">Suriname</option>
-        <option value="SJ">Svalbard and Jan Mayen</option>
-        <option value="SZ">Swaziland</option>
-        <option value="SE">Sweden</option>
-        <option value="CH">Switzerland</option>
-        <option value="SY">Syrian Arab Republic</option>
-        <option value="TW">Taiwan</option>
-        <option value="TJ">Tajikistan</option>
-        <option value="TZ">Tanzania, United Republic of</option>
-        <option value="TH">Thailand</option>
-        <option value="TL">Timor-Leste</option>
-        <option value="TG">Togo</option>
-        <option value="TK">Tokelau</option>
-        <option value="TO">Tonga</option>
-        <option value="TT">Trinidad and Tobago</option>
-        <option value="TN">Tunisia</option>
-        <option value="TR">Turkey</option>
-        <option value="TM">Turkmenistan</option>
-        <option value="TC">Turks and Caicos Islands</option>
-        <option value="TV">Tuvalu</option>
-        <option value="UG">Uganda</option>
-        <option value="UA">Ukraine</option>
-        <option value="AE">United Arab Emirates</option>
-        <option value="UM">United States Minor Outlying Islands</option>
-        <option value="UY">Uruguay</option>
-        <option value="UZ">Uzbekistan</option>
-        <option value="VU">Vanuatu</option>
-        <option value="VE">Venezuela, Bolivarian Republic of</option>
-        <option value="VN">Viet Nam</option>
-        <option value="VG">Virgin Islands, British</option>
-        <option value="VI">Virgin Islands, U.S.</option>
-        <option value="WF">Wallis and Futuna</option>
-        <option value="EH">Western Sahara</option>
-        <option value="YE">Yemen</option>
-        <option value="ZM">Zambia</option>
-        <option value="ZW">Zimbabwe</option>
-      </select>
+<form [formGroup]="taxFormGroup">
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <div [ngClass]="trialFlow ? 'tw-col-span-7' : 'tw-col-span-6'">
+      <bit-form-field>
+        <bit-label>{{ "country" | i18n }}</bit-label>
+        <bit-select formControlName="country" autocomplete="country">
+          <bit-option
+            *ngFor="let country of countryList"
+            [value]="country.value"
+            [disabled]="country.disabled"
+            [label]="country.name"
+          ></bit-option>
+        </bit-select>
+      </bit-form-field>
+    </div>
+    <div [ngClass]="trialFlow ? 'tw-col-span-5' : 'tw-col-span-3'">
+      <bit-form-field>
+        <bit-label>{{ "zipPostalCode" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="postalCode" autocomplete="postal-code" />
+      </bit-form-field>
+    </div>
+    <div class="tw-col-span-6" *ngIf="showTaxIdCheckbox">
+      <bit-form-control>
+        <input bitCheckbox type="checkbox" formControlName="includeTaxId" />
+        <bit-label>{{ "includeVAT" | i18n }}</bit-label>
+      </bit-form-control>
     </div>
   </div>
-  <div [ngClass]="trialFlow ? 'col-5' : 'col-3'">
-    <div class="form-group">
-      <label for="addressPostalCode">{{ "zipPostalCode" | i18n }}</label>
-      <input
-        id="addressPostalCode"
-        class="form-control"
-        type="text"
-        name="addressPostalCode"
-        [(ngModel)]="taxInfo.postalCode"
-        [required]="taxInfo.country === 'US'"
-        autocomplete="postal-code"
-      />
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4" *ngIf="showTaxIdFields">
+    <div class="tw-col-span-6">
+      <bit-form-field>
+        <bit-label>{{ "taxIdNumber" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="taxId" />
+      </bit-form-field>
     </div>
   </div>
-  <div class="col-6" *ngIf="showTaxIdCheckbox">
-    <div class="form-group form-check">
-      <input
-        class="form-check-input"
-        id="addressIncludeTaxId"
-        name="addressIncludeTaxId"
-        type="checkbox"
-        [(ngModel)]="taxInfo.includeTaxId"
-      />
-      <label class="form-check-label" for="addressIncludeTaxId">{{ "includeVAT" | i18n }}</label>
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4" *ngIf="showTaxIdFields">
+    <div class="tw-col-span-6">
+      <bit-form-field>
+        <bit-label>{{ "address1" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="line1" autocomplete="address-line1" />
+      </bit-form-field>
+    </div>
+    <div class="tw-col-span-6">
+      <bit-form-field>
+        <bit-label>{{ "address2" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="line2" autocomplete="address-line2" />
+      </bit-form-field>
+    </div>
+    <div class="tw-col-span-6">
+      <bit-form-field>
+        <bit-label for="addressCity">{{ "cityTown" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="city" autocomplete="address-level2" />
+      </bit-form-field>
+    </div>
+    <div class="tw-col-span-6">
+      <bit-form-field>
+        <bit-label>{{ "stateProvince" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="state" autocomplete="address-level1" />
+      </bit-form-field>
     </div>
   </div>
-</div>
-<div class="row" *ngIf="showTaxIdFields">
-  <div class="col-6">
-    <div class="form-group">
-      <label for="taxId">{{ "taxIdNumber" | i18n }}</label>
-      <input
-        id="taxId"
-        class="form-control"
-        type="text"
-        name="taxId"
-        [(ngModel)]="taxInfo.taxId"
-        [required]="taxInfo.includeTaxId"
-      />
-    </div>
-  </div>
-</div>
-<div class="row" *ngIf="showTaxIdFields">
-  <div class="col-6">
-    <div class="form-group">
-      <label for="addressLine1">{{ "address1" | i18n }}</label>
-      <input
-        id="addressLine1"
-        class="form-control"
-        type="text"
-        name="addressLine1"
-        [(ngModel)]="taxInfo.line1"
-        autocomplete="address-line1"
-      />
-    </div>
-  </div>
-  <div class="col-6">
-    <div class="form-group">
-      <label for="addressLine2">{{ "address2" | i18n }}</label>
-      <input
-        id="addressLine2"
-        class="form-control"
-        type="text"
-        name="addressLine2"
-        [(ngModel)]="taxInfo.line2"
-        autocomplete="address-line2"
-      />
-    </div>
-  </div>
-  <div class="col-6">
-    <div class="form-group">
-      <label for="addressCity">{{ "cityTown" | i18n }}</label>
-      <input
-        id="addressCity"
-        class="form-control"
-        type="text"
-        name="addressCity"
-        [(ngModel)]="taxInfo.city"
-        autocomplete="address-level2"
-      />
-    </div>
-  </div>
-  <div class="col-6">
-    <div class="form-group">
-      <label for="addressState">{{ "stateProvince" | i18n }}</label>
-      <input
-        id="addressState"
-        class="form-control"
-        type="text"
-        name="addressState"
-        [(ngModel)]="taxInfo.state"
-        autocomplete="address-level1"
-      />
-    </div>
-  </div>
-</div>
+</form>
diff --git a/apps/web/src/app/billing/shared/tax-info.component.ts b/apps/web/src/app/billing/shared/tax-info.component.ts
index a704c86eb51..f50a82d6edf 100644
--- a/apps/web/src/app/billing/shared/tax-info.component.ts
+++ b/apps/web/src/app/billing/shared/tax-info.component.ts
@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -15,6 +17,11 @@ type TaxInfoView = Omit<TaxInfoResponse, "taxIdType"> & {
   includeTaxId: boolean;
   [key: string]: unknown;
 };
+type CountryList = {
+  name: string;
+  value: string;
+  disabled: boolean;
+};
 
 @Component({
   selector: "app-tax-info",
@@ -26,6 +33,18 @@ type TaxInfoView = Omit<TaxInfoResponse, "taxIdType"> & {
 export class TaxInfoComponent {
   @Input() trialFlow = false;
   @Output() onCountryChanged = new EventEmitter();
+  private destroy$ = new Subject<void>();
+
+  taxFormGroup = new FormGroup({
+    country: new FormControl(null, [Validators.required]),
+    postalCode: new FormControl(null),
+    includeTaxId: new FormControl(null),
+    taxId: new FormControl(null),
+    line1: new FormControl(null),
+    line2: new FormControl(null),
+    city: new FormControl(null),
+    state: new FormControl(null),
+  });
 
   loading = true;
   organizationId: string;
@@ -40,20 +59,261 @@ export class TaxInfoComponent {
     country: "US",
     includeTaxId: false,
   };
-
+  countryList: CountryList[] = [
+    { name: "-- Select --", value: "", disabled: false },
+    { name: "United States", value: "US", disabled: false },
+    { name: "China", value: "CN", disabled: false },
+    { name: "France", value: "FR", disabled: false },
+    { name: "Germany", value: "DE", disabled: false },
+    { name: "Canada", value: "CA", disabled: false },
+    { name: "United Kingdom", value: "GB", disabled: false },
+    { name: "Australia", value: "AU", disabled: false },
+    { name: "India", value: "IN", disabled: false },
+    { name: "", value: "-", disabled: true },
+    { name: "Afghanistan", value: "AF", disabled: false },
+    { name: "Åland Islands", value: "AX", disabled: false },
+    { name: "Albania", value: "AL", disabled: false },
+    { name: "Algeria", value: "DZ", disabled: false },
+    { name: "American Samoa", value: "AS", disabled: false },
+    { name: "Andorra", value: "AD", disabled: false },
+    { name: "Angola", value: "AO", disabled: false },
+    { name: "Anguilla", value: "AI", disabled: false },
+    { name: "Antarctica", value: "AQ", disabled: false },
+    { name: "Antigua and Barbuda", value: "AG", disabled: false },
+    { name: "Argentina", value: "AR", disabled: false },
+    { name: "Armenia", value: "AM", disabled: false },
+    { name: "Aruba", value: "AW", disabled: false },
+    { name: "Austria", value: "AT", disabled: false },
+    { name: "Azerbaijan", value: "AZ", disabled: false },
+    { name: "Bahamas", value: "BS", disabled: false },
+    { name: "Bahrain", value: "BH", disabled: false },
+    { name: "Bangladesh", value: "BD", disabled: false },
+    { name: "Barbados", value: "BB", disabled: false },
+    { name: "Belarus", value: "BY", disabled: false },
+    { name: "Belgium", value: "BE", disabled: false },
+    { name: "Belize", value: "BZ", disabled: false },
+    { name: "Benin", value: "BJ", disabled: false },
+    { name: "Bermuda", value: "BM", disabled: false },
+    { name: "Bhutan", value: "BT", disabled: false },
+    { name: "Bolivia, Plurinational State of", value: "BO", disabled: false },
+    { name: "Bonaire, Sint Eustatius and Saba", value: "BQ", disabled: false },
+    { name: "Bosnia and Herzegovina", value: "BA", disabled: false },
+    { name: "Botswana", value: "BW", disabled: false },
+    { name: "Bouvet Island", value: "BV", disabled: false },
+    { name: "Brazil", value: "BR", disabled: false },
+    { name: "British Indian Ocean Territory", value: "IO", disabled: false },
+    { name: "Brunei Darussalam", value: "BN", disabled: false },
+    { name: "Bulgaria", value: "BG", disabled: false },
+    { name: "Burkina Faso", value: "BF", disabled: false },
+    { name: "Burundi", value: "BI", disabled: false },
+    { name: "Cambodia", value: "KH", disabled: false },
+    { name: "Cameroon", value: "CM", disabled: false },
+    { name: "Cape Verde", value: "CV", disabled: false },
+    { name: "Cayman Islands", value: "KY", disabled: false },
+    { name: "Central African Republic", value: "CF", disabled: false },
+    { name: "Chad", value: "TD", disabled: false },
+    { name: "Chile", value: "CL", disabled: false },
+    { name: "Christmas Island", value: "CX", disabled: false },
+    { name: "Cocos (Keeling) Islands", value: "CC", disabled: false },
+    { name: "Colombia", value: "CO", disabled: false },
+    { name: "Comoros", value: "KM", disabled: false },
+    { name: "Congo", value: "CG", disabled: false },
+    { name: "Congo, the Democratic Republic of the", value: "CD", disabled: false },
+    { name: "Cook Islands", value: "CK", disabled: false },
+    { name: "Costa Rica", value: "CR", disabled: false },
+    { name: "Côte d'Ivoire", value: "CI", disabled: false },
+    { name: "Croatia", value: "HR", disabled: false },
+    { name: "Cuba", value: "CU", disabled: false },
+    { name: "Curaçao", value: "CW", disabled: false },
+    { name: "Cyprus", value: "CY", disabled: false },
+    { name: "Czech Republic", value: "CZ", disabled: false },
+    { name: "Denmark", value: "DK", disabled: false },
+    { name: "Djibouti", value: "DJ", disabled: false },
+    { name: "Dominica", value: "DM", disabled: false },
+    { name: "Dominican Republic", value: "DO", disabled: false },
+    { name: "Ecuador", value: "EC", disabled: false },
+    { name: "Egypt", value: "EG", disabled: false },
+    { name: "El Salvador", value: "SV", disabled: false },
+    { name: "Equatorial Guinea", value: "GQ", disabled: false },
+    { name: "Eritrea", value: "ER", disabled: false },
+    { name: "Estonia", value: "EE", disabled: false },
+    { name: "Ethiopia", value: "ET", disabled: false },
+    { name: "Falkland Islands (Malvinas)", value: "FK", disabled: false },
+    { name: "Faroe Islands", value: "FO", disabled: false },
+    { name: "Fiji", value: "FJ", disabled: false },
+    { name: "Finland", value: "FI", disabled: false },
+    { name: "French Guiana", value: "GF", disabled: false },
+    { name: "French Polynesia", value: "PF", disabled: false },
+    { name: "French Southern Territories", value: "TF", disabled: false },
+    { name: "Gabon", value: "GA", disabled: false },
+    { name: "Gambia", value: "GM", disabled: false },
+    { name: "Georgia", value: "GE", disabled: false },
+    { name: "Ghana", value: "GH", disabled: false },
+    { name: "Gibraltar", value: "GI", disabled: false },
+    { name: "Greece", value: "GR", disabled: false },
+    { name: "Greenland", value: "GL", disabled: false },
+    { name: "Grenada", value: "GD", disabled: false },
+    { name: "Guadeloupe", value: "GP", disabled: false },
+    { name: "Guam", value: "GU", disabled: false },
+    { name: "Guatemala", value: "GT", disabled: false },
+    { name: "Guernsey", value: "GG", disabled: false },
+    { name: "Guinea", value: "GN", disabled: false },
+    { name: "Guinea-Bissau", value: "GW", disabled: false },
+    { name: "Guyana", value: "GY", disabled: false },
+    { name: "Haiti", value: "HT", disabled: false },
+    { name: "Heard Island and McDonald Islands", value: "HM", disabled: false },
+    { name: "Holy See (Vatican City State)", value: "VA", disabled: false },
+    { name: "Honduras", value: "HN", disabled: false },
+    { name: "Hong Kong", value: "HK", disabled: false },
+    { name: "Hungary", value: "HU", disabled: false },
+    { name: "Iceland", value: "IS", disabled: false },
+    { name: "Indonesia", value: "ID", disabled: false },
+    { name: "Iran, Islamic Republic of", value: "IR", disabled: false },
+    { name: "Iraq", value: "IQ", disabled: false },
+    { name: "Ireland", value: "IE", disabled: false },
+    { name: "Isle of Man", value: "IM", disabled: false },
+    { name: "Israel", value: "IL", disabled: false },
+    { name: "Italy", value: "IT", disabled: false },
+    { name: "Jamaica", value: "JM", disabled: false },
+    { name: "Japan", value: "JP", disabled: false },
+    { name: "Jersey", value: "JE", disabled: false },
+    { name: "Jordan", value: "JO", disabled: false },
+    { name: "Kazakhstan", value: "KZ", disabled: false },
+    { name: "Kenya", value: "KE", disabled: false },
+    { name: "Kiribati", value: "KI", disabled: false },
+    { name: "Korea, Democratic People's Republic of", value: "KP", disabled: false },
+    { name: "Korea, Republic of", value: "KR", disabled: false },
+    { name: "Kuwait", value: "KW", disabled: false },
+    { name: "Kyrgyzstan", value: "KG", disabled: false },
+    { name: "Lao People's Democratic Republic", value: "LA", disabled: false },
+    { name: "Latvia", value: "LV", disabled: false },
+    { name: "Lebanon", value: "LB", disabled: false },
+    { name: "Lesotho", value: "LS", disabled: false },
+    { name: "Liberia", value: "LR", disabled: false },
+    { name: "Libya", value: "LY", disabled: false },
+    { name: "Liechtenstein", value: "LI", disabled: false },
+    { name: "Lithuania", value: "LT", disabled: false },
+    { name: "Luxembourg", value: "LU", disabled: false },
+    { name: "Macao", value: "MO", disabled: false },
+    { name: "Macedonia, the former Yugoslav Republic of", value: "MK", disabled: false },
+    { name: "Madagascar", value: "MG", disabled: false },
+    { name: "Malawi", value: "MW", disabled: false },
+    { name: "Malaysia", value: "MY", disabled: false },
+    { name: "Maldives", value: "MV", disabled: false },
+    { name: "Mali", value: "ML", disabled: false },
+    { name: "Malta", value: "MT", disabled: false },
+    { name: "Marshall Islands", value: "MH", disabled: false },
+    { name: "Martinique", value: "MQ", disabled: false },
+    { name: "Mauritania", value: "MR", disabled: false },
+    { name: "Mauritius", value: "MU", disabled: false },
+    { name: "Mayotte", value: "YT", disabled: false },
+    { name: "Mexico", value: "MX", disabled: false },
+    { name: "Micronesia, Federated States of", value: "FM", disabled: false },
+    { name: "Moldova, Republic of", value: "MD", disabled: false },
+    { name: "Monaco", value: "MC", disabled: false },
+    { name: "Mongolia", value: "MN", disabled: false },
+    { name: "Montenegro", value: "ME", disabled: false },
+    { name: "Montserrat", value: "MS", disabled: false },
+    { name: "Morocco", value: "MA", disabled: false },
+    { name: "Mozambique", value: "MZ", disabled: false },
+    { name: "Myanmar", value: "MM", disabled: false },
+    { name: "Namibia", value: "NA", disabled: false },
+    { name: "Nauru", value: "NR", disabled: false },
+    { name: "Nepal", value: "NP", disabled: false },
+    { name: "Netherlands", value: "NL", disabled: false },
+    { name: "New Caledonia", value: "NC", disabled: false },
+    { name: "New Zealand", value: "NZ", disabled: false },
+    { name: "Nicaragua", value: "NI", disabled: false },
+    { name: "Niger", value: "NE", disabled: false },
+    { name: "Nigeria", value: "NG", disabled: false },
+    { name: "Niue", value: "NU", disabled: false },
+    { name: "Norfolk Island", value: "NF", disabled: false },
+    { name: "Northern Mariana Islands", value: "MP", disabled: false },
+    { name: "Norway", value: "NO", disabled: false },
+    { name: "Oman", value: "OM", disabled: false },
+    { name: "Pakistan", value: "PK", disabled: false },
+    { name: "Palau", value: "PW", disabled: false },
+    { name: "Palestinian Territory, Occupied", value: "PS", disabled: false },
+    { name: "Panama", value: "PA", disabled: false },
+    { name: "Papua New Guinea", value: "PG", disabled: false },
+    { name: "Paraguay", value: "PY", disabled: false },
+    { name: "Peru", value: "PE", disabled: false },
+    { name: "Philippines", value: "PH", disabled: false },
+    { name: "Pitcairn", value: "PN", disabled: false },
+    { name: "Poland", value: "PL", disabled: false },
+    { name: "Portugal", value: "PT", disabled: false },
+    { name: "Puerto Rico", value: "PR", disabled: false },
+    { name: "Qatar", value: "QA", disabled: false },
+    { name: "Réunion", value: "RE", disabled: false },
+    { name: "Romania", value: "RO", disabled: false },
+    { name: "Russian Federation", value: "RU", disabled: false },
+    { name: "Rwanda", value: "RW", disabled: false },
+    { name: "Saint Barthélemy", value: "BL", disabled: false },
+    { name: "Saint Helena, Ascension and Tristan da Cunha", value: "SH", disabled: false },
+    { name: "Saint Kitts and Nevis", value: "KN", disabled: false },
+    { name: "Saint Lucia", value: "LC", disabled: false },
+    { name: "Saint Martin (French part)", value: "MF", disabled: false },
+    { name: "Saint Pierre and Miquelon", value: "PM", disabled: false },
+    { name: "Saint Vincent and the Grenadines", value: "VC", disabled: false },
+    { name: "Samoa", value: "WS", disabled: false },
+    { name: "San Marino", value: "SM", disabled: false },
+    { name: "Sao Tome and Principe", value: "ST", disabled: false },
+    { name: "Saudi Arabia", value: "SA", disabled: false },
+    { name: "Senegal", value: "SN", disabled: false },
+    { name: "Serbia", value: "RS", disabled: false },
+    { name: "Seychelles", value: "SC", disabled: false },
+    { name: "Sierra Leone", value: "SL", disabled: false },
+    { name: "Singapore", value: "SG", disabled: false },
+    { name: "Sint Maarten (Dutch part)", value: "SX", disabled: false },
+    { name: "Slovakia", value: "SK", disabled: false },
+    { name: "Slovenia", value: "SI", disabled: false },
+    { name: "Solomon Islands", value: "SB", disabled: false },
+    { name: "Somalia", value: "SO", disabled: false },
+    { name: "South Africa", value: "ZA", disabled: false },
+    { name: "South Georgia and the South Sandwich Islands", value: "GS", disabled: false },
+    { name: "South Sudan", value: "SS", disabled: false },
+    { name: "Spain", value: "ES", disabled: false },
+    { name: "Sri Lanka", value: "LK", disabled: false },
+    { name: "Sudan", value: "SD", disabled: false },
+    { name: "Suriname", value: "SR", disabled: false },
+    { name: "Svalbard and Jan Mayen", value: "SJ", disabled: false },
+    { name: "Swaziland", value: "SZ", disabled: false },
+    { name: "Sweden", value: "SE", disabled: false },
+    { name: "Switzerland", value: "CH", disabled: false },
+    { name: "Syrian Arab Republic", value: "SY", disabled: false },
+    { name: "Taiwan", value: "TW", disabled: false },
+    { name: "Tajikistan", value: "TJ", disabled: false },
+    { name: "Tanzania, United Republic of", value: "TZ", disabled: false },
+    { name: "Thailand", value: "TH", disabled: false },
+    { name: "Timor-Leste", value: "TL", disabled: false },
+    { name: "Togo", value: "TG", disabled: false },
+    { name: "Tokelau", value: "TK", disabled: false },
+    { name: "Tonga", value: "TO", disabled: false },
+    { name: "Trinidad and Tobago", value: "TT", disabled: false },
+    { name: "Tunisia", value: "TN", disabled: false },
+    { name: "Turkey", value: "TR", disabled: false },
+    { name: "Turkmenistan", value: "TM", disabled: false },
+    { name: "Turks and Caicos Islands", value: "TC", disabled: false },
+    { name: "Tuvalu", value: "TV", disabled: false },
+    { name: "Uganda", value: "UG", disabled: false },
+    { name: "Ukraine", value: "UA", disabled: false },
+    { name: "United Arab Emirates", value: "AE", disabled: false },
+    { name: "United States Minor Outlying Islands", value: "UM", disabled: false },
+    { name: "Uruguay", value: "UY", disabled: false },
+    { name: "Uzbekistan", value: "UZ", disabled: false },
+    { name: "Vanuatu", value: "VU", disabled: false },
+    { name: "Venezuela, Bolivarian Republic of", value: "VE", disabled: false },
+    { name: "Viet Nam", value: "VN", disabled: false },
+    { name: "Virgin Islands, British", value: "VG", disabled: false },
+    { name: "Virgin Islands, U.S.", value: "VI", disabled: false },
+    { name: "Wallis and Futuna", value: "WF", disabled: false },
+    { name: "Western Sahara", value: "EH", disabled: false },
+    { name: "Yemen", value: "YE", disabled: false },
+    { name: "Zambia", value: "ZM", disabled: false },
+    { name: "Zimbabwe", value: "ZW", disabled: false },
+  ];
   taxRates: TaxRateResponse[];
 
-  private pristine: TaxInfoView = {
-    taxId: null,
-    line1: null,
-    line2: null,
-    city: null,
-    state: null,
-    postalCode: null,
-    country: "US",
-    includeTaxId: false,
-  };
-
   constructor(
     private apiService: ApiService,
     private route: ActivatedRoute,
@@ -61,6 +321,70 @@ export class TaxInfoComponent {
     private organizationApiService: OrganizationApiServiceAbstraction,
   ) {}
 
+  get country(): string {
+    return this.taxFormGroup.get("country").value;
+  }
+
+  set country(country: string) {
+    this.taxFormGroup.get("country").setValue(country);
+  }
+
+  get postalCode(): string {
+    return this.taxFormGroup.get("postalCode").value;
+  }
+
+  set postalCode(postalCode: string) {
+    this.taxFormGroup.get("postalCode").setValue(postalCode);
+  }
+
+  get includeTaxId(): boolean {
+    return this.taxFormGroup.get("includeTaxId").value;
+  }
+
+  set includeTaxId(includeTaxId: boolean) {
+    this.taxFormGroup.get("includeTaxId").setValue(includeTaxId);
+  }
+
+  get taxId(): string {
+    return this.taxFormGroup.get("taxId").value;
+  }
+
+  set taxId(taxId: string) {
+    this.taxFormGroup.get("taxId").setValue(taxId);
+  }
+
+  get line1(): string {
+    return this.taxFormGroup.get("line1").value;
+  }
+
+  set line1(line1: string) {
+    this.taxFormGroup.get("line1").setValue(line1);
+  }
+
+  get line2(): string {
+    return this.taxFormGroup.get("line2").value;
+  }
+
+  set line2(line2: string) {
+    this.taxFormGroup.get("line2").setValue(line2);
+  }
+
+  get city(): string {
+    return this.taxFormGroup.get("city").value;
+  }
+
+  set city(city: string) {
+    this.taxFormGroup.get("city").setValue(city);
+  }
+
+  get state(): string {
+    return this.taxFormGroup.get("state").value;
+  }
+
+  set state(state: string) {
+    this.taxFormGroup.get("state").setValue(state);
+  }
+
   async ngOnInit() {
     // Provider setup
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
@@ -75,21 +399,22 @@ export class TaxInfoComponent {
         try {
           const taxInfo = await this.organizationApiService.getTaxInfo(this.organizationId);
           if (taxInfo) {
-            this.taxInfo.taxId = taxInfo.taxId;
-            this.taxInfo.state = taxInfo.state;
-            this.taxInfo.line1 = taxInfo.line1;
-            this.taxInfo.line2 = taxInfo.line2;
-            this.taxInfo.city = taxInfo.city;
-            this.taxInfo.state = taxInfo.state;
-            this.taxInfo.postalCode = taxInfo.postalCode;
-            this.taxInfo.country = taxInfo.country || "US";
-            this.taxInfo.includeTaxId =
-              this.countrySupportsTax(this.taxInfo.country) &&
+            this.taxId = taxInfo.taxId;
+            this.state = taxInfo.state;
+            this.line1 = taxInfo.line1;
+            this.line2 = taxInfo.line2;
+            this.city = taxInfo.city;
+            this.state = taxInfo.state;
+            this.postalCode = taxInfo.postalCode;
+            this.country = taxInfo.country || "US";
+            this.includeTaxId =
+              this.countrySupportsTax(this.country) &&
               (!!taxInfo.taxId ||
                 !!taxInfo.line1 ||
                 !!taxInfo.line2 ||
                 !!taxInfo.city ||
                 !!taxInfo.state);
+            this.setTaxInfoObject();
           }
         } catch (e) {
           this.logService.error(e);
@@ -98,20 +423,40 @@ export class TaxInfoComponent {
         try {
           const taxInfo = await this.apiService.getTaxInfo();
           if (taxInfo) {
-            this.taxInfo.postalCode = taxInfo.postalCode;
-            this.taxInfo.country = taxInfo.country || "US";
+            this.postalCode = taxInfo.postalCode;
+            this.country = taxInfo.country || "US";
           }
+          this.setTaxInfoObject();
         } catch (e) {
           this.logService.error(e);
         }
       }
-      this.pristine = Object.assign({}, this.taxInfo);
+
+      if (this.country === "US") {
+        this.taxFormGroup.get("postalCode").setValidators([Validators.required]);
+        this.taxFormGroup.get("postalCode").updateValueAndValidity();
+      }
+
       // If not the default (US) then trigger onCountryChanged
-      if (this.taxInfo.country !== "US") {
+      if (this.country !== "US") {
         this.onCountryChanged.emit();
       }
     });
 
+    this.taxFormGroup
+      .get("country")
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((value) => {
+        if (value === "US") {
+          this.taxFormGroup.get("postalCode").setValidators([Validators.required]);
+        } else {
+          this.taxFormGroup.get("postalCode").clearValidators();
+        }
+        this.taxFormGroup.get("postalCode").updateValueAndValidity();
+        this.setTaxInfoObject();
+        this.changeCountry();
+      });
+
     try {
       const taxRates = await this.apiService.getTaxRates();
       if (taxRates) {
@@ -127,16 +472,27 @@ export class TaxInfoComponent {
   get taxRate() {
     if (this.taxRates != null) {
       const localTaxRate = this.taxRates.find(
-        (x) => x.country === this.taxInfo.country && x.postalCode === this.taxInfo.postalCode,
+        (x) => x.country === this.country && x.postalCode === this.postalCode,
       );
       return localTaxRate?.rate ?? null;
     }
   }
 
+  setTaxInfoObject() {
+    this.taxInfo.country = this.country;
+    this.taxInfo.postalCode = this.postalCode;
+    this.taxInfo.includeTaxId = this.includeTaxId;
+    this.taxInfo.taxId = this.taxId;
+    this.taxInfo.line1 = this.line1;
+    this.taxInfo.line2 = this.line2;
+    this.taxInfo.city = this.city;
+    this.taxInfo.state = this.state;
+  }
+
   get showTaxIdCheckbox() {
     return (
       (this.organizationId || this.providerId) &&
-      this.taxInfo.country !== "US" &&
+      this.country !== "US" &&
       this.countrySupportsTax(this.taxInfo.country)
     );
   }
@@ -144,23 +500,23 @@ export class TaxInfoComponent {
   get showTaxIdFields() {
     return (
       (this.organizationId || this.providerId) &&
-      this.taxInfo.includeTaxId &&
-      this.countrySupportsTax(this.taxInfo.country)
+      this.includeTaxId &&
+      this.countrySupportsTax(this.country)
     );
   }
 
   getTaxInfoRequest(): TaxInfoUpdateRequest {
     if (this.organizationId || this.providerId) {
       const request = new ExpandedTaxInfoUpdateRequest();
-      request.country = this.taxInfo.country;
-      request.postalCode = this.taxInfo.postalCode;
+      request.country = this.country;
+      request.postalCode = this.postalCode;
 
-      if (this.taxInfo.includeTaxId) {
-        request.taxId = this.taxInfo.taxId;
-        request.line1 = this.taxInfo.line1;
-        request.line2 = this.taxInfo.line2;
-        request.city = this.taxInfo.city;
-        request.state = this.taxInfo.state;
+      if (this.includeTaxId) {
+        request.taxId = this.taxId;
+        request.line1 = this.line1;
+        request.line2 = this.line2;
+        request.city = this.city;
+        request.state = this.state;
       } else {
         request.taxId = null;
         request.line1 = null;
@@ -171,18 +527,15 @@ export class TaxInfoComponent {
       return request;
     } else {
       const request = new TaxInfoUpdateRequest();
-      request.postalCode = this.taxInfo.postalCode;
-      request.country = this.taxInfo.country;
+      request.postalCode = this.postalCode;
+      request.country = this.country;
       return request;
     }
   }
 
   submitTaxInfo(): Promise<any> {
-    if (!this.hasChanged()) {
-      return new Promise<void>((resolve) => {
-        resolve();
-      });
-    }
+    this.taxFormGroup.updateValueAndValidity();
+    this.taxFormGroup.markAllAsTouched();
     const request = this.getTaxInfoRequest();
     return this.organizationId
       ? this.organizationApiService.updateTaxInfo(
@@ -193,13 +546,14 @@ export class TaxInfoComponent {
   }
 
   changeCountry() {
-    if (!this.countrySupportsTax(this.taxInfo.country)) {
-      this.taxInfo.includeTaxId = false;
-      this.taxInfo.taxId = null;
-      this.taxInfo.line1 = null;
-      this.taxInfo.line2 = null;
-      this.taxInfo.city = null;
-      this.taxInfo.state = null;
+    if (!this.countrySupportsTax(this.country)) {
+      this.includeTaxId = false;
+      this.taxId = null;
+      this.line1 = null;
+      this.line2 = null;
+      this.city = null;
+      this.state = null;
+      this.setTaxInfoObject();
     }
     this.onCountryChanged.emit();
   }
@@ -208,16 +562,6 @@ export class TaxInfoComponent {
     return this.taxSupportedCountryCodes.includes(countryCode);
   }
 
-  private hasChanged(): boolean {
-    for (const key in this.taxInfo) {
-      // eslint-disable-next-line
-      if (this.pristine.hasOwnProperty(key) && this.pristine[key] !== this.taxInfo[key]) {
-        return true;
-      }
-    }
-    return false;
-  }
-
   private taxSupportedCountryCodes: string[] = [
     "CN",
     "FR",

From f85c4877e293a0c94ab13cfd810db9f2e1187d56 Mon Sep 17 00:00:00 2001
From: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
Date: Wed, 12 Jun 2024 07:52:59 -0400
Subject: [PATCH 03/18] Updated certain billing callsites to get billing
 history instead (#9443)

---
 .../organization-billing-history-view.component.ts |  2 +-
 .../organization-api.service.abstraction.ts        |  3 +++
 .../organization/organization-api.service.ts       | 13 +++++++++++++
 .../billing/models/response/billing.response.ts    | 14 --------------
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/organization-billing-history-view.component.ts b/apps/web/src/app/billing/organizations/organization-billing-history-view.component.ts
index 78872aa6a99..cd293452001 100644
--- a/apps/web/src/app/billing/organizations/organization-billing-history-view.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-billing-history-view.component.ts
@@ -44,7 +44,7 @@ export class OrgBillingHistoryViewComponent implements OnInit, OnDestroy {
       return;
     }
     this.loading = true;
-    this.billing = await this.organizationApiService.getBilling(this.organizationId);
+    this.billing = await this.organizationApiService.getBillingHistory(this.organizationId);
     this.loading = false;
   }
 }
diff --git a/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts b/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts
index 28b108fa4cc..e66fc0cf12a 100644
--- a/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts
+++ b/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts
@@ -1,3 +1,5 @@
+import { BillingHistoryResponse } from "@bitwarden/common/billing/models/response/billing-history.response";
+
 import { OrganizationApiKeyRequest } from "../../../admin-console/models/request/organization-api-key.request";
 import { OrganizationSsoRequest } from "../../../auth/models/request/organization-sso.request";
 import { SecretVerificationRequest } from "../../../auth/models/request/secret-verification.request";
@@ -33,6 +35,7 @@ import { ProfileOrganizationResponse } from "../../models/response/profile-organ
 export class OrganizationApiServiceAbstraction {
   get: (id: string) => Promise<OrganizationResponse>;
   getBilling: (id: string) => Promise<BillingResponse>;
+  getBillingHistory: (id: string) => Promise<BillingHistoryResponse>;
   getSubscription: (id: string) => Promise<OrganizationSubscriptionResponse>;
   getLicense: (id: string, installationId: string) => Promise<unknown>;
   getAutoEnrollStatus: (identifier: string) => Promise<OrganizationAutoEnrollStatusResponse>;
diff --git a/libs/common/src/admin-console/services/organization/organization-api.service.ts b/libs/common/src/admin-console/services/organization/organization-api.service.ts
index 13d8eb7bff7..2ff4f2321a3 100644
--- a/libs/common/src/admin-console/services/organization/organization-api.service.ts
+++ b/libs/common/src/admin-console/services/organization/organization-api.service.ts
@@ -1,3 +1,5 @@
+import { BillingHistoryResponse } from "@bitwarden/common/billing/models/response/billing-history.response";
+
 import { ApiService } from "../../../abstractions/api.service";
 import { OrganizationApiKeyRequest } from "../../../admin-console/models/request/organization-api-key.request";
 import { OrganizationSsoRequest } from "../../../auth/models/request/organization-sso.request";
@@ -55,6 +57,17 @@ export class OrganizationApiService implements OrganizationApiServiceAbstraction
     return new BillingResponse(r);
   }
 
+  async getBillingHistory(id: string): Promise<BillingHistoryResponse> {
+    const r = await this.apiService.send(
+      "GET",
+      "/organizations/" + id + "/billing/history",
+      null,
+      true,
+      true,
+    );
+    return new BillingHistoryResponse(r);
+  }
+
   async getSubscription(id: string): Promise<OrganizationSubscriptionResponse> {
     const r = await this.apiService.send(
       "GET",
diff --git a/libs/common/src/billing/models/response/billing.response.ts b/libs/common/src/billing/models/response/billing.response.ts
index 440c32be0fc..45d3cf1e67e 100644
--- a/libs/common/src/billing/models/response/billing.response.ts
+++ b/libs/common/src/billing/models/response/billing.response.ts
@@ -4,26 +4,12 @@ import { PaymentMethodType, TransactionType } from "../../enums";
 export class BillingResponse extends BaseResponse {
   balance: number;
   paymentSource: BillingSourceResponse;
-  invoices: BillingInvoiceResponse[] = [];
-  transactions: BillingTransactionResponse[] = [];
 
   constructor(response: any) {
     super(response);
     this.balance = this.getResponseProperty("Balance");
     const paymentSource = this.getResponseProperty("PaymentSource");
-    const transactions = this.getResponseProperty("Transactions");
-    const invoices = this.getResponseProperty("Invoices");
     this.paymentSource = paymentSource == null ? null : new BillingSourceResponse(paymentSource);
-    if (transactions != null) {
-      this.transactions = transactions.map((t: any) => new BillingTransactionResponse(t));
-    }
-    if (invoices != null) {
-      this.invoices = invoices.map((i: any) => new BillingInvoiceResponse(i));
-    }
-  }
-
-  get hasNoHistory() {
-    return this.invoices.length == 0 && this.transactions.length == 0;
   }
 }
 

From 88dc574982069b7eac9002e5c2adeefaea54a813 Mon Sep 17 00:00:00 2001
From: Bitwarden DevOps
 <106330231+bitwarden-devops-bot@users.noreply.github.com>
Date: Wed, 12 Jun 2024 08:54:20 -0400
Subject: [PATCH 04/18] Bumped client version(s) (#9596)

---
 apps/desktop/package.json          | 2 +-
 apps/desktop/src/package-lock.json | 4 ++--
 apps/desktop/src/package.json      | 2 +-
 package-lock.json                  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 129e9c43f09..4bb0a94961e 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bitwarden/desktop",
   "description": "A secure and free password manager for all of your devices.",
-  "version": "2024.6.0",
+  "version": "2024.6.1",
   "keywords": [
     "bitwarden",
     "password",
diff --git a/apps/desktop/src/package-lock.json b/apps/desktop/src/package-lock.json
index 34a4dc99f65..c29ec0a9eea 100644
--- a/apps/desktop/src/package-lock.json
+++ b/apps/desktop/src/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@bitwarden/desktop",
-  "version": "2024.6.0",
+  "version": "2024.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bitwarden/desktop",
-      "version": "2024.6.0",
+      "version": "2024.6.1",
       "license": "GPL-3.0",
       "dependencies": {
         "@bitwarden/desktop-native": "file:../desktop_native",
diff --git a/apps/desktop/src/package.json b/apps/desktop/src/package.json
index 3a629f37cb0..04406eea1d4 100644
--- a/apps/desktop/src/package.json
+++ b/apps/desktop/src/package.json
@@ -2,7 +2,7 @@
   "name": "@bitwarden/desktop",
   "productName": "Bitwarden",
   "description": "A secure and free password manager for all of your devices.",
-  "version": "2024.6.0",
+  "version": "2024.6.1",
   "author": "Bitwarden Inc. <hello@bitwarden.com> (https://bitwarden.com)",
   "homepage": "https://bitwarden.com",
   "license": "GPL-3.0",
diff --git a/package-lock.json b/package-lock.json
index fec3db2aea0..cf734e25a39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -237,7 +237,7 @@
     },
     "apps/desktop": {
       "name": "@bitwarden/desktop",
-      "version": "2024.6.0",
+      "version": "2024.6.1",
       "hasInstallScript": true,
       "license": "GPL-3.0"
     },

From d5e0ab74a4a61ad3cad551f5965014de24801be1 Mon Sep 17 00:00:00 2001
From: KiruthigaManivannan
 <162679756+KiruthigaManivannan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 18:37:08 +0530
Subject: [PATCH 05/18] PM-1943 Migrate Recover Delete Component (#9169)

* PM-1943 Migrate Recover Delete Component

* PM-1943 Anon layout changes done

* PM-1943 - await navigate

* PM-1943 - Add new anon layout wrapper env selector.

---------

Co-authored-by: Jared Snider <jsnider@bitwarden.com>
---
 .../app/auth/recover-delete.component.html    | 56 +++++--------------
 .../src/app/auth/recover-delete.component.ts  | 38 ++++++-------
 apps/web/src/app/oss-routing.module.ts        | 20 +++++--
 3 files changed, 44 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/app/auth/recover-delete.component.html b/apps/web/src/app/auth/recover-delete.component.html
index 5b3ba90565e..a00fbb838eb 100644
--- a/apps/web/src/app/auth/recover-delete.component.html
+++ b/apps/web/src/app/auth/recover-delete.component.html
@@ -1,44 +1,16 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="lead text-center mb-4">{{ "deleteAccount" | i18n }}</p>
-      <div class="card">
-        <div class="card-body">
-          <p>{{ "deleteRecoverDesc" | i18n }}</p>
-          <div class="form-group">
-            <label for="email">{{ "emailAddress" | i18n }}</label>
-            <input
-              id="email"
-              class="form-control"
-              type="text"
-              name="Email"
-              [(ngModel)]="email"
-              required
-              appAutofocus
-              inputmode="email"
-              appInputVerbatim="false"
-            />
-          </div>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span>{{ "submit" | i18n }}</span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
-            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-              {{ "cancel" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
+<form [formGroup]="recoverDeleteForm" [bitSubmit]="submit">
+  <p bitTypography="body1">{{ "deleteRecoverDesc" | i18n }}</p>
+  <bit-form-field>
+    <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+    <input bitInput appAutofocus appInputVerbatim="false" type="email" formControlName="email" />
+  </bit-form-field>
+  <hr />
+  <div class="tw-flex tw-gap-2">
+    <button type="submit" bitButton bitFormButton buttonType="primary" [block]="true">
+      {{ "submit" | i18n }}
+    </button>
+    <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
+      {{ "cancel" | i18n }}
+    </a>
   </div>
 </form>
diff --git a/apps/web/src/app/auth/recover-delete.component.ts b/apps/web/src/app/auth/recover-delete.component.ts
index e52353e382c..6688c1582ec 100644
--- a/apps/web/src/app/auth/recover-delete.component.ts
+++ b/apps/web/src/app/auth/recover-delete.component.ts
@@ -1,10 +1,10 @@
 import { Component } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { DeleteRecoverRequest } from "@bitwarden/common/models/request/delete-recover.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 @Component({
@@ -12,33 +12,27 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
   templateUrl: "recover-delete.component.html",
 })
 export class RecoverDeleteComponent {
-  email: string;
-  formPromise: Promise<any>;
+  protected recoverDeleteForm = new FormGroup({
+    email: new FormControl(null, [Validators.required]),
+  });
 
   constructor(
     private router: Router,
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
-    private logService: LogService,
   ) {}
 
-  async submit() {
-    try {
-      const request = new DeleteRecoverRequest();
-      request.email = this.email.trim().toLowerCase();
-      this.formPromise = this.apiService.postAccountRecoverDelete(request);
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("deleteRecoverEmailSent"),
-      );
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.router.navigate(["/"]);
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
+  submit = async () => {
+    const request = new DeleteRecoverRequest();
+    request.email = this.recoverDeleteForm.value.email.trim().toLowerCase();
+    await this.apiService.postAccountRecoverDelete(request);
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("deleteRecoverEmailSent"),
+    );
+
+    await this.router.navigate(["/"]);
+  };
 }
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 209a291a712..0a15e058696 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -134,12 +134,6 @@ const routes: Routes = [
         data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false } satisfies DataProperties,
       },
       { path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
-      {
-        path: "recover-delete",
-        component: RecoverDeleteComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" } satisfies DataProperties,
-      },
       {
         path: "verify-recover-delete",
         component: VerifyRecoverDeleteComponent,
@@ -231,6 +225,20 @@ const routes: Routes = [
                 (mod) => mod.AcceptEmergencyComponent,
               ),
           },
+        ],
+      },
+      {
+        path: "recover-delete",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: RecoverDeleteComponent,
+            data: {
+              pageTitle: "deleteAccount",
+              titleId: "deleteAccount",
+            } satisfies DataProperties & AnonLayoutWrapperData,
+          },
           {
             path: "",
             component: EnvironmentSelectorComponent,

From ae688d9e9eb78d1d0171a75812ff100aa0bcde9e Mon Sep 17 00:00:00 2001
From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 18:59:44 +0530
Subject: [PATCH 06/18] [PM-4961]anon-layout login component migrated (#9167)

* anaon-layout login component migrated

* Login component migration

* Login component migration

---------

Co-authored-by: Ike Kottlowski <ikottlowski@bitwarden.com>
---
 .../src/app/auth/login/login.component.html   | 239 ++++++++----------
 .../web/src/app/auth/login/login.component.ts |   7 +-
 apps/web/src/app/oss-routing.module.ts        |  19 +-
 3 files changed, 127 insertions(+), 138 deletions(-)

diff --git a/apps/web/src/app/auth/login/login.component.html b/apps/web/src/app/auth/login/login.component.html
index 0e29a342786..eb2a9a88aa1 100644
--- a/apps/web/src/app/auth/login/login.component.html
+++ b/apps/web/src/app/auth/login/login.component.html
@@ -1,155 +1,122 @@
 <form
-  #form
-  (ngSubmit)="submit(false)"
+  [bitSubmit]="submitForm.bind(null, false)"
   [appApiAction]="formPromise"
-  class="tw-container tw-mx-auto"
   [formGroup]="formGroup"
+  class="tw-w-96"
 >
-  <div
-    class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
-  >
-    <div>
-      <img class="logo logo-themed" alt="Bitwarden" />
-      <p class="tw-mx-4 tw-mb-4 tw-mt-3 tw-text-center tw-text-xl">
-        {{ "loginOrCreateNewAccount" | i18n }}
-      </p>
-      <div
-        class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
+  <ng-container *ngIf="!validatedEmail">
+    <div class="tw-mb-3">
+      <bit-form-field>
+        <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+        <input
+          bitInput
+          type="email"
+          formControlName="email"
+          appAutofocus
+          (keyup.enter)="validateEmail()"
+        />
+      </bit-form-field>
+    </div>
+
+    <div class="tw-mb-3 tw-flex tw-items-start">
+      <bit-form-control class="tw-mb-0">
+        <input type="checkbox" bitCheckbox formControlName="rememberEmail" />
+        <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
+      </bit-form-control>
+    </div>
+
+    <div class="tw-mb-3">
+      <button
+        bitButton
+        type="button"
+        buttonType="primary"
+        class="tw-w-full"
+        (click)="validateEmail()"
       >
-        <ng-container *ngIf="!validatedEmail">
-          <div class="tw-mb-3">
-            <bit-form-field>
-              <bit-label>{{ "emailAddress" | i18n }}</bit-label>
-              <input
-                id="login_input_email"
-                bitInput
-                type="email"
-                formControlName="email"
-                appAutofocus
-                (keyup.enter)="validateEmail()"
-              />
-            </bit-form-field>
-          </div>
+        <span> {{ "continue" | i18n }} </span>
+      </button>
+    </div>
 
-          <div class="tw-mb-3 tw-flex tw-items-start">
-            <bit-form-control class="tw-mb-0">
-              <input type="checkbox" bitCheckbox formControlName="rememberEmail" />
-              <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
-            </bit-form-control>
-          </div>
+    <div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <p class="tw-mb-3">{{ "or" | i18n }}</p>
 
-          <div class="tw-mb-3">
-            <button
-              bitButton
-              type="button"
-              buttonType="primary"
-              class="tw-w-full"
-              [disabled]="form.loading"
-              (click)="validateEmail()"
-            >
-              <span> {{ "continue" | i18n }} </span>
-            </button>
-          </div>
+      <a
+        bitLink
+        block
+        linkType="primary"
+        routerLink="/login-with-passkey"
+        (mousedown)="$event.preventDefault()"
+      >
+        <span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
+      </a>
+    </div>
 
-          <div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
-            <p class="tw-mb-3">{{ "or" | i18n }}</p>
+    <hr />
 
-            <a
-              bitLink
-              block
-              linkType="primary"
-              routerLink="/login-with-passkey"
-              (mousedown)="$event.preventDefault()"
-            >
-              <span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
-            </a>
-          </div>
+    <p class="tw-m-0 tw-text-sm">
+      {{ "newAroundHere" | i18n }}
+      <!--mousedown event is used over click because it prevents the validation from firing  -->
+      <a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
+    </p>
+  </ng-container>
 
-          <hr />
+  <div [ngClass]="{ 'tw-hidden': !validatedEmail }">
+    <div class="tw-mb-6 tw-h-28">
+      <bit-form-field class="!tw-mb-1">
+        <bit-label>{{ "masterPass" | i18n }}</bit-label>
+        <input type="password" bitInput #masterPasswordInput formControlName="masterPassword" />
+        <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
+      </bit-form-field>
+      <a
+        class="-tw-mt-2"
+        routerLink="/hint"
+        (mousedown)="goToHint()"
+        (click)="setLoginEmailValues()"
+        >{{ "getMasterPasswordHint" | i18n }}</a
+      >
+    </div>
 
-          <p class="tw-m-0 tw-text-sm">
-            {{ "newAroundHere" | i18n }}
-            <!--mousedown event is used over click because it prevents the validation from firing  -->
-            <a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
-          </p>
-        </ng-container>
+    <div [hidden]="!showCaptcha()">
+      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
+    </div>
 
-        <div [ngClass]="{ 'tw-hidden': !validatedEmail }">
-          <div class="tw-mb-6 tw-h-28">
-            <bit-form-field class="!tw-mb-1">
-              <bit-label>{{ "masterPass" | i18n }}</bit-label>
-              <input
-                id="login_input_master-password"
-                type="password"
-                bitInput
-                #masterPasswordInput
-                formControlName="masterPassword"
-              />
-              <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
-            </bit-form-field>
-            <a
-              class="-tw-mt-2"
-              routerLink="/hint"
-              (mousedown)="goToHint()"
-              (click)="setLoginEmailValues()"
-              >{{ "getMasterPasswordHint" | i18n }}</a
-            >
-          </div>
+    <div class="tw-mb-3 tw-flex tw-space-x-4">
+      <button bitButton buttonType="primary" bitFormButton type="submit" [block]="true">
+        <span> {{ "loginWithMasterPassword" | i18n }} </span>
+      </button>
+    </div>
 
-          <div [hidden]="!showCaptcha()">
-            <iframe
-              id="hcaptcha_iframe"
-              height="80"
-              sandbox="allow-scripts allow-same-origin"
-            ></iframe>
-          </div>
+    <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
+      <button
+        bitButton
+        type="button"
+        [block]="true"
+        buttonType="secondary"
+        (click)="startAuthRequestLogin()"
+      >
+        <span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
+      </button>
+    </div>
 
-          <div class="tw-mb-3 tw-flex tw-space-x-4">
-            <button
-              bitButton
-              buttonType="primary"
-              type="submit"
-              [block]="true"
-              [loading]="form.loading"
-            >
-              <span> {{ "loginWithMasterPassword" | i18n }} </span>
-            </button>
-          </div>
+    <div class="tw-mb-3">
+      <a
+        routerLink="/sso"
+        [queryParams]="{ email: formGroup.value.email }"
+        (click)="saveEmailSettings()"
+        bitButton
+        buttonType="secondary"
+        class="tw-w-full"
+      >
+        <i class="bwi bwi-provider tw-mr-2"></i>
+        {{ "enterpriseSingleSignOn" | i18n }}
+      </a>
+    </div>
 
-          <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
-            <button
-              bitButton
-              type="button"
-              [block]="true"
-              buttonType="secondary"
-              (click)="startAuthRequestLogin()"
-            >
-              <span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
-            </button>
-          </div>
+    <hr />
 
-          <div class="tw-mb-3">
-            <a
-              routerLink="/sso"
-              [queryParams]="{ email: formGroup.value.email }"
-              (click)="saveEmailSettings()"
-              bitButton
-              buttonType="secondary"
-              class="tw-w-full"
-            >
-              <i class="bwi bwi-provider tw-mr-2"></i>
-              {{ "enterpriseSingleSignOn" | i18n }}
-            </a>
-          </div>
-
-          <hr />
-
-          <div class="tw-m-0 tw-text-sm">
-            <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
-            <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
-          </div>
-        </div>
-      </div>
+    <div class="tw-m-0 tw-text-sm">
+      <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
+      <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
     </div>
   </div>
 </form>
diff --git a/apps/web/src/app/auth/login/login.component.ts b/apps/web/src/app/auth/login/login.component.ts
index 51d46f46a42..1f174b7397a 100644
--- a/apps/web/src/app/auth/login/login.component.ts
+++ b/apps/web/src/app/auth/login/login.component.ts
@@ -43,7 +43,6 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
   enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
   policies: Policy[];
   showPasswordless = false;
-
   constructor(
     private acceptOrganizationInviteService: AcceptOrganizationInviteService,
     devicesApiService: DevicesApiServiceAbstraction,
@@ -92,7 +91,13 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     this.showPasswordless = flagEnabled("showPasswordless");
   }
+  submitForm = async (showToast = true) => {
+    return await this.submitFormHelper(showToast);
+  };
 
+  private async submitFormHelper(showToast: boolean) {
+    await super.submit(showToast);
+  }
   async ngOnInit() {
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 0a15e058696..eed8b7d281c 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -66,7 +66,6 @@ const routes: Routes = [
         children: [], // Children lets us have an empty component.
         canActivate: [redirectGuard()], // Redirects either to vault, login, or lock page.
       },
-      { path: "login", component: LoginComponent, canActivate: [UnauthGuard] },
       {
         path: "login-with-device",
         component: LoginViaAuthRequestComponent,
@@ -182,6 +181,24 @@ const routes: Routes = [
     path: "",
     component: AnonLayoutWrapperComponent,
     children: [
+      {
+        path: "login",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: LoginComponent,
+          },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+        data: {
+          pageTitle: "logIn",
+        },
+      },
       {
         path: "2fa",
         component: TwoFactorComponent,

From c726b91c1f8538b0114f9be6c9ea9da57319390f Mon Sep 17 00:00:00 2001
From: KiruthigaManivannan
 <162679756+KiruthigaManivannan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 19:34:43 +0530
Subject: [PATCH 07/18] AC-2409 Migrate Accept Provider Component (#9390)

* AC-2409 Migrate Accept Provider Component

* AC-2409 Replaced the loading scenario
---
 .../manage/accept-provider.component.html     | 67 +++++++++----------
 .../providers/providers-routing.module.ts     | 12 +++-
 2 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
index a5927cbc9ab..d8e6f030418 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
@@ -1,46 +1,41 @@
-<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
+<div class="tw-mt-5 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
-    <p class="text-center">
+    <img class="tw-mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="tw-text-center">
       <i
-        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </p>
   </div>
 </div>
-<div class="container" *ngIf="!loading && !authed">
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="lead text-center mb-4">{{ "joinProvider" | i18n }}</p>
-      <div class="card d-block">
-        <div class="card-body">
-          <p class="text-center">
-            {{ providerName }}
-            <strong class="d-block mt-2">{{ email }}</strong>
-          </p>
-          <p>{{ "joinProviderDesc" | i18n }}</p>
-          <hr />
-          <div class="d-flex">
-            <a
-              routerLink="/login"
-              [queryParams]="{ email: email }"
-              class="btn btn-primary btn-block"
-            >
-              {{ "logIn" | i18n }}
-            </a>
-            <a
-              routerLink="/register"
-              [queryParams]="{ email: email }"
-              class="btn btn-primary btn-block ml-2 mt-0"
-            >
-              {{ "createAccount" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
+<div *ngIf="!loading && !authed">
+  <p bitTypography="body1" class="tw-text-center">
+    {{ providerName }}
+    <span bitTypography="body1" class="tw-font-bold">{{ email }}</span>
+  </p>
+  <p bitTypography="body1">{{ "joinProviderDesc" | i18n }}</p>
+  <hr />
+  <div class="tw-flex tw-gap-2">
+    <a
+      bitButton
+      buttonType="primary"
+      routerLink="/login"
+      [queryParams]="{ email: email }"
+      [block]="true"
+    >
+      {{ "logIn" | i18n }}
+    </a>
+    <a
+      bitButton
+      buttonType="primary"
+      routerLink="/register"
+      [queryParams]="{ email: email }"
+      [block]="true"
+    >
+      {{ "createAccount" | i18n }}
+    </a>
   </div>
 </div>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
index 1f03ece9075..9a2859fcbfe 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { AuthGuard } from "@bitwarden/angular/auth/guards";
+import { AnonLayoutWrapperComponent } from "@bitwarden/auth/angular";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { ProvidersComponent } from "@bitwarden/web-vault/app/admin-console/providers/providers.component";
 import { FrontendLayoutComponent } from "@bitwarden/web-vault/app/layouts/frontend-layout.component";
@@ -48,10 +49,19 @@ const routes: Routes = [
         component: SetupProviderComponent,
         data: { titleId: "setupProvider" },
       },
+    ],
+  },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
       {
         path: "accept-provider",
         component: AcceptProviderComponent,
-        data: { titleId: "acceptProvider" },
+        data: {
+          pageTitle: "joinProvider",
+          titleId: "acceptProvider",
+        },
       },
     ],
   },

From dd5d01283e7bd259f682d2aadb23930538ed41ac Mon Sep 17 00:00:00 2001
From: KiruthigaManivannan
 <162679756+KiruthigaManivannan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 19:46:58 +0530
Subject: [PATCH 08/18] PM-4954 Migrate SSO Component (#9126)

* PM-4954 Migrate SSO Component

* PM-4954 Updated anon layout changes

* PM-4954 Updated oss routing module

* PM-4954 Addressed review comments

* PM-4954 - SSO Comp - adjust to use form control accessor.

* PM-4954 - SsoComp - update form control accessor to use type safe approach.

* PM-4954 - Move canActivate up a level

* PM-4954 - Consolidate route under AnonLayoutWrapperComponent path after merging in main.

---------

Co-authored-by: Jared Snider <jsnider@bitwarden.com>
Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
---
 apps/web/src/app/auth/sso.component.html | 68 +++++++-----------------
 apps/web/src/app/auth/sso.component.ts   | 24 ++++++---
 apps/web/src/app/oss-routing.module.ts   | 25 ++++++---
 3 files changed, 54 insertions(+), 63 deletions(-)

diff --git a/apps/web/src/app/auth/sso.component.html b/apps/web/src/app/auth/sso.component.html
index fb56cead245..59abc92e872 100644
--- a/apps/web/src/app/auth/sso.component.html
+++ b/apps/web/src/app/auth/sso.component.html
@@ -1,52 +1,22 @@
-<form
-  #form
-  (ngSubmit)="submit()"
-  class="container"
-  [appApiAction]="initiateSsoFormPromise"
-  ngNativeValidate
->
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <img class="logo mb-2 logo-themed" alt="Bitwarden" />
-      <div class="card d-block mt-4">
-        <div class="card-body" *ngIf="loggingIn">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          {{ "loading" | i18n }}
-        </div>
-        <div class="card-body" *ngIf="!loggingIn">
-          <p>{{ "ssoLogInWithOrgIdentifier" | i18n }}</p>
-          <div class="form-group">
-            <label for="identifier">{{ "ssoIdentifier" | i18n }}</label>
-            <input
-              id="identifier"
-              class="form-control"
-              type="text"
-              name="Identifier"
-              [(ngModel)]="identifier"
-              required
-              appAutofocus
-            />
-          </div>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
-            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-              {{ "cancel" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
+<form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-container">
+  <div *ngIf="loggingIn">
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    {{ "loading" | i18n }}
+  </div>
+  <div *ngIf="!loggingIn">
+    <p bitTypography="body1">{{ "ssoLogInWithOrgIdentifier" | i18n }}</p>
+    <bit-form-field>
+      <bit-label>{{ "ssoIdentifier" | i18n }}</bit-label>
+      <input bitInput type="text" formControlName="identifier" appAutofocus />
+    </bit-form-field>
+    <hr />
+    <div class="tw-flex tw-gap-2">
+      <button type="submit" bitButton bitFormButton buttonType="primary" [block]="true">
+        {{ "logIn" | i18n }}
+      </button>
+      <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
+        {{ "cancel" | i18n }}
+      </a>
     </div>
   </div>
 </form>
diff --git a/apps/web/src/app/auth/sso.component.ts b/apps/web/src/app/auth/sso.component.ts
index e120b2749f1..2b8f20ed424 100644
--- a/apps/web/src/app/auth/sso.component.ts
+++ b/apps/web/src/app/auth/sso.component.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -31,6 +32,14 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/ge
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class SsoComponent extends BaseSsoComponent {
+  protected formGroup = new FormGroup({
+    identifier: new FormControl(null, [Validators.required]),
+  });
+
+  get identifierFormControl() {
+    return this.formGroup.controls.identifier;
+  }
+
   constructor(
     ssoLoginService: SsoLoginServiceAbstraction,
     loginStrategyService: LoginStrategyServiceAbstraction,
@@ -82,7 +91,7 @@ export class SsoComponent extends BaseSsoComponent {
     this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
       if (qParams.identifier != null) {
         // SSO Org Identifier in query params takes precedence over claimed domains
-        this.identifier = qParams.identifier;
+        this.identifierFormControl.setValue(qParams.identifier);
       } else {
         // Note: this flow is written for web but both browser and desktop
         // redirect here on SSO button click.
@@ -96,7 +105,7 @@ export class SsoComponent extends BaseSsoComponent {
               await this.orgDomainApiService.getClaimedOrgDomainByEmail(qParams.email);
 
             if (response?.ssoAvailable) {
-              this.identifier = response.organizationIdentifier;
+              this.identifierFormControl.setValue(response.organizationIdentifier);
               await this.submit();
               return;
             }
@@ -110,7 +119,7 @@ export class SsoComponent extends BaseSsoComponent {
         // Fallback to state svc if domain is unclaimed
         const storedIdentifier = await this.ssoLoginService.getOrganizationSsoIdentifier();
         if (storedIdentifier != null) {
-          this.identifier = storedIdentifier;
+          this.identifierFormControl.setValue(storedIdentifier);
         }
       }
     });
@@ -131,13 +140,12 @@ export class SsoComponent extends BaseSsoComponent {
     }
   }
 
-  async submit() {
+  submit = async () => {
+    this.identifier = this.identifierFormControl.value;
     await this.ssoLoginService.setOrganizationSsoIdentifier(this.identifier);
     if (this.clientId === "browser") {
       document.cookie = `ssoHandOffMessage=${this.i18nService.t("ssoHandOff")};SameSite=strict`;
     }
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    super.submit();
-  }
+    await Object.getPrototypeOf(this).submit.call(this);
+  };
 }
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index eed8b7d281c..46930f92c94 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -97,12 +97,6 @@ const routes: Routes = [
         redirectTo: "register",
         pathMatch: "full",
       },
-      {
-        path: "sso",
-        component: SsoComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "enterpriseSingleSignOn" } satisfies DataProperties,
-      },
       {
         path: "set-password",
         component: SetPasswordComponent,
@@ -181,6 +175,25 @@ const routes: Routes = [
     path: "",
     component: AnonLayoutWrapperComponent,
     children: [
+      {
+        path: "sso",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: SsoComponent,
+            data: {
+              pageTitle: "enterpriseSingleSignOn",
+              titleId: "enterpriseSingleSignOn",
+            } satisfies DataProperties & AnonLayoutWrapperData,
+          },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+      },
       {
         path: "login",
         canActivate: [unauthGuardFn()],

From 623310075468b28820a44522d5fa4949cda83d1e Mon Sep 17 00:00:00 2001
From: Vince Grassia <593223+vgrassia@users.noreply.github.com>
Date: Wed, 12 Jun 2024 11:06:02 -0400
Subject: [PATCH 09/18] Remove Bump CLI Formula workflow (#9601)

---
 .github/workflows/brew-bump-cli.yml | 41 -----------------------------
 1 file changed, 41 deletions(-)
 delete mode 100644 .github/workflows/brew-bump-cli.yml

diff --git a/.github/workflows/brew-bump-cli.yml b/.github/workflows/brew-bump-cli.yml
deleted file mode 100644
index 33c6b7c368e..00000000000
--- a/.github/workflows/brew-bump-cli.yml
+++ /dev/null
@@ -1,41 +0,0 @@
----
-name: Bump CLI Formula
-
-on:
-  push:
-    tags:
-      - cli-v**
-  workflow_dispatch:
-
-defaults:
-  run:
-    shell: bash
-
-jobs:
-  update-desktop-cask:
-    name: Update Bitwarden CLI Formula
-    runs-on: macos-13
-    steps:
-      - name: Login to Azure
-        uses: Azure/login@e15b166166a8746d1a47596803bd8c1b595455cf # v1.6.0
-        with:
-          creds: ${{ secrets.AZURE_KV_CI_SERVICE_PRINCIPAL }}
-
-      - name: Retrieve secrets
-        id: retrieve-secrets
-        uses: bitwarden/gh-actions/get-keyvault-secrets@main
-        with:
-          keyvault: "bitwarden-ci"
-          secrets: "brew-bump-workflow-pat"
-
-      - name: Update Homebrew formula
-        uses: dawidd6/action-homebrew-bump-formula@baf2b60c51fc1f8453c884b0c61052668a71bd1d # v3.11.0
-        with:
-          # Required, custom GitHub access token with the 'public_repo' and 'workflow' scopes
-          token: ${{ steps.retrieve-secrets.outputs.brew-bump-workflow-pat }}
-          org: bitwarden
-          tap: Homebrew/homebrew-core
-          formula: bitwarden-cli
-          tag: ${{ github.ref }}
-          revision: ${{ github.sha }}
-          force: true

From a7912ad10ca1a2a11f2acba4cd86f32e2e5bed72 Mon Sep 17 00:00:00 2001
From: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
Date: Wed, 12 Jun 2024 11:22:46 -0400
Subject: [PATCH 10/18] Revert "Upload license dialog not closing bug fix
 (#9588)" (#9602)

This reverts commit bece0720863b875bb999c9477afab23c8f85f22b.
---
 .../shared/update-license-dialog.component.ts | 11 +-----
 .../shared/update-license.component.ts        | 36 +++++++++----------
 2 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/app/billing/shared/update-license-dialog.component.ts b/apps/web/src/app/billing/shared/update-license-dialog.component.ts
index 7338bb7aa6e..5f9a1e94bef 100644
--- a/apps/web/src/app/billing/shared/update-license-dialog.component.ts
+++ b/apps/web/src/app/billing/shared/update-license-dialog.component.ts
@@ -1,4 +1,3 @@
-import { DialogRef } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
@@ -24,16 +23,8 @@ export class UpdateLicenseDialogComponent extends UpdateLicenseComponent {
     platformUtilsService: PlatformUtilsService,
     organizationApiService: OrganizationApiServiceAbstraction,
     formBuilder: FormBuilder,
-    dialogRef: DialogRef<UpdateLicenseDialogResult>, // Add this line
   ) {
-    super(
-      apiService,
-      i18nService,
-      platformUtilsService,
-      organizationApiService,
-      formBuilder,
-      dialogRef,
-    );
+    super(apiService, i18nService, platformUtilsService, organizationApiService, formBuilder);
   }
   async submitLicense() {
     await this.submit();
diff --git a/apps/web/src/app/billing/shared/update-license.component.ts b/apps/web/src/app/billing/shared/update-license.component.ts
index 14ee8df680b..30b5983090b 100644
--- a/apps/web/src/app/billing/shared/update-license.component.ts
+++ b/apps/web/src/app/billing/shared/update-license.component.ts
@@ -1,4 +1,3 @@
-import { DialogRef } from "@angular/cdk/dialog";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
@@ -7,7 +6,6 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
-import { UpdateLicenseDialogResult } from "./update-license-dialog.component";
 @Component({
   selector: "app-update-license",
   templateUrl: "update-license.component.html",
@@ -30,7 +28,6 @@ export class UpdateLicenseComponent {
     private platformUtilsService: PlatformUtilsService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private formBuilder: FormBuilder,
-    private dialogRef: DialogRef<UpdateLicenseDialogResult>,
   ) {}
   protected setSelectedFile(event: Event) {
     const fileInputEl = <HTMLInputElement>event.target;
@@ -54,25 +51,24 @@ export class UpdateLicenseComponent {
     const fd = new FormData();
     fd.append("license", files);
 
-    // let updatePromise: Promise<void | unknown> = null;
-    // if (this.organizationId == null) {
-    //   updatePromise = this.apiService.postAccountLicense(fd);
-    // } else {
-    //   updatePromise = this.organizationApiService.updateLicense(this.organizationId, fd);
-    // }
+    let updatePromise: Promise<void | unknown> = null;
+    if (this.organizationId == null) {
+      updatePromise = this.apiService.postAccountLicense(fd);
+    } else {
+      updatePromise = this.organizationApiService.updateLicense(this.organizationId, fd);
+    }
 
-    // this.formPromise = updatePromise.then(() => {
-    //   return this.apiService.refreshIdentityToken();
-    // });
+    this.formPromise = updatePromise.then(() => {
+      return this.apiService.refreshIdentityToken();
+    });
 
-    // await this.formPromise;
-    // this.platformUtilsService.showToast(
-    //   "success",
-    //   null,
-    //   this.i18nService.t("licenseUploadSuccess"),
-    // );
-    // this.onUpdated.emit();
-    this.dialogRef.close(UpdateLicenseDialogResult.Updated);
+    await this.formPromise;
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("licenseUploadSuccess"),
+    );
+    this.onUpdated.emit();
   };
 
   cancel = () => {

From c1d3659a2865b2f9f96d22c982bf7108a19d3b6c Mon Sep 17 00:00:00 2001
From: Jake Fink <jfink@bitwarden.com>
Date: Wed, 12 Jun 2024 11:50:23 -0400
Subject: [PATCH 11/18] initialize subscription after setting initial values
 (#9579)

---
 .../settings/account-security.component.ts    | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

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 32cfbe416d1..10c9b2fb98d 100644
--- a/apps/browser/src/auth/popup/settings/account-security.component.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.ts
@@ -10,6 +10,7 @@ import {
   map,
   Observable,
   pairwise,
+  startWith,
   Subject,
   switchMap,
   takeUntil,
@@ -150,8 +151,25 @@ export class AccountSecurityComponent implements OnInit {
       timeout = VaultTimeoutStringType.OnRestart;
     }
 
+    const initialValues = {
+      vaultTimeout: timeout,
+      vaultTimeoutAction: await firstValueFrom(
+        this.vaultTimeoutSettingsService.getVaultTimeoutActionByUserId$(activeAccount.id),
+      ),
+      pin: await this.pinService.isPinSet(activeAccount.id),
+      biometric: await this.vaultTimeoutSettingsService.isBiometricLockSet(),
+      enableAutoBiometricsPrompt: await firstValueFrom(
+        this.biometricStateService.promptAutomatically$,
+      ),
+    };
+    this.form.patchValue(initialValues, { emitEvent: false });
+
+    this.supportsBiometric = await this.platformUtilsService.supportsBiometric();
+    this.showChangeMasterPass = await this.userVerificationService.hasMasterPassword();
+
     this.form.controls.vaultTimeout.valueChanges
       .pipe(
+        startWith(initialValues.vaultTimeout), // emit to init pairwise
         pairwise(),
         concatMap(async ([previousValue, newValue]) => {
           await this.saveVaultTimeout(previousValue, newValue);
@@ -162,6 +180,7 @@ export class AccountSecurityComponent implements OnInit {
 
     this.form.controls.vaultTimeoutAction.valueChanges
       .pipe(
+        startWith(initialValues.vaultTimeoutAction), // emit to init pairwise
         pairwise(),
         concatMap(async ([previousValue, newValue]) => {
           await this.saveVaultTimeoutAction(previousValue, newValue);
@@ -170,24 +189,6 @@ export class AccountSecurityComponent implements OnInit {
       )
       .subscribe();
 
-    const userId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
-
-    const initialValues = {
-      vaultTimeout: timeout,
-      vaultTimeoutAction: await firstValueFrom(
-        this.vaultTimeoutSettingsService.getVaultTimeoutActionByUserId$(activeAccount.id),
-      ),
-      pin: await this.pinService.isPinSet(userId),
-      biometric: await this.vaultTimeoutSettingsService.isBiometricLockSet(),
-      enableAutoBiometricsPrompt: await firstValueFrom(
-        this.biometricStateService.promptAutomatically$,
-      ),
-    };
-    this.form.patchValue(initialValues); // Emit event to initialize `pairwise` operator
-
-    this.supportsBiometric = await this.platformUtilsService.supportsBiometric();
-    this.showChangeMasterPass = await this.userVerificationService.hasMasterPassword();
-
     this.form.controls.pin.valueChanges
       .pipe(
         concatMap(async (value) => {

From 4d278240645d68cbbed620e4a6b68bd160d8e73b Mon Sep 17 00:00:00 2001
From: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
Date: Wed, 12 Jun 2024 12:04:48 -0400
Subject: [PATCH 12/18] Revert "[PM-5024] tax info component migration (#8199)"
 (#9603)

This reverts commit 99dc88688a09cbea8eeee26b9b95e78e6377c5c5.
---
 .../trial-billing-step.component.ts           |   4 -
 .../billing/individual/premium.component.ts   |   4 -
 .../organization-plans.component.ts           |   3 -
 .../shared/adjust-payment-dialog.component.ts |   3 -
 .../billing/shared/tax-info.component.html    | 414 +++++++++++++---
 .../app/billing/shared/tax-info.component.ts  | 468 +++---------------
 6 files changed, 419 insertions(+), 477 deletions(-)

diff --git a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
index dea74f364f8..bd138cad292 100644
--- a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
+++ b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
@@ -87,10 +87,6 @@ export class TrialBillingStepComponent implements OnInit {
   }
 
   async submit(): Promise<void> {
-    if (!this.taxInfoComponent.taxFormGroup.valid) {
-      this.taxInfoComponent.taxFormGroup.markAllAsTouched();
-    }
-
     this.formPromise = this.createOrganization();
 
     const organizationId = await this.formPromise;
diff --git a/apps/web/src/app/billing/individual/premium.component.ts b/apps/web/src/app/billing/individual/premium.component.ts
index 9449e5cd251..79a8bad75ae 100644
--- a/apps/web/src/app/billing/individual/premium.component.ts
+++ b/apps/web/src/app/billing/individual/premium.component.ts
@@ -64,11 +64,7 @@ export class PremiumComponent implements OnInit {
       return;
     }
   }
-
   submit = async () => {
-    if (!this.taxInfoComponent.taxFormGroup.valid) {
-      this.taxInfoComponent.taxFormGroup.markAllAsTouched();
-    }
     this.licenseForm.markAllAsTouched();
     this.addonForm.markAllAsTouched();
     if (this.selfHosted) {
diff --git a/apps/web/src/app/billing/organizations/organization-plans.component.ts b/apps/web/src/app/billing/organizations/organization-plans.component.ts
index bc49c1c33b3..2228ad9f3ad 100644
--- a/apps/web/src/app/billing/organizations/organization-plans.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-plans.component.ts
@@ -547,9 +547,6 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   }
 
   submit = async () => {
-    if (!this.taxComponent.taxFormGroup.valid) {
-      this.taxComponent.taxFormGroup.markAllAsTouched();
-    }
     if (this.singleOrgPolicyBlock) {
       return;
     }
diff --git a/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts b/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
index 3a850982cf8..8f16daeaa7b 100644
--- a/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
+++ b/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
@@ -55,9 +55,6 @@ export class AdjustPaymentDialogComponent {
   }
 
   submit = async () => {
-    if (!this.taxInfoComponent.taxFormGroup.valid) {
-      this.taxInfoComponent.taxFormGroup.markAllAsTouched();
-    }
     const request = new PaymentRequest();
     const response = this.paymentComponent.createPaymentToken().then((result) => {
       request.paymentToken = result[0];
diff --git a/apps/web/src/app/billing/shared/tax-info.component.html b/apps/web/src/app/billing/shared/tax-info.component.html
index c254ffa4a4d..30cca550d37 100644
--- a/apps/web/src/app/billing/shared/tax-info.component.html
+++ b/apps/web/src/app/billing/shared/tax-info.component.html
@@ -1,63 +1,363 @@
-<form [formGroup]="taxFormGroup">
-  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
-    <div [ngClass]="trialFlow ? 'tw-col-span-7' : 'tw-col-span-6'">
-      <bit-form-field>
-        <bit-label>{{ "country" | i18n }}</bit-label>
-        <bit-select formControlName="country" autocomplete="country">
-          <bit-option
-            *ngFor="let country of countryList"
-            [value]="country.value"
-            [disabled]="country.disabled"
-            [label]="country.name"
-          ></bit-option>
-        </bit-select>
-      </bit-form-field>
-    </div>
-    <div [ngClass]="trialFlow ? 'tw-col-span-5' : 'tw-col-span-3'">
-      <bit-form-field>
-        <bit-label>{{ "zipPostalCode" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="postalCode" autocomplete="postal-code" />
-      </bit-form-field>
-    </div>
-    <div class="tw-col-span-6" *ngIf="showTaxIdCheckbox">
-      <bit-form-control>
-        <input bitCheckbox type="checkbox" formControlName="includeTaxId" />
-        <bit-label>{{ "includeVAT" | i18n }}</bit-label>
-      </bit-form-control>
+<div class="row">
+  <div [ngClass]="trialFlow ? 'col-7' : 'col-6'">
+    <div class="form-group">
+      <label for="addressCountry">{{ "country" | i18n }}</label>
+      <select
+        id="addressCountry"
+        class="form-control"
+        [(ngModel)]="taxInfo.country"
+        required
+        name="addressCountry"
+        autocomplete="country"
+        (change)="changeCountry()"
+      >
+        <option value="">-- Select --</option>
+        <option value="US">United States</option>
+        <option value="CN">China</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+        <option value="CA">Canada</option>
+        <option value="GB">United Kingdom</option>
+        <option value="AU">Australia</option>
+        <option value="IN">India</option>
+        <option value="-" disabled></option>
+        <option value="AF">Afghanistan</option>
+        <option value="AX">Åland Islands</option>
+        <option value="AL">Albania</option>
+        <option value="DZ">Algeria</option>
+        <option value="AS">American Samoa</option>
+        <option value="AD">Andorra</option>
+        <option value="AO">Angola</option>
+        <option value="AI">Anguilla</option>
+        <option value="AQ">Antarctica</option>
+        <option value="AG">Antigua and Barbuda</option>
+        <option value="AR">Argentina</option>
+        <option value="AM">Armenia</option>
+        <option value="AW">Aruba</option>
+        <option value="AT">Austria</option>
+        <option value="AZ">Azerbaijan</option>
+        <option value="BS">Bahamas</option>
+        <option value="BH">Bahrain</option>
+        <option value="BD">Bangladesh</option>
+        <option value="BB">Barbados</option>
+        <option value="BY">Belarus</option>
+        <option value="BE">Belgium</option>
+        <option value="BZ">Belize</option>
+        <option value="BJ">Benin</option>
+        <option value="BM">Bermuda</option>
+        <option value="BT">Bhutan</option>
+        <option value="BO">Bolivia, Plurinational State of</option>
+        <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
+        <option value="BA">Bosnia and Herzegovina</option>
+        <option value="BW">Botswana</option>
+        <option value="BV">Bouvet Island</option>
+        <option value="BR">Brazil</option>
+        <option value="IO">British Indian Ocean Territory</option>
+        <option value="BN">Brunei Darussalam</option>
+        <option value="BG">Bulgaria</option>
+        <option value="BF">Burkina Faso</option>
+        <option value="BI">Burundi</option>
+        <option value="KH">Cambodia</option>
+        <option value="CM">Cameroon</option>
+        <option value="CV">Cape Verde</option>
+        <option value="KY">Cayman Islands</option>
+        <option value="CF">Central African Republic</option>
+        <option value="TD">Chad</option>
+        <option value="CL">Chile</option>
+        <option value="CX">Christmas Island</option>
+        <option value="CC">Cocos (Keeling) Islands</option>
+        <option value="CO">Colombia</option>
+        <option value="KM">Comoros</option>
+        <option value="CG">Congo</option>
+        <option value="CD">Congo, the Democratic Republic of the</option>
+        <option value="CK">Cook Islands</option>
+        <option value="CR">Costa Rica</option>
+        <option value="CI">Côte d'Ivoire</option>
+        <option value="HR">Croatia</option>
+        <option value="CU">Cuba</option>
+        <option value="CW">Curaçao</option>
+        <option value="CY">Cyprus</option>
+        <option value="CZ">Czech Republic</option>
+        <option value="DK">Denmark</option>
+        <option value="DJ">Djibouti</option>
+        <option value="DM">Dominica</option>
+        <option value="DO">Dominican Republic</option>
+        <option value="EC">Ecuador</option>
+        <option value="EG">Egypt</option>
+        <option value="SV">El Salvador</option>
+        <option value="GQ">Equatorial Guinea</option>
+        <option value="ER">Eritrea</option>
+        <option value="EE">Estonia</option>
+        <option value="ET">Ethiopia</option>
+        <option value="FK">Falkland Islands (Malvinas)</option>
+        <option value="FO">Faroe Islands</option>
+        <option value="FJ">Fiji</option>
+        <option value="FI">Finland</option>
+        <option value="GF">French Guiana</option>
+        <option value="PF">French Polynesia</option>
+        <option value="TF">French Southern Territories</option>
+        <option value="GA">Gabon</option>
+        <option value="GM">Gambia</option>
+        <option value="GE">Georgia</option>
+        <option value="GH">Ghana</option>
+        <option value="GI">Gibraltar</option>
+        <option value="GR">Greece</option>
+        <option value="GL">Greenland</option>
+        <option value="GD">Grenada</option>
+        <option value="GP">Guadeloupe</option>
+        <option value="GU">Guam</option>
+        <option value="GT">Guatemala</option>
+        <option value="GG">Guernsey</option>
+        <option value="GN">Guinea</option>
+        <option value="GW">Guinea-Bissau</option>
+        <option value="GY">Guyana</option>
+        <option value="HT">Haiti</option>
+        <option value="HM">Heard Island and McDonald Islands</option>
+        <option value="VA">Holy See (Vatican City State)</option>
+        <option value="HN">Honduras</option>
+        <option value="HK">Hong Kong</option>
+        <option value="HU">Hungary</option>
+        <option value="IS">Iceland</option>
+        <option value="ID">Indonesia</option>
+        <option value="IR">Iran, Islamic Republic of</option>
+        <option value="IQ">Iraq</option>
+        <option value="IE">Ireland</option>
+        <option value="IM">Isle of Man</option>
+        <option value="IL">Israel</option>
+        <option value="IT">Italy</option>
+        <option value="JM">Jamaica</option>
+        <option value="JP">Japan</option>
+        <option value="JE">Jersey</option>
+        <option value="JO">Jordan</option>
+        <option value="KZ">Kazakhstan</option>
+        <option value="KE">Kenya</option>
+        <option value="KI">Kiribati</option>
+        <option value="KP">Korea, Democratic People's Republic of</option>
+        <option value="KR">Korea, Republic of</option>
+        <option value="KW">Kuwait</option>
+        <option value="KG">Kyrgyzstan</option>
+        <option value="LA">Lao People's Democratic Republic</option>
+        <option value="LV">Latvia</option>
+        <option value="LB">Lebanon</option>
+        <option value="LS">Lesotho</option>
+        <option value="LR">Liberia</option>
+        <option value="LY">Libya</option>
+        <option value="LI">Liechtenstein</option>
+        <option value="LT">Lithuania</option>
+        <option value="LU">Luxembourg</option>
+        <option value="MO">Macao</option>
+        <option value="MK">Macedonia, the former Yugoslav Republic of</option>
+        <option value="MG">Madagascar</option>
+        <option value="MW">Malawi</option>
+        <option value="MY">Malaysia</option>
+        <option value="MV">Maldives</option>
+        <option value="ML">Mali</option>
+        <option value="MT">Malta</option>
+        <option value="MH">Marshall Islands</option>
+        <option value="MQ">Martinique</option>
+        <option value="MR">Mauritania</option>
+        <option value="MU">Mauritius</option>
+        <option value="YT">Mayotte</option>
+        <option value="MX">Mexico</option>
+        <option value="FM">Micronesia, Federated States of</option>
+        <option value="MD">Moldova, Republic of</option>
+        <option value="MC">Monaco</option>
+        <option value="MN">Mongolia</option>
+        <option value="ME">Montenegro</option>
+        <option value="MS">Montserrat</option>
+        <option value="MA">Morocco</option>
+        <option value="MZ">Mozambique</option>
+        <option value="MM">Myanmar</option>
+        <option value="NA">Namibia</option>
+        <option value="NR">Nauru</option>
+        <option value="NP">Nepal</option>
+        <option value="NL">Netherlands</option>
+        <option value="NC">New Caledonia</option>
+        <option value="NZ">New Zealand</option>
+        <option value="NI">Nicaragua</option>
+        <option value="NE">Niger</option>
+        <option value="NG">Nigeria</option>
+        <option value="NU">Niue</option>
+        <option value="NF">Norfolk Island</option>
+        <option value="MP">Northern Mariana Islands</option>
+        <option value="NO">Norway</option>
+        <option value="OM">Oman</option>
+        <option value="PK">Pakistan</option>
+        <option value="PW">Palau</option>
+        <option value="PS">Palestinian Territory, Occupied</option>
+        <option value="PA">Panama</option>
+        <option value="PG">Papua New Guinea</option>
+        <option value="PY">Paraguay</option>
+        <option value="PE">Peru</option>
+        <option value="PH">Philippines</option>
+        <option value="PN">Pitcairn</option>
+        <option value="PL">Poland</option>
+        <option value="PT">Portugal</option>
+        <option value="PR">Puerto Rico</option>
+        <option value="QA">Qatar</option>
+        <option value="RE">Réunion</option>
+        <option value="RO">Romania</option>
+        <option value="RU">Russian Federation</option>
+        <option value="RW">Rwanda</option>
+        <option value="BL">Saint Barthélemy</option>
+        <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
+        <option value="KN">Saint Kitts and Nevis</option>
+        <option value="LC">Saint Lucia</option>
+        <option value="MF">Saint Martin (French part)</option>
+        <option value="PM">Saint Pierre and Miquelon</option>
+        <option value="VC">Saint Vincent and the Grenadines</option>
+        <option value="WS">Samoa</option>
+        <option value="SM">San Marino</option>
+        <option value="ST">Sao Tome and Principe</option>
+        <option value="SA">Saudi Arabia</option>
+        <option value="SN">Senegal</option>
+        <option value="RS">Serbia</option>
+        <option value="SC">Seychelles</option>
+        <option value="SL">Sierra Leone</option>
+        <option value="SG">Singapore</option>
+        <option value="SX">Sint Maarten (Dutch part)</option>
+        <option value="SK">Slovakia</option>
+        <option value="SI">Slovenia</option>
+        <option value="SB">Solomon Islands</option>
+        <option value="SO">Somalia</option>
+        <option value="ZA">South Africa</option>
+        <option value="GS">South Georgia and the South Sandwich Islands</option>
+        <option value="SS">South Sudan</option>
+        <option value="ES">Spain</option>
+        <option value="LK">Sri Lanka</option>
+        <option value="SD">Sudan</option>
+        <option value="SR">Suriname</option>
+        <option value="SJ">Svalbard and Jan Mayen</option>
+        <option value="SZ">Swaziland</option>
+        <option value="SE">Sweden</option>
+        <option value="CH">Switzerland</option>
+        <option value="SY">Syrian Arab Republic</option>
+        <option value="TW">Taiwan</option>
+        <option value="TJ">Tajikistan</option>
+        <option value="TZ">Tanzania, United Republic of</option>
+        <option value="TH">Thailand</option>
+        <option value="TL">Timor-Leste</option>
+        <option value="TG">Togo</option>
+        <option value="TK">Tokelau</option>
+        <option value="TO">Tonga</option>
+        <option value="TT">Trinidad and Tobago</option>
+        <option value="TN">Tunisia</option>
+        <option value="TR">Turkey</option>
+        <option value="TM">Turkmenistan</option>
+        <option value="TC">Turks and Caicos Islands</option>
+        <option value="TV">Tuvalu</option>
+        <option value="UG">Uganda</option>
+        <option value="UA">Ukraine</option>
+        <option value="AE">United Arab Emirates</option>
+        <option value="UM">United States Minor Outlying Islands</option>
+        <option value="UY">Uruguay</option>
+        <option value="UZ">Uzbekistan</option>
+        <option value="VU">Vanuatu</option>
+        <option value="VE">Venezuela, Bolivarian Republic of</option>
+        <option value="VN">Viet Nam</option>
+        <option value="VG">Virgin Islands, British</option>
+        <option value="VI">Virgin Islands, U.S.</option>
+        <option value="WF">Wallis and Futuna</option>
+        <option value="EH">Western Sahara</option>
+        <option value="YE">Yemen</option>
+        <option value="ZM">Zambia</option>
+        <option value="ZW">Zimbabwe</option>
+      </select>
     </div>
   </div>
-  <div class="tw-grid tw-grid-cols-12 tw-gap-4" *ngIf="showTaxIdFields">
-    <div class="tw-col-span-6">
-      <bit-form-field>
-        <bit-label>{{ "taxIdNumber" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="taxId" />
-      </bit-form-field>
+  <div [ngClass]="trialFlow ? 'col-5' : 'col-3'">
+    <div class="form-group">
+      <label for="addressPostalCode">{{ "zipPostalCode" | i18n }}</label>
+      <input
+        id="addressPostalCode"
+        class="form-control"
+        type="text"
+        name="addressPostalCode"
+        [(ngModel)]="taxInfo.postalCode"
+        [required]="taxInfo.country === 'US'"
+        autocomplete="postal-code"
+      />
     </div>
   </div>
-  <div class="tw-grid tw-grid-cols-12 tw-gap-4" *ngIf="showTaxIdFields">
-    <div class="tw-col-span-6">
-      <bit-form-field>
-        <bit-label>{{ "address1" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="line1" autocomplete="address-line1" />
-      </bit-form-field>
-    </div>
-    <div class="tw-col-span-6">
-      <bit-form-field>
-        <bit-label>{{ "address2" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="line2" autocomplete="address-line2" />
-      </bit-form-field>
-    </div>
-    <div class="tw-col-span-6">
-      <bit-form-field>
-        <bit-label for="addressCity">{{ "cityTown" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="city" autocomplete="address-level2" />
-      </bit-form-field>
-    </div>
-    <div class="tw-col-span-6">
-      <bit-form-field>
-        <bit-label>{{ "stateProvince" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="state" autocomplete="address-level1" />
-      </bit-form-field>
+  <div class="col-6" *ngIf="showTaxIdCheckbox">
+    <div class="form-group form-check">
+      <input
+        class="form-check-input"
+        id="addressIncludeTaxId"
+        name="addressIncludeTaxId"
+        type="checkbox"
+        [(ngModel)]="taxInfo.includeTaxId"
+      />
+      <label class="form-check-label" for="addressIncludeTaxId">{{ "includeVAT" | i18n }}</label>
     </div>
   </div>
-</form>
+</div>
+<div class="row" *ngIf="showTaxIdFields">
+  <div class="col-6">
+    <div class="form-group">
+      <label for="taxId">{{ "taxIdNumber" | i18n }}</label>
+      <input
+        id="taxId"
+        class="form-control"
+        type="text"
+        name="taxId"
+        [(ngModel)]="taxInfo.taxId"
+        [required]="taxInfo.includeTaxId"
+      />
+    </div>
+  </div>
+</div>
+<div class="row" *ngIf="showTaxIdFields">
+  <div class="col-6">
+    <div class="form-group">
+      <label for="addressLine1">{{ "address1" | i18n }}</label>
+      <input
+        id="addressLine1"
+        class="form-control"
+        type="text"
+        name="addressLine1"
+        [(ngModel)]="taxInfo.line1"
+        autocomplete="address-line1"
+      />
+    </div>
+  </div>
+  <div class="col-6">
+    <div class="form-group">
+      <label for="addressLine2">{{ "address2" | i18n }}</label>
+      <input
+        id="addressLine2"
+        class="form-control"
+        type="text"
+        name="addressLine2"
+        [(ngModel)]="taxInfo.line2"
+        autocomplete="address-line2"
+      />
+    </div>
+  </div>
+  <div class="col-6">
+    <div class="form-group">
+      <label for="addressCity">{{ "cityTown" | i18n }}</label>
+      <input
+        id="addressCity"
+        class="form-control"
+        type="text"
+        name="addressCity"
+        [(ngModel)]="taxInfo.city"
+        autocomplete="address-level2"
+      />
+    </div>
+  </div>
+  <div class="col-6">
+    <div class="form-group">
+      <label for="addressState">{{ "stateProvince" | i18n }}</label>
+      <input
+        id="addressState"
+        class="form-control"
+        type="text"
+        name="addressState"
+        [(ngModel)]="taxInfo.state"
+        autocomplete="address-level1"
+      />
+    </div>
+  </div>
+</div>
diff --git a/apps/web/src/app/billing/shared/tax-info.component.ts b/apps/web/src/app/billing/shared/tax-info.component.ts
index f50a82d6edf..a704c86eb51 100644
--- a/apps/web/src/app/billing/shared/tax-info.component.ts
+++ b/apps/web/src/app/billing/shared/tax-info.component.ts
@@ -1,7 +1,5 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
-import { Subject, takeUntil } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -17,11 +15,6 @@ type TaxInfoView = Omit<TaxInfoResponse, "taxIdType"> & {
   includeTaxId: boolean;
   [key: string]: unknown;
 };
-type CountryList = {
-  name: string;
-  value: string;
-  disabled: boolean;
-};
 
 @Component({
   selector: "app-tax-info",
@@ -33,18 +26,6 @@ type CountryList = {
 export class TaxInfoComponent {
   @Input() trialFlow = false;
   @Output() onCountryChanged = new EventEmitter();
-  private destroy$ = new Subject<void>();
-
-  taxFormGroup = new FormGroup({
-    country: new FormControl(null, [Validators.required]),
-    postalCode: new FormControl(null),
-    includeTaxId: new FormControl(null),
-    taxId: new FormControl(null),
-    line1: new FormControl(null),
-    line2: new FormControl(null),
-    city: new FormControl(null),
-    state: new FormControl(null),
-  });
 
   loading = true;
   organizationId: string;
@@ -59,261 +40,20 @@ export class TaxInfoComponent {
     country: "US",
     includeTaxId: false,
   };
-  countryList: CountryList[] = [
-    { name: "-- Select --", value: "", disabled: false },
-    { name: "United States", value: "US", disabled: false },
-    { name: "China", value: "CN", disabled: false },
-    { name: "France", value: "FR", disabled: false },
-    { name: "Germany", value: "DE", disabled: false },
-    { name: "Canada", value: "CA", disabled: false },
-    { name: "United Kingdom", value: "GB", disabled: false },
-    { name: "Australia", value: "AU", disabled: false },
-    { name: "India", value: "IN", disabled: false },
-    { name: "", value: "-", disabled: true },
-    { name: "Afghanistan", value: "AF", disabled: false },
-    { name: "Åland Islands", value: "AX", disabled: false },
-    { name: "Albania", value: "AL", disabled: false },
-    { name: "Algeria", value: "DZ", disabled: false },
-    { name: "American Samoa", value: "AS", disabled: false },
-    { name: "Andorra", value: "AD", disabled: false },
-    { name: "Angola", value: "AO", disabled: false },
-    { name: "Anguilla", value: "AI", disabled: false },
-    { name: "Antarctica", value: "AQ", disabled: false },
-    { name: "Antigua and Barbuda", value: "AG", disabled: false },
-    { name: "Argentina", value: "AR", disabled: false },
-    { name: "Armenia", value: "AM", disabled: false },
-    { name: "Aruba", value: "AW", disabled: false },
-    { name: "Austria", value: "AT", disabled: false },
-    { name: "Azerbaijan", value: "AZ", disabled: false },
-    { name: "Bahamas", value: "BS", disabled: false },
-    { name: "Bahrain", value: "BH", disabled: false },
-    { name: "Bangladesh", value: "BD", disabled: false },
-    { name: "Barbados", value: "BB", disabled: false },
-    { name: "Belarus", value: "BY", disabled: false },
-    { name: "Belgium", value: "BE", disabled: false },
-    { name: "Belize", value: "BZ", disabled: false },
-    { name: "Benin", value: "BJ", disabled: false },
-    { name: "Bermuda", value: "BM", disabled: false },
-    { name: "Bhutan", value: "BT", disabled: false },
-    { name: "Bolivia, Plurinational State of", value: "BO", disabled: false },
-    { name: "Bonaire, Sint Eustatius and Saba", value: "BQ", disabled: false },
-    { name: "Bosnia and Herzegovina", value: "BA", disabled: false },
-    { name: "Botswana", value: "BW", disabled: false },
-    { name: "Bouvet Island", value: "BV", disabled: false },
-    { name: "Brazil", value: "BR", disabled: false },
-    { name: "British Indian Ocean Territory", value: "IO", disabled: false },
-    { name: "Brunei Darussalam", value: "BN", disabled: false },
-    { name: "Bulgaria", value: "BG", disabled: false },
-    { name: "Burkina Faso", value: "BF", disabled: false },
-    { name: "Burundi", value: "BI", disabled: false },
-    { name: "Cambodia", value: "KH", disabled: false },
-    { name: "Cameroon", value: "CM", disabled: false },
-    { name: "Cape Verde", value: "CV", disabled: false },
-    { name: "Cayman Islands", value: "KY", disabled: false },
-    { name: "Central African Republic", value: "CF", disabled: false },
-    { name: "Chad", value: "TD", disabled: false },
-    { name: "Chile", value: "CL", disabled: false },
-    { name: "Christmas Island", value: "CX", disabled: false },
-    { name: "Cocos (Keeling) Islands", value: "CC", disabled: false },
-    { name: "Colombia", value: "CO", disabled: false },
-    { name: "Comoros", value: "KM", disabled: false },
-    { name: "Congo", value: "CG", disabled: false },
-    { name: "Congo, the Democratic Republic of the", value: "CD", disabled: false },
-    { name: "Cook Islands", value: "CK", disabled: false },
-    { name: "Costa Rica", value: "CR", disabled: false },
-    { name: "Côte d'Ivoire", value: "CI", disabled: false },
-    { name: "Croatia", value: "HR", disabled: false },
-    { name: "Cuba", value: "CU", disabled: false },
-    { name: "Curaçao", value: "CW", disabled: false },
-    { name: "Cyprus", value: "CY", disabled: false },
-    { name: "Czech Republic", value: "CZ", disabled: false },
-    { name: "Denmark", value: "DK", disabled: false },
-    { name: "Djibouti", value: "DJ", disabled: false },
-    { name: "Dominica", value: "DM", disabled: false },
-    { name: "Dominican Republic", value: "DO", disabled: false },
-    { name: "Ecuador", value: "EC", disabled: false },
-    { name: "Egypt", value: "EG", disabled: false },
-    { name: "El Salvador", value: "SV", disabled: false },
-    { name: "Equatorial Guinea", value: "GQ", disabled: false },
-    { name: "Eritrea", value: "ER", disabled: false },
-    { name: "Estonia", value: "EE", disabled: false },
-    { name: "Ethiopia", value: "ET", disabled: false },
-    { name: "Falkland Islands (Malvinas)", value: "FK", disabled: false },
-    { name: "Faroe Islands", value: "FO", disabled: false },
-    { name: "Fiji", value: "FJ", disabled: false },
-    { name: "Finland", value: "FI", disabled: false },
-    { name: "French Guiana", value: "GF", disabled: false },
-    { name: "French Polynesia", value: "PF", disabled: false },
-    { name: "French Southern Territories", value: "TF", disabled: false },
-    { name: "Gabon", value: "GA", disabled: false },
-    { name: "Gambia", value: "GM", disabled: false },
-    { name: "Georgia", value: "GE", disabled: false },
-    { name: "Ghana", value: "GH", disabled: false },
-    { name: "Gibraltar", value: "GI", disabled: false },
-    { name: "Greece", value: "GR", disabled: false },
-    { name: "Greenland", value: "GL", disabled: false },
-    { name: "Grenada", value: "GD", disabled: false },
-    { name: "Guadeloupe", value: "GP", disabled: false },
-    { name: "Guam", value: "GU", disabled: false },
-    { name: "Guatemala", value: "GT", disabled: false },
-    { name: "Guernsey", value: "GG", disabled: false },
-    { name: "Guinea", value: "GN", disabled: false },
-    { name: "Guinea-Bissau", value: "GW", disabled: false },
-    { name: "Guyana", value: "GY", disabled: false },
-    { name: "Haiti", value: "HT", disabled: false },
-    { name: "Heard Island and McDonald Islands", value: "HM", disabled: false },
-    { name: "Holy See (Vatican City State)", value: "VA", disabled: false },
-    { name: "Honduras", value: "HN", disabled: false },
-    { name: "Hong Kong", value: "HK", disabled: false },
-    { name: "Hungary", value: "HU", disabled: false },
-    { name: "Iceland", value: "IS", disabled: false },
-    { name: "Indonesia", value: "ID", disabled: false },
-    { name: "Iran, Islamic Republic of", value: "IR", disabled: false },
-    { name: "Iraq", value: "IQ", disabled: false },
-    { name: "Ireland", value: "IE", disabled: false },
-    { name: "Isle of Man", value: "IM", disabled: false },
-    { name: "Israel", value: "IL", disabled: false },
-    { name: "Italy", value: "IT", disabled: false },
-    { name: "Jamaica", value: "JM", disabled: false },
-    { name: "Japan", value: "JP", disabled: false },
-    { name: "Jersey", value: "JE", disabled: false },
-    { name: "Jordan", value: "JO", disabled: false },
-    { name: "Kazakhstan", value: "KZ", disabled: false },
-    { name: "Kenya", value: "KE", disabled: false },
-    { name: "Kiribati", value: "KI", disabled: false },
-    { name: "Korea, Democratic People's Republic of", value: "KP", disabled: false },
-    { name: "Korea, Republic of", value: "KR", disabled: false },
-    { name: "Kuwait", value: "KW", disabled: false },
-    { name: "Kyrgyzstan", value: "KG", disabled: false },
-    { name: "Lao People's Democratic Republic", value: "LA", disabled: false },
-    { name: "Latvia", value: "LV", disabled: false },
-    { name: "Lebanon", value: "LB", disabled: false },
-    { name: "Lesotho", value: "LS", disabled: false },
-    { name: "Liberia", value: "LR", disabled: false },
-    { name: "Libya", value: "LY", disabled: false },
-    { name: "Liechtenstein", value: "LI", disabled: false },
-    { name: "Lithuania", value: "LT", disabled: false },
-    { name: "Luxembourg", value: "LU", disabled: false },
-    { name: "Macao", value: "MO", disabled: false },
-    { name: "Macedonia, the former Yugoslav Republic of", value: "MK", disabled: false },
-    { name: "Madagascar", value: "MG", disabled: false },
-    { name: "Malawi", value: "MW", disabled: false },
-    { name: "Malaysia", value: "MY", disabled: false },
-    { name: "Maldives", value: "MV", disabled: false },
-    { name: "Mali", value: "ML", disabled: false },
-    { name: "Malta", value: "MT", disabled: false },
-    { name: "Marshall Islands", value: "MH", disabled: false },
-    { name: "Martinique", value: "MQ", disabled: false },
-    { name: "Mauritania", value: "MR", disabled: false },
-    { name: "Mauritius", value: "MU", disabled: false },
-    { name: "Mayotte", value: "YT", disabled: false },
-    { name: "Mexico", value: "MX", disabled: false },
-    { name: "Micronesia, Federated States of", value: "FM", disabled: false },
-    { name: "Moldova, Republic of", value: "MD", disabled: false },
-    { name: "Monaco", value: "MC", disabled: false },
-    { name: "Mongolia", value: "MN", disabled: false },
-    { name: "Montenegro", value: "ME", disabled: false },
-    { name: "Montserrat", value: "MS", disabled: false },
-    { name: "Morocco", value: "MA", disabled: false },
-    { name: "Mozambique", value: "MZ", disabled: false },
-    { name: "Myanmar", value: "MM", disabled: false },
-    { name: "Namibia", value: "NA", disabled: false },
-    { name: "Nauru", value: "NR", disabled: false },
-    { name: "Nepal", value: "NP", disabled: false },
-    { name: "Netherlands", value: "NL", disabled: false },
-    { name: "New Caledonia", value: "NC", disabled: false },
-    { name: "New Zealand", value: "NZ", disabled: false },
-    { name: "Nicaragua", value: "NI", disabled: false },
-    { name: "Niger", value: "NE", disabled: false },
-    { name: "Nigeria", value: "NG", disabled: false },
-    { name: "Niue", value: "NU", disabled: false },
-    { name: "Norfolk Island", value: "NF", disabled: false },
-    { name: "Northern Mariana Islands", value: "MP", disabled: false },
-    { name: "Norway", value: "NO", disabled: false },
-    { name: "Oman", value: "OM", disabled: false },
-    { name: "Pakistan", value: "PK", disabled: false },
-    { name: "Palau", value: "PW", disabled: false },
-    { name: "Palestinian Territory, Occupied", value: "PS", disabled: false },
-    { name: "Panama", value: "PA", disabled: false },
-    { name: "Papua New Guinea", value: "PG", disabled: false },
-    { name: "Paraguay", value: "PY", disabled: false },
-    { name: "Peru", value: "PE", disabled: false },
-    { name: "Philippines", value: "PH", disabled: false },
-    { name: "Pitcairn", value: "PN", disabled: false },
-    { name: "Poland", value: "PL", disabled: false },
-    { name: "Portugal", value: "PT", disabled: false },
-    { name: "Puerto Rico", value: "PR", disabled: false },
-    { name: "Qatar", value: "QA", disabled: false },
-    { name: "Réunion", value: "RE", disabled: false },
-    { name: "Romania", value: "RO", disabled: false },
-    { name: "Russian Federation", value: "RU", disabled: false },
-    { name: "Rwanda", value: "RW", disabled: false },
-    { name: "Saint Barthélemy", value: "BL", disabled: false },
-    { name: "Saint Helena, Ascension and Tristan da Cunha", value: "SH", disabled: false },
-    { name: "Saint Kitts and Nevis", value: "KN", disabled: false },
-    { name: "Saint Lucia", value: "LC", disabled: false },
-    { name: "Saint Martin (French part)", value: "MF", disabled: false },
-    { name: "Saint Pierre and Miquelon", value: "PM", disabled: false },
-    { name: "Saint Vincent and the Grenadines", value: "VC", disabled: false },
-    { name: "Samoa", value: "WS", disabled: false },
-    { name: "San Marino", value: "SM", disabled: false },
-    { name: "Sao Tome and Principe", value: "ST", disabled: false },
-    { name: "Saudi Arabia", value: "SA", disabled: false },
-    { name: "Senegal", value: "SN", disabled: false },
-    { name: "Serbia", value: "RS", disabled: false },
-    { name: "Seychelles", value: "SC", disabled: false },
-    { name: "Sierra Leone", value: "SL", disabled: false },
-    { name: "Singapore", value: "SG", disabled: false },
-    { name: "Sint Maarten (Dutch part)", value: "SX", disabled: false },
-    { name: "Slovakia", value: "SK", disabled: false },
-    { name: "Slovenia", value: "SI", disabled: false },
-    { name: "Solomon Islands", value: "SB", disabled: false },
-    { name: "Somalia", value: "SO", disabled: false },
-    { name: "South Africa", value: "ZA", disabled: false },
-    { name: "South Georgia and the South Sandwich Islands", value: "GS", disabled: false },
-    { name: "South Sudan", value: "SS", disabled: false },
-    { name: "Spain", value: "ES", disabled: false },
-    { name: "Sri Lanka", value: "LK", disabled: false },
-    { name: "Sudan", value: "SD", disabled: false },
-    { name: "Suriname", value: "SR", disabled: false },
-    { name: "Svalbard and Jan Mayen", value: "SJ", disabled: false },
-    { name: "Swaziland", value: "SZ", disabled: false },
-    { name: "Sweden", value: "SE", disabled: false },
-    { name: "Switzerland", value: "CH", disabled: false },
-    { name: "Syrian Arab Republic", value: "SY", disabled: false },
-    { name: "Taiwan", value: "TW", disabled: false },
-    { name: "Tajikistan", value: "TJ", disabled: false },
-    { name: "Tanzania, United Republic of", value: "TZ", disabled: false },
-    { name: "Thailand", value: "TH", disabled: false },
-    { name: "Timor-Leste", value: "TL", disabled: false },
-    { name: "Togo", value: "TG", disabled: false },
-    { name: "Tokelau", value: "TK", disabled: false },
-    { name: "Tonga", value: "TO", disabled: false },
-    { name: "Trinidad and Tobago", value: "TT", disabled: false },
-    { name: "Tunisia", value: "TN", disabled: false },
-    { name: "Turkey", value: "TR", disabled: false },
-    { name: "Turkmenistan", value: "TM", disabled: false },
-    { name: "Turks and Caicos Islands", value: "TC", disabled: false },
-    { name: "Tuvalu", value: "TV", disabled: false },
-    { name: "Uganda", value: "UG", disabled: false },
-    { name: "Ukraine", value: "UA", disabled: false },
-    { name: "United Arab Emirates", value: "AE", disabled: false },
-    { name: "United States Minor Outlying Islands", value: "UM", disabled: false },
-    { name: "Uruguay", value: "UY", disabled: false },
-    { name: "Uzbekistan", value: "UZ", disabled: false },
-    { name: "Vanuatu", value: "VU", disabled: false },
-    { name: "Venezuela, Bolivarian Republic of", value: "VE", disabled: false },
-    { name: "Viet Nam", value: "VN", disabled: false },
-    { name: "Virgin Islands, British", value: "VG", disabled: false },
-    { name: "Virgin Islands, U.S.", value: "VI", disabled: false },
-    { name: "Wallis and Futuna", value: "WF", disabled: false },
-    { name: "Western Sahara", value: "EH", disabled: false },
-    { name: "Yemen", value: "YE", disabled: false },
-    { name: "Zambia", value: "ZM", disabled: false },
-    { name: "Zimbabwe", value: "ZW", disabled: false },
-  ];
+
   taxRates: TaxRateResponse[];
 
+  private pristine: TaxInfoView = {
+    taxId: null,
+    line1: null,
+    line2: null,
+    city: null,
+    state: null,
+    postalCode: null,
+    country: "US",
+    includeTaxId: false,
+  };
+
   constructor(
     private apiService: ApiService,
     private route: ActivatedRoute,
@@ -321,70 +61,6 @@ export class TaxInfoComponent {
     private organizationApiService: OrganizationApiServiceAbstraction,
   ) {}
 
-  get country(): string {
-    return this.taxFormGroup.get("country").value;
-  }
-
-  set country(country: string) {
-    this.taxFormGroup.get("country").setValue(country);
-  }
-
-  get postalCode(): string {
-    return this.taxFormGroup.get("postalCode").value;
-  }
-
-  set postalCode(postalCode: string) {
-    this.taxFormGroup.get("postalCode").setValue(postalCode);
-  }
-
-  get includeTaxId(): boolean {
-    return this.taxFormGroup.get("includeTaxId").value;
-  }
-
-  set includeTaxId(includeTaxId: boolean) {
-    this.taxFormGroup.get("includeTaxId").setValue(includeTaxId);
-  }
-
-  get taxId(): string {
-    return this.taxFormGroup.get("taxId").value;
-  }
-
-  set taxId(taxId: string) {
-    this.taxFormGroup.get("taxId").setValue(taxId);
-  }
-
-  get line1(): string {
-    return this.taxFormGroup.get("line1").value;
-  }
-
-  set line1(line1: string) {
-    this.taxFormGroup.get("line1").setValue(line1);
-  }
-
-  get line2(): string {
-    return this.taxFormGroup.get("line2").value;
-  }
-
-  set line2(line2: string) {
-    this.taxFormGroup.get("line2").setValue(line2);
-  }
-
-  get city(): string {
-    return this.taxFormGroup.get("city").value;
-  }
-
-  set city(city: string) {
-    this.taxFormGroup.get("city").setValue(city);
-  }
-
-  get state(): string {
-    return this.taxFormGroup.get("state").value;
-  }
-
-  set state(state: string) {
-    this.taxFormGroup.get("state").setValue(state);
-  }
-
   async ngOnInit() {
     // Provider setup
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
@@ -399,22 +75,21 @@ export class TaxInfoComponent {
         try {
           const taxInfo = await this.organizationApiService.getTaxInfo(this.organizationId);
           if (taxInfo) {
-            this.taxId = taxInfo.taxId;
-            this.state = taxInfo.state;
-            this.line1 = taxInfo.line1;
-            this.line2 = taxInfo.line2;
-            this.city = taxInfo.city;
-            this.state = taxInfo.state;
-            this.postalCode = taxInfo.postalCode;
-            this.country = taxInfo.country || "US";
-            this.includeTaxId =
-              this.countrySupportsTax(this.country) &&
+            this.taxInfo.taxId = taxInfo.taxId;
+            this.taxInfo.state = taxInfo.state;
+            this.taxInfo.line1 = taxInfo.line1;
+            this.taxInfo.line2 = taxInfo.line2;
+            this.taxInfo.city = taxInfo.city;
+            this.taxInfo.state = taxInfo.state;
+            this.taxInfo.postalCode = taxInfo.postalCode;
+            this.taxInfo.country = taxInfo.country || "US";
+            this.taxInfo.includeTaxId =
+              this.countrySupportsTax(this.taxInfo.country) &&
               (!!taxInfo.taxId ||
                 !!taxInfo.line1 ||
                 !!taxInfo.line2 ||
                 !!taxInfo.city ||
                 !!taxInfo.state);
-            this.setTaxInfoObject();
           }
         } catch (e) {
           this.logService.error(e);
@@ -423,40 +98,20 @@ export class TaxInfoComponent {
         try {
           const taxInfo = await this.apiService.getTaxInfo();
           if (taxInfo) {
-            this.postalCode = taxInfo.postalCode;
-            this.country = taxInfo.country || "US";
+            this.taxInfo.postalCode = taxInfo.postalCode;
+            this.taxInfo.country = taxInfo.country || "US";
           }
-          this.setTaxInfoObject();
         } catch (e) {
           this.logService.error(e);
         }
       }
-
-      if (this.country === "US") {
-        this.taxFormGroup.get("postalCode").setValidators([Validators.required]);
-        this.taxFormGroup.get("postalCode").updateValueAndValidity();
-      }
-
+      this.pristine = Object.assign({}, this.taxInfo);
       // If not the default (US) then trigger onCountryChanged
-      if (this.country !== "US") {
+      if (this.taxInfo.country !== "US") {
         this.onCountryChanged.emit();
       }
     });
 
-    this.taxFormGroup
-      .get("country")
-      .valueChanges.pipe(takeUntil(this.destroy$))
-      .subscribe((value) => {
-        if (value === "US") {
-          this.taxFormGroup.get("postalCode").setValidators([Validators.required]);
-        } else {
-          this.taxFormGroup.get("postalCode").clearValidators();
-        }
-        this.taxFormGroup.get("postalCode").updateValueAndValidity();
-        this.setTaxInfoObject();
-        this.changeCountry();
-      });
-
     try {
       const taxRates = await this.apiService.getTaxRates();
       if (taxRates) {
@@ -472,27 +127,16 @@ export class TaxInfoComponent {
   get taxRate() {
     if (this.taxRates != null) {
       const localTaxRate = this.taxRates.find(
-        (x) => x.country === this.country && x.postalCode === this.postalCode,
+        (x) => x.country === this.taxInfo.country && x.postalCode === this.taxInfo.postalCode,
       );
       return localTaxRate?.rate ?? null;
     }
   }
 
-  setTaxInfoObject() {
-    this.taxInfo.country = this.country;
-    this.taxInfo.postalCode = this.postalCode;
-    this.taxInfo.includeTaxId = this.includeTaxId;
-    this.taxInfo.taxId = this.taxId;
-    this.taxInfo.line1 = this.line1;
-    this.taxInfo.line2 = this.line2;
-    this.taxInfo.city = this.city;
-    this.taxInfo.state = this.state;
-  }
-
   get showTaxIdCheckbox() {
     return (
       (this.organizationId || this.providerId) &&
-      this.country !== "US" &&
+      this.taxInfo.country !== "US" &&
       this.countrySupportsTax(this.taxInfo.country)
     );
   }
@@ -500,23 +144,23 @@ export class TaxInfoComponent {
   get showTaxIdFields() {
     return (
       (this.organizationId || this.providerId) &&
-      this.includeTaxId &&
-      this.countrySupportsTax(this.country)
+      this.taxInfo.includeTaxId &&
+      this.countrySupportsTax(this.taxInfo.country)
     );
   }
 
   getTaxInfoRequest(): TaxInfoUpdateRequest {
     if (this.organizationId || this.providerId) {
       const request = new ExpandedTaxInfoUpdateRequest();
-      request.country = this.country;
-      request.postalCode = this.postalCode;
+      request.country = this.taxInfo.country;
+      request.postalCode = this.taxInfo.postalCode;
 
-      if (this.includeTaxId) {
-        request.taxId = this.taxId;
-        request.line1 = this.line1;
-        request.line2 = this.line2;
-        request.city = this.city;
-        request.state = this.state;
+      if (this.taxInfo.includeTaxId) {
+        request.taxId = this.taxInfo.taxId;
+        request.line1 = this.taxInfo.line1;
+        request.line2 = this.taxInfo.line2;
+        request.city = this.taxInfo.city;
+        request.state = this.taxInfo.state;
       } else {
         request.taxId = null;
         request.line1 = null;
@@ -527,15 +171,18 @@ export class TaxInfoComponent {
       return request;
     } else {
       const request = new TaxInfoUpdateRequest();
-      request.postalCode = this.postalCode;
-      request.country = this.country;
+      request.postalCode = this.taxInfo.postalCode;
+      request.country = this.taxInfo.country;
       return request;
     }
   }
 
   submitTaxInfo(): Promise<any> {
-    this.taxFormGroup.updateValueAndValidity();
-    this.taxFormGroup.markAllAsTouched();
+    if (!this.hasChanged()) {
+      return new Promise<void>((resolve) => {
+        resolve();
+      });
+    }
     const request = this.getTaxInfoRequest();
     return this.organizationId
       ? this.organizationApiService.updateTaxInfo(
@@ -546,14 +193,13 @@ export class TaxInfoComponent {
   }
 
   changeCountry() {
-    if (!this.countrySupportsTax(this.country)) {
-      this.includeTaxId = false;
-      this.taxId = null;
-      this.line1 = null;
-      this.line2 = null;
-      this.city = null;
-      this.state = null;
-      this.setTaxInfoObject();
+    if (!this.countrySupportsTax(this.taxInfo.country)) {
+      this.taxInfo.includeTaxId = false;
+      this.taxInfo.taxId = null;
+      this.taxInfo.line1 = null;
+      this.taxInfo.line2 = null;
+      this.taxInfo.city = null;
+      this.taxInfo.state = null;
     }
     this.onCountryChanged.emit();
   }
@@ -562,6 +208,16 @@ export class TaxInfoComponent {
     return this.taxSupportedCountryCodes.includes(countryCode);
   }
 
+  private hasChanged(): boolean {
+    for (const key in this.taxInfo) {
+      // eslint-disable-next-line
+      if (this.pristine.hasOwnProperty(key) && this.pristine[key] !== this.taxInfo[key]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   private taxSupportedCountryCodes: string[] = [
     "CN",
     "FR",

From 7c16410c8626a034c7c7d4909334aa13ed15f08f Mon Sep 17 00:00:00 2001
From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
Date: Wed, 12 Jun 2024 17:10:20 -0400
Subject: [PATCH 13/18] Don't invoke ManageTaxInformationComponent when CB is
 disabled (#9614)

---
 .../providers/setup/setup.component.ts             | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts
index 845f2834b33..e0c011f9bc6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts
@@ -119,9 +119,15 @@ export class SetupComponent implements OnInit, OnDestroy {
 
   submit = async () => {
     try {
+      const consolidatedBillingEnabled = await firstValueFrom(this.enableConsolidatedBilling$);
+
       this.formGroup.markAllAsTouched();
-      const taxInformationValid = this.manageTaxInformationComponent.touch();
-      if (this.formGroup.invalid || !taxInformationValid) {
+
+      const formIsValid = consolidatedBillingEnabled
+        ? this.formGroup.valid && this.manageTaxInformationComponent.touch()
+        : this.formGroup.valid;
+
+      if (!formIsValid) {
         return;
       }
 
@@ -134,9 +140,7 @@ export class SetupComponent implements OnInit, OnDestroy {
       request.token = this.token;
       request.key = key;
 
-      const enableConsolidatedBilling = await firstValueFrom(this.enableConsolidatedBilling$);
-
-      if (enableConsolidatedBilling) {
+      if (consolidatedBillingEnabled) {
         request.taxInfo = new ExpandedTaxInfoUpdateRequest();
         const taxInformation = this.manageTaxInformationComponent.getTaxInformation();
 

From 6687ef59784afcac26b71aee92627822f395ffd6 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Wed, 12 Jun 2024 14:33:18 -0700
Subject: [PATCH 14/18] [PM-7683] Fix dynamic item defects (#9575)

* [PM-8639] Add data-testid attribute for test automation

* [PM-8669] Add autofill aria label

* [PM-8674] Show autofill menu options for card/identities when not in the autofill suggestion list

* [PM-8635] Hide menu items when copy cipher field directive is disabled

* [PM-8636] Disable copy menu dropdown when no items available to copy

* [CL-309] Add title override to bitBadge

* [PM-8669] Update menu-item directive disabled input

* [PM-7683] Fix race condition for remainingCiphers$

* [PM-7683] Use strict equality check
---
 apps/browser/src/_locales/en/messages.json    | 33 ++++++++-----------
 .../item-copy-actions.component.html          | 23 ++++++++-----
 .../item-copy-actions.component.ts            | 23 +++++++++++++
 .../item-more-options.component.html          |  2 +-
 .../item-more-options.component.ts            | 13 +++++---
 .../vault-list-items-container.component.html | 14 ++++++--
 .../services/vault-popup-items.service.ts     |  8 ++++-
 libs/components/src/badge/badge.directive.ts  | 10 +++++-
 .../src/menu/menu-item.directive.ts           |  8 ++++-
 .../components/copy-cipher-field.directive.ts | 24 ++++++++++++--
 10 files changed, 116 insertions(+), 42 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index ecea2deb9ef..39f95f09903 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3323,16 +3323,6 @@
   "clearFiltersOrTryAnother": {
     "message": "Clear filters or try another search term"
   },
-  "copyInfoLabel": {
-    "message": "Copy info, $ITEMNAME$",
-    "description": "Aria label for a button that opens a menu with options to copy information from an item.",
-    "placeholders": {
-      "itemname": {
-        "content": "$1",
-        "example": "Secret Item"
-      }
-    }
-  },
   "copyInfoTitle": {
     "message": "Copy info - $ITEMNAME$",
     "description": "Title for a button that opens a menu with options to copy information from an item.",
@@ -3343,16 +3333,6 @@
       }
     }
   },
-  "copyNoteLabel": {
-    "message": "Copy Note, $ITEMNAME$",
-    "description": "Aria label for a button copies a note to the clipboard.",
-    "placeholders": {
-      "itemname": {
-        "content": "$1",
-        "example": "Secret Note Item"
-      }
-    }
-  },
   "copyNoteTitle": {
     "message": "Copy Note - $ITEMNAME$",
     "description": "Title for a button copies a note to the clipboard.",
@@ -3393,6 +3373,19 @@
       }
     }
   },
+  "autofillTitle": {
+    "message": "Auto-fill - $ITEMNAME$",
+    "description": "Title for a button that auto-fills a login item.",
+    "placeholders": {
+      "itemname": {
+        "content": "$1",
+        "example": "Secret Item"
+      }
+    }
+  },
+  "noValuesToCopy": {
+    "message": "No values to copy"
+  },
   "assignCollections": {
     "message": "Assign collections"
   },
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
index 08133c6b466..487168539b9 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
@@ -3,8 +3,10 @@
     type="button"
     bitIconButton="bwi-clone"
     size="small"
-    [attr.aria-label]="'copyInfoLabel' | i18n: cipher.name"
-    [title]="'copyInfoTitle' | i18n: cipher.name"
+    [appA11yTitle]="
+      hasLoginValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
+    "
+    [disabled]="!hasLoginValues"
     [bitMenuTriggerFor]="loginOptions"
   ></button>
   <bit-menu #loginOptions>
@@ -25,8 +27,10 @@
     type="button"
     bitIconButton="bwi-clone"
     size="small"
-    [attr.aria-label]="'copyInfoLabel' | i18n: cipher.name"
-    [title]="'copyInfoTitle' | i18n: cipher.name"
+    [appA11yTitle]="
+      hasCardValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
+    "
+    [disabled]="!hasCardValues"
     [bitMenuTriggerFor]="cardOptions"
   ></button>
   <bit-menu #cardOptions>
@@ -44,8 +48,10 @@
     type="button"
     bitIconButton="bwi-clone"
     size="small"
-    [attr.aria-label]="'copyInfoLabel' | i18n: cipher.name"
-    [title]="'copyInfoTitle' | i18n: cipher.name"
+    [appA11yTitle]="
+      hasIdentityValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
+    "
+    [disabled]="!hasIdentityValues"
     [bitMenuTriggerFor]="identityOptions"
   ></button>
   <bit-menu #identityOptions>
@@ -69,8 +75,9 @@
     type="button"
     bitIconButton="bwi-clone"
     size="small"
-    [attr.aria-label]="'copyNoteLabel' | i18n: cipher.name"
-    [title]="'copyNoteTitle' | i18n: cipher.name"
+    [appA11yTitle]="
+      hasSecureNoteValue ? ('copyNoteTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
+    "
     appCopyField="secureNote"
     [cipher]="cipher"
   ></button>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
index c89fcca3b3f..a53c4a7c355 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
@@ -25,5 +25,28 @@ export class ItemCopyActionsComponent {
 
   protected CipherType = CipherType;
 
+  get hasLoginValues() {
+    return (
+      !!this.cipher.login.hasTotp || !!this.cipher.login.password || !!this.cipher.login.username
+    );
+  }
+
+  get hasCardValues() {
+    return !!this.cipher.card.code || !!this.cipher.card.number;
+  }
+
+  get hasIdentityValues() {
+    return (
+      !!this.cipher.identity.fullAddressForCopy ||
+      !!this.cipher.identity.email ||
+      !!this.cipher.identity.username ||
+      !!this.cipher.identity.phone
+    );
+  }
+
+  get hasSecureNoteValue() {
+    return !!this.cipher.notes;
+  }
+
   constructor() {}
 }
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
index 1d7a2a8cd0c..ef451bd9343 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
@@ -8,7 +8,7 @@
     [bitMenuTriggerFor]="moreOptions"
   ></button>
   <bit-menu #moreOptions>
-    <ng-container *ngIf="isLogin && !hideLoginOptions">
+    <ng-container *ngIf="canAutofill && !hideAutofillOptions">
       <ng-container *ngIf="autofillAllowed$ | async">
         <button type="button" bitMenuItem>
           {{ "autofill" | i18n }}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
index ac3acdcc8fb..c137a51d72a 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
@@ -33,11 +33,11 @@ export class ItemMoreOptionsComponent {
   cipher: CipherView;
 
   /**
-   * Flag to hide the login specific menu options. Used for login items that are
+   * Flag to hide the autofill menu options. Used for items that are
    * already in the autofill list suggestion.
    */
   @Input({ transform: booleanAttribute })
-  hideLoginOptions: boolean;
+  hideAutofillOptions: boolean;
 
   protected autofillAllowed$ = this.vaultPopupItemsService.autofillAllowed$;
 
@@ -55,8 +55,11 @@ export class ItemMoreOptionsComponent {
     return this.cipher.edit;
   }
 
-  get isLogin() {
-    return this.cipher.type === CipherType.Login;
+  /**
+   * Determines if the cipher can be autofilled.
+   */
+  get canAutofill() {
+    return [CipherType.Login, CipherType.Card, CipherType.Identity].includes(this.cipher.type);
   }
 
   get favoriteText() {
@@ -67,7 +70,7 @@ export class ItemMoreOptionsComponent {
    * Determines if the login cipher can be launched in a new browser tab.
    */
   get canLaunch() {
-    return this.isLogin && this.cipher.login.canLaunch;
+    return this.cipher.type === CipherType.Login && this.cipher.login.canLaunch;
   }
 
   /**
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
index 7b8fdf7a8e5..90981204020 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -25,7 +25,7 @@
         [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
       >
         <app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>
-        {{ cipher.name }}
+        <span data-testid="item-name">{{ cipher.name }}</span>
         <i
           class="bwi bwi-sm"
           *ngIf="cipher.organizationId"
@@ -36,12 +36,20 @@
       </a>
       <ng-container slot="end">
         <bit-item-action *ngIf="showAutofillButton">
-          <button type="button" bitBadge variant="primary">{{ "autoFill" | i18n }}</button>
+          <button
+            type="button"
+            bitBadge
+            variant="primary"
+            [title]="'autofillTitle' | i18n: cipher.name"
+            [attr.aria-label]="'autofillTitle' | i18n: cipher.name"
+          >
+            {{ "autoFill" | i18n }}
+          </button>
         </bit-item-action>
         <app-item-copy-actions [cipher]="cipher"></app-item-copy-actions>
         <app-item-more-options
           [cipher]="cipher"
-          [hideLoginOptions]="showAutofillButton"
+          [hideAutofillOptions]="showAutofillButton"
         ></app-item-more-options>
       </ng-container>
     </bit-item>
diff --git a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
index f96bb095b94..c6d155c5219 100644
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
@@ -2,6 +2,7 @@ import { inject, Injectable, NgZone } from "@angular/core";
 import {
   BehaviorSubject,
   combineLatest,
+  concatMap,
   distinctUntilChanged,
   distinctUntilKeyChanged,
   from,
@@ -176,7 +177,12 @@ export class VaultPopupItemsService {
    * Ciphers are sorted by name.
    */
   remainingCiphers$: Observable<PopupCipherView[]> = this.favoriteCiphers$.pipe(
-    withLatestFrom(this._filteredCipherList$, this.autoFillCiphers$),
+    concatMap(
+      (
+        favoriteCiphers, // concatMap->of is used to make withLatestFrom lazy to avoid race conditions with autoFillCiphers$
+      ) =>
+        of(favoriteCiphers).pipe(withLatestFrom(this._filteredCipherList$, this.autoFillCiphers$)),
+    ),
     map(([favoriteCiphers, ciphers, autoFillCiphers]) =>
       ciphers.filter(
         (cipher) => !autoFillCiphers.includes(cipher) && !favoriteCiphers.includes(cipher),
diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts
index ce410727065..55977f10f90 100644
--- a/libs/components/src/badge/badge.directive.ts
+++ b/libs/components/src/badge/badge.directive.ts
@@ -51,10 +51,18 @@ export class BadgeDirective implements FocusableElement {
       .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
       .concat(this.truncate ? ["tw-truncate", this.maxWidthClass] : []);
   }
-  @HostBinding("attr.title") get title() {
+  @HostBinding("attr.title") get titleAttr() {
+    if (this.title !== undefined) {
+      return this.title;
+    }
     return this.truncate ? this.el.nativeElement.textContent.trim() : null;
   }
 
+  /**
+   * Optional override for the automatic badge title when truncating.
+   */
+  @Input() title?: string;
+
   /**
    * Variant, sets the background color of the badge.
    */
diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.directive.ts
index 37289c9364c..3f4b23e1cc6 100644
--- a/libs/components/src/menu/menu-item.directive.ts
+++ b/libs/components/src/menu/menu-item.directive.ts
@@ -1,5 +1,6 @@
 import { FocusableOption } from "@angular/cdk/a11y";
-import { Component, ElementRef, HostBinding } from "@angular/core";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 @Component({
   selector: "[bitMenuItem]",
@@ -32,6 +33,11 @@ export class MenuItemDirective implements FocusableOption {
   ];
   @HostBinding("attr.role") role = "menuitem";
   @HostBinding("tabIndex") tabIndex = "-1";
+  @HostBinding("attr.disabled") get disabledAttr() {
+    return this.disabled || null; // native disabled attr must be null when false
+  }
+
+  @Input({ transform: coerceBooleanProperty }) disabled?: boolean = false;
 
   constructor(private elementRef: ElementRef) {}
 
diff --git a/libs/vault/src/components/copy-cipher-field.directive.ts b/libs/vault/src/components/copy-cipher-field.directive.ts
index 2b79742c66d..7d842c36bfe 100644
--- a/libs/vault/src/components/copy-cipher-field.directive.ts
+++ b/libs/vault/src/components/copy-cipher-field.directive.ts
@@ -1,6 +1,7 @@
-import { Directive, HostBinding, HostListener, Input, OnChanges } from "@angular/core";
+import { Directive, HostBinding, HostListener, Input, OnChanges, Optional } from "@angular/core";
 
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { MenuItemDirective } from "@bitwarden/components";
 import { CopyAction, CopyCipherFieldService } from "@bitwarden/vault";
 
 /**
@@ -9,6 +10,8 @@ import { CopyAction, CopyCipherFieldService } from "@bitwarden/vault";
  *
  * Automatically disables the host element if the field to copy is not available or null.
  *
+ * If the host element is a menu item, it will be hidden when disabled.
+ *
  * @example
  * ```html
  * <button appCopyField="username" [cipher]="cipher">Copy Username</button>
@@ -27,11 +30,23 @@ export class CopyCipherFieldDirective implements OnChanges {
 
   @Input({ required: true }) cipher: CipherView;
 
-  constructor(private copyCipherFieldService: CopyCipherFieldService) {}
+  constructor(
+    private copyCipherFieldService: CopyCipherFieldService,
+    @Optional() private menuItemDirective?: MenuItemDirective,
+  ) {}
 
   @HostBinding("attr.disabled")
   protected disabled: boolean | null = null;
 
+  /**
+   * Hide the element if it is disabled and is a menu item.
+   * @private
+   */
+  @HostBinding("class.tw-hidden")
+  private get hidden() {
+    return this.disabled && this.menuItemDirective;
+  }
+
   @HostListener("click")
   async copy() {
     const value = this.getValueToCopy();
@@ -49,6 +64,11 @@ export class CopyCipherFieldDirective implements OnChanges {
       (this.action === "totp" && !(await this.copyCipherFieldService.totpAllowed(this.cipher)))
         ? true
         : null;
+
+    // If the directive is used on a menu item, update the menu item to prevent keyboard navigation
+    if (this.menuItemDirective) {
+      this.menuItemDirective.disabled = this.disabled;
+    }
   }
 
   private getValueToCopy() {

From b35930074cbbd97ad51ef2598d072eaa1917adce Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Thu, 13 Jun 2024 08:09:35 +1000
Subject: [PATCH 15/18] [PM-8457] [PM-8608] Members page - remove paging logic
 / fix search (#9515)

* update admin console members page to use Component Library
  components and tools, including virtual scroll and table filtering

* temporarily duplicate the base component to avoid impacting
  other subclasses
---
 .../common/new-base.people.component.ts       | 415 +++++++++++++++
 .../organizations/members/members.module.ts   |   2 +
 .../members/people.component.html             | 501 +++++++++---------
 .../organizations/members/people.component.ts |  41 +-
 4 files changed, 679 insertions(+), 280 deletions(-)
 create mode 100644 apps/web/src/app/admin-console/common/new-base.people.component.ts

diff --git a/apps/web/src/app/admin-console/common/new-base.people.component.ts b/apps/web/src/app/admin-console/common/new-base.people.component.ts
new file mode 100644
index 00000000000..17f504c74aa
--- /dev/null
+++ b/apps/web/src/app/admin-console/common/new-base.people.component.ts
@@ -0,0 +1,415 @@
+import { Directive, ViewChild, ViewContainerRef } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormControl } from "@angular/forms";
+import { firstValueFrom, lastValueFrom, debounceTime } from "rxjs";
+
+import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationManagementPreferencesService } from "@bitwarden/common/admin-console/abstractions/organization-management-preferences/organization-management-preferences.service";
+import {
+  OrganizationUserStatusType,
+  OrganizationUserType,
+  ProviderUserStatusType,
+  ProviderUserType,
+} from "@bitwarden/common/admin-console/enums";
+import { ProviderUserUserDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-user.response";
+import { ListResponse } from "@bitwarden/common/models/response/list.response";
+import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { DialogService, TableDataSource } from "@bitwarden/components";
+
+import { OrganizationUserView } from "../organizations/core/views/organization-user.view";
+import { UserConfirmComponent } from "../organizations/manage/user-confirm.component";
+
+type StatusType = OrganizationUserStatusType | ProviderUserStatusType;
+
+const MaxCheckedCount = 500;
+
+/**
+ * A refactored copy of BasePeopleComponent, using the component library table and other modern features.
+ * This will replace BasePeopleComponent once all subclasses have been changed over to use this class.
+ */
+@Directive()
+export abstract class NewBasePeopleComponent<
+  UserView extends ProviderUserUserDetailsResponse | OrganizationUserView,
+> {
+  @ViewChild("confirmTemplate", { read: ViewContainerRef, static: true })
+  confirmModalRef: ViewContainerRef;
+
+  get allCount() {
+    return this.activeUsers != null ? this.activeUsers.length : 0;
+  }
+
+  get invitedCount() {
+    return this.statusMap.has(this.userStatusType.Invited)
+      ? this.statusMap.get(this.userStatusType.Invited).length
+      : 0;
+  }
+
+  get acceptedCount() {
+    return this.statusMap.has(this.userStatusType.Accepted)
+      ? this.statusMap.get(this.userStatusType.Accepted).length
+      : 0;
+  }
+
+  get confirmedCount() {
+    return this.statusMap.has(this.userStatusType.Confirmed)
+      ? this.statusMap.get(this.userStatusType.Confirmed).length
+      : 0;
+  }
+
+  get revokedCount() {
+    return this.statusMap.has(this.userStatusType.Revoked)
+      ? this.statusMap.get(this.userStatusType.Revoked).length
+      : 0;
+  }
+
+  /**
+   * Shows a banner alerting the admin that users need to be confirmed.
+   */
+  get showConfirmUsers(): boolean {
+    return (
+      this.activeUsers != null &&
+      this.statusMap != null &&
+      this.activeUsers.length > 1 &&
+      this.confirmedCount > 0 &&
+      this.confirmedCount < 3 &&
+      this.acceptedCount > 0
+    );
+  }
+
+  get showBulkConfirmUsers(): boolean {
+    return this.acceptedCount > 0;
+  }
+
+  abstract userType: typeof OrganizationUserType | typeof ProviderUserType;
+  abstract userStatusType: typeof OrganizationUserStatusType | typeof ProviderUserStatusType;
+
+  protected dataSource = new TableDataSource<UserView>();
+
+  firstLoaded: boolean;
+
+  /**
+   * A hashmap that groups users by their status (invited/accepted/etc). This is used by the toggles to show
+   * user counts and filter data by user status.
+   */
+  statusMap = new Map<StatusType, UserView[]>();
+
+  /**
+   * The currently selected status filter, or null to show all active users.
+   */
+  status: StatusType | null;
+
+  /**
+   * The currently executing promise - used to avoid multiple user actions executing at once.
+   */
+  actionPromise: Promise<void>;
+
+  /**
+   * All users, loaded from the server, before any filtering has been applied.
+   */
+  protected allUsers: UserView[] = [];
+
+  /**
+   * Active users only, that is, users that are not in the revoked status.
+   */
+  protected activeUsers: UserView[] = [];
+
+  protected searchControl = new FormControl("", { nonNullable: true });
+
+  constructor(
+    protected apiService: ApiService,
+    protected i18nService: I18nService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected cryptoService: CryptoService,
+    protected validationService: ValidationService,
+    protected modalService: ModalService,
+    private logService: LogService,
+    protected userNamePipe: UserNamePipe,
+    protected dialogService: DialogService,
+    protected organizationManagementPreferencesService: OrganizationManagementPreferencesService,
+  ) {
+    // Connect the search input to the table dataSource filter input
+    this.searchControl.valueChanges
+      .pipe(debounceTime(200), takeUntilDestroyed())
+      .subscribe((v) => (this.dataSource.filter = v));
+  }
+
+  abstract edit(user: UserView): void;
+  abstract getUsers(): Promise<ListResponse<UserView> | UserView[]>;
+  abstract deleteUser(id: string): Promise<void>;
+  abstract revokeUser(id: string): Promise<void>;
+  abstract restoreUser(id: string): Promise<void>;
+  abstract reinviteUser(id: string): Promise<void>;
+  abstract confirmUser(user: UserView, publicKey: Uint8Array): Promise<void>;
+
+  async load() {
+    // Load new users from the server
+    const response = await this.getUsers();
+
+    // Reset and repopulate the statusMap
+    this.statusMap.clear();
+    this.activeUsers = [];
+    for (const status of Utils.iterateEnum(this.userStatusType)) {
+      this.statusMap.set(status, []);
+    }
+
+    if (response instanceof ListResponse) {
+      this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
+    } else if (Array.isArray(response)) {
+      this.allUsers = response;
+    }
+
+    this.allUsers.forEach((u) => {
+      if (!this.statusMap.has(u.status)) {
+        this.statusMap.set(u.status, [u]);
+      } else {
+        this.statusMap.get(u.status).push(u);
+      }
+      if (u.status !== this.userStatusType.Revoked) {
+        this.activeUsers.push(u);
+      }
+    });
+
+    // Filter based on UserStatus - this also populates the table on first load
+    this.filter(this.status);
+
+    this.firstLoaded = true;
+  }
+
+  /**
+   * Filter the data source by user status.
+   * This overwrites dataSource.data because this filtering needs to apply first, before the search input
+   */
+  filter(status: StatusType | null) {
+    this.status = status;
+    if (this.status != null) {
+      this.dataSource.data = this.statusMap.get(this.status);
+    } else {
+      this.dataSource.data = this.activeUsers;
+    }
+    // Reset checkbox selection
+    this.selectAll(false);
+  }
+
+  checkUser(user: UserView, select?: boolean) {
+    (user as any).checked = select == null ? !(user as any).checked : select;
+  }
+
+  selectAll(select: boolean) {
+    if (select) {
+      // Reset checkbox selection first so we know nothing else is selected
+      this.selectAll(false);
+    }
+
+    const filteredUsers = this.dataSource.filteredData;
+
+    const selectCount =
+      select && filteredUsers.length > MaxCheckedCount ? MaxCheckedCount : filteredUsers.length;
+    for (let i = 0; i < selectCount; i++) {
+      this.checkUser(filteredUsers[i], select);
+    }
+  }
+
+  invite() {
+    this.edit(null);
+  }
+
+  protected async removeUserConfirmationDialog(user: UserView) {
+    return this.dialogService.openSimpleDialog({
+      title: this.userNamePipe.transform(user),
+      content: { key: "removeUserConfirmation" },
+      type: "warning",
+    });
+  }
+
+  async remove(user: UserView) {
+    const confirmed = await this.removeUserConfirmationDialog(user);
+    if (!confirmed) {
+      return false;
+    }
+
+    this.actionPromise = this.deleteUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("removedUserId", this.userNamePipe.transform(user)),
+      );
+      this.removeUser(user);
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  protected async revokeUserConfirmationDialog(user: UserView) {
+    return this.dialogService.openSimpleDialog({
+      title: { key: "revokeAccess", placeholders: [this.userNamePipe.transform(user)] },
+      content: this.revokeWarningMessage(),
+      acceptButtonText: { key: "revokeAccess" },
+      type: "warning",
+    });
+  }
+
+  async revoke(user: UserView) {
+    const confirmed = await this.revokeUserConfirmationDialog(user);
+
+    if (!confirmed) {
+      return false;
+    }
+
+    this.actionPromise = this.revokeUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("revokedUserId", this.userNamePipe.transform(user)),
+      );
+      await this.load();
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  async restore(user: UserView) {
+    this.actionPromise = this.restoreUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("restoredUserId", this.userNamePipe.transform(user)),
+      );
+      await this.load();
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  async reinvite(user: UserView) {
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    this.actionPromise = this.reinviteUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("hasBeenReinvited", this.userNamePipe.transform(user)),
+      );
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  async confirm(user: UserView) {
+    function updateUser(self: NewBasePeopleComponent<UserView>) {
+      user.status = self.userStatusType.Confirmed;
+      const mapIndex = self.statusMap.get(self.userStatusType.Accepted).indexOf(user);
+      if (mapIndex > -1) {
+        self.statusMap.get(self.userStatusType.Accepted).splice(mapIndex, 1);
+        self.statusMap.get(self.userStatusType.Confirmed).push(user);
+      }
+    }
+
+    const confirmUser = async (publicKey: Uint8Array) => {
+      try {
+        this.actionPromise = this.confirmUser(user, publicKey);
+        await this.actionPromise;
+        updateUser(this);
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(user)),
+        );
+      } catch (e) {
+        this.validationService.showError(e);
+        throw e;
+      } finally {
+        this.actionPromise = null;
+      }
+    };
+
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    try {
+      const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
+      const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+
+      const autoConfirm = await firstValueFrom(
+        this.organizationManagementPreferencesService.autoConfirmFingerPrints.state$,
+      );
+      if (autoConfirm == null || !autoConfirm) {
+        const dialogRef = UserConfirmComponent.open(this.dialogService, {
+          data: {
+            name: this.userNamePipe.transform(user),
+            userId: user != null ? user.userId : null,
+            publicKey: publicKey,
+            confirmUser: () => confirmUser(publicKey),
+          },
+        });
+        await lastValueFrom(dialogRef.closed);
+
+        return;
+      }
+
+      try {
+        const fingerprint = await this.cryptoService.getFingerprint(user.userId, publicKey);
+        this.logService.info(`User's fingerprint: ${fingerprint.join("-")}`);
+      } catch (e) {
+        this.logService.error(e);
+      }
+      await confirmUser(publicKey);
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
+    }
+  }
+
+  protected revokeWarningMessage(): string {
+    return this.i18nService.t("revokeUserConfirmation");
+  }
+
+  protected getCheckedUsers() {
+    return this.dataSource.data.filter((u) => (u as any).checked);
+  }
+
+  /**
+   * Remove a user row from the table and all related data sources
+   */
+  protected removeUser(user: UserView) {
+    let index = this.dataSource.data.indexOf(user);
+    if (index > -1) {
+      // Clone the array so that the setter for dataSource.data is triggered to update the table rendering
+      const updatedData = [...this.dataSource.data];
+      updatedData.splice(index, 1);
+      this.dataSource.data = updatedData;
+    }
+
+    index = this.allUsers.indexOf(user);
+    if (index > -1) {
+      this.allUsers.splice(index, 1);
+    }
+
+    if (this.statusMap.has(user.status)) {
+      index = this.statusMap.get(user.status).indexOf(user);
+      if (index > -1) {
+        this.statusMap.get(user.status).splice(index, 1);
+      }
+    }
+  }
+}
diff --git a/apps/web/src/app/admin-console/organizations/members/members.module.ts b/apps/web/src/app/admin-console/organizations/members/members.module.ts
index 39246010d52..5dff43b77bc 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.module.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members.module.ts
@@ -1,3 +1,4 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
 import { NgModule } from "@angular/core";
 
 import { PasswordCalloutComponent } from "@bitwarden/auth/angular";
@@ -22,6 +23,7 @@ import { PeopleComponent } from "./people.component";
     MembersRoutingModule,
     UserDialogModule,
     PasswordCalloutComponent,
+    ScrollingModule,
   ],
   declarations: [
     BulkConfirmComponent,
diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.html b/apps/web/src/app/admin-console/organizations/members/people.component.html
index 902efeafcdb..c6e7bfd070f 100644
--- a/apps/web/src/app/admin-console/organizations/members/people.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.html
@@ -37,7 +37,7 @@
     </bit-toggle>
   </bit-toggle-group>
 </div>
-<ng-container *ngIf="loading">
+<ng-container *ngIf="!firstLoaded">
   <i
     class="bwi bwi-spinner bwi-spin text-muted"
     title="{{ 'loading' | i18n }}"
@@ -45,16 +45,9 @@
   ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
-<ng-container
-  *ngIf="
-    !loading &&
-    ((isPaging$ | async)
-      ? pagedUsers
-      : (users | search: searchControl.value : 'name' : 'email' : 'id')) as searchedUsers
-  "
->
-  <p *ngIf="!searchedUsers.length">{{ "noMembersInList" | i18n }}</p>
-  <ng-container *ngIf="searchedUsers.length">
+<ng-container *ngIf="firstLoaded">
+  <p *ngIf="!dataSource.filteredData.length">{{ "noMembersInList" | i18n }}</p>
+  <ng-container *ngIf="dataSource.filteredData.length">
     <app-callout
       type="info"
       title="{{ 'confirmUsers' | i18n }}"
@@ -63,256 +56,262 @@
     >
       {{ "usersNeedConfirmed" | i18n }}
     </app-callout>
-    <bit-table
-      infinite-scroll
-      [infiniteScrollDistance]="1"
-      [infiniteScrollDisabled]="!(isPaging$ | async)"
-      (scrolled)="loadMore()"
-    >
-      <ng-container header>
-        <tr>
-          <th bitCell class="tw-w-20">
-            <input
-              type="checkbox"
-              bitCheckbox
-              class="tw-mr-1"
-              (change)="selectAll($any($event.target).checked)"
-              id="selectAll"
-            />
-            <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
-              "all" | i18n
-            }}</label>
-          </th>
-          <th bitCell>{{ "name" | i18n }}</th>
-          <th bitCell>{{ (organization.useGroups ? "groups" : "collections") | i18n }}</th>
-          <th bitCell>{{ "role" | i18n }}</th>
-          <th bitCell>{{ "policies" | i18n }}</th>
-          <th bitCell class="tw-w-10">
-            <button
-              [bitMenuTriggerFor]="headerMenu"
-              type="button"
-              bitIconButton="bwi-ellipsis-v"
-              size="small"
-              appA11yTitle="{{ 'options' | i18n }}"
-            ></button>
-
-            <bit-menu #headerMenu>
-              <ng-container *ngIf="canUseSecretsManager$ | async">
-                <button type="button" bitMenuItem (click)="bulkEnableSM()">
-                  {{ "activateSecretsManager" | i18n }}
-                </button>
-                <bit-menu-divider></bit-menu-divider>
-              </ng-container>
-              <button type="button" bitMenuItem (click)="bulkReinvite()">
-                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-                {{ "reinviteSelected" | i18n }}
-              </button>
+    <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
+    from overflowing the <main> element. -->
+    <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
+      <bit-table [dataSource]="dataSource">
+        <ng-container header>
+          <tr>
+            <th bitCell class="tw-w-20">
+              <input
+                type="checkbox"
+                bitCheckbox
+                class="tw-mr-1"
+                (change)="selectAll($any($event.target).checked)"
+                id="selectAll"
+              />
+              <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
+                "all" | i18n
+              }}</label>
+            </th>
+            <th bitCell bitSortable="email" default>{{ "name" | i18n }}</th>
+            <th bitCell>{{ (organization.useGroups ? "groups" : "collections") | i18n }}</th>
+            <th bitCell bitSortable="type">{{ "role" | i18n }}</th>
+            <th bitCell>{{ "policies" | i18n }}</th>
+            <th bitCell class="tw-w-10">
               <button
+                [bitMenuTriggerFor]="headerMenu"
                 type="button"
-                bitMenuItem
-                (click)="bulkConfirm()"
-                *ngIf="showBulkConfirmUsers"
-              >
-                <span class="tw-text-success">
-                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
-                  {{ "confirmSelected" | i18n }}
-                </span>
-              </button>
-              <button type="button" bitMenuItem (click)="bulkRestore()">
-                <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
-                {{ "restoreAccess" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="bulkRevoke()">
-                <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
-                {{ "revokeAccess" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="bulkRemove()">
-                <span class="tw-text-danger">
-                  <i aria-hidden="true" class="bwi bwi-close"></i>
-                  {{ "remove" | i18n }}
-                </span>
-              </button>
-            </bit-menu>
-          </th>
-        </tr>
-      </ng-container>
-      <ng-template body>
-        <tr bitRow *ngFor="let u of searchedUsers" alignContent="middle">
-          <td bitCell (click)="checkUser(u)">
-            <input type="checkbox" bitCheckbox [(ngModel)]="$any(u).checked" />
-          </td>
-          <td bitCell (click)="edit(u)" class="tw-cursor-pointer">
-            <div class="tw-flex tw-items-center">
-              <bit-avatar
+                bitIconButton="bwi-ellipsis-v"
                 size="small"
-                [text]="u | userName"
-                [id]="u.userId"
-                [color]="u.avatarColor"
-                class="tw-mr-3"
-              ></bit-avatar>
-              <div class="tw-flex tw-flex-col">
-                <div>
-                  <button type="button" bitLink>
-                    {{ u.name ?? u.email }}
+                appA11yTitle="{{ 'options' | i18n }}"
+              ></button>
+
+              <bit-menu #headerMenu>
+                <ng-container *ngIf="canUseSecretsManager$ | async">
+                  <button type="button" bitMenuItem (click)="bulkEnableSM()">
+                    {{ "activateSecretsManager" | i18n }}
                   </button>
-                  <span
-                    bitBadge
-                    class="tw-text-xs"
-                    variant="secondary"
-                    *ngIf="u.status === userStatusType.Invited"
-                    >{{ "invited" | i18n }}</span
-                  >
-                  <span
-                    bitBadge
-                    class="tw-text-xs"
-                    variant="warning"
-                    *ngIf="u.status === userStatusType.Accepted"
-                    >{{ "needsConfirmation" | i18n }}</span
-                  >
-                  <span
-                    bitBadge
-                    class="tw-text-xs"
-                    variant="secondary"
-                    *ngIf="u.status === userStatusType.Revoked"
-                    >{{ "revoked" | i18n }}</span
-                  >
-                </div>
-                <div class="tw-text-sm tw-text-muted" *ngIf="u.name">
-                  {{ u.email }}
+                  <bit-menu-divider></bit-menu-divider>
+                </ng-container>
+                <button type="button" bitMenuItem (click)="bulkReinvite()">
+                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                  {{ "reinviteSelected" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="bulkConfirm()"
+                  *ngIf="showBulkConfirmUsers"
+                >
+                  <span class="tw-text-success">
+                    <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                    {{ "confirmSelected" | i18n }}
+                  </span>
+                </button>
+                <button type="button" bitMenuItem (click)="bulkRestore()">
+                  <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+                  {{ "restoreAccess" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="bulkRevoke()">
+                  <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
+                  {{ "revokeAccess" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="bulkRemove()">
+                  <span class="tw-text-danger">
+                    <i aria-hidden="true" class="bwi bwi-close"></i>
+                    {{ "remove" | i18n }}
+                  </span>
+                </button>
+              </bit-menu>
+            </th>
+          </tr>
+        </ng-container>
+        <ng-template body let-rows$>
+          <tr
+            bitRow
+            *cdkVirtualFor="let u of rows$"
+            alignContent="middle"
+            [ngClass]="rowHeightClass"
+          >
+            <td bitCell (click)="checkUser(u)">
+              <input type="checkbox" bitCheckbox [(ngModel)]="$any(u).checked" />
+            </td>
+            <td bitCell (click)="edit(u)" class="tw-cursor-pointer">
+              <div class="tw-flex tw-items-center">
+                <bit-avatar
+                  size="small"
+                  [text]="u | userName"
+                  [id]="u.userId"
+                  [color]="u.avatarColor"
+                  class="tw-mr-3"
+                ></bit-avatar>
+                <div class="tw-flex tw-flex-col">
+                  <div>
+                    <button type="button" bitLink>
+                      {{ u.name ?? u.email }}
+                    </button>
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="secondary"
+                      *ngIf="u.status === userStatusType.Invited"
+                      >{{ "invited" | i18n }}</span
+                    >
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="warning"
+                      *ngIf="u.status === userStatusType.Accepted"
+                      >{{ "needsConfirmation" | i18n }}</span
+                    >
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="secondary"
+                      *ngIf="u.status === userStatusType.Revoked"
+                      >{{ "revoked" | i18n }}</span
+                    >
+                  </div>
+                  <div class="tw-text-sm tw-text-muted" *ngIf="u.name">
+                    {{ u.email }}
+                  </div>
                 </div>
               </div>
-            </div>
-          </td>
+            </td>
 
-          <td
-            bitCell
-            (click)="edit(u, organization.useGroups ? memberTab.Groups : memberTab.Collections)"
-            class="tw-cursor-pointer"
-          >
-            <bit-badge-list
-              [items]="organization.useGroups ? u.groupNames : u.collectionNames"
-              [maxItems]="3"
-              variant="secondary"
-            ></bit-badge-list>
-          </td>
+            <td
+              bitCell
+              (click)="edit(u, organization.useGroups ? memberTab.Groups : memberTab.Collections)"
+              class="tw-cursor-pointer"
+            >
+              <bit-badge-list
+                [items]="organization.useGroups ? u.groupNames : u.collectionNames"
+                [maxItems]="3"
+                variant="secondary"
+              ></bit-badge-list>
+            </td>
 
-          <td
-            bitCell
-            (click)="edit(u, memberTab.Role)"
-            class="tw-cursor-pointer tw-text-sm tw-text-muted"
-          >
-            {{ u.type | userType }}
-          </td>
+            <td
+              bitCell
+              (click)="edit(u, memberTab.Role)"
+              class="tw-cursor-pointer tw-text-sm tw-text-muted"
+            >
+              {{ u.type | userType }}
+            </td>
 
-          <td bitCell class="tw-text-muted">
-            <ng-container *ngIf="u.twoFactorEnabled">
-              <i
-                class="bwi bwi-lock"
-                title="{{ 'userUsingTwoStep' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "userUsingTwoStep" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="showEnrolledStatus($any(u))">
-              <i
-                class="bwi bwi-key"
-                title="{{ 'enrolledAccountRecovery' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "enrolledAccountRecovery" | i18n }}</span>
-            </ng-container>
-          </td>
-          <td bitCell>
-            <button
-              [bitMenuTriggerFor]="rowMenu"
-              type="button"
-              bitIconButton="bwi-ellipsis-v"
-              size="small"
-              appA11yTitle="{{ 'options' | i18n }}"
-            ></button>
+            <td bitCell class="tw-text-muted">
+              <ng-container *ngIf="u.twoFactorEnabled">
+                <i
+                  class="bwi bwi-lock"
+                  title="{{ 'userUsingTwoStep' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "userUsingTwoStep" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="showEnrolledStatus($any(u))">
+                <i
+                  class="bwi bwi-key"
+                  title="{{ 'enrolledAccountRecovery' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "enrolledAccountRecovery" | i18n }}</span>
+              </ng-container>
+            </td>
+            <td bitCell>
+              <button
+                [bitMenuTriggerFor]="rowMenu"
+                type="button"
+                bitIconButton="bwi-ellipsis-v"
+                size="small"
+                appA11yTitle="{{ 'options' | i18n }}"
+              ></button>
 
-            <bit-menu #rowMenu>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="reinvite(u)"
-                *ngIf="u.status === userStatusType.Invited"
-              >
-                <i aria-hidden="true" class="bwi bwi-envelope"></i>
-                {{ "resendInvitation" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="confirm(u)"
-                *ngIf="u.status === userStatusType.Accepted"
-              >
-                <span class="tw-text-success">
-                  <i aria-hidden="true" class="bwi bwi-check"></i> {{ "confirm" | i18n }}
-                </span>
-              </button>
-              <bit-menu-divider
-                *ngIf="u.status === userStatusType.Accepted || u.status === userStatusType.Invited"
-              ></bit-menu-divider>
-              <button type="button" bitMenuItem (click)="edit(u, memberTab.Role)">
-                <i aria-hidden="true" class="bwi bwi-user"></i> {{ "memberRole" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="edit(u, memberTab.Groups)"
-                *ngIf="organization.useGroups"
-              >
-                <i aria-hidden="true" class="bwi bwi-users"></i> {{ "groups" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="edit(u, memberTab.Collections)">
-                <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
-              </button>
-              <bit-menu-divider></bit-menu-divider>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="events(u)"
-                *ngIf="organization.useEvents && u.status === userStatusType.Confirmed"
-              >
-                <i aria-hidden="true" class="bwi bwi-file-text"></i> {{ "eventLogs" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="resetPassword(u)"
-                *ngIf="allowResetPassword(u)"
-              >
-                <i aria-hidden="true" class="bwi bwi-key"></i> {{ "recoverAccount" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="restore(u)"
-                *ngIf="u.status === userStatusType.Revoked"
-              >
-                <i aria-hidden="true" class="bwi bwi-plus-circle"></i>
-                {{ "restoreAccess" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="revoke(u)"
-                *ngIf="u.status !== userStatusType.Revoked"
-              >
-                <i aria-hidden="true" class="bwi bwi-minus-circle"></i>
-                {{ "revokeAccess" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="remove(u)">
-                <span class="tw-text-danger">
-                  <i aria-hidden="true" class="bwi bwi-close"></i> {{ "remove" | i18n }}
-                </span>
-              </button>
-            </bit-menu>
-          </td>
-        </tr>
-      </ng-template>
-    </bit-table>
+              <bit-menu #rowMenu>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="reinvite(u)"
+                  *ngIf="u.status === userStatusType.Invited"
+                >
+                  <i aria-hidden="true" class="bwi bwi-envelope"></i>
+                  {{ "resendInvitation" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="confirm(u)"
+                  *ngIf="u.status === userStatusType.Accepted"
+                >
+                  <span class="tw-text-success">
+                    <i aria-hidden="true" class="bwi bwi-check"></i> {{ "confirm" | i18n }}
+                  </span>
+                </button>
+                <bit-menu-divider
+                  *ngIf="
+                    u.status === userStatusType.Accepted || u.status === userStatusType.Invited
+                  "
+                ></bit-menu-divider>
+                <button type="button" bitMenuItem (click)="edit(u, memberTab.Role)">
+                  <i aria-hidden="true" class="bwi bwi-user"></i> {{ "memberRole" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="edit(u, memberTab.Groups)"
+                  *ngIf="organization.useGroups"
+                >
+                  <i aria-hidden="true" class="bwi bwi-users"></i> {{ "groups" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="edit(u, memberTab.Collections)">
+                  <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
+                </button>
+                <bit-menu-divider></bit-menu-divider>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="openEventsDialog(u)"
+                  *ngIf="organization.useEvents && u.status === userStatusType.Confirmed"
+                >
+                  <i aria-hidden="true" class="bwi bwi-file-text"></i> {{ "eventLogs" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="resetPassword(u)"
+                  *ngIf="allowResetPassword(u)"
+                >
+                  <i aria-hidden="true" class="bwi bwi-key"></i> {{ "recoverAccount" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="restore(u)"
+                  *ngIf="u.status === userStatusType.Revoked"
+                >
+                  <i aria-hidden="true" class="bwi bwi-plus-circle"></i>
+                  {{ "restoreAccess" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="revoke(u)"
+                  *ngIf="u.status !== userStatusType.Revoked"
+                >
+                  <i aria-hidden="true" class="bwi bwi-minus-circle"></i>
+                  {{ "revokeAccess" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="remove(u)">
+                  <span class="tw-text-danger">
+                    <i aria-hidden="true" class="bwi bwi-close"></i> {{ "remove" | i18n }}
+                  </span>
+                </button>
+              </bit-menu>
+            </td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    </cdk-virtual-scroll-viewport>
   </ng-container>
 </ng-container>
 <ng-template #addEdit></ng-template>
diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.ts b/apps/web/src/app/admin-console/organizations/members/people.component.ts
index 668526b38c8..a47e0acd0cd 100644
--- a/apps/web/src/app/admin-console/organizations/members/people.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.ts
@@ -1,4 +1,5 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Router } from "@angular/router";
 import {
   combineLatest,
@@ -9,16 +10,12 @@ import {
   map,
   Observable,
   shareReplay,
-  Subject,
   switchMap,
-  takeUntil,
 } from "rxjs";
 
-import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { OrganizationManagementPreferencesService } from "@bitwarden/common/admin-console/abstractions/organization-management-preferences/organization-management-preferences.service";
@@ -50,7 +47,7 @@ import { CollectionDetailsResponse } from "@bitwarden/common/vault/models/respon
 import { DialogService, SimpleDialogOptions } from "@bitwarden/components";
 
 import { openEntityEventsDialog } from "../../../admin-console/organizations/manage/entity-events.component";
-import { BasePeopleComponent } from "../../common/base.people.component";
+import { NewBasePeopleComponent } from "../../common/new-base.people.component";
 import { GroupService } from "../core";
 import { OrganizationUserView } from "../core/views/organization-user.view";
 
@@ -70,7 +67,7 @@ import { ResetPasswordComponent } from "./components/reset-password.component";
   selector: "app-org-people",
   templateUrl: "people.component.html",
 })
-export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
+export class PeopleComponent extends NewBasePeopleComponent<OrganizationUserView> {
   @ViewChild("groupsTemplate", { read: ViewContainerRef, static: true })
   groupsModalRef: ViewContainerRef;
   @ViewChild("confirmTemplate", { read: ViewContainerRef, static: true })
@@ -95,7 +92,9 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
 
   protected canUseSecretsManager$: Observable<boolean>;
 
-  private destroy$ = new Subject<void>();
+  // Fixed sizes used for cdkVirtualScroll
+  protected rowHeight = 62;
+  protected rowHeightClass = `tw-h-[62px]`;
 
   constructor(
     apiService: ApiService,
@@ -104,12 +103,10 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
     modalService: ModalService,
     platformUtilsService: PlatformUtilsService,
     cryptoService: CryptoService,
-    searchService: SearchService,
     validationService: ValidationService,
     private policyService: PolicyService,
     private policyApiService: PolicyApiService,
     logService: LogService,
-    searchPipe: SearchPipe,
     userNamePipe: UserNamePipe,
     private syncService: SyncService,
     private organizationService: OrganizationService,
@@ -124,21 +121,17 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
   ) {
     super(
       apiService,
-      searchService,
       i18nService,
       platformUtilsService,
       cryptoService,
       validationService,
       modalService,
       logService,
-      searchPipe,
       userNamePipe,
       dialogService,
       organizationManagementPreferencesService,
     );
-  }
 
-  async ngOnInit() {
     const organization$ = this.route.params.pipe(
       concatMap((params) => this.organizationService.get$(params.organizationId)),
       shareReplay({ refCount: true, bufferSize: 1 }),
@@ -198,29 +191,19 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
           await this.load();
 
           this.searchControl.setValue(qParams.search);
+
           if (qParams.viewEvents != null) {
-            const user = this.users.filter((u) => u.id === qParams.viewEvents);
+            const user = this.dataSource.data.filter((u) => u.id === qParams.viewEvents);
             if (user.length > 0 && user[0].status === OrganizationUserStatusType.Confirmed) {
-              // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              this.events(user[0]);
+              this.openEventsDialog(user[0]);
             }
           }
         }),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(),
       )
       .subscribe();
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  async load() {
-    await super.load();
-  }
-
   async getUsers(): Promise<OrganizationUserView[]> {
     let groupsPromise: Promise<Map<string, string>>;
     let collectionsPromise: Promise<Map<string, string>>;
@@ -593,8 +576,8 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
     await this.load();
   }
 
-  async events(user: OrganizationUserView) {
-    await openEntityEventsDialog(this.dialogService, {
+  openEventsDialog(user: OrganizationUserView) {
+    openEntityEventsDialog(this.dialogService, {
       data: {
         name: this.userNamePipe.transform(user),
         organizationId: this.organization.id,

From 89aa6220ca78921777f9a7b8f006b586a925659b Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Thu, 13 Jun 2024 11:32:51 +1000
Subject: [PATCH 16/18] [AC-2740] Add device-approval to bw serve (#9512)

* Extract bw serve endpoint configuration to a configurator class

* Add device-approval endpoints to bw serve
---
 apps/cli/src/bw.ts                            |   6 +
 apps/cli/src/commands/serve.command.ts        | 396 +----------------
 apps/cli/src/oss-serve-configurator.ts        | 399 ++++++++++++++++++
 apps/cli/src/program.ts                       |  30 --
 apps/cli/src/serve.program.ts                 |  49 +++
 .../device-approval/approve-all.command.ts    |   9 +
 .../device-approval/approve.command.ts        |   8 +
 .../device-approval/deny-all.command.ts       |   8 +
 .../device-approval/deny.command.ts           |   8 +
 .../device-approval.program.ts                |  26 +-
 .../admin-console/device-approval/index.ts    |   7 +-
 .../device-approval/list.command.ts           |   9 +
 .../bit-cli/src/bit-serve-configurator.ts     |  95 +++++
 bitwarden_license/bit-cli/src/bw.ts           |   5 +
 14 files changed, 613 insertions(+), 442 deletions(-)
 create mode 100644 apps/cli/src/oss-serve-configurator.ts
 create mode 100644 apps/cli/src/serve.program.ts
 create mode 100644 bitwarden_license/bit-cli/src/bit-serve-configurator.ts

diff --git a/apps/cli/src/bw.ts b/apps/cli/src/bw.ts
index 03ebaa7368b..e4c46dd9ee9 100644
--- a/apps/cli/src/bw.ts
+++ b/apps/cli/src/bw.ts
@@ -1,6 +1,8 @@
 import { program } from "commander";
 
+import { OssServeConfigurator } from "./oss-serve-configurator";
 import { registerOssPrograms } from "./register-oss-programs";
+import { ServeProgram } from "./serve.program";
 import { ServiceContainer } from "./service-container";
 
 async function main() {
@@ -9,6 +11,10 @@ async function main() {
 
   await registerOssPrograms(serviceContainer);
 
+  // ServeProgram is registered separately so it can be overridden by bit-cli
+  const serveConfigurator = new OssServeConfigurator(serviceContainer);
+  new ServeProgram(serviceContainer, serveConfigurator).register();
+
   program.parse(process.argv);
 }
 
diff --git a/apps/cli/src/commands/serve.command.ts b/apps/cli/src/commands/serve.command.ts
index 8949e5b71e5..05603a3c24a 100644
--- a/apps/cli/src/commands/serve.command.ts
+++ b/apps/cli/src/commands/serve.command.ts
@@ -1,4 +1,3 @@
-import * as koaMulter from "@koa/multer";
 import * as koaRouter from "@koa/router";
 import { OptionValues } from "commander";
 import * as koa from "koa";
@@ -7,170 +6,14 @@ import * as koaJson from "koa-json";
 
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
-import { ConfirmCommand } from "../admin-console/commands/confirm.command";
-import { ShareCommand } from "../admin-console/commands/share.command";
-import { LockCommand } from "../auth/commands/lock.command";
-import { UnlockCommand } from "../auth/commands/unlock.command";
-import { Response } from "../models/response";
-import { FileResponse } from "../models/response/file.response";
+import { OssServeConfigurator } from "../oss-serve-configurator";
 import { ServiceContainer } from "../service-container";
-import { GenerateCommand } from "../tools/generate.command";
-import {
-  SendEditCommand,
-  SendCreateCommand,
-  SendDeleteCommand,
-  SendGetCommand,
-  SendListCommand,
-  SendRemovePasswordCommand,
-} from "../tools/send";
-import { CreateCommand } from "../vault/create.command";
-import { DeleteCommand } from "../vault/delete.command";
-import { SyncCommand } from "../vault/sync.command";
-
-import { EditCommand } from "./edit.command";
-import { GetCommand } from "./get.command";
-import { ListCommand } from "./list.command";
-import { RestoreCommand } from "./restore.command";
-import { StatusCommand } from "./status.command";
 
 export class ServeCommand {
-  private listCommand: ListCommand;
-  private getCommand: GetCommand;
-  private createCommand: CreateCommand;
-  private editCommand: EditCommand;
-  private generateCommand: GenerateCommand;
-  private shareCommand: ShareCommand;
-  private statusCommand: StatusCommand;
-  private syncCommand: SyncCommand;
-  private deleteCommand: DeleteCommand;
-  private confirmCommand: ConfirmCommand;
-  private restoreCommand: RestoreCommand;
-  private lockCommand: LockCommand;
-  private unlockCommand: UnlockCommand;
-
-  private sendCreateCommand: SendCreateCommand;
-  private sendDeleteCommand: SendDeleteCommand;
-  private sendEditCommand: SendEditCommand;
-  private sendGetCommand: SendGetCommand;
-  private sendListCommand: SendListCommand;
-  private sendRemovePasswordCommand: SendRemovePasswordCommand;
-
-  constructor(protected serviceContainer: ServiceContainer) {
-    this.getCommand = new GetCommand(
-      this.serviceContainer.cipherService,
-      this.serviceContainer.folderService,
-      this.serviceContainer.collectionService,
-      this.serviceContainer.totpService,
-      this.serviceContainer.auditService,
-      this.serviceContainer.cryptoService,
-      this.serviceContainer.stateService,
-      this.serviceContainer.searchService,
-      this.serviceContainer.apiService,
-      this.serviceContainer.organizationService,
-      this.serviceContainer.eventCollectionService,
-      this.serviceContainer.billingAccountProfileStateService,
-    );
-    this.listCommand = new ListCommand(
-      this.serviceContainer.cipherService,
-      this.serviceContainer.folderService,
-      this.serviceContainer.collectionService,
-      this.serviceContainer.organizationService,
-      this.serviceContainer.searchService,
-      this.serviceContainer.organizationUserService,
-      this.serviceContainer.apiService,
-      this.serviceContainer.eventCollectionService,
-    );
-    this.createCommand = new CreateCommand(
-      this.serviceContainer.cipherService,
-      this.serviceContainer.folderService,
-      this.serviceContainer.cryptoService,
-      this.serviceContainer.apiService,
-      this.serviceContainer.folderApiService,
-      this.serviceContainer.billingAccountProfileStateService,
-      this.serviceContainer.organizationService,
-    );
-    this.editCommand = new EditCommand(
-      this.serviceContainer.cipherService,
-      this.serviceContainer.folderService,
-      this.serviceContainer.cryptoService,
-      this.serviceContainer.apiService,
-      this.serviceContainer.folderApiService,
-    );
-    this.generateCommand = new GenerateCommand(
-      this.serviceContainer.passwordGenerationService,
-      this.serviceContainer.stateService,
-    );
-    this.syncCommand = new SyncCommand(this.serviceContainer.syncService);
-    this.statusCommand = new StatusCommand(
-      this.serviceContainer.environmentService,
-      this.serviceContainer.syncService,
-      this.serviceContainer.accountService,
-      this.serviceContainer.authService,
-    );
-    this.deleteCommand = new DeleteCommand(
-      this.serviceContainer.cipherService,
-      this.serviceContainer.folderService,
-      this.serviceContainer.apiService,
-      this.serviceContainer.folderApiService,
-      this.serviceContainer.billingAccountProfileStateService,
-    );
-    this.confirmCommand = new ConfirmCommand(
-      this.serviceContainer.apiService,
-      this.serviceContainer.cryptoService,
-      this.serviceContainer.organizationUserService,
-    );
-    this.restoreCommand = new RestoreCommand(this.serviceContainer.cipherService);
-    this.shareCommand = new ShareCommand(this.serviceContainer.cipherService);
-    this.lockCommand = new LockCommand(this.serviceContainer.vaultTimeoutService);
-    this.unlockCommand = new UnlockCommand(
-      this.serviceContainer.accountService,
-      this.serviceContainer.masterPasswordService,
-      this.serviceContainer.cryptoService,
-      this.serviceContainer.stateService,
-      this.serviceContainer.cryptoFunctionService,
-      this.serviceContainer.apiService,
-      this.serviceContainer.logService,
-      this.serviceContainer.keyConnectorService,
-      this.serviceContainer.environmentService,
-      this.serviceContainer.syncService,
-      this.serviceContainer.organizationApiService,
-      async () => await this.serviceContainer.logout(),
-      this.serviceContainer.kdfConfigService,
-    );
-
-    this.sendCreateCommand = new SendCreateCommand(
-      this.serviceContainer.sendService,
-      this.serviceContainer.environmentService,
-      this.serviceContainer.sendApiService,
-      this.serviceContainer.billingAccountProfileStateService,
-    );
-    this.sendDeleteCommand = new SendDeleteCommand(
-      this.serviceContainer.sendService,
-      this.serviceContainer.sendApiService,
-    );
-    this.sendGetCommand = new SendGetCommand(
-      this.serviceContainer.sendService,
-      this.serviceContainer.environmentService,
-      this.serviceContainer.searchService,
-      this.serviceContainer.cryptoService,
-    );
-    this.sendEditCommand = new SendEditCommand(
-      this.serviceContainer.sendService,
-      this.sendGetCommand,
-      this.serviceContainer.sendApiService,
-      this.serviceContainer.billingAccountProfileStateService,
-    );
-    this.sendListCommand = new SendListCommand(
-      this.serviceContainer.sendService,
-      this.serviceContainer.environmentService,
-      this.serviceContainer.searchService,
-    );
-    this.sendRemovePasswordCommand = new SendRemovePasswordCommand(
-      this.serviceContainer.sendService,
-      this.serviceContainer.sendApiService,
-      this.serviceContainer.environmentService,
-    );
-  }
+  constructor(
+    protected serviceContainer: ServiceContainer,
+    protected serveConfigurator: OssServeConfigurator,
+  ) {}
 
   async run(options: OptionValues) {
     const protectOrigin = !options.disableOriginProtection;
@@ -205,207 +48,7 @@ export class ServeCommand {
       .use(koaBodyParser())
       .use(koaJson({ pretty: false, param: "pretty" }));
 
-    router.get("/generate", async (ctx, next) => {
-      const response = await this.generateCommand.run(ctx.request.query);
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.get("/status", async (ctx, next) => {
-      const response = await this.statusCommand.run();
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.get("/list/object/:object", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      let response: Response = null;
-      if (ctx.params.object === "send") {
-        response = await this.sendListCommand.run(ctx.request.query);
-      } else {
-        response = await this.listCommand.run(ctx.params.object, ctx.request.query);
-      }
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.get("/send/list", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      const response = await this.sendListCommand.run(ctx.request.query);
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/sync", async (ctx, next) => {
-      const response = await this.syncCommand.run(ctx.request.query);
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/lock", async (ctx, next) => {
-      const response = await this.lockCommand.run();
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/unlock", async (ctx, next) => {
-      // Do not allow guessing password location through serve command
-      delete ctx.request.query.passwordFile;
-      delete ctx.request.query.passwordEnv;
-
-      const response = await this.unlockCommand.run(
-        ctx.request.body.password == null ? null : (ctx.request.body.password as string),
-        ctx.request.query,
-      );
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/confirm/:object/:id", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      const response = await this.confirmCommand.run(
-        ctx.params.object,
-        ctx.params.id,
-        ctx.request.query,
-      );
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/restore/:object/:id", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      const response = await this.restoreCommand.run(ctx.params.object, ctx.params.id);
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/move/:id/:organizationId", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      const response = await this.shareCommand.run(
-        ctx.params.id,
-        ctx.params.organizationId,
-        ctx.request.body, // TODO: Check the format of this body for an array of collection ids
-      );
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/attachment", koaMulter().single("file"), async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      const response = await this.createCommand.run(
-        "attachment",
-        ctx.request.body,
-        ctx.request.query,
-        {
-          fileBuffer: ctx.request.file.buffer,
-          fileName: ctx.request.file.originalname,
-        },
-      );
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/send/:id/remove-password", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      const response = await this.sendRemovePasswordCommand.run(ctx.params.id);
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.post("/object/:object", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      let response: Response = null;
-      if (ctx.params.object === "send") {
-        response = await this.sendCreateCommand.run(ctx.request.body, ctx.request.query);
-      } else {
-        response = await this.createCommand.run(
-          ctx.params.object,
-          ctx.request.body,
-          ctx.request.query,
-        );
-      }
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.put("/object/:object/:id", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      let response: Response = null;
-      if (ctx.params.object === "send") {
-        ctx.request.body.id = ctx.params.id;
-        response = await this.sendEditCommand.run(ctx.request.body, ctx.request.query);
-      } else {
-        response = await this.editCommand.run(
-          ctx.params.object,
-          ctx.params.id,
-          ctx.request.body,
-          ctx.request.query,
-        );
-      }
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.get("/object/:object/:id", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      let response: Response = null;
-      if (ctx.params.object === "send") {
-        response = await this.sendGetCommand.run(ctx.params.id, null);
-      } else {
-        response = await this.getCommand.run(ctx.params.object, ctx.params.id, ctx.request.query);
-      }
-      this.processResponse(ctx.response, response);
-      await next();
-    });
-
-    router.delete("/object/:object/:id", async (ctx, next) => {
-      if (await this.errorIfLocked(ctx.response)) {
-        await next();
-        return;
-      }
-      let response: Response = null;
-      if (ctx.params.object === "send") {
-        response = await this.sendDeleteCommand.run(ctx.params.id);
-      } else {
-        response = await this.deleteCommand.run(
-          ctx.params.object,
-          ctx.params.id,
-          ctx.request.query,
-        );
-      }
-      this.processResponse(ctx.response, response);
-      await next();
-    });
+    this.serveConfigurator.configureRouter(router);
 
     server
       .use(router.routes())
@@ -414,31 +57,4 @@ export class ServeCommand {
         this.serviceContainer.logService.info("Listening on " + hostname + ":" + port);
       });
   }
-
-  private processResponse(res: koa.Response, commandResponse: Response) {
-    if (!commandResponse.success) {
-      res.status = 400;
-    }
-    if (commandResponse.data instanceof FileResponse) {
-      res.body = commandResponse.data.data;
-      res.attachment(commandResponse.data.fileName);
-      res.set("Content-Type", "application/octet-stream");
-      res.set("Content-Length", commandResponse.data.data.length.toString());
-    } else {
-      res.body = commandResponse;
-    }
-  }
-
-  private async errorIfLocked(res: koa.Response) {
-    const authed = await this.serviceContainer.stateService.getIsAuthenticated();
-    if (!authed) {
-      this.processResponse(res, Response.error("You are not logged in."));
-      return true;
-    }
-    if (await this.serviceContainer.cryptoService.hasUserKey()) {
-      return false;
-    }
-    this.processResponse(res, Response.error("Vault is locked."));
-    return true;
-  }
 }
diff --git a/apps/cli/src/oss-serve-configurator.ts b/apps/cli/src/oss-serve-configurator.ts
new file mode 100644
index 00000000000..970be7a4bb9
--- /dev/null
+++ b/apps/cli/src/oss-serve-configurator.ts
@@ -0,0 +1,399 @@
+import * as koaMulter from "@koa/multer";
+import * as koaRouter from "@koa/router";
+import * as koa from "koa";
+
+import { ConfirmCommand } from "./admin-console/commands/confirm.command";
+import { ShareCommand } from "./admin-console/commands/share.command";
+import { LockCommand } from "./auth/commands/lock.command";
+import { UnlockCommand } from "./auth/commands/unlock.command";
+import { EditCommand } from "./commands/edit.command";
+import { GetCommand } from "./commands/get.command";
+import { ListCommand } from "./commands/list.command";
+import { RestoreCommand } from "./commands/restore.command";
+import { StatusCommand } from "./commands/status.command";
+import { Response } from "./models/response";
+import { FileResponse } from "./models/response/file.response";
+import { ServiceContainer } from "./service-container";
+import { GenerateCommand } from "./tools/generate.command";
+import {
+  SendEditCommand,
+  SendCreateCommand,
+  SendDeleteCommand,
+  SendGetCommand,
+  SendListCommand,
+  SendRemovePasswordCommand,
+} from "./tools/send";
+import { CreateCommand } from "./vault/create.command";
+import { DeleteCommand } from "./vault/delete.command";
+import { SyncCommand } from "./vault/sync.command";
+
+export class OssServeConfigurator {
+  private listCommand: ListCommand;
+  private getCommand: GetCommand;
+  private createCommand: CreateCommand;
+  private editCommand: EditCommand;
+  private generateCommand: GenerateCommand;
+  private shareCommand: ShareCommand;
+  private statusCommand: StatusCommand;
+  private syncCommand: SyncCommand;
+  private deleteCommand: DeleteCommand;
+  private confirmCommand: ConfirmCommand;
+  private restoreCommand: RestoreCommand;
+  private lockCommand: LockCommand;
+  private unlockCommand: UnlockCommand;
+
+  private sendCreateCommand: SendCreateCommand;
+  private sendDeleteCommand: SendDeleteCommand;
+  private sendEditCommand: SendEditCommand;
+  private sendGetCommand: SendGetCommand;
+  private sendListCommand: SendListCommand;
+  private sendRemovePasswordCommand: SendRemovePasswordCommand;
+
+  constructor(protected serviceContainer: ServiceContainer) {
+    this.getCommand = new GetCommand(
+      this.serviceContainer.cipherService,
+      this.serviceContainer.folderService,
+      this.serviceContainer.collectionService,
+      this.serviceContainer.totpService,
+      this.serviceContainer.auditService,
+      this.serviceContainer.cryptoService,
+      this.serviceContainer.stateService,
+      this.serviceContainer.searchService,
+      this.serviceContainer.apiService,
+      this.serviceContainer.organizationService,
+      this.serviceContainer.eventCollectionService,
+      this.serviceContainer.billingAccountProfileStateService,
+    );
+    this.listCommand = new ListCommand(
+      this.serviceContainer.cipherService,
+      this.serviceContainer.folderService,
+      this.serviceContainer.collectionService,
+      this.serviceContainer.organizationService,
+      this.serviceContainer.searchService,
+      this.serviceContainer.organizationUserService,
+      this.serviceContainer.apiService,
+      this.serviceContainer.eventCollectionService,
+    );
+    this.createCommand = new CreateCommand(
+      this.serviceContainer.cipherService,
+      this.serviceContainer.folderService,
+      this.serviceContainer.cryptoService,
+      this.serviceContainer.apiService,
+      this.serviceContainer.folderApiService,
+      this.serviceContainer.billingAccountProfileStateService,
+      this.serviceContainer.organizationService,
+    );
+    this.editCommand = new EditCommand(
+      this.serviceContainer.cipherService,
+      this.serviceContainer.folderService,
+      this.serviceContainer.cryptoService,
+      this.serviceContainer.apiService,
+      this.serviceContainer.folderApiService,
+    );
+    this.generateCommand = new GenerateCommand(
+      this.serviceContainer.passwordGenerationService,
+      this.serviceContainer.stateService,
+    );
+    this.syncCommand = new SyncCommand(this.serviceContainer.syncService);
+    this.statusCommand = new StatusCommand(
+      this.serviceContainer.environmentService,
+      this.serviceContainer.syncService,
+      this.serviceContainer.accountService,
+      this.serviceContainer.authService,
+    );
+    this.deleteCommand = new DeleteCommand(
+      this.serviceContainer.cipherService,
+      this.serviceContainer.folderService,
+      this.serviceContainer.apiService,
+      this.serviceContainer.folderApiService,
+      this.serviceContainer.billingAccountProfileStateService,
+    );
+    this.confirmCommand = new ConfirmCommand(
+      this.serviceContainer.apiService,
+      this.serviceContainer.cryptoService,
+      this.serviceContainer.organizationUserService,
+    );
+    this.restoreCommand = new RestoreCommand(this.serviceContainer.cipherService);
+    this.shareCommand = new ShareCommand(this.serviceContainer.cipherService);
+    this.lockCommand = new LockCommand(this.serviceContainer.vaultTimeoutService);
+    this.unlockCommand = new UnlockCommand(
+      this.serviceContainer.accountService,
+      this.serviceContainer.masterPasswordService,
+      this.serviceContainer.cryptoService,
+      this.serviceContainer.stateService,
+      this.serviceContainer.cryptoFunctionService,
+      this.serviceContainer.apiService,
+      this.serviceContainer.logService,
+      this.serviceContainer.keyConnectorService,
+      this.serviceContainer.environmentService,
+      this.serviceContainer.syncService,
+      this.serviceContainer.organizationApiService,
+      async () => await this.serviceContainer.logout(),
+      this.serviceContainer.kdfConfigService,
+    );
+
+    this.sendCreateCommand = new SendCreateCommand(
+      this.serviceContainer.sendService,
+      this.serviceContainer.environmentService,
+      this.serviceContainer.sendApiService,
+      this.serviceContainer.billingAccountProfileStateService,
+    );
+    this.sendDeleteCommand = new SendDeleteCommand(
+      this.serviceContainer.sendService,
+      this.serviceContainer.sendApiService,
+    );
+    this.sendGetCommand = new SendGetCommand(
+      this.serviceContainer.sendService,
+      this.serviceContainer.environmentService,
+      this.serviceContainer.searchService,
+      this.serviceContainer.cryptoService,
+    );
+    this.sendEditCommand = new SendEditCommand(
+      this.serviceContainer.sendService,
+      this.sendGetCommand,
+      this.serviceContainer.sendApiService,
+      this.serviceContainer.billingAccountProfileStateService,
+    );
+    this.sendListCommand = new SendListCommand(
+      this.serviceContainer.sendService,
+      this.serviceContainer.environmentService,
+      this.serviceContainer.searchService,
+    );
+    this.sendRemovePasswordCommand = new SendRemovePasswordCommand(
+      this.serviceContainer.sendService,
+      this.serviceContainer.sendApiService,
+      this.serviceContainer.environmentService,
+    );
+  }
+
+  configureRouter(router: koaRouter) {
+    router.get("/generate", async (ctx, next) => {
+      const response = await this.generateCommand.run(ctx.request.query);
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.get("/status", async (ctx, next) => {
+      const response = await this.statusCommand.run();
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.get("/list/object/:object", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      let response: Response = null;
+      if (ctx.params.object === "send") {
+        response = await this.sendListCommand.run(ctx.request.query);
+      } else {
+        response = await this.listCommand.run(ctx.params.object, ctx.request.query);
+      }
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.get("/send/list", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      const response = await this.sendListCommand.run(ctx.request.query);
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/sync", async (ctx, next) => {
+      const response = await this.syncCommand.run(ctx.request.query);
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/lock", async (ctx, next) => {
+      const response = await this.lockCommand.run();
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/unlock", async (ctx, next) => {
+      // Do not allow guessing password location through serve command
+      delete ctx.request.query.passwordFile;
+      delete ctx.request.query.passwordEnv;
+
+      const response = await this.unlockCommand.run(
+        ctx.request.body.password == null ? null : (ctx.request.body.password as string),
+        ctx.request.query,
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/confirm/:object/:id", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      const response = await this.confirmCommand.run(
+        ctx.params.object,
+        ctx.params.id,
+        ctx.request.query,
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/restore/:object/:id", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      const response = await this.restoreCommand.run(ctx.params.object, ctx.params.id);
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/move/:id/:organizationId", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      const response = await this.shareCommand.run(
+        ctx.params.id,
+        ctx.params.organizationId,
+        ctx.request.body, // TODO: Check the format of this body for an array of collection ids
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/attachment", koaMulter().single("file"), async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      const response = await this.createCommand.run(
+        "attachment",
+        ctx.request.body,
+        ctx.request.query,
+        {
+          fileBuffer: ctx.request.file.buffer,
+          fileName: ctx.request.file.originalname,
+        },
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/send/:id/remove-password", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      const response = await this.sendRemovePasswordCommand.run(ctx.params.id);
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/object/:object", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      let response: Response = null;
+      if (ctx.params.object === "send") {
+        response = await this.sendCreateCommand.run(ctx.request.body, ctx.request.query);
+      } else {
+        response = await this.createCommand.run(
+          ctx.params.object,
+          ctx.request.body,
+          ctx.request.query,
+        );
+      }
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.put("/object/:object/:id", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      let response: Response = null;
+      if (ctx.params.object === "send") {
+        ctx.request.body.id = ctx.params.id;
+        response = await this.sendEditCommand.run(ctx.request.body, ctx.request.query);
+      } else {
+        response = await this.editCommand.run(
+          ctx.params.object,
+          ctx.params.id,
+          ctx.request.body,
+          ctx.request.query,
+        );
+      }
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.get("/object/:object/:id", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      let response: Response = null;
+      if (ctx.params.object === "send") {
+        response = await this.sendGetCommand.run(ctx.params.id, null);
+      } else {
+        response = await this.getCommand.run(ctx.params.object, ctx.params.id, ctx.request.query);
+      }
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.delete("/object/:object/:id", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+      let response: Response = null;
+      if (ctx.params.object === "send") {
+        response = await this.sendDeleteCommand.run(ctx.params.id);
+      } else {
+        response = await this.deleteCommand.run(
+          ctx.params.object,
+          ctx.params.id,
+          ctx.request.query,
+        );
+      }
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+  }
+
+  protected processResponse(res: koa.Response, commandResponse: Response) {
+    if (!commandResponse.success) {
+      res.status = 400;
+    }
+    if (commandResponse.data instanceof FileResponse) {
+      res.body = commandResponse.data.data;
+      res.attachment(commandResponse.data.fileName);
+      res.set("Content-Type", "application/octet-stream");
+      res.set("Content-Length", commandResponse.data.data.length.toString());
+    } else {
+      res.body = commandResponse;
+    }
+  }
+
+  protected async errorIfLocked(res: koa.Response) {
+    const authed = await this.serviceContainer.stateService.getIsAuthenticated();
+    if (!authed) {
+      this.processResponse(res, Response.error("You are not logged in."));
+      return true;
+    }
+    if (await this.serviceContainer.cryptoService.hasUserKey()) {
+      return false;
+    }
+    this.processResponse(res, Response.error("Vault is locked."));
+    return true;
+  }
+}
diff --git a/apps/cli/src/program.ts b/apps/cli/src/program.ts
index 597b388a05b..b8ddca11de3 100644
--- a/apps/cli/src/program.ts
+++ b/apps/cli/src/program.ts
@@ -12,7 +12,6 @@ import { BaseProgram } from "./base-program";
 import { CompletionCommand } from "./commands/completion.command";
 import { ConfigCommand } from "./commands/config.command";
 import { EncodeCommand } from "./commands/encode.command";
-import { ServeCommand } from "./commands/serve.command";
 import { StatusCommand } from "./commands/status.command";
 import { UpdateCommand } from "./commands/update.command";
 import { Response } from "./models/response";
@@ -487,34 +486,5 @@ export class Program extends BaseProgram {
         const response = await command.run();
         this.processResponse(response);
       });
-
-    program
-      .command("serve")
-      .description("Start a RESTful API webserver.")
-      .option("--hostname <hostname>", "The hostname to bind your API webserver to.")
-      .option("--port <port>", "The port to run your API webserver on.")
-      .option(
-        "--disable-origin-protection",
-        "If set, allows requests with origin header. Warning, this option exists for backwards compatibility reasons and exposes your environment to known CSRF attacks.",
-      )
-      .on("--help", () => {
-        writeLn("\n  Notes:");
-        writeLn("");
-        writeLn("    Default hostname is `localhost`.");
-        writeLn("    Use hostname `all` for no hostname binding.");
-        writeLn("    Default port is `8087`.");
-        writeLn("");
-        writeLn("  Examples:");
-        writeLn("");
-        writeLn("    bw serve");
-        writeLn("    bw serve --port 8080");
-        writeLn("    bw serve --hostname bwapi.mydomain.com --port 80");
-        writeLn("", true);
-      })
-      .action(async (cmd) => {
-        await this.exitIfNotAuthed();
-        const command = new ServeCommand(this.serviceContainer);
-        await command.run(cmd);
-      });
   }
 }
diff --git a/apps/cli/src/serve.program.ts b/apps/cli/src/serve.program.ts
new file mode 100644
index 00000000000..bbf66661e5b
--- /dev/null
+++ b/apps/cli/src/serve.program.ts
@@ -0,0 +1,49 @@
+import { program } from "commander";
+
+import { BaseProgram } from "./base-program";
+import { ServeCommand } from "./commands/serve.command";
+import { OssServeConfigurator } from "./oss-serve-configurator";
+import { ServiceContainer } from "./service-container";
+import { CliUtils } from "./utils";
+
+const writeLn = CliUtils.writeLn;
+
+export class ServeProgram extends BaseProgram {
+  constructor(
+    serviceContainer: ServiceContainer,
+    private configurator: OssServeConfigurator,
+  ) {
+    super(serviceContainer);
+  }
+
+  register() {
+    program
+      .command("serve")
+      .description("Start a RESTful API webserver.")
+      .option("--hostname <hostname>", "The hostname to bind your API webserver to.")
+      .option("--port <port>", "The port to run your API webserver on.")
+      .option(
+        "--disable-origin-protection",
+        "If set, allows requests with origin header. Warning, this option exists for backwards compatibility reasons and exposes your environment to known CSRF attacks.",
+      )
+      .on("--help", () => {
+        writeLn("\n  Notes:");
+        writeLn("");
+        writeLn("    Default hostname is `localhost`.");
+        writeLn("    Use hostname `all` for no hostname binding.");
+        writeLn("    Default port is `8087`.");
+        writeLn("");
+        writeLn("  Examples:");
+        writeLn("");
+        writeLn("    bw serve");
+        writeLn("    bw serve --port 8080");
+        writeLn("    bw serve --hostname bwapi.mydomain.com --port 80");
+        writeLn("", true);
+      })
+      .action(async (cmd) => {
+        await this.exitIfNotAuthed();
+        const command = new ServeCommand(this.serviceContainer, this.configurator);
+        await command.run(cmd);
+      });
+  }
+}
diff --git a/bitwarden_license/bit-cli/src/admin-console/device-approval/approve-all.command.ts b/bitwarden_license/bit-cli/src/admin-console/device-approval/approve-all.command.ts
index 3214a0fc41e..bb00c50ab12 100644
--- a/bitwarden_license/bit-cli/src/admin-console/device-approval/approve-all.command.ts
+++ b/bitwarden_license/bit-cli/src/admin-console/device-approval/approve-all.command.ts
@@ -6,6 +6,8 @@ import { MessageResponse } from "@bitwarden/cli/models/response/message.response
 import { OrganizationService } from "@bitwarden/common/admin-console/services/organization/organization.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
+import { ServiceContainer } from "../../service-container";
+
 export class ApproveAllCommand {
   constructor(
     private organizationAuthRequestService: OrganizationAuthRequestService,
@@ -49,4 +51,11 @@ export class ApproveAllCommand {
       return Response.error(e);
     }
   }
+
+  static create(serviceContainer: ServiceContainer) {
+    return new ApproveAllCommand(
+      serviceContainer.organizationAuthRequestService,
+      serviceContainer.organizationService,
+    );
+  }
 }
diff --git a/bitwarden_license/bit-cli/src/admin-console/device-approval/approve.command.ts b/bitwarden_license/bit-cli/src/admin-console/device-approval/approve.command.ts
index 8efa172296c..918bd077b05 100644
--- a/bitwarden_license/bit-cli/src/admin-console/device-approval/approve.command.ts
+++ b/bitwarden_license/bit-cli/src/admin-console/device-approval/approve.command.ts
@@ -5,6 +5,7 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
 import { OrganizationAuthRequestService } from "../../../../bit-common/src/admin-console/auth-requests";
+import { ServiceContainer } from "../../service-container";
 
 export class ApproveCommand {
   constructor(
@@ -51,4 +52,11 @@ export class ApproveCommand {
       return Response.error(e);
     }
   }
+
+  static create(serviceContainer: ServiceContainer) {
+    return new ApproveCommand(
+      serviceContainer.organizationService,
+      serviceContainer.organizationAuthRequestService,
+    );
+  }
 }
diff --git a/bitwarden_license/bit-cli/src/admin-console/device-approval/deny-all.command.ts b/bitwarden_license/bit-cli/src/admin-console/device-approval/deny-all.command.ts
index 59cc4235ebf..db73773f086 100644
--- a/bitwarden_license/bit-cli/src/admin-console/device-approval/deny-all.command.ts
+++ b/bitwarden_license/bit-cli/src/admin-console/device-approval/deny-all.command.ts
@@ -6,6 +6,7 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
 import { OrganizationAuthRequestService } from "../../../../bit-common/src/admin-console/auth-requests";
+import { ServiceContainer } from "../../service-container";
 
 export class DenyAllCommand {
   constructor(
@@ -46,4 +47,11 @@ export class DenyAllCommand {
       return Response.error(e);
     }
   }
+
+  static create(serviceContainer: ServiceContainer) {
+    return new DenyAllCommand(
+      serviceContainer.organizationService,
+      serviceContainer.organizationAuthRequestService,
+    );
+  }
 }
diff --git a/bitwarden_license/bit-cli/src/admin-console/device-approval/deny.command.ts b/bitwarden_license/bit-cli/src/admin-console/device-approval/deny.command.ts
index a9676d3fc54..3470baaa25e 100644
--- a/bitwarden_license/bit-cli/src/admin-console/device-approval/deny.command.ts
+++ b/bitwarden_license/bit-cli/src/admin-console/device-approval/deny.command.ts
@@ -5,6 +5,7 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
 import { OrganizationAuthRequestService } from "../../../../bit-common/src/admin-console/auth-requests";
+import { ServiceContainer } from "../../service-container";
 
 export class DenyCommand {
   constructor(
@@ -43,4 +44,11 @@ export class DenyCommand {
       return Response.error(e);
     }
   }
+
+  static create(serviceContainer: ServiceContainer) {
+    return new DenyCommand(
+      serviceContainer.organizationService,
+      serviceContainer.organizationAuthRequestService,
+    );
+  }
 }
diff --git a/bitwarden_license/bit-cli/src/admin-console/device-approval/device-approval.program.ts b/bitwarden_license/bit-cli/src/admin-console/device-approval/device-approval.program.ts
index 408a5b8d817..984bd15cde7 100644
--- a/bitwarden_license/bit-cli/src/admin-console/device-approval/device-approval.program.ts
+++ b/bitwarden_license/bit-cli/src/admin-console/device-approval/device-approval.program.ts
@@ -42,11 +42,7 @@ export class DeviceApprovalProgram extends BaseProgram {
         await this.exitIfFeatureFlagDisabled(FeatureFlag.BulkDeviceApproval);
         await this.exitIfLocked();
 
-        const cmd = new ListCommand(
-          this.serviceContainer.organizationAuthRequestService,
-          this.serviceContainer.organizationService,
-        );
-
+        const cmd = ListCommand.create(this.serviceContainer);
         const response = await cmd.run(options.organizationid);
         this.processResponse(response);
       });
@@ -61,10 +57,7 @@ export class DeviceApprovalProgram extends BaseProgram {
         await this.exitIfFeatureFlagDisabled(FeatureFlag.BulkDeviceApproval);
         await this.exitIfLocked();
 
-        const cmd = new ApproveCommand(
-          this.serviceContainer.organizationService,
-          this.serviceContainer.organizationAuthRequestService,
-        );
+        const cmd = ApproveCommand.create(this.serviceContainer);
         const response = await cmd.run(options.organizationid, id);
         this.processResponse(response);
       });
@@ -78,10 +71,7 @@ export class DeviceApprovalProgram extends BaseProgram {
         await this.exitIfFeatureFlagDisabled(FeatureFlag.BulkDeviceApproval);
         await this.exitIfLocked();
 
-        const cmd = new ApproveAllCommand(
-          this.serviceContainer.organizationAuthRequestService,
-          this.serviceContainer.organizationService,
-        );
+        const cmd = ApproveAllCommand.create(this.serviceContainer);
         const response = await cmd.run(options.organizationid);
         this.processResponse(response);
       });
@@ -96,10 +86,7 @@ export class DeviceApprovalProgram extends BaseProgram {
         await this.exitIfFeatureFlagDisabled(FeatureFlag.BulkDeviceApproval);
         await this.exitIfLocked();
 
-        const cmd = new DenyCommand(
-          this.serviceContainer.organizationService,
-          this.serviceContainer.organizationAuthRequestService,
-        );
+        const cmd = DenyCommand.create(this.serviceContainer);
         const response = await cmd.run(options.organizationid, id);
         this.processResponse(response);
       });
@@ -113,10 +100,7 @@ export class DeviceApprovalProgram extends BaseProgram {
         await this.exitIfFeatureFlagDisabled(FeatureFlag.BulkDeviceApproval);
         await this.exitIfLocked();
 
-        const cmd = new DenyAllCommand(
-          this.serviceContainer.organizationService,
-          this.serviceContainer.organizationAuthRequestService,
-        );
+        const cmd = DenyAllCommand.create(this.serviceContainer);
         const response = await cmd.run(options.organizationid);
         this.processResponse(response);
       });
diff --git a/bitwarden_license/bit-cli/src/admin-console/device-approval/index.ts b/bitwarden_license/bit-cli/src/admin-console/device-approval/index.ts
index 399f89623ec..0482c8caf11 100644
--- a/bitwarden_license/bit-cli/src/admin-console/device-approval/index.ts
+++ b/bitwarden_license/bit-cli/src/admin-console/device-approval/index.ts
@@ -1 +1,6 @@
-export { DeviceApprovalProgram } from "./device-approval.program";
+export * from "./device-approval.program";
+export * from "./approve.command";
+export * from "./approve-all.command";
+export * from "./deny.command";
+export * from "./deny-all.command";
+export * from "./list.command";
diff --git a/bitwarden_license/bit-cli/src/admin-console/device-approval/list.command.ts b/bitwarden_license/bit-cli/src/admin-console/device-approval/list.command.ts
index 10da11b35cb..972be460df7 100644
--- a/bitwarden_license/bit-cli/src/admin-console/device-approval/list.command.ts
+++ b/bitwarden_license/bit-cli/src/admin-console/device-approval/list.command.ts
@@ -6,6 +6,8 @@ import { ListResponse } from "@bitwarden/cli/models/response/list.response";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
+import { ServiceContainer } from "../../service-container";
+
 import { PendingAuthRequestResponse } from "./pending-auth-request.response";
 
 export class ListCommand {
@@ -39,4 +41,11 @@ export class ListCommand {
       return Response.error(e);
     }
   }
+
+  static create(serviceContainer: ServiceContainer) {
+    return new ListCommand(
+      serviceContainer.organizationAuthRequestService,
+      serviceContainer.organizationService,
+    );
+  }
 }
diff --git a/bitwarden_license/bit-cli/src/bit-serve-configurator.ts b/bitwarden_license/bit-cli/src/bit-serve-configurator.ts
new file mode 100644
index 00000000000..c669eb70920
--- /dev/null
+++ b/bitwarden_license/bit-cli/src/bit-serve-configurator.ts
@@ -0,0 +1,95 @@
+import * as koaRouter from "@koa/router";
+
+import { OssServeConfigurator } from "@bitwarden/cli/oss-serve-configurator";
+
+import {
+  ApproveAllCommand,
+  ApproveCommand,
+  DenyAllCommand,
+  DenyCommand,
+  ListCommand,
+} from "./admin-console/device-approval";
+import { ServiceContainer } from "./service-container";
+
+export class BitServeConfigurator extends OssServeConfigurator {
+  constructor(protected override serviceContainer: ServiceContainer) {
+    super(serviceContainer);
+  }
+
+  override configureRouter(router: koaRouter): void {
+    // Register OSS endpoints
+    super.configureRouter(router);
+
+    // Register bit endpoints
+    this.serveDeviceApprovals(router);
+  }
+
+  private serveDeviceApprovals(router: koaRouter) {
+    router.get("/device-approval/:organizationId", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+
+      const response = await ListCommand.create(this.serviceContainer).run(
+        ctx.params.organizationId,
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/device-approval/:organizationId/approve-all", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+
+      const response = await ApproveAllCommand.create(this.serviceContainer).run(
+        ctx.params.organizationId,
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/device-approval/:organizationId/approve/:requestId", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+
+      const response = await ApproveCommand.create(this.serviceContainer).run(
+        ctx.params.organizationId,
+        ctx.params.requestId,
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/device-approval/:organizationId/deny-all", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+
+      const response = await DenyAllCommand.create(this.serviceContainer).run(
+        ctx.params.organizationId,
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+
+    router.post("/device-approval/:organizationId/deny/:requestId", async (ctx, next) => {
+      if (await this.errorIfLocked(ctx.response)) {
+        await next();
+        return;
+      }
+
+      const response = await DenyCommand.create(this.serviceContainer).run(
+        ctx.params.organizationId,
+        ctx.params.requestId,
+      );
+      this.processResponse(ctx.response, response);
+      await next();
+    });
+  }
+}
diff --git a/bitwarden_license/bit-cli/src/bw.ts b/bitwarden_license/bit-cli/src/bw.ts
index d6ebcaf0417..ffbc186d9e0 100644
--- a/bitwarden_license/bit-cli/src/bw.ts
+++ b/bitwarden_license/bit-cli/src/bw.ts
@@ -1,7 +1,9 @@
 import { program } from "commander";
 
 import { registerOssPrograms } from "@bitwarden/cli/register-oss-programs";
+import { ServeProgram } from "@bitwarden/cli/serve.program";
 
+import { BitServeConfigurator } from "./bit-serve-configurator";
 import { registerBitPrograms } from "./register-bit-programs";
 import { ServiceContainer } from "./service-container";
 
@@ -12,6 +14,9 @@ async function main() {
   await registerOssPrograms(serviceContainer);
   await registerBitPrograms(serviceContainer);
 
+  const serveConfigurator = new BitServeConfigurator(serviceContainer);
+  new ServeProgram(serviceContainer, serveConfigurator).register();
+
   program.parse(process.argv);
 }
 

From 61e578e9832684fb136a541591213c34ba498a2e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 13 Jun 2024 15:23:17 +1000
Subject: [PATCH 17/18] [deps] AC: Update webpack to v5.92.0 (#8477)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 54 +++++++++++++++++++++++++++++++----------------
 package.json      |  2 +-
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf734e25a39..b3419b7de3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -185,7 +185,7 @@
         "url": "0.11.3",
         "util": "0.12.5",
         "wait-on": "7.2.0",
-        "webpack": "5.89.0",
+        "webpack": "5.92.0",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "5.0.4",
         "webpack-node-externals": "3.0.0"
@@ -13528,6 +13528,16 @@
         "acorn": "^8"
       }
     },
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -18836,10 +18846,11 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
+      "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -39429,34 +39440,35 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.89.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz",
-      "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
+      "version": "5.92.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.0.tgz",
+      "integrity": "sha512-Bsw2X39MYIgxouNATyVpCNVWBCuUwDgWtN78g6lSdPJRLaQ/PUVm/oXcaRAyY/sMFoKFQrsPeqvTizWtq7QPCA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
-        "@types/estree": "^1.0.0",
-        "@webassemblyjs/ast": "^1.11.5",
-        "@webassemblyjs/wasm-edit": "^1.11.5",
-        "@webassemblyjs/wasm-parser": "^1.11.5",
+        "@types/estree": "^1.0.5",
+        "@webassemblyjs/ast": "^1.12.1",
+        "@webassemblyjs/wasm-edit": "^1.12.1",
+        "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
-        "browserslist": "^4.14.5",
+        "acorn-import-attributes": "^1.9.5",
+        "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.15.0",
+        "enhanced-resolve": "^5.17.0",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.9",
+        "graceful-fs": "^4.2.11",
         "json-parse-even-better-errors": "^2.3.1",
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
         "schema-utils": "^3.2.0",
         "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.3.7",
-        "watchpack": "^2.4.0",
+        "terser-webpack-plugin": "^5.3.10",
+        "watchpack": "^2.4.1",
         "webpack-sources": "^3.2.3"
       },
       "bin": {
@@ -39834,6 +39846,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -39850,6 +39863,7 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -39859,6 +39873,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -39872,6 +39887,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
@@ -39880,13 +39896,15 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
diff --git a/package.json b/package.json
index 93a6b512803..14f0fa3fcda 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,7 @@
     "url": "0.11.3",
     "util": "0.12.5",
     "wait-on": "7.2.0",
-    "webpack": "5.89.0",
+    "webpack": "5.92.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
     "webpack-node-externals": "3.0.0"

From d8c764fc9e85a99a3088a294743062f91a6e67c3 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 13 Jun 2024 15:39:50 +1000
Subject: [PATCH 18/18] [deps] AC: Update sass-loader to v14 (#8481)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 18 +++++++++++-------
 package.json      |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b3419b7de3d..ab127c10058 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -173,7 +173,7 @@
         "remark-gfm": "3.0.1",
         "rimraf": "5.0.7",
         "sass": "1.74.1",
-        "sass-loader": "13.3.3",
+        "sass-loader": "14.2.1",
         "storybook": "7.6.19",
         "style-loader": "3.3.4",
         "tailwindcss": "3.4.3",
@@ -34935,29 +34935,30 @@
       }
     },
     "node_modules/sass-loader": {
-      "version": "13.3.3",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.3.tgz",
-      "integrity": "sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.2.1.tgz",
+      "integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "neo-async": "^2.6.2"
       },
       "engines": {
-        "node": ">= 14.15.0"
+        "node": ">= 18.12.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "fibers": ">= 3.1.0",
+        "@rspack/core": "0.x || 1.x",
         "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
         "sass": "^1.3.0",
         "sass-embedded": "*",
         "webpack": "^5.0.0"
       },
       "peerDependenciesMeta": {
-        "fibers": {
+        "@rspack/core": {
           "optional": true
         },
         "node-sass": {
@@ -34968,6 +34969,9 @@
         },
         "sass-embedded": {
           "optional": true
+        },
+        "webpack": {
+          "optional": true
         }
       }
     },
diff --git a/package.json b/package.json
index 14f0fa3fcda..4d38e7eba55 100644
--- a/package.json
+++ b/package.json
@@ -134,7 +134,7 @@
     "remark-gfm": "3.0.1",
     "rimraf": "5.0.7",
     "sass": "1.74.1",
-    "sass-loader": "13.3.3",
+    "sass-loader": "14.2.1",
     "storybook": "7.6.19",
     "style-loader": "3.3.4",
     "tailwindcss": "3.4.3",