[fix] Expose observable without write access to callers

[feat] Allow the org badge click event to expand collapsed vault filters
1. Extend the BaseVaultFiltersService to manage an observable for collapsed nodes that can be modified from outside the VaultFiltersComponent 2. Subscribe to the new observable in VaultFiltersComponent.ngOnInit() to update the collapsed state of filters when changed from outside the VaultFiltersComponent 3. Add a helper method to VaultFiltersService for expanding vault filters if they are collapsed that sends a new value through the subscription 4. Wire everything up in the IndividualVaultComponent so applying a not null organization filter expanded the vault filters
2025-12-06 00:03:28 +00:00 · 2022-05-17 11:20:30 -04:00 · 2022-05-17 10:53:16 -04:00
57 changed files with 321 additions and 426 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -19,8 +19,8 @@ jobs:
    name: Setup
    runs-on: ubuntu-20.04
    outputs:
-      release_version: ${{ steps.version.outputs.version }}
-      tag_version: ${{ steps.version.outputs.version }}
+      release_version: ${{ steps.version.outputs.package }}
+      tag_version: ${{ steps.version.outputs.tag }}
      branch_name: ${{ steps.branch.outputs.branch_name }}
    steps:
      - name: Branch check
@@ -38,11 +38,20 @@ jobs:

      - name: Check Release Version
        id: version
-        uses: bitwarden/gh-actions/release-version-check@ea9fab01d76940267b4147cc1c4542431246b9f6
-        with:
-          release-type: ${{ github.event.inputs.release_type }}
-          project-type: ts
-          file: package.json
+        run: |
+          version=$( jq -r ".version" package.json)
+          previous_release_tag_version=$(
+            curl -sL https://api.github.com/repos/$GITHUB_REPOSITORY/releases/latest | jq -r ".tag_name"
+          )
+
+          if [ "v$version" == "$previous_release_tag_version" ] && \
+          [ "${{ github.event.inputs.release_type }}" == "Initial Release" ]; then
+            echo "[!] Already released v$version. Please bump version to continue"
+            exit 1
+          fi
+
+          echo "::set-output name=package::$version"
+          echo "::set-output name=tag::v$version"

      - name: Get branch name
        id: branch
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-> **Archived**
+> **Repository Reorganization in Progress**
 >
-> This repository is archived, please go to https://github.com/bitwarden/clients for future development.
+> We are currently migrating some projects over to a mono repository. For existing PR's we will be providing documentation on how to move/migrate them. To minimize the overhead we are actively reviewing open PRs. If possible please ensure any pending comments are resolved as soon as possible.
+>
+> New pull requests created during this transition period may not get addressed —if needed, please create a new PR after the reorganization is complete.

 <p align="center">
    <img src="https://raw.githubusercontent.com/bitwarden/brand/master/screenshots/web-vault-macbook.png" alt="" width="600" height="358" />
--- a/bitwarden_license/src/app/organizations/organizations-routing.module.ts
+++ b/bitwarden_license/src/app/organizations/organizations-routing.module.ts
@@ -22,16 +22,14 @@ const routes: Routes = [
        component: ManageComponent,
        canActivate: [PermissionsGuard],
        data: {
-          permissions: NavigationPermissionsService.getPermissions("manage"),
+          permissions: NavigationPermissionsService.getPermissions("manage").concat(
+            Permissions.ManageSso
+          ),
        },
        children: [
          {
            path: "sso",
            component: SsoComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              permissions: [Permissions.ManageSso],
-            },
          },
        ],
      },
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -15,4 +15,3 @@ files:
        en-GB: en_GB
        en-IN: en_IN
        sr-CY: sr_CY
-        sr-CS: sr_CS
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@bitwarden/web-vault",
-  "version": "2022.5.2",
+  "version": "2.28.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@bitwarden/web-vault",
-      "version": "2022.5.2",
+      "version": "2.28.1",
      "hasInstallScript": true,
      "license": "GPL-3.0",
      "dependencies": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bitwarden/web-vault",
-  "version": "2022.5.2",
+  "version": "2.28.1",
  "license": "GPL-3.0",
  "repository": "https://github.com/bitwarden/web",
  "scripts": {
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -101,7 +101,7 @@
      <div [ngClass]="{ 'col-5': layout, 'col-12': !layout }">
        <div class="row justify-content-md-center mt-5">
          <div [ngClass]="{ 'col-5': !layout, 'col-12': layout }">
-            <h1 class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
+            <p class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</p>
            <div class="card d-block">
              <div class="card-body">
                <app-callout
--- a/src/app/common/base.events.component.ts
+++ b/src/app/common/base.events.component.ts
@@ -122,20 +122,17 @@ export abstract class BaseEventsComponent {
        const userId = r.actingUserId == null ? r.userId : r.actingUserId;
        const eventInfo = await this.eventService.getEventInfo(r);
        const user = this.getUserName(r, userId);
-        const userName = user != null ? user.name : this.i18nService.t("unknown");
-
        return new EventView({
          message: eventInfo.message,
          humanReadableMessage: eventInfo.humanReadableMessage,
          appIcon: eventInfo.appIcon,
          appName: eventInfo.appName,
          userId: userId,
-          userName: r.installationId != null ? `Installation: ${r.installationId}` : userName,
+          userName: user != null ? user.name : this.i18nService.t("unknown"),
          userEmail: user != null ? user.email : "",
          date: r.date,
          ip: r.ipAddress,
          type: r.type,
-          installationId: r.installationId,
        });
      })
    );
--- a/src/app/components/organization-switcher.component.html
+++ b/src/app/components/organization-switcher.component.html
@@ -46,7 +46,7 @@
  <bit-menu #orgPickerMenu>
    <ul aria-labelledby="pickerButton" class="tw-p-0 tw-m-0">
      <li *ngFor="let org of organizations" class="tw-list-none tw-flex tw-flex-col" role="none">
-        <a bitMenuItem [routerLink]="['/organizations', org.id]">
+        <a bit-menu-item [routerLink]="['/organizations', org.id]">
          <i
            class="bwi bwi-check mr-2"
            [ngClass]="org.id === activeOrganization.id ? 'visible' : 'invisible'"
@@ -58,7 +58,7 @@
      </li>
      <bit-menu-divider></bit-menu-divider>
      <li class="tw-list-none" role="none">
-        <a bitMenuItem routerLink="/create-organization">
+        <a bit-menu-item routerLink="/create-organization">
          <i class="bwi bwi-plus mr-2"></i>
          {{ "newOrganization" | i18n }}</a
        >
