Bumped version to 2022.5.2 (#1730)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
(cherry picked from commit ee4afdd0f2)

.github/workflows/release.yml

@@ -19,8 +19,8 @@ jobs:
     name: Setup
     runs-on: ubuntu-20.04
     outputs:
-      release_version: ${{ steps.version.outputs.package }}
+      release_version: ${{ steps.version.outputs.version }}
-      tag_version: ${{ steps.version.outputs.tag }}
+      tag_version: ${{ steps.version.outputs.version }}
       branch_name: ${{ steps.branch.outputs.branch_name }}
     steps:
       - name: Branch check
@@ -38,20 +38,11 @@ jobs:
 
       - name: Check Release Version
         id: version
-        run: |
+        uses: bitwarden/gh-actions/release-version-check@ea9fab01d76940267b4147cc1c4542431246b9f6
-          version=$( jq -r ".version" package.json)
+        with:
-          previous_release_tag_version=$(
+          release-type: ${{ github.event.inputs.release_type }}
-            curl -sL https://api.github.com/repos/$GITHUB_REPOSITORY/releases/latest | jq -r ".tag_name"
+          project-type: ts
-          )
+          file: package.json
-
-          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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bitwarden/web-vault",
-  "version": "2.28.1",
+  "version": "2022.5.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@bitwarden/web-vault",
-      "version": "2.28.1",
+      "version": "2022.5.2",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitwarden/web-vault",
-  "version": "2.28.1",
+  "version": "2022.5.2",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {

src/app/common/base.events.component.ts

@@ -122,17 +122,20 @@ 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: user != null ? user.name : this.i18nService.t("unknown"),
+          userName: r.installationId != null ? `Installation: ${r.installationId}` : userName,
           userEmail: user != null ? user.email : "",
           date: r.date,
           ip: r.ipAddress,
           type: r.type,
+          installationId: r.installationId,
         });
       })
     );

src/app/modules/loose-components.module.ts

@@ -35,6 +35,7 @@ import { BulkStatusComponent as OrgBulkStatusComponent } from "../organizations/
 import { CollectionAddEditComponent as OrgCollectionAddEditComponent } from "../organizations/manage/collection-add-edit.component";
 import { CollectionsComponent as OrgManageCollectionsComponent } from "../organizations/manage/collections.component";
 import { EntityEventsComponent as OrgEntityEventsComponent } from "../organizations/manage/entity-events.component";
+import { EntityUsersComponent as OrgEntityUsersComponent } from "../organizations/manage/entity-users.component";
 import { EventsComponent as OrgEventsComponent } from "../organizations/manage/events.component";
 import { GroupAddEditComponent as OrgGroupAddEditComponent } from "../organizations/manage/group-add-edit.component";
 import { GroupsComponent as OrgGroupsComponent } from "../organizations/manage/groups.component";
@@ -114,7 +115,6 @@ 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";
@@ -223,7 +223,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
-    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,
@@ -244,6 +243,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
+    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,
@@ -383,7 +383,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
-    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,
@@ -404,6 +403,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
+    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,

src/app/modules/organizations/manage/organization-manage.module.ts

@@ -1,13 +0,0 @@
-import { ScrollingModule } from "@angular/cdk/scrolling";
-import { NgModule } from "@angular/core";
-
-import { SharedModule } from "../../shared.module";
-
-import { EntityUsersComponent } from "./entity-users.component";
-
-@NgModule({
-  imports: [SharedModule, ScrollingModule],
-  declarations: [EntityUsersComponent],
-  exports: [EntityUsersComponent],
-})
-export class OrganizationManageModule {}

src/app/modules/shared.module.ts

@@ -53,13 +53,7 @@ import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
-import {
+import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
-  BadgeModule,
-  ButtonModule,
-  CalloutModule,
-  FormFieldModule,
-  MenuModule,
-} from "@bitwarden/components";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ToastrModule } from "ngx-toastr";
 
