Master password security checks - web (#4799)

* [SG-571][SG-572][SG-573][SG-574] Master password change (web vault) (#4635)

* SG-571 Add option to check master password breach

* SG-571 Fix lint errors

* SG-572 SG-573 SG-574 Add logic for leaked password

* SG-571 Show error when new password equals hint

* SG-571 Minor changes

* SG-571 Undo changes

* [SG-457][SG-553][SG-554][SG-555][SG-761] Master password security update - account creation (web) (#4672)

* SG-571 Add option to check master password breach

* SG-571 Fix lint errors

* SG-572 SG-573 SG-574 Add logic for leaked password

* SG-571 Show error when new password equals hint

* SG-571 Minor changes

* SG-761 Improve copy on master password

* SG-571 Undo changes

* SG-457 Add option to check for password leak

* SG-457 Updated master password hint copy

* SG-457 Hide minimum char message when joining org

* SG-457 Added missing changes from last commit

* SG-457 Fixed minimum length

* SG-457 Updated message with dynamic minimum length

* SG-457 Set checkForBreaches to true by default

apps/web/src/app/settings/change-password.component.html

@@ -41,6 +41,10 @@
           appInputVerbatim
           autocomplete="new-password"
         />
+        <bit-hint>
+          <span class="tw-font-semibold">{{ "important" | i18n }}</span>
+          {{ "masterPassImportant" | i18n }} {{ characterMinimumMessage }}
+        </bit-hint>
         <app-password-strength
           [password]="masterPassword"
           [email]="email"
@@ -67,15 +71,18 @@
     </div>
   </div>
   <div class="form-group">
-    <label for="masterPasswordHint">{{ "masterPassHintLabel" | i18n }}</label>
-    <input
-      id="masterPasswordHint"
-      class="form-control"
-      maxlength="50"
-      type="text"
-      name="MasterPasswordHint"
-      [(ngModel)]="masterPasswordHint"
-    />
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="checkForBreaches"
+        name="checkForBreaches"
+        [(ngModel)]="checkForBreaches"
+      />
+      <label class="form-check-label" for="checkForBreaches">
+        {{ "checkForBreaches" | i18n }}
+      </label>
+    </div>
   </div>
   <div class="form-group">
     <div class="form-check">
@@ -100,6 +107,17 @@
       </a>
     </div>
   </div>
+  <div class="form-group">
+    <label for="masterPasswordHint">{{ "masterPassHintLabel" | i18n }}</label>
+    <input
+      id="masterPasswordHint"
+      class="form-control"
+      maxlength="50"
+      type="text"
+      name="MasterPasswordHint"
+      [(ngModel)]="masterPasswordHint"
+    />
+  </div>
   <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
     {{ "changeMasterPassword" | i18n }}
   </button>

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

@@ -4,6 +4,7 @@ import { firstValueFrom } from "rxjs";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "@bitwarden/angular/auth/components/change-password.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -39,6 +40,8 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
   rotateEncKey = false;
   currentMasterPassword: string;
   masterPasswordHint: string;
+  checkForBreaches = true;
+  characterMinimumMessage = "";
 
   constructor(
     i18nService: I18nService,
@@ -48,6 +51,7 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
     passwordGenerationService: PasswordGenerationService,
     platformUtilsService: PlatformUtilsService,
     policyService: PolicyService,
+    private auditService: AuditService,
     private folderService: FolderService,
     private cipherService: CipherService,
     private syncService: SyncService,
@@ -77,6 +81,8 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
 
     this.masterPasswordHint = (await this.apiService.getProfile()).masterPasswordHint;
     await super.ngOnInit();
+
+    this.characterMinimumMessage = this.i18nService.t("characterMinimum", this.minimumLength);
   }
 
   async rotateEncKeyClicked() {
@@ -133,6 +139,20 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
       return;
     }
 
+    if (this.masterPasswordHint != null && this.masterPasswordHint == this.masterPassword) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("hintEqualsPassword")
+      );
+      return;
+    }
+
+    this.leakedPassword = false;
+    if (this.checkForBreaches) {
+      this.leakedPassword = (await this.auditService.passwordLeaked(this.masterPassword)) > 0;
+    }
+
     await super.submit();
   }