--- a/src/app/components/premium-badge.component.ts
+++ b/src/app/components/premium-badge.component.ts
@@ -5,7 +5,7 @@ import { MessagingService } from "jslib-common/abstractions/messaging.service";
@Component({
  selector: "app-premium-badge",
  template: `
-    <button *appNotPremium bitBadge badgeType="success" (click)="premiumRequired()">
+    <button *appNotPremium bit-badge badgeType="success" (click)="premiumRequired()">
      {{ "premium" | i18n }}
    </button>
  `,
--- a/src/app/layouts/footer.component.html
+++ b/src/app/layouts/footer.component.html
@@ -1,6 +1,6 @@
 <div class="container footer text-muted">
  <div class="row">
-    <div class="col">&copy; {{ year }} Bitwarden Inc.</div>
+    <div class="col">&copy; {{ year }}, Bitwarden Inc.</div>
    <div class="col text-center"></div>
    <div class="col text-right">
      {{ "versionNumber" | i18n: version }}
--- a/src/app/layouts/frontend-layout.component.html
+++ b/src/app/layouts/frontend-layout.component.html
@@ -1,5 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-  &copy; {{ year }} Bitwarden Inc. <br />
+  &copy; {{ year }}, Bitwarden Inc. <br />
  {{ "versionNumber" | i18n: version }}
 </div>
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -65,24 +65,24 @@
              </div>
            </div>
            <bit-menu-divider></bit-menu-divider>
-            <a bitMenuItem routerLink="/settings/account">
+            <a bit-menu-item routerLink="/settings/account">
              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
              {{ "accountSettings" | i18n }}
            </a>
-            <a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noopener">
+            <a bit-menu-item href="https://bitwarden.com/help/" target="_blank" rel="noopener">
              <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
              {{ "getHelp" | i18n }}
            </a>
-            <a bitMenuItem href="https://bitwarden.com/download/" target="_blank" rel="noopener">
+            <a bit-menu-item href="https://bitwarden.com/download/" target="_blank" rel="noopener">
              <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
              {{ "getApps" | i18n }}
            </a>
            <bit-menu-divider></bit-menu-divider>
-            <button bitMenuItem type="button" (click)="lock()">
+            <button bit-menu-item type="button" (click)="lock()">
              <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
              {{ "lockNow" | i18n }}
            </button>
-            <button bitMenuItem type="button" (click)="logOut()">
+            <button bit-menu-item type="button" (click)="logOut()">
              <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
              {{ "logOut" | i18n }}
            </button>
--- a/src/app/modules/loose-components.module.ts
+++ b/src/app/modules/loose-components.module.ts
@@ -114,6 +114,7 @@ import { EmergencyAccessTakeoverComponent } from "../settings/emergency-access-t
 import { EmergencyAccessViewComponent } from "../settings/emergency-access-view.component";
 import { EmergencyAccessComponent } from "../settings/emergency-access.component";
 import { EmergencyAddEditComponent } from "../settings/emergency-add-edit.component";
+import { LinkSsoComponent } from "../settings/link-sso.component";
 import { OrganizationPlansComponent } from "../settings/organization-plans.component";
 import { PaymentMethodComponent } from "../settings/payment-method.component";
 import { PaymentComponent } from "../settings/payment.component";
@@ -222,6 +223,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
    HintComponent,
    ImportComponent,
    InactiveTwoFactorReportComponent,
+    LinkSsoComponent,
    LockComponent,
    LoginComponent,
    MasterPasswordPolicyComponent,
@@ -381,6 +383,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
    HintComponent,
    ImportComponent,
    InactiveTwoFactorReportComponent,
+    LinkSsoComponent,
    LockComponent,
    LoginComponent,
    MasterPasswordPolicyComponent,
--- a/src/app/modules/organizations/users/enroll-master-password-reset.component.html
+++ b/src/app/modules/organizations/users/enroll-master-password-reset.component.html
@@ -1,59 +0,0 @@
-<div
-  class="modal fade"
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby="enrollMasterPasswordResetTitle"
->
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h2 class="modal-title" id="enrollMasterPasswordResetTitle">
-          {{ (isEnrolled ? "withdrawPasswordReset" : "enrollPasswordReset") | i18n }}
-        </h2>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <app-callout type="warning" *ngIf="!isEnrolled">
-          {{ "resetPasswordEnrollmentWarning" | i18n }}
-        </app-callout>
-        <app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
-      </div>
-      <div class="modal-footer">
-        <button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            *ngIf="form.loading"
-          ></i>
-          <span>
-            {{ "submit" | i18n }}
-          </span>
-        </button>
-        <button
-          bitButton
-          buttonType="secondary"
-          type="button"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span>
-            {{ "cancel" | i18n }}
-          </span>
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
--- a/src/app/modules/organizations/users/enroll-master-password-reset.component.ts
+++ b/src/app/modules/organizations/users/enroll-master-password-reset.component.ts
@@ -1,97 +0,0 @@
-import { Component } from "@angular/core";
-
-import { ModalRef } from "jslib-angular/components/modal/modal.ref";
-import { ModalConfig } from "jslib-angular/services/modal.service";
-import { ApiService } from "jslib-common/abstractions/api.service";
-import { CryptoService } from "jslib-common/abstractions/crypto.service";
-import { I18nService } from "jslib-common/abstractions/i18n.service";
-import { LogService } from "jslib-common/abstractions/log.service";
-import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
-import { SyncService } from "jslib-common/abstractions/sync.service";
-import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
-import { Utils } from "jslib-common/misc/utils";
-import { Organization } from "jslib-common/models/domain/organization";
-import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
-import { Verification } from "jslib-common/types/verification";
-
-@Component({
-  selector: "app-enroll-master-password-reset",
-  templateUrl: "enroll-master-password-reset.component.html",
-})
-export class EnrollMasterPasswordReset {
-  organization: Organization;
-
-  verification: Verification;
-  formPromise: Promise<any>;
-
-  constructor(
-    private userVerificationService: UserVerificationService,
-    private apiService: ApiService,
-    private platformUtilsService: PlatformUtilsService,
-    private i18nService: I18nService,
-    private cryptoService: CryptoService,
-    private syncService: SyncService,
-    private logService: LogService,
-    private modalRef: ModalRef,
-    config: ModalConfig
-  ) {
-    this.organization = config.data.organization;
-  }
-
-  async submit() {
-    let toastStringRef = "withdrawPasswordResetSuccess";
-
-    this.formPromise = this.userVerificationService
-      .buildRequest(this.verification, OrganizationUserResetPasswordEnrollmentRequest)
-      .then(async (request) => {
-        // Set variables
-        let keyString: string = null;
-
-        // Enrolling
-        if (!this.organization.resetPasswordEnrolled) {
-          // Retrieve Public Key
-          const orgKeys = await this.apiService.getOrganizationKeys(this.organization.id);
-          if (orgKeys == null) {
-            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
-          }
-
-          const publicKey = Utils.fromB64ToArray(orgKeys.publicKey);
-
-          // RSA Encrypt user's encKey.key with organization public key
-          const encKey = await this.cryptoService.getEncKey();
-          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
-          keyString = encryptedKey.encryptedString;
-          toastStringRef = "enrollPasswordResetSuccess";
-
-          // Create request and execute enrollment
-          request.resetPasswordKey = keyString;
-          await this.apiService.putOrganizationUserResetPasswordEnrollment(
-            this.organization.id,
-            this.organization.userId,
-            request
-          );
-        } else {
-          // Withdrawal
-          request.resetPasswordKey = keyString;
-          await this.apiService.putOrganizationUserResetPasswordEnrollment(
-            this.organization.id,
-            this.organization.userId,
-            request
-          );
-        }
-
-        await this.syncService.fullSync(true);
-      });
-    try {
-      await this.formPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
-      this.modalRef.close();
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
-
-  get isEnrolled(): boolean {
-    return this.organization.resetPasswordEnrolled;
-  }
-}
--- a/src/app/modules/organizations/users/organization-user.module.ts
+++ b/src/app/modules/organizations/users/organization-user.module.ts
@@ -1,14 +0,0 @@
-import { ScrollingModule } from "@angular/cdk/scrolling";
-import { NgModule } from "@angular/core";
-
-import { LooseComponentsModule } from "../../loose-components.module";
-import { SharedModule } from "../../shared.module";
-
-import { EnrollMasterPasswordReset } from "./enroll-master-password-reset.component";
-
-@NgModule({
-  imports: [SharedModule, ScrollingModule, LooseComponentsModule],
-  declarations: [EnrollMasterPasswordReset],
-  exports: [EnrollMasterPasswordReset],
-})
-export class OrganizationUserModule {}
--- a/src/app/modules/vault-filter/components/collection-filter.component.html
+++ b/src/app/modules/vault-filter/components/collection-filter.component.html
@@ -16,7 +16,7 @@
        aria-hidden="true"
      ></i>
    </button>
-    <h3 class="filter-title">&nbsp;{{ collectionsGrouping.name | i18n }}</h3>
+    <h3 class="filter-title">{{ collectionsGrouping.name | i18n }}</h3>
  </div>
  <ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
    <ng-template #recursiveCollections let-collections>
@@ -31,7 +31,7 @@
          <button
            class="toggle-button"
            *ngIf="c.children.length"
-            (click)="toggleCollapse(c.node)"
+            (click)="collapse(c.node)"
            title="{{ 'toggleCollapse' | i18n }}"
            [attr.aria-expanded]="!isCollapsed(c.node)"
            [attr.aria-controls]="c.node.name + '_children'"
@@ -51,7 +51,7 @@
              class="bwi bwi-collection bwi-fw"
              aria-hidden="true"
            ></i
-            >&nbsp;{{ c.node.name }}
+            >{{ c.node.name }}
          </button>
        </span>
        <ul
--- a/src/app/modules/vault-filter/components/folder-filter.component.html
+++ b/src/app/modules/vault-filter/components/folder-filter.component.html
@@ -16,7 +16,9 @@
        }"
      ></i>
    </button>
-    <h3 class="filter-title">&nbsp;{{ "folders" | i18n }}</h3>
+    <h3 class="filter-title">
+      {{ "folders" | i18n }}
+    </h3>
    <button
      class="text-muted ml-auto add-button"
      (click)="addFolder()"
@@ -54,7 +56,7 @@
          </button>
          <button class="filter-button" (click)="applyFilter(f.node)">
            <i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i
-            >&nbsp;{{ f.node.name }}
+            >{{ f.node.name }}
          </button>
          <button
            class="edit-button"
--- a/src/app/modules/vault-filter/components/organization-filter.component.html
+++ b/src/app/modules/vault-filter/components/organization-filter.component.html
@@ -14,7 +14,7 @@
          <span class="filter-buttons">
            <a href="#" routerLink="/create-organization" class="filter-button">
              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
+              {{ "newOrganization" | i18n }}
            </a>
          </span>
        </li>
@@ -45,6 +45,14 @@
        >
          &nbsp;{{ organizationGrouping.name | i18n }}
        </button>
+        <a
+          href="#"
+          routerLink="/create-organization"
+          class="text-muted ml-auto create-organization-link"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
      </div>
      <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
        <li
@@ -67,14 +75,6 @@
            </ng-container>
          </span>
        </li>
-        <li class="filter-option">
-          <span class="filter-buttons">
-            <a href="#" routerLink="/create-organization" class="filter-button">
-              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
-            </a>
-          </span>
-        </li>
      </ul>
    </ng-container>
    <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
@@ -110,6 +110,15 @@
        >
          &nbsp;{{ organizationGrouping.name | i18n }}
        </button>
+        <a
+          href="#"
+          routerLink="/create-organization"
+          class="text-muted ml-auto create-organization-link"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+          *ngIf="!(displayMode === 'singleOrganizationPolicy')"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
      </div>
      <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
        <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
@@ -140,14 +149,6 @@
            </ng-container>
          </span>
        </li>
-        <li class="filter-option" *ngIf="!(displayMode === 'singleOrganizationPolicy')">
-          <span class="filter-buttons">
-            <a href="#" routerLink="/create-organization" class="filter-button">
-              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
-            </a>
-          </span>
-        </li>
      </ul>
    </ng-container>
  </ng-container>
--- a/src/app/modules/vault-filter/components/organization-options.component.ts
+++ b/src/app/modules/vault-filter/components/organization-options.component.ts
@@ -1,17 +1,17 @@
 import { Component, Input } from "@angular/core";

-import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { PolicyType } from "jslib-common/enums/policyType";
+import { Utils } from "jslib-common/misc/utils";
 import { Organization } from "jslib-common/models/domain/organization";
 import { Policy } from "jslib-common/models/domain/policy";
-
-import { EnrollMasterPasswordReset } from "../../organizations/users/enroll-master-password-reset.component";
+import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";

@Component({
  selector: "app-organization-options",
@@ -29,8 +29,8 @@ export class OrganizationOptionsComponent {
    private i18nService: I18nService,
    private apiService: ApiService,
    private syncService: SyncService,
+    private cryptoService: CryptoService,
    private policyService: PolicyService,
-    private modalService: ModalService,
    private logService: LogService
  ) {}

@@ -113,11 +113,70 @@ export class OrganizationOptionsComponent {
  }

  async toggleResetPasswordEnrollment(org: Organization) {
-    this.modalService.open(EnrollMasterPasswordReset, {
-      allowMultipleModals: true,
-      data: {
-        organization: org,
-      },
-    });
+    // Set variables
+    let keyString: string = null;
+    let toastStringRef = "withdrawPasswordResetSuccess";
+
+    // Enrolling
+    if (!org.resetPasswordEnrolled) {
+      // Alert user about enrollment
+      const confirmed = await this.platformUtilsService.showDialog(
+        this.i18nService.t("resetPasswordEnrollmentWarning"),
+        null,
+        this.i18nService.t("yes"),
+        this.i18nService.t("no"),
+        "warning"
+      );
+      if (!confirmed) {
+        return;
+      }
+
+      // Retrieve Public Key
+      this.actionPromise = this.apiService
+        .getOrganizationKeys(org.id)
+        .then(async (response) => {
+          if (response == null) {
+            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
+          }
+
+          const publicKey = Utils.fromB64ToArray(response.publicKey);
+
+          // RSA Encrypt user's encKey.key with organization public key
+          const encKey = await this.cryptoService.getEncKey();
+          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+          keyString = encryptedKey.encryptedString;
+          toastStringRef = "enrollPasswordResetSuccess";
+
+          // Create request and execute enrollment
+          const request = new OrganizationUserResetPasswordEnrollmentRequest();
+          request.resetPasswordKey = keyString;
+          return this.apiService.putOrganizationUserResetPasswordEnrollment(
+            org.id,
+            org.userId,
+            request
+          );
+        })
+        .then(() => {
+          return this.syncService.fullSync(true);
+        });
+    } else {
+      // Withdrawal
+      const request = new OrganizationUserResetPasswordEnrollmentRequest();
+      request.resetPasswordKey = keyString;
+      this.actionPromise = this.apiService
+        .putOrganizationUserResetPasswordEnrollment(org.id, org.userId, request)
+        .then(() => {
+          return this.syncService.fullSync(true);
+        });
+    }
+
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
+      await this.load();
+    } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
+      this.logService.error(e);
+    }
  }
 }
--- a/src/app/modules/vault-filter/components/type-filter.component.html
+++ b/src/app/modules/vault-filter/components/type-filter.component.html
@@ -15,7 +15,9 @@
      }"
    ></i>
  </button>
-  <h3>&nbsp;{{ "types" | i18n }}</h3>
+  <h3>
+    {{ "types" | i18n }}
+  </h3>
 </div>
 <ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
  <li
@@ -24,14 +26,14 @@
  >
    <span class="filter-buttons">
      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Login)">