@@ -132,7 +126,6 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
-    FormFieldModule,
   ],
   exports: [
     CommonModule,
@@ -143,7 +136,6 @@ registerLocaleData(localeZhTw, "zh-TW");
     ReactiveFormsModule,
     RouterModule,
     BadgeModule,
-    FormFieldModule,
     ButtonModule,
     CalloutModule,
     ToastrModule,

src/app/modules/vault-filter/components/collection-filter.component.html

@@ -16,7 +16,7 @@
         aria-hidden="true"
       ></i>
     </button>
-    <h3 class="filter-title">{{ collectionsGrouping.name | i18n }}</h3>
+    <h3 class="filter-title">&nbsp;{{ 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)="collapse(c.node)"
+            (click)="toggleCollapse(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
-            >{{ c.node.name }}
+            >&nbsp;{{ c.node.name }}
           </button>
         </span>
         <ul

src/app/modules/vault-filter/components/folder-filter.component.html

@@ -16,9 +16,7 @@
         }"
       ></i>
     </button>
-    <h3 class="filter-title">
+    <h3 class="filter-title">&nbsp;{{ "folders" | i18n }}</h3>
-      {{ "folders" | i18n }}
-    </h3>
     <button
       class="text-muted ml-auto add-button"
       (click)="addFolder()"
@@ -56,7 +54,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
-            >{{ f.node.name }}
+            >&nbsp;{{ f.node.name }}
           </button>
           <button
             class="edit-button"

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>
-              {{ "newOrganization" | i18n }}
+              &nbsp;{{ "newOrganization" | i18n }}
             </a>
           </span>
         </li>
@@ -45,14 +45,6 @@
         >
           &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
@@ -75,6 +67,14 @@
             </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,15 +110,6 @@
         >
           &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 }">
@@ -149,6 +140,14 @@
             </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>

src/app/modules/vault-filter/components/type-filter.component.html

@@ -15,9 +15,7 @@
       }"
     ></i>
   </button>
-  <h3>
+  <h3>&nbsp;{{ "types" | i18n }}</h3>
-    {{ "types" | i18n }}
-  </h3>
 </div>
 <ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
   <li
@@ -26,14 +24,14 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Login)">
-        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>{{ "typeLogin" | i18n }}
+        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "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>{{ "typeCard" | i18n }}
+        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
       </button>
     </span>
   </li>
@@ -43,7 +41,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>{{ "typeIdentity" | i18n }}
+        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
       </button>
     </span>
   </li>
@@ -53,7 +51,9 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.SecureNote)">
-        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>{{ "typeSecureNote" | i18n }}
+        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
+          "typeSecureNote" | i18n
+        }}
       </button>
     </span>
   </li>

src/app/modules/vault-filter/organization-vault-filter.component.ts

@@ -0,0 +1,28 @@
+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();
+  }
+}

src/app/modules/vault-filter/vault-filter.component.html

@@ -27,7 +27,6 @@
         appAutofocus
       />
       <app-organization-filter
-        *ngIf="showOrgFilter"
         [hide]="hideOrganizations"
         [activeFilter]="activeFilter"
         [collapsedFilterNodes]="collapsedFilterNodes"
@@ -39,7 +38,7 @@
       ></app-organization-filter>
       <div class="filter">
         <app-status-filter
-          [hideFavorites]="!showFavorites"
+          [hideFavorites]="hideFavorites"
           [hideTrash]="hideTrash"
           [activeFilter]="activeFilter"
           (onFilterChange)="applyFilter($event)"
@@ -55,7 +54,7 @@
       </div>
       <div class="filter">
         <app-folder-filter
-          [hide]="!showFolders"
+          [hide]="hideFolders"
           [activeFilter]="activeFilter"
           [collapsedFilterNodes]="collapsedFilterNodes"
           [folderNodes]="folders"

src/app/modules/vault-filter/vault-filter.component.ts

@@ -1,26 +1,22 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Output } from "@angular/core";
 
 import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
