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/auth/register-form/register-form.component.html

@@ -48,7 +48,7 @@
         ></button>
         <bit-hint>
           <span class="tw-font-semibold">{{ "important" | i18n }}</span>
-          {{ "masterPassImportant" | i18n }}
+          {{ "masterPassImportant" | i18n }} {{ characterMinimumMessage }}
         </bit-hint>
       </bit-form-field>
       <app-password-strength
@@ -82,7 +82,7 @@
 
     <div class="tw-mb-3">
       <bit-form-field>
-        <bit-label>{{ "masterPassHint" | i18n }}</bit-label>
+        <bit-label>{{ "masterPassHintLabel" | i18n }}</bit-label>
         <input id="register-form_input_hint" bitInput type="text" formControlName="hint" />
         <bit-hint>{{ "masterPassHintDesc" | i18n }}</bit-hint>
       </bit-form-field>
@@ -91,7 +91,20 @@
     <div [hidden]="!showCaptcha()">
       <iframe id="hcaptcha_iframe" height="80"></iframe>
     </div>
-
+    <div class="form-group">
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="checkForBreaches"
+          name="CheckBreach"
+          formControlName="checkForBreaches"
+        />
+        <label class="form-check-label" for="checkForBreaches">
+          {{ "checkForBreaches" | i18n }}
+        </label>
+      </div>
+    </div>
     <div class="tw-mb-3 tw-flex tw-items-start" *ngIf="showTerms">
       <div class="tw-flex tw-h-6 tw-items-center">
         <input

apps/web/src/auth/register-form/register-form.component.ts

@@ -28,6 +28,7 @@ export class RegisterFormComponent extends BaseRegisterComponent {
   @Input() referenceDataValue: ReferenceEventRequest;
 
   showErrorSummary = false;
+  characterMinimumMessage: string;
 
   constructor(
     formValidationErrorService: FormValidationErrorsService,
@@ -63,14 +64,18 @@ export class RegisterFormComponent extends BaseRegisterComponent {
   }
 
   async ngOnInit() {
-    // TODO: Remove once breach checks are added for web
-    this.formGroup.patchValue({ checkForBreaches: false });
     await super.ngOnInit();
     this.referenceData = this.referenceDataValue;
 
     if (this.queryParamEmail) {
       this.formGroup.get("email")?.setValue(this.queryParamEmail);
     }
+
+    if (this.enforcedPolicyOptions != null && this.enforcedPolicyOptions.minLength > 0) {
+      this.characterMinimumMessage = "";
+    } else {
+      this.characterMinimumMessage = this.i18nService.t("characterMinimum", this.minimumLength);
+    }
   }
 
   async submit() {