Bumped version to 2022.5.2 (#1730)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

README.md

@@ -1,8 +1,6 @@
-> **Repository Reorganization in Progress**
+> **Archived**
 >
-> 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.
+> This repository is archived, please go to https://github.com/bitwarden/clients for future development.
 
 <p align="center">
     <img src="https://raw.githubusercontent.com/bitwarden/brand/master/screenshots/web-vault-macbook.png" alt="" width="600" height="358" />

crowdin.yml

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

package-lock.json

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

package.json

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

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

@@ -46,7 +46,7 @@
   <bit-menu #orgPickerMenu>
     <ul aria-labelledby="pickerButton" class="tw-p-0 tw-m-0">
       <li *ngFor="let org of organizations" class="tw-list-none tw-flex tw-flex-col" role="none">
-        <a bit-menu-item [routerLink]="['/organizations', org.id]">
+        <a bitMenuItem [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 bit-menu-item routerLink="/create-organization">
+        <a bitMenuItem routerLink="/create-organization">
           <i class="bwi bwi-plus mr-2"></i>
           {{ "newOrganization" | i18n }}</a
         >

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 bit-badge badgeType="success" (click)="premiumRequired()">
+    <button *appNotPremium bitBadge badgeType="success" (click)="premiumRequired()">
       {{ "premium" | i18n }}
     </button>
   `,

src/app/layouts/navbar.component.html

@@ -65,24 +65,24 @@
               </div>
             </div>
             <bit-menu-divider></bit-menu-divider>
-            <a bit-menu-item routerLink="/settings/account">
+            <a bitMenuItem routerLink="/settings/account">
               <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
               {{ "accountSettings" | i18n }}
             </a>
-            <a bit-menu-item href="https://bitwarden.com/help/" target="_blank" rel="noopener">
+            <a bitMenuItem 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 bit-menu-item href="https://bitwarden.com/download/" target="_blank" rel="noopener">
+            <a bitMenuItem 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 bit-menu-item type="button" (click)="lock()">
+            <button bitMenuItem type="button" (click)="lock()">
               <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
               {{ "lockNow" | i18n }}
             </button>
-            <button bit-menu-item type="button" (click)="logOut()">
+            <button bitMenuItem type="button" (click)="logOut()">
               <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
               {{ "logOut" | i18n }}
             </button>

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 bit-button buttonType="primary" type="submit" [disabled]="form.loading">
+        <button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
           <i
             class="bwi bwi-spinner bwi-spin"
             title="{{ 'loading' | i18n }}"
@@ -43,7 +43,7 @@
           </span>
         </button>
         <button
-          bit-button
+          bitButton
           buttonType="secondary"
           type="button"
           data-dismiss="modal"

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

@@ -0,0 +1,28 @@
+import { Component, Input } from "@angular/core";
+
+import { Organization } from "jslib-common/models/domain/organization";
+
+import { VaultFilterComponent } from "./vault-filter.component";
+
+@Component({
+  selector: "app-organization-vault-filter",
+  templateUrl: "vault-filter.component.html",
+})
+export class OrganizationVaultFilterComponent extends VaultFilterComponent {
+  hideOrganizations = true;
+  hideFavorites = true;
+  hideFolders = true;
+
+  organization: Organization;
+
+  async initCollections() {
+    if (this.organization.canEditAnyCollection) {
+      return await this.vaultFilterService.buildAdminCollections(this.organization.id);
+    }
+    return await this.vaultFilterService.buildCollections(this.organization.id);
+  }
+
+  async reloadCollectionsAndFolders() {
+    this.collections = await this.initCollections();
+  }
+}

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

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

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

@@ -1,34 +1,26 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Output } from "@angular/core";
 
 import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
-import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
-import { Organization } from "jslib-common/models/domain/organization";
+
+import { VaultFilterService } from "./vault-filter.service";
 
 @Component({
   selector: "app-vault-filter",
   templateUrl: "vault-filter.component.html",
 })
 export class VaultFilterComponent extends BaseVaultFilterComponent {
-  @Input() showOrgFilter = true;
-  @Input() showFolders = true;
-  @Input() showFavorites = true;
-
   @Output() onSearchTextChanged = new EventEmitter<string>();
 
   searchPlaceholder: string;
   searchText = "";
 
-  organization: Organization;
-
-  constructor(vaultFilterService: VaultFilterService) {
+  constructor(protected vaultFilterService: VaultFilterService) {
+    // This empty constructor is required to provide the web vaultFilterService subclass to super()
+    // TODO: refactor this to use proper dependency injection
     super(vaultFilterService);
   }
 
   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,13 +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";
-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";
@@ -17,7 +9,9 @@ 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],
@@ -29,22 +23,10 @@ import { VaultFilterComponent } from "./vault-filter.component";
     OrganizationOptionsComponent,
     StatusFilterComponent,
     TypeFilterComponent,
+    OrganizationVaultFilterComponent,
     LinkSsoComponent,
   ],
-  exports: [VaultFilterComponent],
-  providers: [
-    {
-      provide: VaultFilterService,
-      useClass: VaultFilterService,
-      deps: [
-        StateService,
-        OrganizationService,
-        FolderService,
-        CipherService,
-        CollectionService,
-        PolicyService,
-      ],
-    },
-  ],
+  exports: [VaultFilterComponent, OrganizationVaultFilterComponent],
+  providers: [VaultFilterService],
 })
 export class VaultFilterModule {}

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

@@ -1,3 +1,54 @@
-import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { Injectable } from "@angular/core";
 
-export class VaultFilterService extends BaseVaultFilterService {}
+import { DynamicTreeNode } from "jslib-angular/modules/vault-filter/models/dynamic-tree-node.model";
+import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CipherService } from "jslib-common/abstractions/cipher.service";
+import { CollectionService } from "jslib-common/abstractions/collection.service";
+import { FolderService } from "jslib-common/abstractions/folder.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { CollectionData } from "jslib-common/models/data/collectionData";
+import { Collection } from "jslib-common/models/domain/collection";
+import { CollectionDetailsResponse } from "jslib-common/models/response/collectionResponse";
+import { CollectionView } from "jslib-common/models/view/collectionView";
+
+@Injectable()
+export class VaultFilterService extends BaseVaultFilterService {
+  constructor(
+    stateService: StateService,
+    organizationService: OrganizationService,
+    folderService: FolderService,
+    cipherService: CipherService,
+    collectionService: CollectionService,
+    policyService: PolicyService,
+    protected apiService: ApiService
+  ) {
+    super(
+      stateService,
+      organizationService,
+      folderService,
+      cipherService,
+      collectionService,
+      policyService
+    );
+  }
+
+  async buildAdminCollections(organizationId: string) {
+    let result: CollectionView[] = [];
+    const collectionResponse = await this.apiService.getCollections(organizationId);
+    if (collectionResponse?.data != null && collectionResponse.data.length) {
+      const collectionDomains = collectionResponse.data.map(
+        (r: CollectionDetailsResponse) => new Collection(new CollectionData(r))
+      );
+      result = await this.collectionService.decryptMany(collectionDomains);
+    }
+
+    const nestedCollections = await this.collectionService.getAllNested(result);
+    return new DynamicTreeNode<CollectionView>({
+      fullList: result,
+      nestedList: nestedCollections,
+    });
+  }
+}

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

@@ -1,5 +1,5 @@
 <button
-  bit-badge
+  bitBadge
   [style.color]="textColor"
   [style.background-color]="color"
   appA11yTitle="{{ organizationName }}"

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

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

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

@@ -29,7 +29,7 @@ import { AddEditComponent } from "../../../../organizations/vault/add-edit.compo
 import { AttachmentsComponent } from "../../../../organizations/vault/attachments.component";
 import { CiphersComponent } from "../../../../organizations/vault/ciphers.component";
 import { CollectionsComponent } from "../../../../organizations/vault/collections.component";
-import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { OrganizationVaultFilterComponent } from "../../../vault-filter/organization-vault-filter.component";
 import { VaultService } from "../../vault.service";
 
 const BroadcasterSubscriptionId = "OrgVaultComponent";
@@ -39,7 +39,8 @@ const BroadcasterSubscriptionId = "OrgVaultComponent";
   templateUrl: "organization-vault.component.html",
 })
 export class OrganizationVaultComponent implements OnInit, OnDestroy {
-  @ViewChild("vaultFilter", { static: true }) vaultFilterComponent: VaultFilterComponent;
+  @ViewChild("vaultFilter", { static: true })
+  vaultFilterComponent: OrganizationVaultFilterComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
@@ -57,6 +58,11 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
   trashCleanupWarning: string = null;
   activeFilter: VaultFilter = new VaultFilter();
 
+  // This is a hack to avoid redundant api calls that fetch OrganizationVaultFilterComponent collections
+  // When it makes sense to do so we should leverage some other communication method for change events that isn't directly tied to the query param for organizationId
+  // i.e. exposing the VaultFiltersService to the OrganizationSwitcherComponent to make relevant updates from a change event instead of just depending on the router
+  firstLoaded = true;
+
   constructor(
     private route: ActivatedRoute,
     private organizationService: OrganizationService,
@@ -95,11 +101,7 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
                 case "syncCompleted":
                   if (message.successfully) {
                     await Promise.all([
-                      this.vaultFilterComponent.reloadCollectionsAndFolders(
-                        new VaultFilter({
-                          selectedOrganizationId: this.organization.id,
-                        } as Partial<VaultFilter>)
-                      ),
+                      this.vaultFilterComponent.reloadCollectionsAndFolders(),
                       this.ciphersComponent.refresh(),
                     ]);
                     this.changeDetectorRef.detectChanges();
@@ -109,9 +111,12 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
             });
           });
         }
-        await this.vaultFilterComponent.reloadCollectionsAndFolders(
-          new VaultFilter({ selectedOrganizationId: this.organization.id } as Partial<VaultFilter>)
-        );
+
+        if (!this.firstLoaded) {
+          await this.vaultFilterComponent.reloadCollectionsAndFolders();
+        }
+        this.firstLoaded = false;
+
         await this.ciphersComponent.reload();
 
         if (qParams.viewEvents != null) {

src/app/reports/breach-report.component.html

@@ -17,13 +17,7 @@
       <small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
     </div>
   </div>
-  <button
-    bit-button
-    buttonType="primary"
-    class="btn-submit"
-    type="submit"
-    [disabled]="form.loading"
-  >
+  <button bitButton 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/exposed-passwords-report.component.html

@@ -3,7 +3,7 @@
 </div>
 <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
 <button
-  bit-button
+  bitButton
   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
-      bit-badge
+      bitBadge
       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 bit-button routerLink="./" *ngIf="!homepage">
+      <a bitButton 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 bit-button class="filter-button" appStopClick (click)="selectAll()">
+                  <button bitButton 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
-                    bit-button
+                    bitButton
                     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
-                    bit-button
+                    bitButton
                     class="filter-button"
                     appStopClick
                     (click)="selectType(sendType.File)"
@@ -160,19 +160,15 @@
                 <i class="bwi bwi-ellipsis-v bwi-lg" aria-hidden="true"></i>
               </button>
               <bit-menu #sendOptions>
-                <button bit-menu-item (click)="copy(s)">
+                <button bitMenuItem (click)="copy(s)">
                   <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                   {{ "copySendLink" | i18n }}
                 </button>
-                <button
-                  bit-menu-item
-                  (click)="removePassword(s)"
-                  *ngIf="s.password && !disableSend"
-                >
+                <button bitMenuItem (click)="removePassword(s)" *ngIf="s.password && !disableSend">
                   <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                   {{ "removePassword" | i18n }}
                 </button>
-                <button bit-menu-item (click)="delete(s)">
+                <button bitMenuItem (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 bit-button buttonType="danger" (click)="deauthorizeSessions()">
+    <button bitButton buttonType="danger" (click)="deauthorizeSessions()">
       {{ "deauthorizeSessions" | i18n }}
     </button>
-    <button bit-button buttonType="danger" (click)="purgeVault()">
+    <button bitButton buttonType="danger" (click)="purgeVault()">
       {{ "purgeVault" | i18n }}
     </button>
-    <button bit-button buttonType="danger" (click)="deleteAccount()">
+    <button bitButton buttonType="danger" (click)="deleteAccount()">
       {{ "deleteAccount" | i18n }}
     </button>
   </div>

src/app/settings/change-kdf.component.html

@@ -71,7 +71,7 @@
       </div>
     </div>
   </div>
-  <button bit-button buttonType="primary" class="btn-submit" [disabled]="form.loading">
+  <button bitButton 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 bit-button buttonType="primary" class="btn-submit" [disabled]="form.loading">
+  <button bitButton 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
-    bit-button
+    bitButton
     buttonType="secondary"
     (click)="load()"
     class="tw-ml-auto"
@@ -28,7 +28,7 @@
     <strong>{{ creditOrBalance | currency: "$" }}</strong>
   </p>
   <p>{{ "creditAppliedDesc" | i18n }}</p>
-  <button bit-button buttonType="secondary" (click)="addCredit()" *ngIf="!showAddCredit">
+  <button bitButton buttonType="secondary" (click)="addCredit()" *ngIf="!showAddCredit">
     {{ "addCredit" | i18n }}
   </button>
   <app-add-credit
@@ -56,7 +56,7 @@
       {{ paymentSource.description }}
     </p>
   </ng-container>
-  <button bit-button buttonType="secondary" (click)="changePayment()" *ngIf="!showAdjustPayment">
+  <button bitButton 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
-    bit-button
+    bitButton
     href="https://vault.bitwarden.com/#/settings/premium"
     target="_blank"
     rel="noopener"
@@ -69,7 +69,7 @@
       }}</small>
     </div>
     <button
-      bit-button
+      bitButton
       buttonType="primary"
       type="submit"
       class="btn-submit"
@@ -125,13 +125,7 @@
     </p>
   </div>
   <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
-  <button
-    bit-button
-    buttonType="primary"
-    type="submit"
-    class="btn-submit"
-    [disabled]="form.loading"
-  >
+  <button bitButton 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 bit-button buttonType="secondary" (click)="viewUserApiKey()">
+<button bitButton buttonType="secondary" (click)="viewUserApiKey()">
   {{ "viewApiKey" | i18n }}
 </button>
-<button bit-button buttonType="secondary" (click)="rotateUserApiKey()">
+<button bitButton 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 bit-button buttonType="secondary" (click)="recoveryCode()">
+  <button bitButton buttonType="secondary" (click)="recoveryCode()">
     {{ "viewRecoveryCode" | i18n }}
   </button>
 </bit-callout>
@@ -45,7 +45,7 @@
     </div>
     <div class="ml-auto">
       <button
-        bit-button
+        bitButton
         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
-    bit-button
+    bitButton
     buttonType="secondary"
     (click)="load()"
     class="tw-ml-auto"

src/app/settings/user-subscription.component.html

@@ -39,7 +39,7 @@
   >
     <p>{{ "subscriptionPendingCanceled" | i18n }}</p>
     <button
-      bit-button
+      bitButton
       type="button"
       buttonType="secondary"
       #reinstateBtn
@@ -63,7 +63,7 @@
         <dt>{{ "status" | i18n }}</dt>
         <dd>
           <span class="text-capitalize">{{ (subscription && subscription.status) || "-" }}</span>
-          <span bit-badge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
+          <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
             "pendingCancellation" | i18n
           }}</span>
         </dd>
@@ -96,11 +96,11 @@
   </div>
   <ng-container *ngIf="selfHosted">
     <div>
-      <button type="button" bit-button buttonType="secondary" (click)="updateLicense()">
+      <button type="button" bitButton buttonType="secondary" (click)="updateLicense()">
         {{ "updateLicense" | i18n }}
       </button>
       <a
-        bit-button
+        bitButton
         buttonType="secondary"
         href="https://vault.bitwarden.com/#/settings/subscription"
         target="_blank"
@@ -131,7 +131,7 @@
   <ng-container *ngIf="!selfHosted">
     <div class="d-flex">
       <button
-        bit-button
+        bitButton
         type="button"
         buttonType="secondary"
         (click)="downloadLicense()"
@@ -140,7 +140,7 @@
         {{ "downloadLicense" | i18n }}
       </button>
       <button
-        bit-button
+        bitButton
         #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 bit-button type="button" buttonType="secondary" (click)="adjustStorage(true)">
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
             {{ "addStorage" | i18n }}
           </button>
           <button
-            bit-button
+            bitButton
             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 bit-menu-item (click)="copy(c, c.login.username, 'username', 'Username')">
+              <button bitMenuItem (click)="copy(c, c.login.username, 'username', 'Username')">
                 <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                 {{ "copyUsername" | i18n }}
               </button>
               <button
-                bit-menu-item
+                bitMenuItem
                 (click)="copy(c, c.login.password, 'password', 'Password')"
                 *ngIf="c.viewPassword"
               >
@@ -77,24 +77,24 @@
                 {{ "copyPassword" | i18n }}
               </button>
               <button
-                bit-menu-item
+                bitMenuItem
                 (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 bit-menu-item *ngIf="c.login.canLaunch" (click)="launch(c.login.launchUri)">
+              <button bitMenuItem *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 bit-menu-item (click)="attachments(c)">
+            <button bitMenuItem (click)="attachments(c)">
               <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
               {{ "attachments" | i18n }}
             </button>
             <button
-              bit-menu-item
+              bitMenuItem
               *ngIf="((!organization && !c.organizationId) || organization) && !c.isDeleted"
               (click)="clone(c)"
             >
@@ -102,26 +102,26 @@
               {{ "clone" | i18n }}
             </button>
             <button
-              bit-menu-item
+              bitMenuItem
               *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 bit-menu-item *ngIf="c.organizationId && !c.isDeleted" (click)="collections(c)">
+            <button bitMenuItem *ngIf="c.organizationId && !c.isDeleted" (click)="collections(c)">
               <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
               {{ "collections" | i18n }}
             </button>
-            <button bit-menu-item *ngIf="c.organizationId && accessEvents" (click)="events(c)">
+            <button bitMenuItem *ngIf="c.organizationId && accessEvents" (click)="events(c)">
               <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
               {{ "eventLogs" | i18n }}
             </button>
-            <button bit-menu-item (click)="restore(c)" *ngIf="c.isDeleted">
+            <button bitMenuItem (click)="restore(c)" *ngIf="c.isDeleted">
               <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
               {{ "restore" | i18n }}
             </button>
-            <button bit-menu-item (click)="delete(c)">
+            <button bitMenuItem (click)="delete(c)">
               <span class="tw-text-danger">
                 <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                 {{ (c.isDeleted ? "permanentlyDelete" : "delete") | i18n }}