-import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+
-import { Organization } from "jslib-common/models/domain/organization";
+import { VaultFilterService } from "./vault-filter.service";
 
 @Component({
   selector: "app-vault-filter",
   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()
-  constructor(vaultFilterService: VaultFilterService) {
+    // TODO: refactor this to use proper dependency injection
     super(vaultFilterService);
   }
 
@@ -37,8 +33,4 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
     this.activeSingleOrganizationPolicy =
       await this.vaultFilterService.checkForSingleOrganizationPolicy();
   }
-
-  async initCollections() {
-    return await this.vaultFilterService.buildCollections(this.organization?.id);
-  }
 }

src/app/modules/vault-filter/vault-filter.module.ts

@@ -1,22 +1,17 @@
 import { NgModule } from "@angular/core";
 
-import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.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 { 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";
 
 @NgModule({
   imports: [SharedModule],
@@ -28,21 +23,10 @@ import { VaultFilterComponent } from "./vault-filter.component";
     OrganizationOptionsComponent,
     StatusFilterComponent,
     TypeFilterComponent,
+    OrganizationVaultFilterComponent,
+    LinkSsoComponent,
   ],
-  exports: [VaultFilterComponent],
+  exports: [VaultFilterComponent, OrganizationVaultFilterComponent],
-  providers: [
+  providers: [VaultFilterService],
-    {
-      provide: VaultFilterService,
-      useClass: VaultFilterService,
-      deps: [
-        StateService,
-        OrganizationService,
-        FolderService,
-        CipherService,
-        CollectionService,
-        PolicyService,
-      ],
-    },
-  ],
 })
 export class VaultFilterModule {}

src/app/modules/vault-filter/vault-filter.service.ts

@@ -1,3 +1,54 @@
-import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { Injectable } from "@angular/core";
 
-export class VaultFilterService extends BaseVaultFilterService {}
+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
+    );
+  }
+
+  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);
+    }
+
+    const nestedCollections = await this.collectionService.getAllNested(result);
+    return new DynamicTreeNode<CollectionView>({
+      fullList: result,
+      nestedList: nestedCollections,
+    });
+  }
+}

src/app/modules/vault/modules/organization-vault/organization-vault.component.html

@@ -4,15 +4,12 @@
       <div class="groupings">
         <div class="content">
           <div class="inner-content">
-            <app-vault-filter
+            <app-organization-vault-filter
               #vaultFilter
-              [showFolders]="false"
-              [showFavorites]="false"
               [activeFilter]="activeFilter"
-              [showOrgFilter]="false"
               (onFilterChange)="applyVaultFilter($event)"
               (onSearchTextChanged)="filterSearchText($event)"
-            ></app-vault-filter>
+            ></app-organization-vault-filter>
           </div>
         </div>
       </div>

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 { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { OrganizationVaultFilterComponent } from "../../../vault-filter/organization-vault-filter.component";
 import { VaultService } from "../../vault.service";
 
 const BroadcasterSubscriptionId = "OrgVaultComponent";
@@ -39,7 +39,8 @@ const BroadcasterSubscriptionId = "OrgVaultComponent";
   templateUrl: "organization-vault.component.html",
 })
 export class OrganizationVaultComponent implements OnInit, OnDestroy {
-  @ViewChild("vaultFilter", { static: true }) vaultFilterComponent: VaultFilterComponent;
+  @ViewChild("vaultFilter", { static: true })
+  vaultFilterComponent: OrganizationVaultFilterComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
@@ -57,6 +58,11 @@ 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,
@@ -95,11 +101,7 @@ 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();
@@ -109,9 +111,12 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
             });
           });
         }
