[SG-997] Add warning for low kdf iterations (#4570)

* Created low kdf component

* added low kdf transalation message

* Registered commponent

* Referenced low kdf child compoenent to vault

* Added showLowKdf variable to determine if card should be shown

* Removed test flag

* Updated renamed enum

* Capitalized kdf text

apps/web/src/app/settings/low-kdf.component.html

@@ -0,0 +1,17 @@
+<div class="tw-rounded tw-border tw-border-solid tw-border-warning-500 tw-bg-background">
+  <div class="tw-bg-warning-500 tw-px-5 tw-py-2.5 tw-font-bold tw-uppercase tw-text-contrast">
+    <i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
+    {{ "lowKdfIterations" | i18n }}
+  </div>
+  <div class="tw-p-5">
+    <p>{{ "lowKdfIterationsDesc" | i18n }}</p>
+    <a
+      bitButton
+      buttonType="secondary"
+      [block]="true"
+      routerLink="/settings/security/security-keys"
+    >
+      {{ "changeKdfSettings" | i18n }}
+    </a>
+  </div>
+</div>

apps/web/src/app/settings/low-kdf.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-low-kdf",
+  templateUrl: "low-kdf.component.html",
+})
+export class LowKdfComponent {}

apps/web/src/app/shared/loose-components.module.ts

@@ -74,6 +74,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 { LowKdfComponent } from "../settings/low-kdf.component";
 import { OrganizationPlansComponent } from "../settings/organization-plans.component";
 import { PaymentMethodComponent } from "../settings/payment-method.component";
 import { PaymentComponent } from "../settings/payment.component";
@@ -227,6 +228,7 @@ import { SharedModule } from "./shared.module";
     VerifyEmailComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
+    LowKdfComponent,
   ],
   exports: [
     PremiumBadgeComponent,
@@ -335,6 +337,7 @@ import { SharedModule } from "./shared.module";
     VerifyEmailComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
+    LowKdfComponent,
   ],
 })
 export class LooseComponentsModule {}

apps/web/src/app/vault/vault.component.html

@@ -83,6 +83,7 @@
           </button>
         </div>
       </div>
+      <app-low-kdf *ngIf="showLowKdf"></app-low-kdf>
       <app-verify-email
         *ngIf="showVerifyEmail"
         class="d-block mb-4"

apps/web/src/app/vault/vault.component.ts

@@ -23,6 +23,7 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { TokenService } from "@bitwarden/common/abstractions/token.service";
+import { DEFAULT_PBKDF2_ITERATIONS } from "@bitwarden/common/enums/kdfType";
 import { ServiceUtils } from "@bitwarden/common/misc/serviceUtils";
 import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
@@ -69,7 +70,9 @@ export class VaultComponent implements OnInit, OnDestroy {
   showBrowserOutdated = false;
   showUpdateKey = false;
   showPremiumCallout = false;
+  showLowKdf = false;
   trashCleanupWarning: string = null;
+  kdfIterations: number;
   activeFilter: VaultFilter = new VaultFilter();
   private destroy$ = new Subject<void>();
 
@@ -96,6 +99,7 @@ export class VaultComponent implements OnInit, OnDestroy {
   async ngOnInit() {
     this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
     this.showBrowserOutdated = window.navigator.userAgent.indexOf("MSIE") !== -1;
+    this.showLowKdf = await this.isLowKdfIteration();
     this.trashCleanupWarning = this.i18nService.t(
       this.platformUtilsService.isSelfHost()
         ? "trashCleanupWarningSelfHosted"
@@ -388,6 +392,12 @@ export class VaultComponent implements OnInit, OnDestroy {
     await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
   }
 
+  async isLowKdfIteration() {
+    const kdfIterations = await this.stateService.getKdfIterations();
+
+    return kdfIterations < DEFAULT_PBKDF2_ITERATIONS;
+  }
+
   get breadcrumbs(): TreeNode<CollectionFilter>[] {
     if (!this.activeFilter.selectedCollectionNode) {
       return [];

apps/web/src/locales/en/messages.json

@@ -6082,5 +6082,14 @@
         "example": "2"
       }
     }
+  },
+  "lowKdfIterations": {
+    "message": "Low KDF Iterations"
+  },
+  "lowKdfIterationsDesc": {
+    "message": "Increase your KDF encryption settings to improve the security of your account."
+  },
+  "changeKdfSettings": {
+    "message": "Change KDF settings"
   }
 }