-        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
+        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>{{ "typeLogin" | i18n }}
      </button>
    </span>
  </li>
  <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
    <span class="filter-buttons">
      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Card)">
-        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
+        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>{{ "typeCard" | i18n }}
      </button>
    </span>
  </li>
@@ -41,7 +43,7 @@
  >
    <span class="filter-buttons">
      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Identity)">
-        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
+        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>{{ "typeIdentity" | i18n }}
      </button>
    </span>
  </li>
@@ -51,9 +53,7 @@
  >
    <span class="filter-buttons">
      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.SecureNote)">
-        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
-          "typeSecureNote" | i18n
-        }}
+        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>{{ "typeSecureNote" | i18n }}
      </button>
    </span>
  </li>
--- a/src/app/modules/vault-filter/organization-vault-filter.component.ts
+++ b/src/app/modules/vault-filter/organization-vault-filter.component.ts
@@ -1,28 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-import { Organization } from "jslib-common/models/domain/organization";
-
-import { VaultFilterComponent } from "./vault-filter.component";
-
-@Component({
-  selector: "app-organization-vault-filter",
-  templateUrl: "vault-filter.component.html",
-})
-export class OrganizationVaultFilterComponent extends VaultFilterComponent {
-  hideOrganizations = true;
-  hideFavorites = true;
-  hideFolders = true;
-
-  organization: Organization;
-
-  async initCollections() {
-    if (this.organization.canEditAnyCollection) {
-      return await this.vaultFilterService.buildAdminCollections(this.organization.id);
-    }
-    return await this.vaultFilterService.buildCollections(this.organization.id);
-  }
-
-  async reloadCollectionsAndFolders() {
-    this.collections = await this.initCollections();
-  }
-}
--- a/src/app/modules/vault-filter/vault-filter.component.html
+++ b/src/app/modules/vault-filter/vault-filter.component.html
@@ -27,6 +27,7 @@
        appAutofocus
      />
      <app-organization-filter
