Remove eager loading of module

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" />

bitwarden_license/src/app/providers/providers.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { ComponentFactoryResolver, NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
 
-import { JslibModule } from "jslib-angular/jslib.module";
 import { ModalService } from "jslib-angular/services/modal.service";
 
-import { OssModule } from "src/app/oss.module";
+import { LayoutsModule } from "src/app/layouts/layouts.module";
+import { SharedModule } from "src/app/modules/shared.module";
 
 import { AddOrganizationComponent } from "./clients/add-organization.component";
 import { ClientsComponent } from "./clients/clients.component";
@@ -28,7 +26,7 @@ import { SetupProviderComponent } from "./setup/setup-provider.component";
 import { SetupComponent } from "./setup/setup.component";
 
 @NgModule({
-  imports: [CommonModule, FormsModule, OssModule, JslibModule, ProvidersRoutingModule],
+  imports: [SharedModule, LayoutsModule, ProvidersRoutingModule],
   declarations: [
     AcceptProviderComponent,
     AccountComponent,

crowdin.yml

@@ -15,4 +15,3 @@ files:
         en-GB: en_GB
         en-IN: en_IN
         sr-CY: sr_CY
-        sr-CS: sr_CS

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>
   `,

src/app/layouts/layouts.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+
+import { FooterComponent } from "../layouts/footer.component";
+import { FrontendLayoutComponent } from "../layouts/frontend-layout.component";
+import { NavbarComponent } from "../layouts/navbar.component";
+import { SharedModule } from "../modules/shared.module";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [NavbarComponent, FooterComponent, FrontendLayoutComponent],
+  exports: [NavbarComponent, FooterComponent],
+})
+export class LayoutsModule {}

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>

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

@@ -20,66 +20,10 @@ import { UpdateTempPasswordComponent } from "../accounts/update-temp-password.co
 import { VerifyEmailTokenComponent } from "../accounts/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "../accounts/verify-recover-delete.component";
 import { NestedCheckboxComponent } from "../components/nested-checkbox.component";
-import { OrganizationSwitcherComponent } from "../components/organization-switcher.component";
 import { PasswordRepromptComponent } from "../components/password-reprompt.component";
-import { PasswordStrengthComponent } from "../components/password-strength.component";
 import { PremiumBadgeComponent } from "../components/premium-badge.component";
-import { FooterComponent } from "../layouts/footer.component";
-import { FrontendLayoutComponent } from "../layouts/frontend-layout.component";
-import { NavbarComponent } from "../layouts/navbar.component";
+import { LayoutsModule } from "../layouts/layouts.module";
 import { UserLayoutComponent } from "../layouts/user-layout.component";
-import { OrganizationLayoutComponent } from "../organizations/layouts/organization-layout.component";
-import { BulkConfirmComponent as OrgBulkConfirmComponent } from "../organizations/manage/bulk/bulk-confirm.component";
-import { BulkRemoveComponent as OrgBulkRemoveComponent } from "../organizations/manage/bulk/bulk-remove.component";
-import { BulkStatusComponent as OrgBulkStatusComponent } from "../organizations/manage/bulk/bulk-status.component";
-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 { 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";
-import { ManageComponent as OrgManageComponent } from "../organizations/manage/manage.component";
-import { PeopleComponent as OrgPeopleComponent } from "../organizations/manage/people.component";
-import { PoliciesComponent as OrgPoliciesComponent } from "../organizations/manage/policies.component";
-import { PolicyEditComponent as OrgPolicyEditComponent } from "../organizations/manage/policy-edit.component";
-import { ResetPasswordComponent as OrgResetPasswordComponent } from "../organizations/manage/reset-password.component";
-import { UserAddEditComponent as OrgUserAddEditComponent } from "../organizations/manage/user-add-edit.component";
-import { UserConfirmComponent as OrgUserConfirmComponent } from "../organizations/manage/user-confirm.component";
-import { UserGroupsComponent as OrgUserGroupsComponent } from "../organizations/manage/user-groups.component";
-import { DisableSendPolicyComponent } from "../organizations/policies/disable-send.component";
-import { MasterPasswordPolicyComponent } from "../organizations/policies/master-password.component";
-import { PasswordGeneratorPolicyComponent } from "../organizations/policies/password-generator.component";
-import { PersonalOwnershipPolicyComponent } from "../organizations/policies/personal-ownership.component";
-import { RequireSsoPolicyComponent } from "../organizations/policies/require-sso.component";
-import { ResetPasswordPolicyComponent } from "../organizations/policies/reset-password.component";
-import { SendOptionsPolicyComponent } from "../organizations/policies/send-options.component";
-import { SingleOrgPolicyComponent } from "../organizations/policies/single-org.component";
-import { TwoFactorAuthenticationPolicyComponent } from "../organizations/policies/two-factor-authentication.component";
-import { AccountComponent as OrgAccountComponent } from "../organizations/settings/account.component";
-import { AdjustSubscription } from "../organizations/settings/adjust-subscription.component";
-import { BillingSyncApiKeyComponent } from "../organizations/settings/billing-sync-api-key.component";
-import { ChangePlanComponent } from "../organizations/settings/change-plan.component";
-import { DeleteOrganizationComponent } from "../organizations/settings/delete-organization.component";
-import { DownloadLicenseComponent } from "../organizations/settings/download-license.component";
-import { ImageSubscriptionHiddenComponent as OrgSubscriptionHiddenComponent } from "../organizations/settings/image-subscription-hidden.component";
-import { OrganizationBillingComponent } from "../organizations/settings/organization-billing.component";
-import { OrganizationSubscriptionComponent } from "../organizations/settings/organization-subscription.component";
-import { SettingsComponent as OrgSettingComponent } from "../organizations/settings/settings.component";
-import { TwoFactorSetupComponent as OrgTwoFactorSetupComponent } from "../organizations/settings/two-factor-setup.component";
-import { AcceptFamilySponsorshipComponent } from "../organizations/sponsorships/accept-family-sponsorship.component";
-import { FamiliesForEnterpriseSetupComponent } from "../organizations/sponsorships/families-for-enterprise-setup.component";
-import { ExportComponent as OrgExportComponent } from "../organizations/tools/export.component";
-import { ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent } from "../organizations/tools/exposed-passwords-report.component";
-import { ImportComponent as OrgImportComponent } from "../organizations/tools/import.component";
-import { InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent } from "../organizations/tools/inactive-two-factor-report.component";
-import { ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent } from "../organizations/tools/reused-passwords-report.component";
-import { ToolsComponent as OrgToolsComponent } from "../organizations/tools/tools.component";
-import { UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent } from "../organizations/tools/unsecured-websites-report.component";
-import { WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent } from "../organizations/tools/weak-passwords-report.component";
-import { AddEditComponent as OrgAddEditComponent } from "../organizations/vault/add-edit.component";
-import { AttachmentsComponent as OrgAttachmentsComponent } from "../organizations/vault/attachments.component";
-import { CiphersComponent as OrgCiphersComponent } from "../organizations/vault/ciphers.component";
-import { CollectionsComponent as OrgCollectionsComponent } from "../organizations/vault/collections.component";
 import { ProvidersComponent } from "../providers/providers.component";
 import { BreachReportComponent } from "../reports/breach-report.component";
 import { ExposedPasswordsReportComponent } from "../reports/exposed-passwords-report.component";
@@ -114,9 +58,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 { OrganizationPlansComponent } from "../settings/organization-plans.component";
 import { PaymentMethodComponent } from "../settings/payment-method.component";
-import { PaymentComponent } from "../settings/payment.component";
 import { PreferencesComponent } from "../settings/preferences.component";
 import { PremiumComponent } from "../settings/premium.component";
 import { ProfileComponent } from "../settings/profile.component";
@@ -168,11 +110,10 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
 // Please do not add to this list of declarations - we should refactor these into modules when doing so makes sense until there are none left.
 // If you are building new functionality, please create or extend a feature module instead.
 @NgModule({
-  imports: [SharedModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
+  imports: [SharedModule, VaultFilterModule, OrganizationBadgeModule, PipesModule, LayoutsModule],
   declarations: [
     PremiumBadgeComponent,
     AcceptEmergencyComponent,
-    AcceptFamilySponsorshipComponent,
     AcceptOrganizationComponent,
     AccessComponent,
     AccountComponent,
@@ -182,10 +123,8 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     AddEditCustomFieldsComponent,
     AdjustPaymentComponent,
     AdjustStorageComponent,
-    AdjustSubscription,
     ApiKeyComponent,
     AttachmentsComponent,
-    BillingSyncApiKeyComponent,
     BillingSyncKeyComponent,
     BreachReportComponent,
     BulkActionsComponent,
@@ -196,16 +135,12 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     ChangeEmailComponent,
     ChangeKdfComponent,
     ChangePasswordComponent,
-    ChangePlanComponent,
     CiphersComponent,
     CollectionsComponent,
     CreateOrganizationComponent,
     DeauthorizeSessionsComponent,
     DeleteAccountComponent,
-    DeleteOrganizationComponent,
-    DisableSendPolicyComponent,
     DomainRulesComponent,
-    DownloadLicenseComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessAttachmentsComponent,
     EmergencyAccessComponent,
@@ -215,64 +150,17 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     EmergencyAddEditComponent,
     ExportComponent,
     ExposedPasswordsReportComponent,
-    FamiliesForEnterpriseSetupComponent,
     FolderAddEditComponent,
-    FooterComponent,
-    FrontendLayoutComponent,
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
     LockComponent,
     LoginComponent,
-    MasterPasswordPolicyComponent,
-    NavbarComponent,
     NestedCheckboxComponent,
-    OrganizationSwitcherComponent,
-    OrgAccountComponent,
-    OrgAddEditComponent,
-    OrganizationBillingComponent,
-    OrganizationLayoutComponent,
-    OrganizationPlansComponent,
-    OrganizationSubscriptionComponent,
-    OrgAttachmentsComponent,
-    OrgBulkConfirmComponent,
-    OrgBulkRemoveComponent,
-    OrgBulkStatusComponent,
-    OrgCiphersComponent,
-    OrgCollectionAddEditComponent,
-    OrgCollectionsComponent,
-    OrgEntityEventsComponent,
-    OrgEventsComponent,
-    OrgExportComponent,
-    OrgExposedPasswordsReportComponent,
-    OrgGroupAddEditComponent,
-    OrgGroupsComponent,
-    OrgImportComponent,
-    OrgInactiveTwoFactorReportComponent,
-    OrgManageCollectionsComponent,
-    OrgManageComponent,
-    OrgPeopleComponent,
-    OrgPoliciesComponent,
-    OrgPolicyEditComponent,
-    OrgResetPasswordComponent,
-    OrgReusedPasswordsReportComponent,
-    OrgSettingComponent,
-    OrgToolsComponent,
-    OrgTwoFactorSetupComponent,
-    OrgSubscriptionHiddenComponent,
-    OrgUnsecuredWebsitesReportComponent,
-    OrgUserAddEditComponent,
-    OrgUserConfirmComponent,
-    OrgUserGroupsComponent,
-    OrgWeakPasswordsReportComponent,
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,
-    PasswordGeneratorPolicyComponent,
     PasswordRepromptComponent,
-    PasswordStrengthComponent,
-    PaymentComponent,
     PaymentMethodComponent,
-    PersonalOwnershipPolicyComponent,
     PreferencesComponent,
     PremiumBadgeComponent,
     PremiumComponent,
@@ -286,26 +174,21 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     ReportCardComponent,
     ReportListComponent,
     ReportsComponent,
-    RequireSsoPolicyComponent,
-    ResetPasswordPolicyComponent,
     ReusedPasswordsReportComponent,
     SecurityComponent,
     SecurityKeysComponent,
     SendAddEditComponent,
     SendComponent,
     SendEffluxDatesComponent,
-    SendOptionsPolicyComponent,
     SetPasswordComponent,
     SettingsComponent,
     ShareComponent,
-    SingleOrgPolicyComponent,
     SponsoredFamiliesComponent,
     SponsoringOrgRowComponent,
     SsoComponent,
     SubscriptionComponent,
     TaxInfoComponent,
     ToolsComponent,
-    TwoFactorAuthenticationPolicyComponent,
     TwoFactorAuthenticatorComponent,
     TwoFactorComponent,
     TwoFactorDuoComponent,
@@ -343,7 +226,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     AddEditCustomFieldsComponent,
     AdjustPaymentComponent,
     AdjustStorageComponent,
-    AdjustSubscription,
     ApiKeyComponent,
     AttachmentsComponent,
     BreachReportComponent,
@@ -355,16 +237,12 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     ChangeEmailComponent,
     ChangeKdfComponent,
     ChangePasswordComponent,
-    ChangePlanComponent,
     CiphersComponent,
     CollectionsComponent,
     CreateOrganizationComponent,
     DeauthorizeSessionsComponent,
     DeleteAccountComponent,
-    DeleteOrganizationComponent,
-    DisableSendPolicyComponent,
     DomainRulesComponent,
-    DownloadLicenseComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessAttachmentsComponent,
     EmergencyAccessComponent,
@@ -374,63 +252,17 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     EmergencyAddEditComponent,
     ExportComponent,
     ExposedPasswordsReportComponent,
-    FamiliesForEnterpriseSetupComponent,
     FolderAddEditComponent,
-    FooterComponent,
-    FrontendLayoutComponent,
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
     LockComponent,
     LoginComponent,
-    MasterPasswordPolicyComponent,
-    NavbarComponent,
     NestedCheckboxComponent,
-    OrganizationSwitcherComponent,
-    OrgAccountComponent,
-    OrgAddEditComponent,
-    OrganizationBillingComponent,
-    OrganizationLayoutComponent,
-    OrganizationPlansComponent,
-    OrganizationSubscriptionComponent,
-    OrgAttachmentsComponent,
-    OrgBulkConfirmComponent,
-    OrgBulkRemoveComponent,
-    OrgBulkStatusComponent,
-    OrgCiphersComponent,
-    OrgCollectionAddEditComponent,
-    OrgCollectionsComponent,
-    OrgEntityEventsComponent,
-    OrgEventsComponent,
-    OrgExportComponent,
-    OrgExposedPasswordsReportComponent,
-    OrgGroupAddEditComponent,
-    OrgGroupsComponent,
-    OrgImportComponent,
-    OrgInactiveTwoFactorReportComponent,
-    OrgManageCollectionsComponent,
-    OrgManageComponent,
-    OrgPeopleComponent,
-    OrgPoliciesComponent,
-    OrgPolicyEditComponent,
-    OrgResetPasswordComponent,
-    OrgReusedPasswordsReportComponent,
-    OrgSettingComponent,
-    OrgToolsComponent,
-    OrgTwoFactorSetupComponent,
-    OrgUnsecuredWebsitesReportComponent,
-    OrgUserAddEditComponent,
-    OrgUserConfirmComponent,
-    OrgUserGroupsComponent,
-    OrgWeakPasswordsReportComponent,
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,
-    PasswordGeneratorPolicyComponent,
     PasswordRepromptComponent,
-    PasswordStrengthComponent,
-    PaymentComponent,
     PaymentMethodComponent,
-    PersonalOwnershipPolicyComponent,
     PreferencesComponent,
     PremiumBadgeComponent,
     PremiumComponent,
@@ -444,26 +276,21 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     ReportCardComponent,
     ReportListComponent,
     ReportsComponent,
-    RequireSsoPolicyComponent,
-    ResetPasswordPolicyComponent,
     ReusedPasswordsReportComponent,
     SecurityComponent,
     SecurityKeysComponent,
     SendAddEditComponent,
     SendComponent,
     SendEffluxDatesComponent,
-    SendOptionsPolicyComponent,
     SetPasswordComponent,
     SettingsComponent,
     ShareComponent,
-    SingleOrgPolicyComponent,
     SponsoredFamiliesComponent,
     SponsoringOrgRowComponent,
     SsoComponent,
     SubscriptionComponent,
     TaxInfoComponent,
     ToolsComponent,
-    TwoFactorAuthenticationPolicyComponent,
     TwoFactorAuthenticatorComponent,
     TwoFactorComponent,
     TwoFactorDuoComponent,

src/app/modules/organizations/users/enroll-master-password-reset.component.html

@@ -32,7 +32,7 @@
         <app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
       </div>
       <div class="modal-footer">
-        <button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
+        <button bit-button buttonType="primary" type="submit" [disabled]="form.loading">
           <i
             class="bwi bwi-spinner bwi-spin"
             title="{{ 'loading' | i18n }}"
@@ -43,7 +43,7 @@
           </span>
         </button>
         <button
-          bitButton
+          bit-button
           buttonType="secondary"
           type="button"
           data-dismiss="modal"

src/app/modules/shared.module.ts

@@ -59,6 +59,10 @@ import { ToastrModule } from "ngx-toastr";
 
 import { JslibModule } from "jslib-angular/jslib.module";
 
+import { PasswordStrengthComponent } from "../components/password-strength.component";
+import { OrganizationPlansComponent } from "../settings/organization-plans.component";
+import { PaymentComponent } from "../settings/payment.component";
+
 registerLocaleData(localeAf, "af");
 registerLocaleData(localeAz, "az");
 registerLocaleData(localeBe, "be");
@@ -127,6 +131,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     ButtonModule,
     MenuModule,
   ],
+  declarations: [PasswordStrengthComponent, OrganizationPlansComponent, PaymentComponent],
   exports: [
     CommonModule,
     DragDropModule,
@@ -142,6 +147,9 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
+    PasswordStrengthComponent,
+    OrganizationPlansComponent,
+    PaymentComponent,
   ],
   providers: [DatePipe],
   bootstrap: [],

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 {
-  @Input() hideOrganizations = true;
-  @Input() hideFavorites = true;
-  @Input() 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,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"

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

@@ -1,24 +1,34 @@
-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 { VaultFilterService } from "./vault-filter.service";
+import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { Organization } from "jslib-common/models/domain/organization";
 
 @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 = "";
 
-  constructor(protected vaultFilterService: VaultFilterService) {
+  organization: Organization;
+
+  constructor(vaultFilterService: VaultFilterService) {
     super(vaultFilterService);
   }
 
   searchTextChanged() {
     this.onSearchTextChanged.emit(this.searchText);
   }
+
+  async initCollections() {
+    return await this.vaultFilterService.buildCollections(this.organization?.id);
+  }
 }

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

@@ -1,5 +1,13 @@
 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";
@@ -9,9 +17,7 @@ import { OrganizationFilterComponent } from "./components/organization-filter.co
 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],
@@ -23,10 +29,22 @@ 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 {}

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

@@ -1,54 +1,3 @@
-import { Injectable } from "@angular/core";
-
-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,
-    });
-  }
-}
+export class VaultFilterService extends BaseVaultFilterService {}

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 }}"

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

@@ -22,11 +22,11 @@ import { Organization } from "jslib-common/models/domain/organization";
 import { CipherCreateRequest } from "jslib-common/models/request/cipherCreateRequest";
 import { CipherRequest } from "jslib-common/models/request/cipherRequest";
 
-import { AddEditComponent as BaseAddEditComponent } from "../../vault/add-edit.component";
+import { AddEditComponent as BaseAddEditComponent } from "../../../../vault/add-edit.component";
 
 @Component({
   selector: "app-org-vault-add-edit",
-  templateUrl: "../../vault/add-edit.component.html",
+  templateUrl: "../../../../vault/add-edit.component.html",
 })
 export class AddEditComponent extends BaseAddEditComponent {
   organization: Organization;

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

@@ -12,11 +12,11 @@ import { Cipher } from "jslib-common/models/domain/cipher";
 import { Organization } from "jslib-common/models/domain/organization";
 import { AttachmentView } from "jslib-common/models/view/attachmentView";
 
-import { AttachmentsComponent as BaseAttachmentsComponent } from "../../vault/attachments.component";
+import { AttachmentsComponent as BaseAttachmentsComponent } from "../../../../vault/attachments.component";
 
 @Component({
   selector: "app-org-vault-attachments",
-  templateUrl: "../../vault/attachments.component.html",
+  templateUrl: "../../../../vault/attachments.component.html",
 })
 export class AttachmentsComponent extends BaseAttachmentsComponent {
   viewOnly = false;

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

@@ -15,11 +15,11 @@ import { TotpService } from "jslib-common/abstractions/totp.service";
 import { Organization } from "jslib-common/models/domain/organization";
 import { CipherView } from "jslib-common/models/view/cipherView";
 
-import { CiphersComponent as BaseCiphersComponent } from "../../vault/ciphers.component";
+import { CiphersComponent as BaseCiphersComponent } from "../../../../vault/ciphers.component";
 
 @Component({
   selector: "app-org-vault-ciphers",
-  templateUrl: "../../vault/ciphers.component.html",
+  templateUrl: "../../../../vault/ciphers.component.html",
 })
 export class CiphersComponent extends BaseCiphersComponent {
   @Output() onEventsClicked = new EventEmitter<CipherView>();

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

@@ -11,11 +11,11 @@ import { Cipher } from "jslib-common/models/domain/cipher";
 import { Organization } from "jslib-common/models/domain/organization";
 import { CipherCollectionsRequest } from "jslib-common/models/request/cipherCollectionsRequest";
 
-import { CollectionsComponent as BaseCollectionsComponent } from "../../vault/collections.component";
+import { CollectionsComponent as BaseCollectionsComponent } from "../../../../vault/collections.component";
 
 @Component({
   selector: "app-org-vault-collections",
-  templateUrl: "../../vault/collections.component.html",
+  templateUrl: "../../../../vault/collections.component.html",
 })
 export class CollectionsComponent extends BaseCollectionsComponent {
   organization: Organization;

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>

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

@@ -25,13 +25,14 @@ import { Organization } from "jslib-common/models/domain/organization";
 import { CipherView } from "jslib-common/models/view/cipherView";
 
 import { EntityEventsComponent } from "../../../../organizations/manage/entity-events.component";
-import { AddEditComponent } from "../../../../organizations/vault/add-edit.component";
-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";
 
+import { AddEditComponent } from "./add-edit.component";
+import { AttachmentsComponent } from "./attachments.component";
+import { CiphersComponent } from "./ciphers.component";
+import { CollectionsComponent } from "./collections.component";
+
 const BroadcasterSubscriptionId = "OrgVaultComponent";
 
 @Component({
@@ -39,8 +40,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 +58,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 +96,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 +110,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) {

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

@@ -2,12 +2,22 @@ import { NgModule } from "@angular/core";
 
 import { VaultModule } from "../../vault.module";
 
+import { AddEditComponent } from "./add-edit.component";
+import { AttachmentsComponent } from "./attachments.component";
+import { CiphersComponent } from "./ciphers.component";
+import { CollectionsComponent } from "./collections.component";
 import { OrganizationVaultRoutingModule } from "./organization-vault-routing.module";
 import { OrganizationVaultComponent } from "./organization-vault.component";
 
 @NgModule({
   imports: [VaultModule, OrganizationVaultRoutingModule],
-  declarations: [OrganizationVaultComponent],
+  declarations: [
+    OrganizationVaultComponent,
+    AddEditComponent,
+    AttachmentsComponent,
+    CiphersComponent,
+    CollectionsComponent,
+  ],
   exports: [OrganizationVaultComponent],
 })
 export class OrganizationVaultModule {}

src/app/organizations/layouts/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
         >

src/app/organizations/layouts/organization-switcher.component.ts

@@ -5,7 +5,7 @@ import { OrganizationService } from "jslib-common/abstractions/organization.serv
 import { Utils } from "jslib-common/misc/utils";
 import { Organization } from "jslib-common/models/domain/organization";
 
-import { NavigationPermissionsService } from "../organizations/services/navigation-permissions.service";
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
 
 @Component({
   selector: "app-organization-switcher",

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

@@ -0,0 +1,89 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "jslib-common/enums/permissions";
+
+import { PermissionsGuard } from "../guards/permissions.guard";
+import { PoliciesComponent } from "../policies/policies.component";
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
+
+import { CollectionsComponent } from "./collections.component";
+import { EventsComponent } from "./events.component";
+import { GroupsComponent } from "./groups.component";
+import { ManageComponent } from "./manage.component";
+import { PeopleComponent } from "./people.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: ManageComponent,
+    canActivate: [PermissionsGuard],
+    data: {
+      permissions: NavigationPermissionsService.getPermissions("manage"),
+    },
+    children: [
+      {
+        path: "",
+        pathMatch: "full",
+        redirectTo: "people",
+      },
+      {
+        path: "collections",
+        component: CollectionsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "collections",
+          permissions: [
+            Permissions.CreateNewCollections,
+            Permissions.EditAnyCollection,
+            Permissions.DeleteAnyCollection,
+            Permissions.EditAssignedCollections,
+            Permissions.DeleteAssignedCollections,
+          ],
+        },
+      },
+      {
+        path: "events",
+        component: EventsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "eventLogs",
+          permissions: [Permissions.AccessEventLogs],
+        },
+      },
+      {
+        path: "groups",
+        component: GroupsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "groups",
+          permissions: [Permissions.ManageGroups],
+        },
+      },
+      {
+        path: "people",
+        component: PeopleComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "people",
+          permissions: [Permissions.ManageUsers, Permissions.ManageUsersPassword],
+        },
+      },
+      {
+        path: "policies",
+        component: PoliciesComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "policies",
+          permissions: [Permissions.ManagePolicies],
+        },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ManageRoutingModule {}

src/app/organizations/manage/manage.module.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../modules/shared.module";
+import { PoliciesModule } from "../policies/policies.module";
+
+import { BulkConfirmComponent } from "./bulk/bulk-confirm.component";
+import { BulkRemoveComponent } from "./bulk/bulk-remove.component";
+import { BulkStatusComponent } from "./bulk/bulk-status.component";
+import { CollectionAddEditComponent } from "./collection-add-edit.component";
+import { CollectionsComponent as ManageCollectionsComponent } from "./collections.component";
+import { EntityEventsComponent } from "./entity-events.component";
+import { EventsComponent } from "./events.component";
+import { GroupAddEditComponent } from "./group-add-edit.component";
+import { GroupsComponent } from "./groups.component";
+import { ManageRoutingModule } from "./manage-routing.module";
+import { ManageComponent } from "./manage.component";
+import { PeopleComponent } from "./people.component";
+import { PolicyEditComponent } from "./policy-edit.component";
+import { ResetPasswordComponent } from "./reset-password.component";
+import { UserAddEditComponent } from "./user-add-edit.component";
+import { UserConfirmComponent } from "./user-confirm.component";
+import { UserGroupsComponent } from "./user-groups.component";
+
+@NgModule({
+  imports: [CommonModule, SharedModule, PoliciesModule, ManageRoutingModule],
+  declarations: [
+    BulkConfirmComponent,
+    BulkRemoveComponent,
+    BulkStatusComponent,
+    CollectionAddEditComponent,
+    EntityEventsComponent,
+    EventsComponent,
+    GroupAddEditComponent,
+    GroupsComponent,
+    ManageCollectionsComponent,
+    ManageComponent,
+    PeopleComponent,
+    PolicyEditComponent,
+    ResetPasswordComponent,
+    UserAddEditComponent,
+    UserConfirmComponent,
+    UserGroupsComponent,
+  ],
+})
+export class ManageModule {}

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

@@ -1,222 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-
-import { AuthGuard } from "jslib-angular/guards/auth.guard";
-import { Permissions } from "jslib-common/enums/permissions";
-
-import { PermissionsGuard } from "./guards/permissions.guard";
-import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
-import { CollectionsComponent } from "./manage/collections.component";
-import { EventsComponent } from "./manage/events.component";
-import { GroupsComponent } from "./manage/groups.component";
-import { ManageComponent } from "./manage/manage.component";
-import { PeopleComponent } from "./manage/people.component";
-import { PoliciesComponent } from "./manage/policies.component";
-import { NavigationPermissionsService } from "./services/navigation-permissions.service";
-import { AccountComponent } from "./settings/account.component";
-import { OrganizationBillingComponent } from "./settings/organization-billing.component";
-import { OrganizationSubscriptionComponent } from "./settings/organization-subscription.component";
-import { SettingsComponent } from "./settings/settings.component";
-import { TwoFactorSetupComponent } from "./settings/two-factor-setup.component";
-import { ExportComponent } from "./tools/export.component";
-import { ExposedPasswordsReportComponent } from "./tools/exposed-passwords-report.component";
-import { ImportComponent } from "./tools/import.component";
-import { InactiveTwoFactorReportComponent } from "./tools/inactive-two-factor-report.component";
-import { ReusedPasswordsReportComponent } from "./tools/reused-passwords-report.component";
-import { ToolsComponent } from "./tools/tools.component";
-import { UnsecuredWebsitesReportComponent } from "./tools/unsecured-websites-report.component";
-import { WeakPasswordsReportComponent } from "./tools/weak-passwords-report.component";
-
-const routes: Routes = [
-  {
-    path: ":organizationId",
-    component: OrganizationLayoutComponent,
-    canActivate: [AuthGuard, PermissionsGuard],
-    data: {
-      permissions: NavigationPermissionsService.getPermissions("admin"),
-    },
-    children: [
-      { path: "", pathMatch: "full", redirectTo: "vault" },
-      {
-        path: "vault",
-        loadChildren: async () =>
-          (await import("../modules/vault/modules/organization-vault/organization-vault.module"))
-            .OrganizationVaultModule,
-      },
-      {
-        path: "tools",
-        component: ToolsComponent,
-        canActivate: [PermissionsGuard],
-        data: { permissions: NavigationPermissionsService.getPermissions("tools") },
-        children: [
-          {
-            path: "",
-            pathMatch: "full",
-            redirectTo: "import",
-          },
-          {
-            path: "import",
-            component: ImportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "importData",
-              permissions: [Permissions.AccessImportExport],
-            },
-          },
-          {
-            path: "export",
-            component: ExportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "exportVault",
-              permissions: [Permissions.AccessImportExport],
-            },
-          },
-          {
-            path: "exposed-passwords-report",
-            component: ExposedPasswordsReportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "exposedPasswordsReport",
-              permissions: [Permissions.AccessReports],
-            },
-          },
-          {
-            path: "inactive-two-factor-report",
-            component: InactiveTwoFactorReportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "inactive2faReport",
-              permissions: [Permissions.AccessReports],
-            },
-          },
-          {
-            path: "reused-passwords-report",
-            component: ReusedPasswordsReportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "reusedPasswordsReport",
-              permissions: [Permissions.AccessReports],
-            },
-          },
-          {
-            path: "unsecured-websites-report",
-            component: UnsecuredWebsitesReportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "unsecuredWebsitesReport",
-              permissions: [Permissions.AccessReports],
-            },
-          },
-          {
-            path: "weak-passwords-report",
-            component: WeakPasswordsReportComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "weakPasswordsReport",
-              permissions: [Permissions.AccessReports],
-            },
-          },
-        ],
-      },
-      {
-        path: "manage",
-        component: ManageComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          permissions: NavigationPermissionsService.getPermissions("manage"),
-        },
-        children: [
-          {
-            path: "",
-            pathMatch: "full",
-            redirectTo: "people",
-          },
-          {
-            path: "collections",
-            component: CollectionsComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "collections",
-              permissions: [
-                Permissions.CreateNewCollections,
-                Permissions.EditAnyCollection,
-                Permissions.DeleteAnyCollection,
-                Permissions.EditAssignedCollections,
-                Permissions.DeleteAssignedCollections,
-              ],
-            },
-          },
-          {
-            path: "events",
-            component: EventsComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "eventLogs",
-              permissions: [Permissions.AccessEventLogs],
-            },
-          },
-          {
-            path: "groups",
-            component: GroupsComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "groups",
-              permissions: [Permissions.ManageGroups],
-            },
-          },
-          {
-            path: "people",
-            component: PeopleComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "people",
-              permissions: [Permissions.ManageUsers, Permissions.ManageUsersPassword],
-            },
-          },
-          {
-            path: "policies",
-            component: PoliciesComponent,
-            canActivate: [PermissionsGuard],
-            data: {
-              titleId: "policies",
-              permissions: [Permissions.ManagePolicies],
-            },
-          },
-        ],
-      },
-      {
-        path: "settings",
-        component: SettingsComponent,
-        canActivate: [PermissionsGuard],
-        data: { permissions: NavigationPermissionsService.getPermissions("settings") },
-        children: [
-          { path: "", pathMatch: "full", redirectTo: "account" },
-          { path: "account", component: AccountComponent, data: { titleId: "myOrganization" } },
-          {
-            path: "two-factor",
-            component: TwoFactorSetupComponent,
-            data: { titleId: "twoStepLogin" },
-          },
-          {
-            path: "billing",
-            component: OrganizationBillingComponent,
-            canActivate: [PermissionsGuard],
-            data: { titleId: "billing", permissions: [Permissions.ManageBilling] },
-          },
-          {
-            path: "subscription",
-            component: OrganizationSubscriptionComponent,
-            data: { titleId: "subscription" },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class OrganizationsRoutingModule {}

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

@@ -0,0 +1,46 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { AuthGuard } from "jslib-angular/guards/auth.guard";
+
+import { PermissionsGuard } from "./guards/permissions.guard";
+import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
+import { NavigationPermissionsService } from "./services/navigation-permissions.service";
+
+const routes: Routes = [
+  {
+    path: ":organizationId",
+    component: OrganizationLayoutComponent,
+    canActivate: [AuthGuard, PermissionsGuard],
+    data: {
+      permissions: NavigationPermissionsService.getPermissions("admin"),
+    },
+    children: [
+      { path: "", pathMatch: "full", redirectTo: "vault" },
+      {
+        path: "vault",
+        loadChildren: async () =>
+          (await import("../modules/vault/modules/organization-vault/organization-vault.module"))
+            .OrganizationVaultModule,
+      },
+      {
+        path: "tools",
+        loadChildren: async () => (await import("./tools/tools.module")).ToolsModule,
+      },
+      {
+        path: "manage",
+        loadChildren: async () => (await import("./manage/manage.module")).ManageModule,
+      },
+      {
+        path: "settings",
+        loadChildren: async () => (await import("./settings/settings.module")).SettingsModule,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class OrganizationsRoutingModule {}

src/app/organizations/organizations.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { LayoutsModule } from "../layouts/layouts.module";
+import { SharedModule } from "../modules/shared.module";
+
+import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
+import { OrganizationSwitcherComponent } from "./layouts/organization-switcher.component";
+import { OrganizationsRoutingModule } from "./organizations-routing.module";
+import { AcceptFamilySponsorshipComponent } from "./sponsorships/accept-family-sponsorship.component";
+import { FamiliesForEnterpriseSetupComponent } from "./sponsorships/families-for-enterprise-setup.component";
+
+@NgModule({
+  imports: [CommonModule, OrganizationsRoutingModule, SharedModule, LayoutsModule],
+  declarations: [
+    AcceptFamilySponsorshipComponent,
+    FamiliesForEnterpriseSetupComponent,
+    OrganizationLayoutComponent,
+    OrganizationSwitcherComponent,
+  ],
+})
+export class OrganizationsModule {}

src/app/organizations/policies/policies.component.ts

@@ -10,9 +10,9 @@ import { Organization } from "jslib-common/models/domain/organization";
 import { PolicyResponse } from "jslib-common/models/response/policyResponse";
 
 import { PolicyListService } from "../../services/policy-list.service";
-import { BasePolicy } from "../policies/base-policy.component";
+import { PolicyEditComponent } from "../manage/policy-edit.component";
 
-import { PolicyEditComponent } from "./policy-edit.component";
+import { BasePolicy } from "./base-policy.component";
 
 @Component({
   selector: "app-org-policies",

src/app/organizations/policies/policies.module.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../modules/shared.module";
+
+import { DisableSendPolicyComponent } from "./disable-send.component";
+import { MasterPasswordPolicyComponent } from "./master-password.component";
+import { PasswordGeneratorPolicyComponent } from "./password-generator.component";
+import { PersonalOwnershipPolicyComponent } from "./personal-ownership.component";
+import { PoliciesComponent } from "./policies.component";
+import { RequireSsoPolicyComponent } from "./require-sso.component";
+import { ResetPasswordPolicyComponent } from "./reset-password.component";
+import { SendOptionsPolicyComponent } from "./send-options.component";
+import { SingleOrgPolicyComponent } from "./single-org.component";
+import { TwoFactorAuthenticationPolicyComponent } from "./two-factor-authentication.component";
+
+@NgModule({
+  imports: [CommonModule, SharedModule],
+  declarations: [
+    DisableSendPolicyComponent,
+    MasterPasswordPolicyComponent,
+    PasswordGeneratorPolicyComponent,
+    PersonalOwnershipPolicyComponent,
+    RequireSsoPolicyComponent,
+    ResetPasswordPolicyComponent,
+    SendOptionsPolicyComponent,
+    SingleOrgPolicyComponent,
+    TwoFactorAuthenticationPolicyComponent,
+    PoliciesComponent,
+  ],
+})
+export class PoliciesModule {}

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

@@ -12,9 +12,9 @@ import { BillingResponse } from "jslib-common/models/response/billingResponse";
 
 @Component({
   selector: "app-org-billing",
-  templateUrl: "./organization-billing.component.html",
+  templateUrl: "./billing.component.html",
 })
-export class OrganizationBillingComponent implements OnInit {
+export class BillingComponent implements OnInit {
   loading = false;
   firstLoaded = false;
   showAdjustPayment = false;

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

@@ -0,0 +1,48 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "jslib-common/enums/permissions";
+
+import { PermissionsGuard } from "../guards/permissions.guard";
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
+
+import { AccountComponent } from "./account.component";
+import { BillingComponent } from "./billing.component";
+import { SettingsComponent } from "./settings.component";
+import { SubscriptionComponent } from "./subscription.component";
+import { TwoFactorSetupComponent } from "./two-factor-setup.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: SettingsComponent,
+    canActivate: [PermissionsGuard],
+    data: { permissions: NavigationPermissionsService.getPermissions("settings") },
+    children: [
+      { path: "", pathMatch: "full", redirectTo: "account" },
+      { path: "account", component: AccountComponent, data: { titleId: "myOrganization" } },
+      {
+        path: "two-factor",
+        component: TwoFactorSetupComponent,
+        data: { titleId: "twoStepLogin" },
+      },
+      {
+        path: "billing",
+        component: BillingComponent,
+        canActivate: [PermissionsGuard],
+        data: { titleId: "billing", permissions: [Permissions.ManageBilling] },
+      },
+      {
+        path: "subscription",
+        component: SubscriptionComponent,
+        data: { titleId: "subscription" },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingsRoutingModule {}

src/app/organizations/settings/settings.module.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../modules/shared.module";
+
+import { AccountComponent } from "./account.component";
+import { AdjustSubscription } from "./adjust-subscription.component";
+import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
+import { BillingComponent } from "./billing.component";
+import { ChangePlanComponent } from "./change-plan.component";
+import { DeleteOrganizationComponent } from "./delete-organization.component";
+import { DownloadLicenseComponent } from "./download-license.component";
+import { ImageSubscriptionHiddenComponent } from "./image-subscription-hidden.component";
+import { SettingsRoutingModule } from "./settings-routing.module";
+import { SettingsComponent } from "./settings.component";
+import { SubscriptionComponent } from "./subscription.component";
+import { TwoFactorSetupComponent } from "./two-factor-setup.component";
+
+@NgModule({
+  imports: [CommonModule, SharedModule, SettingsRoutingModule],
+  declarations: [
+    AccountComponent,
+    AdjustSubscription,
+    BillingComponent,
+    BillingSyncApiKeyComponent,
+    ChangePlanComponent,
+    DeleteOrganizationComponent,
+    DownloadLicenseComponent,
+    ImageSubscriptionHiddenComponent,
+    SettingsComponent,
+    SubscriptionComponent,
+    TwoFactorSetupComponent,
+  ],
+})
+export class SettingsModule {}

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

@@ -23,9 +23,9 @@ import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
 
 @Component({
   selector: "app-org-subscription",
-  templateUrl: "organization-subscription.component.html",
+  templateUrl: "subscription.component.html",
 })
-export class OrganizationSubscriptionComponent implements OnInit {
+export class SubscriptionComponent implements OnInit {
   @ViewChild("setupBillingSyncTemplate", { read: ViewContainerRef, static: true })
   setupBillingSyncModalRef: ViewContainerRef;
 

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

@@ -0,0 +1,101 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "jslib-common/enums/permissions";
+
+import { PermissionsGuard } from "../guards/permissions.guard";
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
+
+import { ExportComponent } from "./export.component";
+import { ExposedPasswordsReportComponent } from "./exposed-passwords-report.component";
+import { ImportComponent } from "./import.component";
+import { InactiveTwoFactorReportComponent } from "./inactive-two-factor-report.component";
+import { ReusedPasswordsReportComponent } from "./reused-passwords-report.component";
+import { ToolsComponent } from "./tools.component";
+import { UnsecuredWebsitesReportComponent } from "./unsecured-websites-report.component";
+import { WeakPasswordsReportComponent } from "./weak-passwords-report.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: ToolsComponent,
+    canActivate: [PermissionsGuard],
+    data: { permissions: NavigationPermissionsService.getPermissions("tools") },
+    children: [
+      {
+        path: "",
+        pathMatch: "full",
+        redirectTo: "import",
+      },
+      {
+        path: "import",
+        component: ImportComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "importData",
+          permissions: [Permissions.AccessImportExport],
+        },
+      },
+      {
+        path: "export",
+        component: ExportComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "exportVault",
+          permissions: [Permissions.AccessImportExport],
+        },
+      },
+      {
+        path: "exposed-passwords-report",
+        component: ExposedPasswordsReportComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "exposedPasswordsReport",
+          permissions: [Permissions.AccessReports],
+        },
+      },
+      {
+        path: "inactive-two-factor-report",
+        component: InactiveTwoFactorReportComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "inactive2faReport",
+          permissions: [Permissions.AccessReports],
+        },
+      },
+      {
+        path: "reused-passwords-report",
+        component: ReusedPasswordsReportComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "reusedPasswordsReport",
+          permissions: [Permissions.AccessReports],
+        },
+      },
+      {
+        path: "unsecured-websites-report",
+        component: UnsecuredWebsitesReportComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "unsecuredWebsitesReport",
+          permissions: [Permissions.AccessReports],
+        },
+      },
+      {
+        path: "weak-passwords-report",
+        component: WeakPasswordsReportComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "weakPasswordsReport",
+          permissions: [Permissions.AccessReports],
+        },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ToolsRoutingModule {}

src/app/organizations/tools/tools.module.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../modules/shared.module";
+
+import { ExportComponent } from "./export.component";
+import { ExposedPasswordsReportComponent } from "./exposed-passwords-report.component";
+import { ImportComponent } from "./import.component";
+import { InactiveTwoFactorReportComponent } from "./inactive-two-factor-report.component";
+import { ReusedPasswordsReportComponent } from "./reused-passwords-report.component";
+import { ToolsRoutingModule } from "./tools-routing.module";
+import { ToolsComponent } from "./tools.component";
+import { UnsecuredWebsitesReportComponent } from "./unsecured-websites-report.component";
+import { WeakPasswordsReportComponent } from "./weak-passwords-report.component";
+
+@NgModule({
+  imports: [CommonModule, SharedModule, ToolsRoutingModule],
+  declarations: [
+    ExportComponent,
+    ExposedPasswordsReportComponent,
+    ImportComponent,
+    InactiveTwoFactorReportComponent,
+    ReusedPasswordsReportComponent,
+    ToolsComponent,
+    UnsecuredWebsitesReportComponent,
+    WeakPasswordsReportComponent,
+  ],
+})
+export class ToolsModule {}

src/app/oss-routing.module.ts

@@ -233,10 +233,8 @@ const routes: Routes = [
   },
   {
     path: "organizations",
-    loadChildren: () =>
-      import("./organizations/organization-routing.module").then(
-        (m) => m.OrganizationsRoutingModule
-      ),
+    loadChildren: async () =>
+      (await import("./organizations/organizations.module")).OrganizationsModule,
   },
 ];
 

src/app/oss.module.ts

@@ -4,13 +4,11 @@ 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";
 import { OrganizationBadgeModule } from "./modules/vault/modules/organization-badge/organization-badge.module";
 
 @NgModule({
   imports: [
-    SharedModule,
     LooseComponentsModule,
     VaultFilterModule,
     OrganizationBadgeModule,

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>

src/app/reports/cipher-report.component.ts

@@ -8,7 +8,7 @@ import { CipherRepromptType } from "jslib-common/enums/cipherRepromptType";
 import { Organization } from "jslib-common/models/domain/organization";
 import { CipherView } from "jslib-common/models/view/cipherView";
 
-import { AddEditComponent as OrgAddEditComponent } from "../organizations/vault/add-edit.component";
+import { AddEditComponent as OrgAddEditComponent } from "../modules/vault/modules/organization-vault/add-edit.component";
 import { AddEditComponent } from "../vault/add-edit.component";
 
 @Directive()

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"

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"

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>

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 }}

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>

src/app/settings/billing-sync-key.component.ts

@@ -3,7 +3,6 @@ import { Component } from "@angular/core";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
-import { Utils } from "jslib-common/misc/utils";
 import { BillingSyncConfigApi } from "jslib-common/models/api/billingSyncConfigApi";
 import { BillingSyncConfigRequest } from "jslib-common/models/request/billingSyncConfigRequest";
 import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";

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>

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>

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

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>

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>

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)"

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"

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"

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 }}