Merge branch 'main' of github.com:bitwarden/clients

.github/workflows/version-auto-bump.yml

@@ -27,9 +27,9 @@ jobs:
         env:
           GH_TOKEN: ${{ steps.retrieve-bot-secrets.outputs.github-pat-bitwarden-devops-bot-repo-scope }}
         run: |
-          echo '{"cut_rc_branch": "false", \
+          echo '{"cut_rc_branch": "false",
-                 "bump_browser": "false", \
+                 "bump_browser": "false",
-                 "bump_cli": "false", \
+                 "bump_cli": "false",
-                 "bump_desktop": "true", \
+                 "bump_desktop": "true",
                  "bump_web": "false"}' | \
           gh workflow run version-bump.yml --json --repo bitwarden/clients

apps/browser/src/autofill/popup/settings/autofill.component.ts

@@ -105,11 +105,7 @@ export class AutofillComponent implements OnInit {
   }
 
   async updateAutoFillOverlayVisibility() {
-    const previousAutoFillOverlayVisibility = await firstValueFrom(
-      this.autofillSettingsService.inlineMenuVisibility$,
-    );
     await this.autofillSettingsService.setInlineMenuVisibility(this.autoFillOverlayVisibility);
-    await this.handleUpdatingAutofillOverlayContentScripts(previousAutoFillOverlayVisibility);
     await this.requestPrivacyPermission();
   }
 
@@ -181,27 +177,6 @@ export class AutofillComponent implements OnInit {
     BrowserApi.createNewTab(this.disablePasswordManagerLink);
   }
 