+        *ngIf="showOrgFilter"
        [hide]="hideOrganizations"
        [activeFilter]="activeFilter"
        [collapsedFilterNodes]="collapsedFilterNodes"
@@ -38,7 +39,7 @@
      ></app-organization-filter>
      <div class="filter">
        <app-status-filter
-          [hideFavorites]="hideFavorites"
+          [hideFavorites]="!showFavorites"
          [hideTrash]="hideTrash"
          [activeFilter]="activeFilter"
          (onFilterChange)="applyFilter($event)"
@@ -54,7 +55,7 @@
      </div>
      <div class="filter">
        <app-folder-filter
-          [hide]="hideFolders"
+          [hide]="!showFolders"
          [activeFilter]="activeFilter"
          [collapsedFilterNodes]="collapsedFilterNodes"
          [folderNodes]="folders"
--- a/src/app/modules/vault-filter/vault-filter.component.ts
+++ b/src/app/modules/vault-filter/vault-filter.component.ts
@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";

 import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
+import { Organization } from "jslib-common/models/domain/organization";

 import { VaultFilterService } from "./vault-filter.service";

@@ -9,18 +10,43 @@ import { VaultFilterService } from "./vault-filter.service";
  templateUrl: "vault-filter.component.html",
 })
 export class VaultFilterComponent extends BaseVaultFilterComponent {
+  @Input() showOrgFilter = true;
+  @Input() showFolders = true;
+  @Input() showFavorites = true;
+
  @Output() onSearchTextChanged = new EventEmitter<string>();

  searchPlaceholder: string;
  searchText = "";

+  organization: Organization;
+
  constructor(protected vaultFilterService: VaultFilterService) {
-    // This empty constructor is required to provide the web vaultFilterService subclass to super()
-    // TODO: refactor this to use proper dependency injection
    super(vaultFilterService);
  }

+  async ngOnInit() {
+    await super.ngOnInit();
+    this.vaultFilterService.collapsedFilterNodes$.subscribe((nodes) => {
+      this.collapsedFilterNodes = nodes;
+    });
+  }
+
  searchTextChanged() {
    this.onSearchTextChanged.emit(this.searchText);
  }
+
+  // This method exists because the vault component gets its data mixed up during the initial sync on first login. It looks for data before the sync is complete.
+  // It should be removed as soon as doing so makes sense.
+  async reloadOrganizations() {
+    this.organizations = await this.vaultFilterService.buildOrganizations();
+    this.activePersonalOwnershipPolicy =
+      await this.vaultFilterService.checkForPersonalOwnershipPolicy();
+    this.activeSingleOrganizationPolicy =
+      await this.vaultFilterService.checkForSingleOrganizationPolicy();
+  }
+
+  async initCollections() {
+    return await this.vaultFilterService.buildCollections(this.organization?.id);
+  }
 }
--- a/src/app/modules/vault-filter/vault-filter.module.ts
+++ b/src/app/modules/vault-filter/vault-filter.module.ts
@@ -1,15 +1,20 @@
 import { NgModule } from "@angular/core";

+import { CipherService } from "jslib-common/abstractions/cipher.service";
+import { CollectionService } from "jslib-common/abstractions/collection.service";
+import { FolderService } from "jslib-common/abstractions/folder.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+
 import { SharedModule } from "../shared.module";

 import { CollectionFilterComponent } from "./components/collection-filter.component";
 import { FolderFilterComponent } from "./components/folder-filter.component";
-import { LinkSsoComponent } from "./components/link-sso.component";
 import { OrganizationFilterComponent } from "./components/organization-filter.component";
 import { OrganizationOptionsComponent } from "./components/organization-options.component";
 import { StatusFilterComponent } from "./components/status-filter.component";
 import { TypeFilterComponent } from "./components/type-filter.component";
-import { OrganizationVaultFilterComponent } from "./organization-vault-filter.component";
 import { VaultFilterComponent } from "./vault-filter.component";
 import { VaultFilterService } from "./vault-filter.service";

@@ -23,10 +28,21 @@ import { VaultFilterService } from "./vault-filter.service";
    OrganizationOptionsComponent,
    StatusFilterComponent,
    TypeFilterComponent,
-    OrganizationVaultFilterComponent,
-    LinkSsoComponent,
  ],
-  exports: [VaultFilterComponent, OrganizationVaultFilterComponent],
-  providers: [VaultFilterService],
+  exports: [VaultFilterComponent],
+  providers: [
+    {
+      provide: VaultFilterService,
+      useClass: VaultFilterService,
+      deps: [
+        StateService,
+        OrganizationService,
+        FolderService,
+        CipherService,
+        CollectionService,
+        PolicyService,
+      ],
+    },
+  ],
 })
 export class VaultFilterModule {}
--- a/src/app/modules/vault-filter/vault-filter.service.ts
+++ b/src/app/modules/vault-filter/vault-filter.service.ts
@@ -1,54 +1,28 @@
-import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";

-import { DynamicTreeNode } from "jslib-angular/modules/vault-filter/models/dynamic-tree-node.model";
 import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
