[fix] Expose observable without write access to callers

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

bitwarden_license/src/app/organizations/organizations-routing.module.ts

@@ -22,9 +22,9 @@ const routes: Routes = [
         component: ManageComponent,
         canActivate: [PermissionsGuard],
         data: {
-          permissions: [
-            NavigationPermissionsService.getPermissions("manage").concat(Permissions.ManageSso),
-          ],
+          permissions: NavigationPermissionsService.getPermissions("manage").concat(
+            Permissions.ManageSso
+          ),
         },
         children: [
           {

src/app/accounts/lock.component.ts

@@ -55,7 +55,7 @@ export class LockComponent extends BaseLockComponent {
     await super.ngOnInit();
     this.onSuccessfulSubmit = async () => {
       const previousUrl = this.routerService.getPreviousUrl();
-      if (previousUrl !== "/" && previousUrl.indexOf("lock") === -1) {
+      if (previousUrl && previousUrl !== "/" && previousUrl.indexOf("lock") === -1) {
         this.successRoute = previousUrl;
       }
       this.router.navigateByUrl(this.successRoute);

src/app/accounts/login.component.ts

@@ -74,7 +74,7 @@ export class LoginComponent extends BaseLoginComponent {
       if (qParams.premium != null) {
         this.routerService.setPreviousUrl("/settings/premium");
       } else if (qParams.org != null) {
-        const route = this.router.createUrlTree(["settings/create-organization"], {
+        const route = this.router.createUrlTree(["create-organization"], {
           queryParams: { plan: qParams.org },
         });
         this.routerService.setPreviousUrl(route.toString());

src/app/accounts/register.component.ts

@@ -71,7 +71,7 @@ export class RegisterComponent extends BaseRegisterComponent {
       } else if (qParams.org != null) {
         this.showCreateOrgMessage = true;
         this.referenceData.flow = qParams.org;
-        const route = this.router.createUrlTree(["settings/create-organization"], {
+        const route = this.router.createUrlTree(["create-organization"], {
           queryParams: { plan: qParams.org },
         });
         this.routerService.setPreviousUrl(route.toString());

src/app/components/organization-switcher.component.html

@@ -58,7 +58,7 @@
       </li>
       <bit-menu-divider></bit-menu-divider>
       <li class="tw-list-none" role="none">
-        <a bit-menu-item routerLink="/settings/create-organization">
+        <a bit-menu-item routerLink="/create-organization">
           <i class="bwi bwi-plus mr-2"></i>
           {{ "newOrganization" | i18n }}</a
         >

src/app/layouts/navbar.component.html

@@ -38,7 +38,7 @@
       <li>
         <button
           [bitMenuTriggerFor]="accountMenu"
-          class="tw-border-0 tw-bg-transparent tw-text-contrast tw-opacity-70 hover:tw-opacity-90"
+          class="tw-border-0 tw-bg-transparent tw-text-alt2 tw-opacity-70 hover:tw-opacity-90"
         >
           <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
           <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>

src/app/layouts/navbar.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, NgZone, OnInit } from "@angular/core";
 
+import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
@@ -31,7 +32,9 @@ export class NavbarComponent implements OnInit {
     private providerService: ProviderService,
     private syncService: SyncService,
     private organizationService: OrganizationService,
-    private i18nService: I18nService
+    private i18nService: I18nService,
+    private broadcasterService: BroadcasterService,
+    private ngZone: NgZone
   ) {
     this.selfHosted = this.platformUtilsService.isSelfHost();
   }
@@ -49,8 +52,24 @@ export class NavbarComponent implements OnInit {
     }
     this.providers = await this.providerService.getAll();
 
+    this.organizations = await this.buildOrganizations();
+
+    this.broadcasterService.subscribe(this.constructor.name, async (message: any) => {
+      this.ngZone.run(async () => {
+        switch (message.command) {
+          case "organizationCreated":
+            if (this.organizations.length < 1) {
+              this.organizations = await this.buildOrganizations();
+            }
+            break;
+        }
+      });
+    });
+  }
+
+  async buildOrganizations() {
     const allOrgs = await this.organizationService.getAll();
-    this.organizations = allOrgs
+    return allOrgs
       .filter((org) => OrgNavigationPermissionsService.canAccessAdmin(org))
       .sort(Utils.getSortFunction(this.i18nService, "name"));
   }

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

@@ -35,7 +35,6 @@ 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";
@@ -245,7 +244,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
-    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,
@@ -406,7 +404,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
-    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,

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

@@ -29,52 +29,52 @@
         ></i>
         <span class="sr-only">{{ "loading" | i18n }}</span>
       </div>
-      <div
-        class="modal-body"
-        *ngIf="
-          !loading && users && (users | search: searchText:'name':'email':'id') as searchedUsers
-        "
+      <cdk-virtual-scroll-viewport
+        itemSize="46"
+        minBufferPx="600"
+        maxBufferPx="1200"
+        [style]="scrollViewportStyle"
       >
-        <div class="d-flex">
-          <div class="mr-3">
-            <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-            <input
-              type="search"
-              class="form-control form-control-sm"
-              id="search"
-              placeholder="{{ 'search' | i18n }}"
-              name="SearchText"
-              [(ngModel)]="searchText"
-            />
+        <div class="modal-body" *ngIf="!loading && users && searchedUsers">
+          <div class="d-flex">
+            <div class="mr-3">
+              <label class="sr-only" for="search">{{ "search" | i18n }}</label>
+              <input
+                type="search"
+                class="form-control form-control-sm"
+                id="search"
+                placeholder="{{ 'search' | i18n }}"
+                name="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>
-          <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">
-          <hr />
-          {{ "noUsersInList" | i18n }}
-        </ng-container>
-        <ng-container *ngIf="searchedUsers.length">
-          <table class="table table-hover table-list mb-0">
+          <ng-container *ngIf="!searchedUsers.length">
+            <hr />
+            {{ "noUsersInList" | i18n }}
+          </ng-container>
+          <table class="table table-hover table-list mb-0" [hidden]="!searchedUsers.length">
             <thead>
               <tr>
                 <th>&nbsp;</th>
@@ -91,7 +91,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr *ngFor="let u of searchedUsers">
+              <tr *cdkVirtualFor="let u of searchedUsers" class="">
                 <td class="table-list-checkbox" (click)="check(u)">
                   <input
                     type="checkbox"
@@ -164,8 +164,8 @@
               </tr>
             </tbody>
           </table>
-        </ng-container>
-      </div>
+        </div>
+      </cdk-virtual-scroll-viewport>
       <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/modules/organizations/manage/entity-users.component.ts

@@ -1,5 +1,6 @@
 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";
@@ -13,6 +14,7 @@ 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";
@@ -33,6 +35,7 @@ export class EntityUsersComponent implements OnInit {
   private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
   constructor(
+    private search: SearchPipe,
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
@@ -52,6 +55,14 @@ 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/modules/organizations/manage/organization-manage.module.ts

@@ -0,0 +1,13 @@
+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/vault-filter/components/folder-filter.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="!hide && !activeFilter.selectedOrganizationId">
+<ng-container *ngIf="!hide">
   <div class="filter-heading">
     <button
       class="toggle-button"

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

@@ -12,7 +12,7 @@
         </li>
         <li class="filter-option">
           <span class="filter-buttons">
-            <a href="#" routerLink="/settings/create-organization" class="filter-button">
+            <a href="#" routerLink="/create-organization" class="filter-button">
               <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
               {{ "newOrganization" | i18n }}
             </a>
@@ -47,9 +47,9 @@
         </button>
         <a
           href="#"
-          routerLink="/settings/create-organization"
+          routerLink="/create-organization"
           class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'addOrganization' | i18n }}"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
         >
           <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
         </a>
@@ -85,7 +85,7 @@
         </button>
       </div>
     </ng-container>
-    <ng-container *ngSwitchCase="'organizationMember'">
+    <ng-container *ngSwitchDefault>
       <div class="filter-heading">
         <button
           class="toggle-button"
@@ -112,9 +112,10 @@
         </button>
         <a
           href="#"
-          routerLink="/settings/create-organization"
+          routerLink="/create-organization"
           class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'addOrganization' | i18n }}"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+          *ngIf="!(displayMode === 'singleOrganizationPolicy')"
         >
           <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
         </a>

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

@@ -82,6 +82,7 @@ export class OrganizationOptionsComponent {
       this.platformUtilsService.showToast("success", null, "Unlinked SSO");
       await this.load();
     } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
       this.logService.error(e);
     }
   }
@@ -106,6 +107,7 @@ export class OrganizationOptionsComponent {
       this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
       await this.load();
     } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
       this.logService.error(e);
     }
   }
@@ -173,6 +175,7 @@ export class OrganizationOptionsComponent {
       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);
     }
   }

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

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, 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",
@@ -20,10 +21,17 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
 
   organization: Organization;
 
-  constructor(vaultFilterService: VaultFilterService) {
+  constructor(protected vaultFilterService: VaultFilterService) {
     super(vaultFilterService);
   }
 
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.vaultFilterService.collapsedFilterNodes$.subscribe((nodes) => {
+      this.collapsedFilterNodes = nodes;
+    });
+  }
+
   searchTextChanged() {
     this.onSearchTextChanged.emit(this.searchText);
   }
@@ -32,6 +40,10 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
   // 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() {

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

@@ -1,6 +1,5 @@
 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";
@@ -17,6 +16,7 @@ import { OrganizationOptionsComponent } from "./components/organization-options.
 import { StatusFilterComponent } from "./components/status-filter.component";
 import { TypeFilterComponent } from "./components/type-filter.component";
 import { VaultFilterComponent } from "./vault-filter.component";
+import { VaultFilterService } from "./vault-filter.service";
 
 @NgModule({
   imports: [SharedModule],

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

@@ -1,3 +1,28 @@
+import { BehaviorSubject, Observable } from "rxjs";
+
 import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
 
-export class VaultFilterService extends BaseVaultFilterService {}
+export class VaultFilterService extends BaseVaultFilterService {
+  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 storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
+    await super.storeCollapsedFilterNodes(collapsedFilterNodes);
+    this._collapsedFilterNodes.next(collapsedFilterNodes);
+  }
+
+  async ensureVaultFiltersAreExpanded() {
+    const collapsedFilterNodes = await super.buildCollapsedFilterNodes();
+    if (!collapsedFilterNodes.has("vaults")) {
+      return;
+    }
+    collapsedFilterNodes.delete("vaults");
+    await this.storeCollapsedFilterNodes(collapsedFilterNodes);
+  }
+}

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

@@ -32,19 +32,26 @@
           </small>
         </h1>
         <div class="ml-auto d-flex">
-          <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted">
+          <app-vault-bulk-actions
+            [ciphersComponent]="ciphersComponent"
+            [deleted]="activeFilter.status === 'trash'"
+          >
           </app-vault-bulk-actions>
           <button
             type="button"
             class="btn btn-outline-primary btn-sm"
             (click)="addCipher()"
-            *ngIf="!deleted"
+            *ngIf="activeFilter.status !== 'trash'"
           >
             <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
           </button>
         </div>
       </div>
-      <app-callout type="warning" *ngIf="deleted" icon="bwi-exclamation-triangle">
+      <app-callout
+        type="warning"
+        *ngIf="activeFilter.status === 'trash'"
+        icon="bwi-exclamation-triangle"
+      >
         {{ trashCleanupWarning }}
       </app-callout>
       <app-vault-ciphers
@@ -95,7 +102,10 @@
         </div>
         <div class="card-body">
           <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
-          <a class="btn btn-block btn-outline-secondary" routerLink="/settings/premium">
+          <a
+            class="btn btn-block btn-outline-secondary"
+            routerLink="/settings/subscription/premium"
+          >
             {{ "goPremium" | i18n }}
           </a>
         </div>

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";
@@ -88,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() {
@@ -187,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);
   }
@@ -209,7 +212,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
         cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
       }
       if (
-        this.activeFilter.selectedFolderId != null &&
+        this.activeFilter.selectedFolder &&
         this.activeFilter.selectedFolderId != "none" &&
         cipherPassesFilter
       ) {

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

@@ -123,7 +123,11 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
 
         this.route.queryParams.subscribe(async (params) => {
           if (params.cipherId) {
-            if ((await this.cipherService.get(params.cipherId)) != null) {
+            if (
+              // Handle users with implicit collection access since they use the admin endpoint
+              this.organization.canEditAnyCollection ||
+              (await this.cipherService.get(params.cipherId)) != null
+            ) {
               this.editCipherId(params.cipherId);
             } else {
               this.platformUtilsService.showToast(
@@ -168,7 +172,7 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
         cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
       }
       if (
-        this.activeFilter.selectedFolderId != null &&
+        this.activeFilter.selectedFolder != null &&
         this.activeFilter.selectedFolderId != "none" &&
         cipherPassesFilter
       ) {

src/app/organizations/layouts/organization-layout.component.html

@@ -1,3 +1,4 @@
+<app-navbar></app-navbar>
 <div class="org-nav" *ngIf="organization">
   <div class="container d-flex">
     <div class="d-flex flex-column">
@@ -35,3 +36,4 @@
   </div>
 </div>
 <router-outlet></router-outlet>
+<app-footer></app-footer>

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

@@ -20,8 +20,9 @@ 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/groups.component.ts

@@ -12,7 +12,8 @@ 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 "./entity-users.component";
+import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+
 import { GroupAddEditComponent } from "./group-add-edit.component";
 
 @Component({

src/app/organizations/tools/exposed-passwords-report.component.ts

@@ -14,7 +14,7 @@ import { CipherView } from "jslib-common/models/view/cipherView";
 import { ExposedPasswordsReportComponent as BaseExposedPasswordsReportComponent } from "../../reports/exposed-passwords-report.component";
 
 @Component({
-  selector: "app-exposed-passwords-report",
+  selector: "app-org-exposed-passwords-report",
   templateUrl: "../../reports/exposed-passwords-report.component.html",
 })
 export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportComponent {
@@ -41,12 +41,10 @@ export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportC
   }
 
   ngOnInit() {
-    const dynamicSuper = Object.getPrototypeOf(this.constructor.prototype);
     this.route.parent.parent.params.subscribe(async (params) => {
       this.organization = await this.organizationService.get(params.organizationId);
       this.manageableCiphers = await this.cipherService.getAll();
-      // TODO: We should do something about this, calling super in an async function is bad
-      dynamicSuper.ngOnInit();
+      await this.checkAccess();
     });
   }
 

src/app/oss-routing.module.ts

@@ -155,6 +155,11 @@ const routes: Routes = [
             .IndividualVaultModule,
       },
       { path: "sends", component: SendComponent, data: { title: "Send" } },
+      {
+        path: "create-organization",
+        component: CreateOrganizationComponent,
+        data: { titleId: "newOrganization" },
+      },
       {
         path: "settings",
         component: SettingsComponent,
@@ -181,11 +186,6 @@ const routes: Routes = [
             loadChildren: async () =>
               (await import("./settings/subscription-routing.module")).SubscriptionRoutingModule,
           },
-          {
-            path: "create-organization",
-            component: CreateOrganizationComponent,
-            data: { titleId: "newOrganization" },
-          },
           {
             path: "emergency-access",
             children: [
@@ -229,15 +229,15 @@ const routes: Routes = [
           (await import("./reports/reports-routing.module")).ReportsRoutingModule,
       },
       { path: "setup/families-for-enterprise", component: FamiliesForEnterpriseSetupComponent },
-      {
-        path: "organizations",
-        loadChildren: () =>
-          import("./organizations/organization-routing.module").then(
-            (m) => m.OrganizationsRoutingModule
-          ),
-      },
     ],
   },
+  {
+    path: "organizations",
+    loadChildren: () =>
+      import("./organizations/organization-routing.module").then(
+        (m) => m.OrganizationsRoutingModule
+      ),
+  },
 ];
 
 @NgModule({

src/app/oss.module.ts

@@ -1,6 +1,7 @@
 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";
@@ -13,6 +14,7 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     VaultFilterModule,
     OrganizationBadgeModule,
     PipesModule,
+    OrganizationManageModule,
   ],
   exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
   bootstrap: [],

src/app/settings/change-password.component.ts

@@ -68,6 +68,7 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
     if (await this.keyConnectorService.getUsesKeyConnector()) {
       this.router.navigate(["/settings/security/two-factor"]);
     }
+    await super.ngOnInit();
   }
 
   async rotateEncKeyClicked() {

src/app/settings/create-organization.component.html

@@ -1,5 +1,11 @@
-<div class="page-header">
-  <h1>{{ "newOrganization" | i18n }}</h1>
+<div class="container page-content">
+  <div class="row">
+    <div class="col-12">
+      <div class="page-header">
+        <h1>{{ "newOrganization" | i18n }}</h1>
+      </div>
+      <p>{{ "newOrganizationDesc" | i18n }}</p>
+      <app-organization-plans></app-organization-plans>
+    </div>
+  </div>
 </div>
-<p>{{ "newOrganizationDesc" | i18n }}</p>
-<app-organization-plans></app-organization-plans>

src/app/settings/organization-plans.component.ts

@@ -5,6 +5,7 @@ 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 { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
@@ -68,7 +69,8 @@ export class OrganizationPlansComponent implements OnInit {
     private syncService: SyncService,
     private policyService: PolicyService,
     private organizationService: OrganizationService,
-    private logService: LogService
+    private logService: LogService,
+    private messagingService: MessagingService
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -298,6 +300,7 @@ export class OrganizationPlansComponent implements OnInit {
       this.formPromise = doSubmit();
       const organizationId = await this.formPromise;
       this.onSuccess.emit({ organizationId: organizationId });
+      this.messagingService.send("organizationCreated", organizationId);
     } catch (e) {
       this.logService.error(e);
     }

src/app/settings/settings.component.ts

@@ -54,7 +54,11 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.premium = await this.tokenService.getPremium();
     this.hasFamilySponsorshipAvailable = await this.organizationService.canManageSponsorships();
     const hasPremiumFromOrg = await this.stateService.getCanAccessPremium();
-    const billing = await this.apiService.getUserBillingHistory();
-    this.hideSubscription = !this.premium && hasPremiumFromOrg && billing.hasNoHistory;
+    let billing = null;
+    if (!this.selfHosted) {
+      billing = await this.apiService.getUserBillingHistory();
+    }
+    this.hideSubscription =
+      !this.premium && hasPremiumFromOrg && (this.selfHosted || billing?.hasNoHistory);
   }
 }

src/app/settings/sponsoring-org-row.component.html

@@ -8,6 +8,7 @@
 <td class="table-action-right">
   <div class="dropdown" appListDropdown>
     <button
+      *ngIf="!sponsoringOrg.familySponsorshipToDelete"
       class="btn btn-outline-secondary dropdown-toggle"
       type="button"
       id="dropdownMenuButton"
@@ -21,7 +22,7 @@
     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
       <button
         #resendEmailBtn
-        *ngIf="!isSelfHosted"
+        *ngIf="!isSelfHosted && !sponsoringOrg.familySponsorshipValidUntil"
         [appApiAction]="resendEmailPromise"
         class="dropdown-item btn-submit"
         [disabled]="resendEmailBtn.loading"

src/app/settings/tax-info.component.ts

@@ -73,10 +73,14 @@ export class TaxInfoComponent {
           this.logService.error(e);
         }
       } else {
-        const taxInfo = await this.apiService.getTaxInfo();
-        if (taxInfo) {
-          this.taxInfo.postalCode = taxInfo.postalCode;
-          this.taxInfo.country = taxInfo.country || "US";
+        try {
+          const taxInfo = await this.apiService.getTaxInfo();
+          if (taxInfo) {
+            this.taxInfo.postalCode = taxInfo.postalCode;
+            this.taxInfo.country = taxInfo.country || "US";
+          }
+        } catch (e) {
+          this.logService.error(e);
         }
       }
       this.pristine = Object.assign({}, this.taxInfo);
@@ -86,9 +90,16 @@ export class TaxInfoComponent {
       }
     });
 
-    const taxRates = await this.apiService.getTaxRates();
-    this.taxRates = taxRates.data;
-    this.loading = false;
+    try {
+      const taxRates = await this.apiService.getTaxRates();
+      if (taxRates) {
+        this.taxRates = taxRates.data;
+      }
+    } catch (e) {
+      this.logService.error(e);
+    } finally {
+      this.loading = false;
+    }
   }
 
   get taxRate() {

src/app/tools/generator.component.html

@@ -295,16 +295,6 @@
           (blur)="saveUsernameOptions()"
         />
       </div>
-      <div class="form-group col-4">
-        <label for="simplelogin-hostname">{{ "hostname" | i18n }}</label>
-        <input
-          id="simplelogin-hostname"
-          class="form-control"
-          type="text"
-          [(ngModel)]="usernameOptions.forwardedSimpleLoginHostname"
-          (blur)="saveUsernameOptions()"
-        />
-      </div>
     </div>
     <div class="row" *ngIf="usernameOptions.forwardedService === 'anonaddy'">
       <div class="form-group col-4">

src/app/vault/share.component.html

@@ -77,7 +77,7 @@
         </button>
         <a
           href="#"
-          routerLink="/settings/create-organization"
+          routerLink="/create-organization"
           class="btn btn-primary"
           *ngIf="!organizations || !organizations.length"
         >

src/locales/en/messages.json

@@ -4669,7 +4669,7 @@
     "message": "Email Sent"
   },
   "revokeSponsorshipConfirmation": {
-    "message": "After removing this account, the Families organization owner will be responsible for this subscription and related invoices. Are you sure you want to continue?"
+    "message": "After removing this account, the Families plan sponsorship will expire at the end of the billing period. You will not be able to redeem a new sponsorship offer until the existing one expires. Are you sure you want to continue?"
   },
   "removeSponsorshipSuccess": {
     "message": "Sponsorship Removed"

src/scss/vault-filters.scss

@@ -116,6 +116,7 @@
       }
       text-decoration: none;
     }
+    max-width: 90%;
   }
 
   .edit-button {

webpack.config.js

@@ -204,8 +204,60 @@ const devServer =
             return [
               {
                 key: "Content-Security-Policy",
-                value:
-                  "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:;",
+                value: `
+                  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=';
+                    '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:;`,
               },
             ];
           }