-  private async handleUpdatingAutofillOverlayContentScripts(
-    previousAutoFillOverlayVisibility: number,
-  ) {
-    const autofillOverlayPreviouslyDisabled =
-      previousAutoFillOverlayVisibility === AutofillOverlayVisibility.Off;
-    const autofillOverlayCurrentlyDisabled =
-      this.autoFillOverlayVisibility === AutofillOverlayVisibility.Off;
-
-    if (!autofillOverlayPreviouslyDisabled && !autofillOverlayCurrentlyDisabled) {
-      const tabs = await BrowserApi.tabsQuery({});
-      tabs.forEach((tab) =>
-        BrowserApi.tabSendMessageData(tab, "updateAutofillOverlayVisibility", {
-          autofillOverlayVisibility: this.autoFillOverlayVisibility,
-        }),
-      );
-      return;
-    }
-
-    await this.autofillService.reloadAutofillScripts();
-  }
-
   async requestPrivacyPermission() {
     if (
       this.autoFillOverlayVisibility === AutofillOverlayVisibility.Off ||

apps/browser/src/autofill/services/autofill.service.spec.ts

@@ -1,5 +1,5 @@
-import { mock, mockReset } from "jest-mock-extended";
+import { mock, mockReset, MockProxy } from "jest-mock-extended";
-import { of } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
 
 import { UserVerificationService } from "@bitwarden/common/auth/services/user-verification/user-verification.service";
 import { AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
@@ -8,6 +8,7 @@ import {
   DefaultDomainSettingsService,
   DomainSettingsService,
 } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { InlineMenuVisibilitySetting } from "@bitwarden/common/autofill/types";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EventType } from "@bitwarden/common/enums";
 import { UriMatchStrategy } from "@bitwarden/common/models/domain/domain-service";
@@ -45,7 +46,7 @@ import {
   createChromeTabMock,
   createGenerateFillScriptOptionsMock,
 } from "../spec/autofill-mocks";
-import { triggerTestFailure } from "../spec/testing-utils";
+import { flushPromises, triggerTestFailure } from "../spec/testing-utils";
 
 import {
   AutoFillOptions,
@@ -64,7 +65,8 @@ const mockEquivalentDomains = [
 describe("AutofillService", () => {
   let autofillService: AutofillService;
   const cipherService = mock<CipherService>();
-  const autofillSettingsService = mock<AutofillSettingsService>();
+  let inlineMenuVisibilityMock$!: BehaviorSubject<InlineMenuVisibilitySetting>;
+  let autofillSettingsService: MockProxy<AutofillSettingsService>;
   const mockUserId = Utils.newGuid() as UserId;
   const accountService: FakeAccountService = mockAccountServiceWith(mockUserId);
   const fakeStateProvider: FakeStateProvider = new FakeStateProvider(accountService);
@@ -79,6 +81,9 @@ describe("AutofillService", () => {
 
   beforeEach(() => {
     scriptInjectorService = new BrowserScriptInjectorService(platformUtilsService, logService);
+    inlineMenuVisibilityMock$ = new BehaviorSubject(AutofillOverlayVisibility.OnFieldFocus);
+    autofillSettingsService = mock<AutofillSettingsService>();
+    (autofillSettingsService as any).inlineMenuVisibility$ = inlineMenuVisibilityMock$;
     autofillService = new AutofillService(
       cipherService,
       autofillSettingsService,
@@ -142,17 +147,92 @@ describe("AutofillService", () => {
       // eslint-disable-next-line no-restricted-syntax
       expect(chrome.runtime.onConnect.addListener).toHaveBeenCalledWith(expect.any(Function));
     });
+
+    describe("handle inline menu visibility change", () => {
+      beforeEach(async () => {
+        await autofillService.loadAutofillScriptsOnInstall();
+        jest.spyOn(BrowserApi, "tabsQuery").mockResolvedValue([tab1, tab2]);
+        jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
+        jest.spyOn(autofillService, "reloadAutofillScripts").mockImplementation();
+      });
+
+      it("returns early if the setting is being initialized", async () => {
+        await flushPromises();
+
+        expect(BrowserApi.tabsQuery).toHaveBeenCalledTimes(1);
+        expect(BrowserApi.tabSendMessageData).not.toHaveBeenCalled();
+      });
+
+      it("returns early if the previous setting is equivalent to the new setting", async () => {
+        inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.OnFieldFocus);
+        await flushPromises();
+
+        expect(BrowserApi.tabsQuery).toHaveBeenCalledTimes(1);
+        expect(BrowserApi.tabSendMessageData).not.toHaveBeenCalled();
+      });
+
+      describe("updates the inline menu visibility setting", () => {
+        it("when changing the inline menu from on focus of field to on button click", async () => {
+          inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.OnButtonClick);
+          await flushPromises();
+
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            tab1,
+            "updateAutofillOverlayVisibility",
+            { autofillOverlayVisibility: AutofillOverlayVisibility.OnButtonClick },
+          );
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            tab2,
+            "updateAutofillOverlayVisibility",
+            { autofillOverlayVisibility: AutofillOverlayVisibility.OnButtonClick },
+          );
+        });
+
+        it("when changing the inline menu from button click to field focus", async () => {
+          inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.OnButtonClick);
+          inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.OnFieldFocus);
+          await flushPromises();
+
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            tab1,
+            "updateAutofillOverlayVisibility",
+            { autofillOverlayVisibility: AutofillOverlayVisibility.OnFieldFocus },
+          );
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            tab2,
+            "updateAutofillOverlayVisibility",
+            { autofillOverlayVisibility: AutofillOverlayVisibility.OnFieldFocus },
+          );
+        });
+      });
+
+      describe("reloads the autofill scripts", () => {
+        it("when changing the inline menu from a disabled setting to an enabled setting", async () => {
+          inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.Off);
+          inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.OnFieldFocus);
+          await flushPromises();
+
+          expect(autofillService.reloadAutofillScripts).toHaveBeenCalled();
+        });
+
+        it("when changing the inline menu from a enabled setting to a disabled setting", async () => {
+          inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.OnFieldFocus);
+          inlineMenuVisibilityMock$.next(AutofillOverlayVisibility.Off);
+          await flushPromises();
+
+          expect(autofillService.reloadAutofillScripts).toHaveBeenCalled();
+        });
+      });
+    });
   });
 
   describe("reloadAutofillScripts", () => {
-    it("disconnects and removes all autofill script ports", () => {
+    it("re-injects the autofill scripts in all tabs and disconnects all connected ports", () => {
-      const port1 = mock<chrome.runtime.Port>({
+      const port1 = mock<chrome.runtime.Port>();
-        disconnect: jest.fn(),
+      const port2 = mock<chrome.runtime.Port>();
-      });
-      const port2 = mock<chrome.runtime.Port>({
-        disconnect: jest.fn(),
-      });
       autofillService["autofillScriptPortsSet"] = new Set([port1, port2]);
+      jest.spyOn(autofillService as any, "injectAutofillScriptsInAllTabs");
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);
 
       // 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
@@ -161,17 +241,6 @@ describe("AutofillService", () => {
       expect(port1.disconnect).toHaveBeenCalled();
       expect(port2.disconnect).toHaveBeenCalled();
       expect(autofillService["autofillScriptPortsSet"].size).toBe(0);
-    });
-
-    it("re-injects the autofill scripts in all tabs", () => {
-      autofillService["autofillScriptPortsSet"] = new Set([mock<chrome.runtime.Port>()]);
-      jest.spyOn(autofillService as any, "injectAutofillScriptsInAllTabs");
-      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);
-
-      // 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
-      autofillService.reloadAutofillScripts();
-
       expect(autofillService["injectAutofillScriptsInAllTabs"]).toHaveBeenCalled();
     });
   });

apps/browser/src/autofill/services/autofill.service.ts

@@ -1,4 +1,5 @@
-import { firstValueFrom } from "rxjs";
+import { firstValueFrom, startWith } from "rxjs";
+import { pairwise } from "rxjs/operators";
 
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -70,10 +71,12 @@ export default class AutofillService implements AutofillServiceInterface {
    */
   async loadAutofillScriptsOnInstall() {
     BrowserApi.addListener(chrome.runtime.onConnect, this.handleInjectedScriptPortConnection);
-
+    void this.injectAutofillScriptsInAllTabs();
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    this.autofillSettingsService.inlineMenuVisibility$
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      .pipe(startWith(undefined), pairwise())
-    this.injectAutofillScriptsInAllTabs();
+      .subscribe(([previousSetting, currentSetting]) =>
+        this.handleInlineMenuVisibilityChange(previousSetting, currentSetting),
+      );
   }
 
   /**
@@ -2090,4 +2093,34 @@ export default class AutofillService implements AutofillServiceInterface {
       }
     }
   }
+
+  /**
+   * Updates the autofill inline menu visibility setting in all active tabs
+   * when the InlineMenuVisibilitySetting observable is updated.
+   *
+   * @param previousSetting - The previous setting value
+   * @param currentSetting - The current setting value
+   */
+  private async handleInlineMenuVisibilityChange(
+    previousSetting: InlineMenuVisibilitySetting,
+    currentSetting: InlineMenuVisibilitySetting,
+  ) {
+    if (previousSetting === undefined || previousSetting === currentSetting) {
+      return;
+    }
+
+    const inlineMenuPreviouslyDisabled = previousSetting === AutofillOverlayVisibility.Off;
+    const inlineMenuCurrentlyDisabled = currentSetting === AutofillOverlayVisibility.Off;
+    if (!inlineMenuPreviouslyDisabled && !inlineMenuCurrentlyDisabled) {
+      const tabs = await BrowserApi.tabsQuery({});
+      tabs.forEach((tab) =>
+        BrowserApi.tabSendMessageData(tab, "updateAutofillOverlayVisibility", {
+          autofillOverlayVisibility: currentSetting,
+        }),
+      );
+      return;
+    }
+
+    await this.reloadAutofillScripts();
+  }
 }

apps/browser/src/autofill/services/collect-autofill-content.service.ts

@@ -1349,6 +1349,10 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
       }
 
       const cachedAutofillFieldElement = this.autofillFieldElements.get(formFieldElement);
+      if (!cachedAutofillFieldElement) {
+        continue;
+      }
+
       cachedAutofillFieldElement.viewable = true;
 
       void this.autofillOverlayContentService?.setupAutofillOverlayListenerOnField(

apps/browser/src/background/runtime.background.ts

@@ -188,6 +188,7 @@ export default class RuntimeBackground {
 
         if (msg.command === "loggedIn") {
           await this.sendBwInstalledMessageToVault();
+          await this.autofillService.reloadAutofillScripts();
         }
 
         if (this.lockedVaultPendingNotifications?.length > 0) {

apps/web/src/app/admin-console/organizations/policies/policies.component.ts

@@ -1,18 +1,19 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute } from "@angular/router";
+import { lastValueFrom } from "rxjs";
 import { first } from "rxjs/operators";
 
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
+import { DialogService } from "@bitwarden/components";
 
 import { PolicyListService } from "../../core/policy-list.service";
 import { BasePolicy } from "../policies";
 
-import { PolicyEditComponent } from "./policy-edit.component";
+import { PolicyEditComponent, PolicyEditDialogResult } from "./policy-edit.component";
 
 @Component({
   selector: "app-org-policies",
@@ -33,11 +34,10 @@ export class PoliciesComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private modalService: ModalService,
     private organizationService: OrganizationService,
     private policyApiService: PolicyApiServiceAbstraction,
     private policyListService: PolicyListService,
-    private router: Router,
+    private dialogService: DialogService,
   ) {}
 
   async ngOnInit() {
@@ -83,21 +83,17 @@ export class PoliciesComponent implements OnInit {
   }
 
   async edit(policy: BasePolicy) {
-    const [modal] = await this.modalService.openViewRef(
+    const dialogRef = PolicyEditComponent.open(this.dialogService, {
-      PolicyEditComponent,
+      data: {
-      this.editModalRef,
+        policy: policy,
-      (comp) => {
+        organizationId: this.organizationId,
-        comp.policy = policy;
+        policiesEnabledMap: this.policiesEnabledMap,
-        comp.organizationId = this.organizationId;
-        comp.policiesEnabledMap = this.policiesEnabledMap;
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-        comp.onSavedPolicy.subscribe(() => {
-          modal.close();
-          // 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.load();
-        });
       },
-    );
+    });
+
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === PolicyEditDialogResult.Saved) {
+      await this.load();
+    }
   }
 }

apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html

@@ -1,49 +1,28 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
+<form [formGroup]="formGroup" [bitSubmit]="submit" [appApiAction]="formPromise">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
+  <bit-dialog [loading]="loading">
-    <form
+    <span bitDialogTitle>{{ "editPolicy" | i18n }} - {{ policy.name | i18n }}</span>
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="policiesEditTitle">
-          {{ "editPolicy" | i18n }} - {{ policy.name | i18n }}
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
 
-      <div class="modal-body">
+    <ng-container bitDialogContent>
-        <div class="modal-body" *ngIf="loading">
+      <div *ngIf="loading">
-          <i
+        <i
-            class="bwi bwi-spinner bwi-spin text-muted"
+          class="bwi bwi-spinner bwi-spin tw-text-muted"
-            title="{{ 'loading' | i18n }}"
+          title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
+          aria-hidden="true"
-          ></i>
+        ></i>
-          <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-        </div>
-        <div [hidden]="loading">
-          <p>{{ policy.description | i18n }}</p>
-          <ng-template #policyForm></ng-template>
-        </div>
       </div>
-      <div class="modal-footer">
+      <div [hidden]="loading">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        <p bitTypography="body1">{{ policy.description | i18n }}</p>
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <ng-template #policyForm></ng-template>
-          <span>{{ "save" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
       </div>
-    </form>
+    </ng-container>
-  </div>
+    <ng-container bitDialogFooter>
-</div>
+      <button bitButton buttonType="primary" bitFormButton type="submit">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton buttonType="secondary" bitDialogClose type="button">
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts

@@ -1,33 +1,34 @@
-import {
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
-  ChangeDetectorRef,
+import { ChangeDetectorRef, Component, Inject, ViewChild, ViewContainerRef } from "@angular/core";
-  Component,
+import { FormBuilder } from "@angular/forms";
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ViewContainerRef,
-} from "@angular/core";
 
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/policy.request";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
 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 { DialogService } from "@bitwarden/components";
 
 import { BasePolicy, BasePolicyComponent } from "../policies";
 
+export type PolicyEditDialogData = {
+  /** Returns policy abstracts. */
+  policy: BasePolicy;
+  /** Returns a unique organization id  */
+  organizationId: string;
+  /** A map indicating whether each policy type is enabled or disabled. */
+  policiesEnabledMap: Map<PolicyType, boolean>;
+};
+
+export enum PolicyEditDialogResult {
+  Saved = "saved",
+}
 @Component({
   selector: "app-policy-edit",
   templateUrl: "policy-edit.component.html",
 })
 export class PolicyEditComponent {
-  @Input() policy: BasePolicy;
-  @Input() organizationId: string;
-  @Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
-  @Output() onSavedPolicy = new EventEmitter();
-
   @ViewChild("policyForm", { read: ViewContainerRef, static: true })
   policyFormRef: ViewContainerRef;
 
@@ -39,22 +40,29 @@ export class PolicyEditComponent {
   policyComponent: BasePolicyComponent;
 
   private policyResponse: PolicyResponse;
-
+  formGroup = this.formBuilder.group({
+    enabled: [this.enabled],
+  });
   constructor(
+    @Inject(DIALOG_DATA) protected data: PolicyEditDialogData,
     private policyApiService: PolicyApiServiceAbstraction,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private cdr: ChangeDetectorRef,
-    private logService: LogService,
+    private formBuilder: FormBuilder,
+    private dialogRef: DialogRef<PolicyEditDialogResult>,
   ) {}
+  get policy(): BasePolicy {
+    return this.data.policy;
+  }
 
   async ngAfterViewInit() {
     await this.load();
     this.loading = false;
 
-    this.policyComponent = this.policyFormRef.createComponent(this.policy.component)
+    this.policyComponent = this.policyFormRef.createComponent(this.data.policy.component)
       .instance as BasePolicyComponent;
-    this.policyComponent.policy = this.policy;
+    this.policyComponent.policy = this.data.policy;
     this.policyComponent.policyResponse = this.policyResponse;
 
     this.cdr.detectChanges();
@@ -63,8 +71,8 @@ export class PolicyEditComponent {
   async load() {
     try {
       this.policyResponse = await this.policyApiService.getPolicy(
-        this.organizationId,
+        this.data.organizationId,
-        this.policy.type,
+        this.data.policy.type,
       );
     } catch (e) {
       if (e.statusCode === 404) {
@@ -75,30 +83,29 @@ export class PolicyEditComponent {
     }
   }
 
-  async submit() {
+  submit = async () => {
     let request: PolicyRequest;
     try {
-      request = await this.policyComponent.buildRequest(this.policiesEnabledMap);
+      request = await this.policyComponent.buildRequest(this.data.policiesEnabledMap);
     } catch (e) {
       this.platformUtilsService.showToast("error", null, e.message);
       return;
     }
+    this.formPromise = this.policyApiService.putPolicy(
+      this.data.organizationId,
+      this.data.policy.type,
+      request,
+    );
+    await this.formPromise;
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),
+    );
+    this.dialogRef.close(PolicyEditDialogResult.Saved);
+  };
 
-    try {
+  static open = (dialogService: DialogService, config: DialogConfig<PolicyEditDialogData>) => {
-      this.formPromise = this.policyApiService.putPolicy(
+    return dialogService.open<PolicyEditDialogResult>(PolicyEditComponent, config);
-        this.organizationId,
+  };
-        this.policy.type,
-        request,
-      );
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("editedPolicyId", this.i18nService.t(this.policy.name)),
-      );
-      this.onSavedPolicy.emit();
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
 }

apps/web/src/app/settings/vault-timeout-input.component.html

@@ -1,47 +1,29 @@
 <div [formGroup]="form">
-  <div class="form-group">
+  <bit-form-field>
-    <label for="vaultTimeout">{{ "vaultTimeout" | i18n }}</label>
+    <bit-label>{{ "vaultTimeout" | i18n }}</bit-label>
-    <select
+    <bit-select formControlName="vaultTimeout">
-      id="vaultTimeout"
+      <bit-option
-      name="VaultTimeout"
+        *ngFor="let o of vaultTimeoutOptions"
-      formControlName="vaultTimeout"
+        [value]="o.value"
-      class="form-control"
+        [label]="o.name"
-    >
+      ></bit-option>
-      <option *ngFor="let o of vaultTimeoutOptions" [ngValue]="o.value">{{ o.name }}</option>
+    </bit-select>
-    </select>
+    <bit-hint class="tw-text-sm">{{
-    <small class="form-text text-muted">{{
       ((canLockVault$ | async) ? "vaultTimeoutDesc" : "vaultTimeoutLogoutDesc") | i18n
-    }}</small>
+    }}</bit-hint>
-  </div>
+  </bit-form-field>
-  <div class="form-group" *ngIf="showCustom" formGroupName="custom">
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4" *ngIf="showCustom" formGroupName="custom">
-    <label for="customVaultTimeout">{{ "customVaultTimeout" | i18n }}</label>
+    <bit-form-field class="tw-col-span-6">
-    <div class="row">
+      <bit-label>{{ "customVaultTimeout" | i18n }}</bit-label>
-      <div class="col-6">
+      <input bitInput type="number" min="0" formControlName="hours" />
-        <input
+      <bit-hint>{{ "hours" | i18n }}</bit-hint>
-          id="hours"
+    </bit-form-field>
-          class="form-control"
+    <bit-form-field class="tw-col-span-6 tw-self-end">
-          type="number"
+      <input bitInput type="number" min="0" name="minutes" formControlName="minutes" />
-          min="0"
+      <bit-hint>{{ "minutes" | i18n }}</bit-hint>
-          name="hours"
+    </bit-form-field>
-          formControlName="hours"
-        />
-        <small>{{ "hours" | i18n }}</small>
-      </div>
-      <div class="col-6">
-        <input
-          id="minutes"
-          class="form-control"
-          type="number"
-          min="0"
-          name="minutes"
-          formControlName="minutes"
-        />
-        <small>{{ "minutes" | i18n }}</small>
-      </div>
-    </div>
-
-    <small *ngIf="!exceedsMinimumTimout" class="tw-text-danger">
-      <i class="bwi bwi-error" aria-hidden="true"></i> {{ "vaultCustomTimeoutMinimum" | i18n }}
-    </small>
   </div>
+  <small *ngIf="!exceedsMinimumTimout" class="tw-text-danger">
+    <i class="bwi bwi-error" aria-hidden="true"></i> {{ "vaultCustomTimeoutMinimum" | i18n }}
+  </small>
 </div>

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html

@@ -1,39 +1,21 @@
 <app-header></app-header>
 
-<p>{{ "scimDescription" | i18n }}</p>
+<p bitTypography="body1">{{ "scimDescription" | i18n }}</p>
 
 <div *ngIf="loading">
   <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin 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>
 </div>
-<form
+<form [bitSubmit]="submit" [formGroup]="formData" *ngIf="!loading">
-  #form
+  <bit-form-control>
-  (ngSubmit)="submit()"
+    <input type="checkbox" bitCheckbox [formControl]="enabled" />
-  [appApiAction]="formPromise"
+    <bit-label>{{ "scimEnabledCheckboxDesc" | i18n }}</bit-label>
-  [formGroup]="formData"
+    <bit-hint>{{ "scimEnabledCheckboxDescHelpText" | i18n }}</bit-hint>
-  *ngIf="!loading"
+  </bit-form-control>
->
-  <div class="form-group">
-    <div class="form-check">
-      <input
-        class="form-check-input"
-        type="checkbox"
-        id="enabled"
-        [formControl]="enabled"
-        name="Enabled"
-        aria-describedby="scimEnabledCheckboxDescHelpText"
-      />
-      <label class="form-check-label" for="enabled">{{ "scimEnabledCheckboxDesc" | i18n }}</label>
-      <div id="scimEnabledCheckboxDescHelpText">
-        <small class="form-text text-muted">{{ "scimEnabledCheckboxDescHelpText" | i18n }}</small>
-      </div>
-    </div>
-  </div>
-
   <bit-form-field *ngIf="showScimSettings">
     <bit-label>{{ "scimUrl" | i18n }}</bit-label>
     <input bitInput type="text" formControlName="endpointUrl" />
@@ -41,7 +23,7 @@
       type="button"
       bitSuffix
       bitIconButton="bwi-clone"
-      (click)="copyScimUrl()"
+      [bitAction]="copyScimUrl"
       [appA11yTitle]="'copyScimUrl' | i18n"
     ></button>
   </bit-form-field>
@@ -54,44 +36,32 @@
       formControlName="clientSecret"
       id="clientSecret"
     />
-    <ng-container>
+    <button
-      <button
+      type="button"
-        type="button"
+      bitSuffix
-        bitSuffix
+      [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
-        [disabled]="$any(rotateButton).loading"
+      [bitAction]="toggleScimKey"
-        [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
+      [appA11yTitle]="'toggleVisibility' | i18n"
-        (click)="toggleScimKey()"
+    ></button>
-        [appA11yTitle]="'toggleVisibility' | i18n"
+    <button
-      ></button>
+      type="button"
-    </ng-container>
+      bitSuffix
-    <ng-container #rotateButton [appApiAction]="rotatePromise">
+      bitIconButton="bwi-generate"
-      <!-- TODO: Convert to async actions -->
+      [bitAction]="rotateScimKey"
-      <button
+      bitFormButton
-        [loading]="$any(rotateButton).loading"
+      [appA11yTitle]="'rotateScimKey' | i18n"
-        type="button"
+    ></button>
-        bitSuffix
-        bitIconButton="bwi-generate"
-        (click)="rotateScimKey()"
-        [appA11yTitle]="'rotateScimKey' | i18n"
-      ></button>
-    </ng-container>
     <button
       type="button"
       bitSuffix
       bitIconButton="bwi-clone"
-      (click)="copyScimKey()"
+      [bitAction]="copyScimKey"
       [appA11yTitle]="'copyScimKey' | i18n"
     ></button>
     <bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
   </bit-form-field>
 
-  <button
+  <button type="submit" buttonType="primary" bitButton bitFormButton>
-    type="submit"
-    buttonType="primary"
-    bitButton
-    [loading]="form.loading"
-    [disabled]="form.loading"
-  >
     {{ "save" | i18n }}
   </button>
 </form>

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.ts

@@ -14,7 +14,6 @@ import { OrganizationApiKeyRequest } from "@bitwarden/common/admin-console/model
 import { OrganizationConnectionRequest } from "@bitwarden/common/admin-console/models/request/organization-connection.request";
 import { ScimConfigRequest } from "@bitwarden/common/admin-console/models/request/scim-config.request";
 import { OrganizationConnectionResponse } from "@bitwarden/common/admin-console/models/response/organization-connection.response";
-import { ApiKeyResponse } from "@bitwarden/common/auth/models/response/api-key.response";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -29,8 +28,6 @@ export class ScimComponent implements OnInit {
   loading = true;
   organizationId: string;
   existingConnectionId: string;
-  formPromise: Promise<OrganizationConnectionResponse<ScimConfigApi>>;
-  rotatePromise: Promise<ApiKeyResponse>;
   enabled = new FormControl(false);
   showScimSettings = false;
   showScimKey = false;
@@ -82,11 +79,11 @@ export class ScimComponent implements OnInit {
     });
   }
 
-  async copyScimUrl() {
+  copyScimUrl = async () => {
     this.platformUtilsService.copyToClipboard(await this.getScimEndpointUrl());
-  }
+  };
 
-  async rotateScimKey() {
+  rotateScimKey = async () => {
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "rotateScimKey" },
       content: { key: "rotateScimKeyWarning" },
@@ -102,62 +99,50 @@ export class ScimComponent implements OnInit {
     request.type = OrganizationApiKeyType.Scim;
     request.masterPasswordHash = "N/A";
 
-    this.rotatePromise = this.organizationApiService.rotateApiKey(this.organizationId, request);
+    const response = await this.organizationApiService.rotateApiKey(this.organizationId, request);
+    this.formData.setValue({
+      endpointUrl: await this.getScimEndpointUrl(),
+      clientSecret: response.apiKey,
+    });
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("scimApiKeyRotated"));
+  };
 
-    try {
+  copyScimKey = async () => {
-      const response = await this.rotatePromise;
-      this.formData.setValue({
-        endpointUrl: await this.getScimEndpointUrl(),
-        clientSecret: response.apiKey,
-      });
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("scimApiKeyRotated"));
-    } catch {
-      // Logged by appApiAction, do nothing
-    }
-
-    this.rotatePromise = null;
-  }
-
-  async copyScimKey() {
     this.platformUtilsService.copyToClipboard(this.formData.get("clientSecret").value);
-  }
+  };
 
-  async submit() {
+  submit = async () => {
-    try {
+    const request = new OrganizationConnectionRequest(
-      const request = new OrganizationConnectionRequest(
+      this.organizationId,
-        this.organizationId,
+      OrganizationConnectionType.Scim,
-        OrganizationConnectionType.Scim,
+      true,
-        true,
+      new ScimConfigRequest(this.enabled.value),
-        new ScimConfigRequest(this.enabled.value),
+    );
+    let response: OrganizationConnectionResponse<ScimConfigApi>;
+
+    if (this.existingConnectionId == null) {
+      response = await this.apiService.createOrganizationConnection(request, ScimConfigApi);
+    } else {
+      response = await this.apiService.updateOrganizationConnection(
+        request,
+        ScimConfigApi,
+        this.existingConnectionId,
       );
-      if (this.existingConnectionId == null) {
-        this.formPromise = this.apiService.createOrganizationConnection(request, ScimConfigApi);
-      } else {
-        this.formPromise = this.apiService.updateOrganizationConnection(
-          request,
-          ScimConfigApi,
-          this.existingConnectionId,
-        );
-      }
-      const response = (await this.formPromise) as OrganizationConnectionResponse<ScimConfigApi>;
-      await this.setConnectionFormValues(response);
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("scimSettingsSaved"));
-    } catch (e) {
-      // Logged by appApiAction, do nothing
     }
 
-    this.formPromise = null;
+    await this.setConnectionFormValues(response);
-  }
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("scimSettingsSaved"));
+  };
 
   async getScimEndpointUrl() {
     const env = await firstValueFrom(this.environmentService.environment$);
     return env.getScimUrl() + "/" + this.organizationId;
   }
 
-  toggleScimKey() {
+  toggleScimKey = () => {
     this.showScimKey = !this.showScimKey;
     document.getElementById("clientSecret").focus();
-  }
+  };
 
   private async setConnectionFormValues(connection: OrganizationConnectionResponse<ScimConfigApi>) {
     this.existingConnectionId = connection?.id;

bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html

@@ -2,58 +2,31 @@
   {{ "requireSsoPolicyReq" | i18n }}
 </app-callout>
 
-<div class="form-group">
+<bit-form-control>
-  <div class="form-check">
+  <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
-    <input
+  <bit-label>{{ "turnOn" | i18n }}</bit-label>
-      class="form-check-input"
+</bit-form-control>
-      type="checkbox"
-      id="enabled"
-      [formControl]="enabled"
-      name="Enabled"
-    />
-    <label class="form-check-label" for="enabled">{{ "turnOn" | i18n }}</label>
-  </div>
-</div>
 
 <div [formGroup]="data">
-  <div class="form-group">
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
-    <label for="hours">{{ "maximumVaultTimeoutLabel" | i18n }}</label>
+    <bit-form-field class="tw-col-span-6 !tw-mb-0">
-    <div class="row">
+      <bit-label>{{ "maximumVaultTimeoutLabel" | i18n }}</bit-label>
-      <div class="col-6">
+      <input bitInput type="number" min="0" formControlName="hours" />
-        <input
+      <bit-hint>{{ "hours" | i18n }}</bit-hint>
-          id="hours"
+    </bit-form-field>
-          class="form-control"
+    <bit-form-field class="tw-col-span-6 tw-self-end !tw-mb-0">
-          type="number"
+      <input bitInput type="number" min="0" max="59" formControlName="minutes" />
-          min="0"
+      <bit-hint>{{ "minutes" | i18n }}</bit-hint>
-          name="hours"
+    </bit-form-field>
-          formControlName="hours"
+    <bit-form-field class="tw-col-span-6">
-        />
+      <bit-label>{{ "vaultTimeoutAction" | i18n }}</bit-label>
-        <small>{{ "hours" | i18n }}</small>
+      <bit-select formControlName="action">
-      </div>
+        <bit-option
-      <div class="col-6">
+          *ngFor="let option of vaultTimeoutActionOptions"
-        <input
+          [value]="option.value"
-          id="minutes"
+          [label]="option.name"
-          class="form-control"
+        ></bit-option>
-          type="number"
+      </bit-select>
-          min="0"
+    </bit-form-field>
-          max="59"
-          name="minutes"
-          formControlName="minutes"
-        />
-        <small>{{ "minutes" | i18n }}</small>
-      </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="row">
-      <div class="col-6">
-        <label for="action">{{ "vaultTimeoutAction" | i18n }}</label>
-        <select class="form-control" formControlName="action">
-          <option *ngFor="let o of vaultTimeoutActionOptions" [ngValue]="o.value">
-            {{ o.name }}
-          </option>
-        </select>
-      </div>
-    </div>
   </div>
 </div>

libs/common/spec/utils.ts

@@ -5,6 +5,7 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 
 import { EncryptionType } from "../src/platform/enums";
 import { Utils } from "../src/platform/misc/utils";
+import { SymmetricCryptoKey } from "../src/platform/models/domain/symmetric-crypto-key";
 
 function newGuid() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
@@ -45,6 +46,10 @@ export function makeStaticByteArray(length: number, start = 0) {
   return arr;
 }
 
+export function makeSymmetricCryptoKey<T extends SymmetricCryptoKey>(length: 32 | 64 = 64) {
+  return new SymmetricCryptoKey(makeStaticByteArray(length)) as T;
+}
+
 /**
  * Use to mock a return value of a static fromJSON method.
  */

libs/common/src/vault/models/domain/collection.spec.ts

@@ -1,5 +1,6 @@
-import { mockEnc } from "../../../../spec";
+import { makeSymmetricCryptoKey, mockEnc } from "../../../../spec";
 import { CollectionId, OrganizationId } from "../../../types/guid";
+import { OrgKey } from "../../../types/key";
 import { CollectionData } from "../data/collection.data";
 
 import { Collection } from "./collection";
@@ -51,14 +52,16 @@ describe("Collection", () => {
   it("Decrypt", async () => {
     const collection = new Collection();
     collection.id = "id";
-    collection.organizationId = "orgId";
+    collection.organizationId = "orgId" as OrganizationId;
     collection.name = mockEnc("encName");
     collection.externalId = "extId";
     collection.readOnly = false;
     collection.hidePasswords = false;
     collection.manage = true;
 
-    const view = await collection.decrypt();
+    const key = makeSymmetricCryptoKey<OrgKey>();
+
+    const view = await collection.decrypt(key);
 
     expect(view).toEqual({
       addAccess: false,

libs/common/src/vault/models/domain/collection.ts

@@ -1,5 +1,6 @@
 import Domain from "../../../platform/models/domain/domain-base";
 import { EncString } from "../../../platform/models/domain/enc-string";
+import { OrgKey } from "../../../types/key";
 import { CollectionData } from "../data/collection.data";
 import { CollectionView } from "../view/collection.view";
 
@@ -34,13 +35,14 @@ export class Collection extends Domain {
     );
   }
 
-  decrypt(): Promise<CollectionView> {
+  decrypt(orgKey: OrgKey): Promise<CollectionView> {
     return this.decryptObj(
       new CollectionView(this),
       {
         name: null,
       },
       this.organizationId,
+      orgKey,
     );
   }
 }

libs/common/src/vault/services/collection.service.ts

@@ -12,7 +12,7 @@ import {
   DeriveDefinition,
   DerivedState,
 } from "../../platform/state";
-import { CollectionId, UserId } from "../../types/guid";
+import { CollectionId, OrganizationId, UserId } from "../../types/guid";
 import { CollectionService as CollectionServiceAbstraction } from "../../vault/abstractions/collection.service";
 import { CollectionData } from "../models/data/collection.data";
 import { Collection } from "../models/domain/collection";
@@ -108,9 +108,16 @@ export class CollectionService implements CollectionServiceAbstraction {
       return [];
     }
     const decCollections: CollectionView[] = [];
+
+    const organizationKeys = await firstValueFrom(this.cryptoService.activeUserOrgKeys$);
+
     const promises: Promise<any>[] = [];
     collections.forEach((collection) => {
-      promises.push(collection.decrypt().then((c) => decCollections.push(c)));
+      promises.push(
+        collection
+          .decrypt(organizationKeys[collection.organizationId as OrganizationId])
+          .then((c) => decCollections.push(c)),
+      );
     });
     await Promise.all(promises);
     return decCollections.sort(Utils.getSortFunction(this.i18nService, "name"));

libs/importer/src/importers/bitwarden/bitwarden-json-importer.ts

@@ -1,3 +1,5 @@
+import { firstValueFrom } from "rxjs";
+
 import { PinServiceAbstraction } from "@bitwarden/auth/common";
 import {
   CipherWithIdExport,
@@ -7,6 +9,7 @@ import {
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
+import { OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
@@ -194,7 +197,9 @@ export class BitwardenJsonImporter extends BaseImporter implements Importer {
       if (data.encrypted) {
         const collection = CollectionWithIdExport.toDomain(c);
         collection.organizationId = this.organizationId;
-        collectionView = await collection.decrypt();
+        collectionView = await firstValueFrom(this.cryptoService.activeUserOrgKeys$).then(
+          (orgKeys) => collection.decrypt(orgKeys[c.organizationId as OrganizationId]),
+        );
       } else {
         collectionView = CollectionWithIdExport.toView(c);
         collectionView.organizationId = null;

libs/tools/export/vault-export/vault-export-core/src/services/org-vault-export.service.ts

@@ -1,4 +1,5 @@
 import * as papa from "papaparse";
+import { firstValueFrom } from "rxjs";
 
 import { PinServiceAbstraction } from "@bitwarden/auth/common";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -7,6 +8,7 @@ import { CipherWithIdExport, CollectionWithIdExport } from "@bitwarden/common/mo
 import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
@@ -94,9 +96,11 @@ export class OrganizationVaultExportService
             exportData.collections.forEach((c) => {
               const collection = new Collection(new CollectionData(c as CollectionDetailsResponse));
               exportPromises.push(
-                collection.decrypt().then((decCol) => {
+                firstValueFrom(this.cryptoService.activeUserOrgKeys$)
-                  decCollections.push(decCol);
+                  .then((keys) => collection.decrypt(keys[organizationId as OrganizationId]))
-                }),
+                  .then((decCol) => {
+                    decCollections.push(decCol);
+                  }),
               );
             });
           }

package-lock.json

@@ -99,7 +99,7 @@
         "@types/firefox-webext-browser": "111.0.5",
         "@types/inquirer": "8.2.10",
         "@types/jest": "29.5.12",
-        "@types/jquery": "3.5.29",
+        "@types/jquery": "3.5.30",
         "@types/jsdom": "21.1.6",
         "@types/koa": "2.14.0",
         "@types/koa__multer": "2.0.7",
@@ -10340,9 +10340,9 @@
       "dev": true
     },
     "node_modules/@types/jquery": {
-      "version": "3.5.29",
+      "version": "3.5.30",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.29.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.30.tgz",
-      "integrity": "sha512-oXQQC9X9MOPRrMhPHHOsXqeQDnWeCDT3PelUIg/Oy8FAbzSZtFHRjc7IpbfFVmpLtJ+UOoywpRsuO5Jxjybyeg==",
+      "integrity": "sha512-nbWKkkyb919DOUxjmRVk8vwtDb0/k8FKncmUKFi+NY+QXqWltooxTrswvz4LspQwxvLdvzBN1TImr6cw3aQx2A==",
       "dev": true,
       "dependencies": {
         "@types/sizzle": "*"

package.json

@@ -60,7 +60,7 @@
     "@types/firefox-webext-browser": "111.0.5",
     "@types/inquirer": "8.2.10",
     "@types/jest": "29.5.12",
-    "@types/jquery": "3.5.29",
+    "@types/jquery": "3.5.30",
     "@types/jsdom": "21.1.6",
     "@types/koa": "2.14.0",
     "@types/koa__multer": "2.0.7",