-import { ApiService } from "jslib-common/abstractions/api.service";
-import { CipherService } from "jslib-common/abstractions/cipher.service";
-import { CollectionService } from "jslib-common/abstractions/collection.service";
-import { FolderService } from "jslib-common/abstractions/folder.service";
-import { OrganizationService } from "jslib-common/abstractions/organization.service";
-import { PolicyService } from "jslib-common/abstractions/policy.service";
-import { StateService } from "jslib-common/abstractions/state.service";
-import { CollectionData } from "jslib-common/models/data/collectionData";
-import { Collection } from "jslib-common/models/domain/collection";
-import { CollectionDetailsResponse } from "jslib-common/models/response/collectionResponse";
-import { CollectionView } from "jslib-common/models/view/collectionView";

-@Injectable()
 export class VaultFilterService extends BaseVaultFilterService {
-  constructor(
-    stateService: StateService,
-    organizationService: OrganizationService,
-    folderService: FolderService,
-    cipherService: CipherService,
-    collectionService: CollectionService,
-    policyService: PolicyService,
-    protected apiService: ApiService
-  ) {
-    super(
-      stateService,
-      organizationService,
-      folderService,
-      cipherService,
-      collectionService,
-      policyService
-    );
+  private _collapsedFilterNodes = new BehaviorSubject<Set<string>>(null);
+  collapsedFilterNodes$: Observable<Set<string>> = this._collapsedFilterNodes.asObservable();
+
+  async buildCollapsedFilterNodes(): Promise<Set<string>> {
+    const nodes = await super.buildCollapsedFilterNodes();
+    this._collapsedFilterNodes.next(nodes);
+    return nodes;
  }

-  async buildAdminCollections(organizationId: string) {
-    let result: CollectionView[] = [];
-    const collectionResponse = await this.apiService.getCollections(organizationId);
-    if (collectionResponse?.data != null && collectionResponse.data.length) {
-      const collectionDomains = collectionResponse.data.map(
-        (r: CollectionDetailsResponse) => new Collection(new CollectionData(r))
-      );
-      result = await this.collectionService.decryptMany(collectionDomains);
-    }
+  async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
+    await super.storeCollapsedFilterNodes(collapsedFilterNodes);
+    this._collapsedFilterNodes.next(collapsedFilterNodes);
+  }

-    const nestedCollections = await this.collectionService.getAllNested(result);
-    return new DynamicTreeNode<CollectionView>({
-      fullList: result,
-      nestedList: nestedCollections,
-    });
+  async ensureVaultFiltersAreExpanded() {
+    const collapsedFilterNodes = await super.buildCollapsedFilterNodes();
+    if (!collapsedFilterNodes.has("vaults")) {
+      return;
+    }
+    collapsedFilterNodes.delete("vaults");
+    await this.storeCollapsedFilterNodes(collapsedFilterNodes);
  }
 }
--- a/src/app/modules/vault/modules/individual-vault/individual-vault.component.ts
+++ b/src/app/modules/vault/modules/individual-vault/individual-vault.component.ts
@@ -34,6 +34,7 @@ import { CollectionsComponent } from "../../../../vault/collections.component";
 import { FolderAddEditComponent } from "../../../../vault/folder-add-edit.component";
 import { ShareComponent } from "../../../../vault/share.component";
 import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { VaultFilterService } from "../../../vault-filter/vault-filter.service";
 import { VaultService } from "../../vault.service";

 const BroadcasterSubscriptionId = "VaultComponent";
@@ -58,6 +59,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
  updateKeyModalRef: ViewContainerRef;

  favorites = false;
+  type: CipherType = null;
  folderId: string = null;
  collectionId: string = null;
  organizationId: string = null;
@@ -87,7 +89,8 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
    private organizationService: OrganizationService,
    private vaultService: VaultService,
    private cipherService: CipherService,
-    private passwordRepromptService: PasswordRepromptService
+    private passwordRepromptService: PasswordRepromptService,
+    private vaultFilterService: VaultFilterService
  ) {}

  async ngOnInit() {
@@ -186,6 +189,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
      this.activeFilter.myVaultOnly = true;
    } else {
      this.activeFilter.selectedOrganizationId = orgId;
+      await this.vaultFilterService.ensureVaultFiltersAreExpanded();
    }
    await this.applyVaultFilter(this.activeFilter);
  }