-        await this.vaultFilterComponent.reloadCollectionsAndFolders(
+
-          new VaultFilter({ selectedOrganizationId: this.organization.id } as Partial<VaultFilter>)
+        if (!this.firstLoaded) {
-        );
+          await this.vaultFilterComponent.reloadCollectionsAndFolders();
+        }
+        this.firstLoaded = false;
+
         await this.ciphersComponent.reload();
 
         if (qParams.viewEvents != null) {

src/app/organizations/manage/collections.component.ts

@@ -20,9 +20,8 @@ import {
 import { ListResponse } from "jslib-common/models/response/listResponse";
 import { CollectionView } from "jslib-common/models/view/collectionView";
 
-import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
-
 import { CollectionAddEditComponent } from "./collection-add-edit.component";
+import { EntityUsersComponent } from "./entity-users.component";
 
 @Component({
   selector: "app-org-manage-collections",

src/app/organizations/manage/entity-users.component.html

@@ -29,52 +29,52 @@
         ></i>
         <span class="sr-only">{{ "loading" | i18n }}</span>
       </div>
-      <cdk-virtual-scroll-viewport
+      <div
-        itemSize="46"
+        class="modal-body"
-        minBufferPx="600"
+        *ngIf="
-        maxBufferPx="1200"
+          !loading && users && (users | search: searchText:'name':'email':'id') as searchedUsers
-        [style]="scrollViewportStyle"
+        "
       >
-        <div class="modal-body" *ngIf="!loading && users && searchedUsers">
+        <div class="d-flex">
-          <div class="d-flex">
+          <div class="mr-3">
-            <div class="mr-3">
+            <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-              <label class="sr-only" for="search">{{ "search" | i18n }}</label>
+            <input
-              <input
+              type="search"
-                type="search"
+              class="form-control form-control-sm"
-                class="form-control form-control-sm"
+              id="search"
-                id="search"
+              placeholder="{{ 'search' | i18n }}"
-                placeholder="{{ 'search' | i18n }}"
+              name="SearchText"
-                name="SearchText"
+              [(ngModel)]="searchText"
-                [(ngModel)]="searchText"
+            />
-              />
-            </div>
-            <div class="btn-group btn-group-sm" role="group">
-              <button
-                type="button"
-                class="btn btn-outline-secondary"
-                [ngClass]="{ active: !showSelected }"
-                (click)="filterSelected(false)"
-              >
-                {{ "all" | i18n }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-outline-secondary"
-                [ngClass]="{ active: showSelected }"
-                (click)="filterSelected(true)"
-              >
-                {{ "selected" | i18n }}
-                <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
-                  selectedCount
-                }}</span>
-              </button>
-            </div>
           </div>
-          <ng-container *ngIf="!searchedUsers.length">
+          <div class="btn-group btn-group-sm" role="group">
-            <hr />
+            <button
-            {{ "noUsersInList" | i18n }}
+              type="button"
-          </ng-container>
+              class="btn btn-outline-secondary"
-          <table class="table table-hover table-list mb-0" [hidden]="!searchedUsers.length">
+              [ngClass]="{ active: !showSelected }"
+              (click)="filterSelected(false)"
+            >
+              {{ "all" | i18n }}
+            </button>
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              [ngClass]="{ active: showSelected }"
+              (click)="filterSelected(true)"
+            >
+              {{ "selected" | i18n }}
+              <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
+                selectedCount
+              }}</span>
+            </button>
+          </div>
+        </div>
+        <ng-container *ngIf="!searchedUsers.length">
+          <hr />
+          {{ "noUsersInList" | i18n }}
+        </ng-container>
+        <ng-container *ngIf="searchedUsers.length">
+          <table class="table table-hover table-list mb-0">
             <thead>
               <tr>
                 <th>&nbsp;</th>
@@ -91,7 +91,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr *cdkVirtualFor="let u of searchedUsers" class="">
+              <tr *ngFor="let u of searchedUsers">
                 <td class="table-list-checkbox" (click)="check(u)">
                   <input
                     type="checkbox"
@@ -164,8 +164,8 @@
               </tr>
             </tbody>
           </table>
-        </div>
+        </ng-container>
-      </cdk-virtual-scroll-viewport>
+      </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
           <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>

src/app/organizations/manage/entity-users.component.ts

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
-import { SearchPipe } from "jslib-angular/pipes/search.pipe";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
@@ -14,7 +13,6 @@ import { OrganizationUserUserDetailsResponse } from "jslib-common/models/respons
 @Component({
   selector: "app-entity-users",
   templateUrl: "entity-users.component.html",
-  providers: [SearchPipe],
 })
 export class EntityUsersComponent implements OnInit {
   @Input() entity: "group" | "collection";
@@ -35,7 +33,6 @@ export class EntityUsersComponent implements OnInit {
   private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
   constructor(
-    private search: SearchPipe,
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
@@ -55,14 +52,6 @@ export class EntityUsersComponent implements OnInit {
     }
   }
 
-  get searchedUsers() {
-    return this.search.transform(this.users, this.searchText, "name", "email", "id");
-  }
-
-  get scrollViewportStyle() {
-    return `min-height: 120px; height: ${120 + this.searchedUsers.length * 46}px`;
-  }
-
   async loadUsers() {
     const users = await this.apiService.getOrganizationUsers(this.organizationId);
     this.allUsers = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, "email"));

src/app/organizations/manage/groups.component.ts

@@ -12,8 +12,7 @@ import { SearchService } from "jslib-common/abstractions/search.service";
 import { Utils } from "jslib-common/misc/utils";
 import { GroupResponse } from "jslib-common/models/response/groupResponse";
 
-import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+import { EntityUsersComponent } from "./entity-users.component";
-
 import { GroupAddEditComponent } from "./group-add-edit.component";
 
 @Component({

src/app/organizations/settings/account.component.html

@@ -14,50 +14,62 @@
   #form
   (ngSubmit)="submit()"
   [appApiAction]="formPromise"
-  [formGroup]="formData"
+  ngNativeValidate
 >
   <div class="row">
     <div class="col-6">
-      <bit-form-field>
+      <div class="form-group">
-        <bit-label>{{ "organizationName" | i18n }}</bit-label>
+        <label for="name">{{ "organizationName" | i18n }}</label>
-        <input bitInput type="text" formControlName="name" />
+        <input
-      </bit-form-field>
+          id="name"
-
+          class="form-control"
-      <bit-form-field>
+          type="text"
-        <bit-label>{{ "billingEmail" | i18n }}</bit-label>
+          name="Name"
-        <input bitInput type="email" formControlName="billingEmail" />
+          [(ngModel)]="org.name"
-      </bit-form-field>
+          [disabled]="selfHosted"
-
+        />
-      <bit-form-field>
+      </div>
-        <bit-label>{{ "businessName" | i18n }}</bit-label>
+      <div class="form-group">
-        <input bitInput type="text" formControlName="businessName" />
+        <label for="billingEmail">{{ "billingEmail" | i18n }}</label>
-      </bit-form-field>
+        <input
-
+          id="billingEmail"
-      <bit-form-field>
+          class="form-control"
-        <bit-label>{{ "identifier" | i18n }}</bit-label>
+          type="text"
-        <input bitInput type="text" formControlName="identifier" />
+          name="BillingEmail"
-      </bit-form-field>
+          [(ngModel)]="org.billingEmail"
+          [disabled]="selfHosted || !canManageBilling"
+        />
+      </div>
+      <div class="form-group">
+        <label for="businessName">{{ "businessName" | i18n }}</label>
+        <input
+          id="businessName"
+          class="form-control"
+          type="text"
+          name="BusinessName"
+          [(ngModel)]="org.businessName"
+          [disabled]="selfHosted || !canManageBilling"
+        />
+      </div>
+      <div class="form-group">
+        <label for="identifier">{{ "identifier" | i18n }}</label>
+        <input
+          id="identifier"
+          class="form-control"
+          type="text"
+          name="Identifier"
+          [(ngModel)]="org.identifier"
+        />
+      </div>
     </div>
     <div class="col-6">
-      <app-avatar
+      <app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
-        [data]="formData.get('name').value"
-        dynamic="true"
-        size="75"
-        fontSize="35"
-      ></app-avatar>
     </div>
   </div>
-  <button
+  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    type="submit"
-    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>{{ "save" | i18n }}</span>
   </button>
-  <bit-error-summary *ngIf="showErrorSummary" [formGroup]="formData"></bit-error-summary>
 </form>
 <ng-container *ngIf="canUseApi">
   <div class="secondary-header border-0 mb-0">

src/app/organizations/settings/account.component.ts

@@ -1,5 +1,4 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
-import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { ModalService } from "jslib-angular/services/modal.service";
@@ -42,19 +41,10 @@ export class AccountComponent {
   org: OrganizationResponse;
   formPromise: Promise<any>;
   taxFormPromise: Promise<any>;
-  showErrorSummary = false;
 
   private organizationId: string;
 
-  formData = this.formBuilder.group({
-    name: ["", [Validators.required]],
-    billingEmail: ["", [Validators.required, Validators.email]],
-    businessName: [],
-    identifier: [],
-  });
-
   constructor(
-    private formBuilder: FormBuilder,
     private modalService: ModalService,
     private apiService: ApiService,
     private i18nService: I18nService,
@@ -70,12 +60,6 @@ export class AccountComponent {
   async ngOnInit() {
     this.selfHosted = this.platformUtilsService.isSelfHost();
 
-    if (this.selfHosted) {
-      this.formData.disable();
-    } else {
-      this.formData.enable();
-    }
-
     this.route.parent.parent.params.subscribe(async (params) => {
       this.organizationId = params.organizationId;
       this.canManageBilling = (
@@ -84,13 +68,6 @@ export class AccountComponent {
       try {
         this.org = await this.apiService.getOrganization(this.organizationId);
         this.canUseApi = this.org.useApi;
-
-        this.formData.setValue({
-          name: this.org.name,
-          billingEmail: this.org.billingEmail,
-          businessName: this.org.businessName,
-          identifier: this.org.identifier,
-        });
       } catch (e) {
         this.logService.error(e);
       }
@@ -99,19 +76,12 @@ export class AccountComponent {
   }
 
   async submit() {
-    this.formData.markAllAsTouched();
-    this.showErrorSummary = true;
-
-    if (!this.formData.valid) {
-      return;
-    }
-
     try {
       const request = new OrganizationUpdateRequest();
-      request.name = this.formData.get("name").value;
+      request.name = this.org.name;
-      request.businessName = this.formData.get("businessName").value;
+      request.businessName = this.org.businessName;
-      request.billingEmail = this.formData.get("billingEmail").value;
+      request.billingEmail = this.org.billingEmail;
-      request.identifier = this.formData.get("identifier").value;
+      request.identifier = this.org.identifier;
 
       // Backfill pub/priv key if necessary
       if (!this.org.hasPublicAndPrivateKeys) {

src/app/oss.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from "@angular/core";
 
 import { LooseComponentsModule } from "./modules/loose-components.module";
-import { OrganizationManageModule } from "./modules/organizations/manage/organization-manage.module";
 import { PipesModule } from "./modules/pipes/pipes.module";
 import { SharedModule } from "./modules/shared.module";
 import { VaultFilterModule } from "./modules/vault-filter/vault-filter.module";
@@ -14,7 +13,6 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     VaultFilterModule,
     OrganizationBadgeModule,
     PipesModule,
-    OrganizationManageModule,
   ],
   exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
   bootstrap: [],

src/app/services/event.service.ts

@@ -307,6 +307,9 @@ 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));

src/app/tools/generator.component.ts

@@ -40,11 +40,13 @@ export class GeneratorComponent extends BaseGeneratorComponent {
       route,
       window
     );
-    // Cannot use Firefox Relay on the web vault yet due to CORS issues with Firefox Relay API
+    if (platformUtilsService.isSelfHost()) {
-    this.forwardOptions.splice(
+      // Cannot use Firefox Relay on self hosted web vaults due to CORS issues with Firefox Relay API
-      this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
+      this.forwardOptions.splice(
-      1
+        this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
-    );
+        1
+      );
+    }
   }
 
   async history() {

src/locales/en/messages.json

@@ -4674,8 +4674,8 @@
   "removeSponsorshipSuccess": {
     "message": "Sponsorship Removed"
   },
-  "ssoKeyConnectorUnavailable": {
+  "ssoKeyConnectorError": {
-    "message": "Unable to reach the Key Connector, try again later."
+    "message": "Key Connector error: make sure Key Connector is available and working correctly."
   },
   "keyConnectorUrl": {
     "message": "Key Connector URL"
@@ -5041,6 +5041,9 @@
     "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": {
@@ -5066,20 +5069,5 @@
   },
   "apiAccessToken": {
     "message": "API Access Token"
-  },
-  "inputRequired": {
-    "message": "Input is required."
-  },
-  "inputEmail": {
-    "message": "Input is not an email-address."
-  },
-  "fieldsNeedAttention": {
-    "message": "$COUNT$ field(s) above need your attention.",
-    "placeholders": {
-      "count": {
-        "content": "$1",
-        "example": "4"
-      }
-    }
   }
 }

src/scss/vault-filters.scss

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

webpack.config.js

@@ -204,60 +204,8 @@ const devServer =
             return [
               {
                 key: "Content-Security-Policy",
-                value: `
+                value:
-                  default-src 'self'; 
+                  "default-src 'self'; script-src 'self' 'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w=' https://js.stripe.com https://js.braintreegateway.com https://www.paypalobjects.com; style-src 'self' https://assets.braintreegateway.com https://*.paypal.com 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='; img-src 'self' data: https://icons.bitwarden.net https://*.paypal.com https://www.paypalobjects.com https://q.stripe.com https://haveibeenpwned.com https://www.gravatar.com; child-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; frame-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; connect-src 'self' wss://notifications.bitwarden.com https://notifications.bitwarden.com https://cdn.bitwarden.net https://api.pwnedpasswords.com https://2fa.directory/api/v3/totp.json https://api.stripe.com https://www.paypal.com https://api.braintreegateway.com https://client-analytics.braintreegateway.com https://*.braintree-api.com https://*.blob.core.windows.net https://app.simplelogin.io/api/alias/random/new https://app.anonaddy.com/api/v1/aliases; object-src 'self' blob:;",
-                  script-src 
-                    'self'
-                    'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w='
-                    https://js.stripe.com
-                    https://js.braintreegateway.com
-                    https://www.paypalobjects.com;
-                  style-src
-                    'self'
-                    https://assets.braintreegateway.com
-                    https://*.paypal.com
-                    'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='
-                    'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4=';
-                    'sha256-0xHKHIT3+e2Gknxsm/cpErSprhL+o254L/y5bljg74U='
-                  img-src
-                    'self'
-                    data:
-                      https://icons.bitwarden.net
-                      https://*.paypal.com
-                      https://www.paypalobjects.com
-                      https://q.stripe.com
-                      https://haveibeenpwned.com
-                      https://www.gravatar.com;
-                  child-src
-                    'self'
-                    https://js.stripe.com
-                    https://assets.braintreegateway.com
-                    https://*.paypal.com
-                    https://*.duosecurity.com;
-                  frame-src
-                    'self'
-                    https://js.stripe.com
-                    https://assets.braintreegateway.com
-                    https://*.paypal.com
-                    https://*.duosecurity.com;
-                  connect-src
-                    'self'
-                    wss://notifications.bitwarden.com
-                    https://notifications.bitwarden.com
-                    https://cdn.bitwarden.net
-                    https://api.pwnedpasswords.com
-                    https://2fa.directory/api/v3/totp.json
-                    https://api.stripe.com
-                    https://www.paypal.com
-                    https://api.braintreegateway.com
-                    https://client-analytics.braintreegateway.com
-                    https://*.braintree-api.com
-                    https://*.blob.core.windows.net
-                    https://app.simplelogin.io/api/alias/random/new
-                    https://app.anonaddy.com/api/v1/aliases;
-                  object-src 
-                    'self'
-                    blob:;`,
               },
             ];
           }