@@ -326,7 +330,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {

  async addCipher() {
    const component = await this.editCipher(null);
-    component.type = this.activeFilter.cipherType;
+    component.type = this.type;
    component.folderId = this.folderId === "none" ? null : this.folderId;
    if (this.activeFilter.selectedCollectionId != null) {
      const collection = this.filterComponent.collections.fullList.filter(
@@ -398,7 +402,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
    if (queryParams == null) {
      queryParams = {
        favorites: this.favorites ? true : null,
-        type: this.activeFilter.cipherType,
+        type: this.type,
        folderId: this.folderId,
        collectionId: this.collectionId,
        deleted: this.deleted ? true : null,
--- a/src/app/modules/vault/modules/organization-badge/organization-name-badge.component.html
+++ b/src/app/modules/vault/modules/organization-badge/organization-name-badge.component.html
@@ -1,5 +1,5 @@
 <button
-  bitBadge
+  bit-badge
  [style.color]="textColor"
  [style.background-color]="color"
  appA11yTitle="{{ organizationName }}"
--- a/src/app/modules/vault/modules/organization-vault/organization-vault.component.html
+++ b/src/app/modules/vault/modules/organization-vault/organization-vault.component.html
@@ -4,12 +4,15 @@
      <div class="groupings">
        <div class="content">
          <div class="inner-content">
-            <app-organization-vault-filter
+            <app-vault-filter
              #vaultFilter
+              [showFolders]="false"
+              [showFavorites]="false"
              [activeFilter]="activeFilter"
+              [showOrgFilter]="false"
              (onFilterChange)="applyVaultFilter($event)"
              (onSearchTextChanged)="filterSearchText($event)"
-            ></app-organization-vault-filter>
+            ></app-vault-filter>
          </div>
        </div>
      </div>
--- a/src/app/modules/vault/modules/organization-vault/organization-vault.component.ts
+++ b/src/app/modules/vault/modules/organization-vault/organization-vault.component.ts
@@ -29,7 +29,7 @@ import { AddEditComponent } from "../../../../organizations/vault/add-edit.compo
 import { AttachmentsComponent } from "../../../../organizations/vault/attachments.component";
 import { CiphersComponent } from "../../../../organizations/vault/ciphers.component";
 import { CollectionsComponent } from "../../../../organizations/vault/collections.component";
-import { OrganizationVaultFilterComponent } from "../../../vault-filter/organization-vault-filter.component";
+import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
 import { VaultService } from "../../vault.service";

 const BroadcasterSubscriptionId = "OrgVaultComponent";
@@ -39,8 +39,7 @@ const BroadcasterSubscriptionId = "OrgVaultComponent";
  templateUrl: "organization-vault.component.html",
 })
 export class OrganizationVaultComponent implements OnInit, OnDestroy {
-  @ViewChild("vaultFilter", { static: true })
-  vaultFilterComponent: OrganizationVaultFilterComponent;
+  @ViewChild("vaultFilter", { static: true }) vaultFilterComponent: VaultFilterComponent;
  @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
  @ViewChild("attachments", { read: ViewContainerRef, static: true })
  attachmentsModalRef: ViewContainerRef;
@@ -58,11 +57,6 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
  trashCleanupWarning: string = null;
  activeFilter: VaultFilter = new VaultFilter();

-  // This is a hack to avoid redundant api calls that fetch OrganizationVaultFilterComponent collections
-  // When it makes sense to do so we should leverage some other communication method for change events that isn't directly tied to the query param for organizationId
-  // i.e. exposing the VaultFiltersService to the OrganizationSwitcherComponent to make relevant updates from a change event instead of just depending on the router
-  firstLoaded = true;
-
  constructor(
    private route: ActivatedRoute,
    private organizationService: OrganizationService,
@@ -101,7 +95,11 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
                case "syncCompleted":
                  if (message.successfully) {
                    await Promise.all([
-                      this.vaultFilterComponent.reloadCollectionsAndFolders(),
+                      this.vaultFilterComponent.reloadCollectionsAndFolders(
+                        new VaultFilter({
+                          selectedOrganizationId: this.organization.id,
+                        } as Partial<VaultFilter>)
+                      ),
                      this.ciphersComponent.refresh(),
                    ]);
                    this.changeDetectorRef.detectChanges();
@@ -111,12 +109,9 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
            });
          });
        }
-
-        if (!this.firstLoaded) {
-          await this.vaultFilterComponent.reloadCollectionsAndFolders();
-        }
-        this.firstLoaded = false;
-
+        await this.vaultFilterComponent.reloadCollectionsAndFolders(
+          new VaultFilter({ selectedOrganizationId: this.organization.id } as Partial<VaultFilter>)
+        );
        await this.ciphersComponent.reload();

        if (qParams.viewEvents != null) {
--- a/src/app/organizations/guards/permissions.guard.ts
+++ b/src/app/organizations/guards/permissions.guard.ts
@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
+import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";

 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
@@ -17,7 +17,7 @@ export class PermissionsGuard implements CanActivate {
    private syncService: SyncService
  ) {}

-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+  async canActivate(route: ActivatedRouteSnapshot) {
    // TODO: We need to fix this issue once and for all.
    if ((await this.syncService.getLastSync()) == null) {
      await this.syncService.fullSync(false);
@@ -39,16 +39,6 @@ export class PermissionsGuard implements CanActivate {

    const permissions = route.data == null ? [] : (route.data.permissions as Permissions[]);
    if (permissions != null && !org.hasAnyPermission(permissions)) {
-      // Handle linkable ciphers for organizations the user only has view access to
-      // https://bitwarden.atlassian.net/browse/EC-203
-      if (state.root.queryParamMap.has("cipherId")) {
-        return this.router.createUrlTree(["/vault"], {
-          queryParams: {
-            cipherId: state.root.queryParamMap.get("cipherId"),
-          },
-        });
-      }
-
      this.platformUtilsService.showToast("error", null, this.i18nService.t("accessDenied"));
      return this.router.createUrlTree(["/"]);
    }
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -52,7 +52,7 @@
            target="_blank"
            rel="noopener"
            appA11yTitle="{{ 'learnMore' | i18n }}"
-            href="https://bitwarden.com/help/user-types-access-control/"
+            href="https://bitwarden.com/help/provider-users/"
          >
            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
          </a>
--- a/src/app/oss.module.ts
+++ b/src/app/oss.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from "@angular/core";

 import { LooseComponentsModule } from "./modules/loose-components.module";
 import { OrganizationManageModule } from "./modules/organizations/manage/organization-manage.module";
-import { OrganizationUserModule } from "./modules/organizations/users/organization-user.module";
 import { PipesModule } from "./modules/pipes/pipes.module";
 import { SharedModule } from "./modules/shared.module";
 import { VaultFilterModule } from "./modules/vault-filter/vault-filter.module";
@@ -16,7 +15,6 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
    OrganizationBadgeModule,
    PipesModule,
    OrganizationManageModule,
-    OrganizationUserModule,
  ],
  exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
  bootstrap: [],
--- a/src/app/reports/breach-report.component.html
+++ b/src/app/reports/breach-report.component.html
@@ -17,7 +17,13 @@
      <small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
    </div>
  </div>
-  <button bitButton buttonType="primary" class="btn-submit" type="submit" [disabled]="form.loading">
+  <button
+    bit-button
+    buttonType="primary"
+    class="btn-submit"
+    type="submit"
+    [disabled]="form.loading"
+  >
    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
    <span>{{ "checkBreaches" | i18n }}</span>
  </button>
--- a/src/app/reports/exposed-passwords-report.component.html
+++ b/src/app/reports/exposed-passwords-report.component.html
@@ -3,7 +3,7 @@
 </div>
 <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
 <button
-  bitButton
+  bit-button
  buttonType="primary"
  type="button"
  class="btn-submit"
--- a/src/app/reports/report-card.component.html
+++ b/src/app/reports/report-card.component.html
@@ -15,7 +15,7 @@
      <p class="tw-mb-0">{{ report.description | i18n }}</p>
    </div>
    <span
-      bitBadge
+      bit-badge
      badgeType="success"
      class="tw-absolute tw-left-2 tw-top-2 tw-leading-none"
      *ngIf="premium"
--- a/src/app/reports/reports.component.html
+++ b/src/app/reports/reports.component.html
@@ -3,7 +3,7 @@

  <div class="row mt-4">
    <div class="col">
-      <a bitButton routerLink="./" *ngIf="!homepage">
+      <a bit-button routerLink="./" *ngIf="!homepage">
        <i class="bwi bwi-angle-left" aria-hidden="true"></i>
        {{ "backToReports" | i18n }}
      </a>
--- a/src/app/send/access.component.html
+++ b/src/app/send/access.component.html
@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="load()" [appApiAction]="formPromise" class="container" ngNativeValidate>
  <div class="row justify-content-center mt-5">
    <div class="col-12">
-      <h1 class="lead text-center mb-4">Bitwarden Send</h1>
+      <p class="lead text-center mb-4">Bitwarden Send</p>
    </div>
    <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
      <p>{{ "sendCreatorIdentifier" | i18n: creatorIdentifier }}</p>
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -23,7 +23,7 @@
            <ul class="filter-options">
              <li class="filter-option" [ngClass]="{ active: selectedAll }">
                <span class="filter-buttons">
-                  <button bitButton class="filter-button" appStopClick (click)="selectAll()">
+                  <button bit-button class="filter-button" appStopClick (click)="selectAll()">
                    <i class="bwi bwi-fw bwi-filter"></i>{{ "allSends" | i18n }}
                  </button>
                </span>
@@ -38,7 +38,7 @@
              <li class="filter-option" [ngClass]="{ active: selectedType === sendType.Text }">
                <span class="filter-buttons">
                  <button
-                    bitButton
+                    bit-button
                    class="filter-button"
                    appStopClick
                    (click)="selectType(sendType.Text)"
@@ -50,7 +50,7 @@
              <li class="filter-option" [ngClass]="{ active: selectedType === sendType.File }">
                <span class="filter-buttons">
                  <button
-                    bitButton
+                    bit-button
                    class="filter-button"
                    appStopClick
                    (click)="selectType(sendType.File)"
@@ -160,15 +160,19 @@
                <i class="bwi bwi-ellipsis-v bwi-lg" aria-hidden="true"></i>
              </button>
              <bit-menu #sendOptions>
-                <button bitMenuItem (click)="copy(s)">
+                <button bit-menu-item (click)="copy(s)">
                  <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                  {{ "copySendLink" | i18n }}
                </button>
-                <button bitMenuItem (click)="removePassword(s)" *ngIf="s.password && !disableSend">
+                <button
+                  bit-menu-item
+                  (click)="removePassword(s)"
+                  *ngIf="s.password && !disableSend"
+                >
                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                  {{ "removePassword" | i18n }}
                </button>
-                <button bitMenuItem (click)="delete(s)">
+                <button bit-menu-item (click)="delete(s)">
                  <span class="tw-text-danger">
                    <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                    {{ "delete" | i18n }}
--- a/src/app/services/event.service.ts
+++ b/src/app/services/event.service.ts
@@ -307,9 +307,6 @@ export class EventService {
      case EventType.Organization_DisabledKeyConnector:
        msg = humanReadableMsg = this.i18nService.t("disabledKeyConnector");
        break;
-      case EventType.Organization_SponsorshipsSynced:
-        msg = humanReadableMsg = this.i18nService.t("sponsorshipsSynced");
-        break;
      // Policies
      case EventType.Policy_Updated: {
        msg = this.i18nService.t("modifiedPolicyId", this.formatPolicyId(ev));
--- a/src/app/settings/account.component.html
+++ b/src/app/settings/account.component.html
@@ -14,13 +14,13 @@
 <div class="card border-danger">
  <div class="card-body">
    <p>{{ "dangerZoneDesc" | i18n }}</p>
-    <button bitButton buttonType="danger" (click)="deauthorizeSessions()">
+    <button bit-button buttonType="danger" (click)="deauthorizeSessions()">
      {{ "deauthorizeSessions" | i18n }}
    </button>
-    <button bitButton buttonType="danger" (click)="purgeVault()">
+    <button bit-button buttonType="danger" (click)="purgeVault()">
      {{ "purgeVault" | i18n }}
    </button>
-    <button bitButton buttonType="danger" (click)="deleteAccount()">
+    <button bit-button buttonType="danger" (click)="deleteAccount()">
      {{ "deleteAccount" | i18n }}
    </button>
  </div>
--- a/src/app/settings/change-kdf.component.html
+++ b/src/app/settings/change-kdf.component.html
@@ -71,7 +71,7 @@
      </div>
    </div>
  </div>
-  <button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
+  <button bit-button buttonType="primary" class="btn-submit" [disabled]="form.loading">
    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
    <span>{{ "changeKdf" | i18n }}</span>
  </button>
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -87,7 +87,7 @@
      </a>
    </div>
  </div>
-  <button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
+  <button bit-button buttonType="primary" class="btn-submit" [disabled]="form.loading">
    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
    <span>{{ "changeMasterPassword" | i18n }}</span>
  </button>
--- a/src/app/modules/vault-filter/components/link-sso.component.html
+++ b/src/app/modules/vault-filter/components/link-sso.component.html
--- a/src/app/modules/vault-filter/components/link-sso.component.ts
+++ b/src/app/modules/vault-filter/components/link-sso.component.ts
--- a/src/app/settings/payment-method.component.html
+++ b/src/app/settings/payment-method.component.html
@@ -3,7 +3,7 @@
    {{ "paymentMethod" | i18n }}
  </h1>
  <button
-    bitButton
+    bit-button
    buttonType="secondary"
    (click)="load()"
    class="tw-ml-auto"
@@ -28,7 +28,7 @@
    <strong>{{ creditOrBalance | currency: "$" }}</strong>
  </p>
  <p>{{ "creditAppliedDesc" | i18n }}</p>
-  <button bitButton buttonType="secondary" (click)="addCredit()" *ngIf="!showAddCredit">
+  <button bit-button buttonType="secondary" (click)="addCredit()" *ngIf="!showAddCredit">
    {{ "addCredit" | i18n }}
  </button>
  <app-add-credit
@@ -56,7 +56,7 @@
      {{ paymentSource.description }}
    </p>
  </ng-container>
-  <button bitButton buttonType="secondary" (click)="changePayment()" *ngIf="!showAdjustPayment">
+  <button bit-button buttonType="secondary" (click)="changePayment()" *ngIf="!showAdjustPayment">
    {{ (paymentSource ? "changePaymentMethod" : "addPaymentMethod") | i18n }}
  </button>
  <app-adjust-payment
--- a/src/app/settings/premium.component.html
+++ b/src/app/settings/premium.component.html
@@ -48,7 +48,7 @@
    {{ "premiumPrice" | i18n: (premiumPrice | currency: "$") }}
  </p>
  <a
-    bitButton
+    bit-button
    href="https://vault.bitwarden.com/#/settings/premium"
    target="_blank"
    rel="noopener"
@@ -69,7 +69,7 @@
      }}</small>
    </div>
    <button
-      bitButton
+      bit-button
      buttonType="primary"
      type="submit"
      class="btn-submit"
@@ -125,7 +125,13 @@
    </p>
  </div>
  <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
-  <button bitButton buttonType="primary" type="submit" class="btn-submit" [disabled]="form.loading">
+  <button
+    bit-button
+    buttonType="primary"
+    type="submit"
+    class="btn-submit"
+    [disabled]="form.loading"
+  >
    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
    <span>{{ "submit" | i18n }}</span>
  </button>
--- a/src/app/settings/security-keys.component.html
+++ b/src/app/settings/security-keys.component.html
@@ -8,10 +8,10 @@
 <p>
  {{ "userApiKeyDesc" | i18n }}
 </p>
-<button bitButton buttonType="secondary" (click)="viewUserApiKey()">
+<button bit-button buttonType="secondary" (click)="viewUserApiKey()">
  {{ "viewApiKey" | i18n }}
 </button>
-<button bitButton buttonType="secondary" (click)="rotateUserApiKey()">
+<button bit-button buttonType="secondary" (click)="rotateUserApiKey()">
  {{ "rotateApiKey" | i18n }}
 </button>
 <ng-template #viewUserApiKeyTemplate></ng-template>
--- a/src/app/settings/two-factor-setup.component.html
+++ b/src/app/settings/two-factor-setup.component.html
@@ -5,7 +5,7 @@
 <p *ngIf="organizationId">{{ "twoStepLoginOrganizationDesc" | i18n }}</p>
 <bit-callout type="warning" *ngIf="!organizationId">
  <p>{{ "twoStepLoginRecoveryWarning" | i18n }}</p>
-  <button bitButton buttonType="secondary" (click)="recoveryCode()">
+  <button bit-button buttonType="secondary" (click)="recoveryCode()">
    {{ "viewRecoveryCode" | i18n }}
  </button>
 </bit-callout>
@@ -45,7 +45,7 @@
    </div>
    <div class="ml-auto">
      <button
-        bitButton
+        bit-button
        buttonType="secondary"
        [disabled]="!canAccessPremium && p.premium"
        (click)="manage(p.type)"
--- a/src/app/settings/user-billing-history.component.html
+++ b/src/app/settings/user-billing-history.component.html
@@ -3,7 +3,7 @@
    {{ "billingHistory" | i18n }}
  </h1>
  <button
-    bitButton
+    bit-button
    buttonType="secondary"
    (click)="load()"
    class="tw-ml-auto"
--- a/src/app/settings/user-subscription.component.html
+++ b/src/app/settings/user-subscription.component.html
@@ -39,7 +39,7 @@
  >
    <p>{{ "subscriptionPendingCanceled" | i18n }}</p>
    <button
-      bitButton
+      bit-button
      type="button"
      buttonType="secondary"
      #reinstateBtn
@@ -63,7 +63,7 @@
        <dt>{{ "status" | i18n }}</dt>
        <dd>
          <span class="text-capitalize">{{ (subscription && subscription.status) || "-" }}</span>
-          <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
+          <span bit-badge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
            "pendingCancellation" | i18n
          }}</span>
        </dd>
@@ -96,11 +96,11 @@
  </div>
  <ng-container *ngIf="selfHosted">
    <div>
-      <button type="button" bitButton buttonType="secondary" (click)="updateLicense()">
+      <button type="button" bit-button buttonType="secondary" (click)="updateLicense()">
        {{ "updateLicense" | i18n }}
      </button>
      <a
-        bitButton
+        bit-button
        buttonType="secondary"
        href="https://vault.bitwarden.com/#/settings/subscription"
        target="_blank"
@@ -131,7 +131,7 @@
  <ng-container *ngIf="!selfHosted">
    <div class="d-flex">
      <button
-        bitButton
+        bit-button
        type="button"
        buttonType="secondary"
        (click)="downloadLicense()"
@@ -140,7 +140,7 @@
        {{ "downloadLicense" | i18n }}
      </button>
      <button
-        bitButton
+        bit-button
        #cancelBtn
        type="button"
        buttonType="danger"
@@ -171,11 +171,11 @@
    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
      <div class="mt-3">
        <div class="d-flex" *ngIf="!showAdjustStorage">
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
+          <button bit-button type="button" buttonType="secondary" (click)="adjustStorage(true)">
            {{ "addStorage" | i18n }}
          </button>
          <button
-            bitButton
+            bit-button
            type="button"
            buttonType="secondary"
            class="tw-ml-1"
--- a/src/app/tools/generator.component.ts
+++ b/src/app/tools/generator.component.ts
@@ -40,13 +40,11 @@ export class GeneratorComponent extends BaseGeneratorComponent {
      route,
      window
    );
-    if (platformUtilsService.isSelfHost()) {
-      // Cannot use Firefox Relay on self hosted web vaults due to CORS issues with Firefox Relay API
-      this.forwardOptions.splice(
-        this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
-        1
-      );
-    }
+    // Cannot use Firefox Relay on the web vault yet due to CORS issues with Firefox Relay API
+    this.forwardOptions.splice(
+      this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
+      1
+    );
  }

  async history() {
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -64,12 +64,12 @@
          </button>
          <bit-menu #cipherOptions>
            <ng-container *ngIf="c.type === cipherType.Login && !c.isDeleted">
-              <button bitMenuItem (click)="copy(c, c.login.username, 'username', 'Username')">
+              <button bit-menu-item (click)="copy(c, c.login.username, 'username', 'Username')">
                <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                {{ "copyUsername" | i18n }}
              </button>
              <button
-                bitMenuItem
+                bit-menu-item
                (click)="copy(c, c.login.password, 'password', 'Password')"
                *ngIf="c.viewPassword"
              >
@@ -77,24 +77,24 @@
                {{ "copyPassword" | i18n }}
              </button>
              <button
-                bitMenuItem
+                bit-menu-item
                (click)="copy(c, c.login.totp, 'verificationCodeTotp', 'TOTP')"
                *ngIf="displayTotpCopyButton(c)"
              >
                <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                {{ "copyVerificationCode" | i18n }}
              </button>
-              <button bitMenuItem *ngIf="c.login.canLaunch" (click)="launch(c.login.launchUri)">
+              <button bit-menu-item *ngIf="c.login.canLaunch" (click)="launch(c.login.launchUri)">
                <i class="bwi bwi-fw bwi-share-square" aria-hidden="true"></i>
                {{ "launch" | i18n }}
              </button>
            </ng-container>
-            <button bitMenuItem (click)="attachments(c)">
+            <button bit-menu-item (click)="attachments(c)">
              <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
              {{ "attachments" | i18n }}
            </button>
            <button
-              bitMenuItem
+              bit-menu-item
              *ngIf="((!organization && !c.organizationId) || organization) && !c.isDeleted"
              (click)="clone(c)"
            >
@@ -102,26 +102,26 @@
              {{ "clone" | i18n }}
            </button>
            <button
-              bitMenuItem
+              bit-menu-item
              *ngIf="!organization && !c.organizationId && !c.isDeleted"
              (click)="share(c)"
            >
              <i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
              {{ "moveToOrganization" | i18n }}
            </button>
-            <button bitMenuItem *ngIf="c.organizationId && !c.isDeleted" (click)="collections(c)">
+            <button bit-menu-item *ngIf="c.organizationId && !c.isDeleted" (click)="collections(c)">
              <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
              {{ "collections" | i18n }}
            </button>
-            <button bitMenuItem *ngIf="c.organizationId && accessEvents" (click)="events(c)">
+            <button bit-menu-item *ngIf="c.organizationId && accessEvents" (click)="events(c)">
              <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
              {{ "eventLogs" | i18n }}
            </button>
-            <button bitMenuItem (click)="restore(c)" *ngIf="c.isDeleted">
+            <button bit-menu-item (click)="restore(c)" *ngIf="c.isDeleted">
              <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
              {{ "restore" | i18n }}
            </button>
-            <button bitMenuItem (click)="delete(c)">
+            <button bit-menu-item (click)="delete(c)">
              <span class="tw-text-danger">
                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                {{ (c.isDeleted ? "permanentlyDelete" : "delete") | i18n }}
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -4163,7 +4163,7 @@
    "message": "Password reset success!"
  },
  "resetPasswordEnrollmentWarning": {
-    "message": "Enrollment will allow organization administrators to change your master password"
+    "message": "Enrollment will allow organization administrators to change your master password. Are you sure you want to enroll?"
  },
  "resetPasswordPolicy": {
    "message": "Master Password Reset"
@@ -4674,8 +4674,8 @@
  "removeSponsorshipSuccess": {
    "message": "Sponsorship Removed"
  },
-  "ssoKeyConnectorError": {
-    "message": "Key Connector error: make sure Key Connector is available and working correctly."
+  "ssoKeyConnectorUnavailable": {
+    "message": "Unable to reach the Key Connector, try again later."
  },
  "keyConnectorUrl": {
    "message": "Key Connector URL"
@@ -5005,7 +5005,7 @@
    "message": "Service"
  },
  "unknownCipher": {
-    "message": "Unknown Item, you may need to request permission to access this item."
+    "message": "Unknown Item, you may need to login with another account to access this item."
  },
  "cannotSponsorSelf": {
    "message": "You cannot redeem for the active account. Enter a different email."
@@ -5041,9 +5041,6 @@
    "message": "Last Sync",
    "Description": "Used as a prefix to indicate the last time a sync occured. Example \"Last sync 1968-11-16 00:00:00\""
  },
-  "sponsorshipsSynced": {
-    "message": "Self-hosted sponsorships synced."
-  },
  "billingManagedByProvider": {
    "message": "Managed by $PROVIDER$",
    "placeholders": {
--- a/src/scss/vault-filters.scss
+++ b/src/scss/vault-filters.scss
@@ -14,6 +14,14 @@
    font-size: $font-size-base;
  }

+  a.create-organization-link {
+    &:hover {
+      @include themify($themes) {
+        color: themed("iconHover") !important;
+      }
+    }
+  }
+
  button {
    @extend .no-btn;
  }