[SG-420] Fixed password match defect (#3075)

* fixed password match defect

* change custom validator to static methods

libs/angular/src/components/register.component.ts

@@ -2,10 +2,7 @@ import { Directive, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
-import {
+import { InputsFieldMatch } from "@bitwarden/angular/validators/inputsFieldMatch.validator";
-  validateInputsDoesntMatch,
-  validateInputsMatch,
-} from "@bitwarden/angular/validators/fieldsInputCheck.validator";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuthService } from "@bitwarden/common/abstractions/auth.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -38,24 +35,31 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
   showTerms = true;
   showErrorSummary = false;
 
-  formGroup = this.formBuilder.group({
+  formGroup = this.formBuilder.group(
-    email: ["", [Validators.required, Validators.email]],
+    {
-    name: [""],
+      email: ["", [Validators.required, Validators.email]],
-    masterPassword: ["", [Validators.required, Validators.minLength(8)]],
+      name: [""],
-    confirmMasterPassword: [
+      masterPassword: ["", [Validators.required, Validators.minLength(8)]],
-      "",
+      confirmMasterPassword: ["", [Validators.required, Validators.minLength(8)]],
-      [
+      hint: [
-        Validators.required,
+        null,
-        Validators.minLength(8),
+        [
-        validateInputsMatch("masterPassword", this.i18nService.t("masterPassDoesntMatch")),
+          InputsFieldMatch.validateInputsDoesntMatch(
+            "masterPassword",
+            this.i18nService.t("hintEqualsPassword")
+          ),
+        ],
       ],
-    ],
+      acceptPolicies: [false, [Validators.requiredTrue]],
-    hint: [
+    },
-      null,
+    {
-      [validateInputsDoesntMatch("masterPassword", this.i18nService.t("hintEqualsPassword"))],
+      validator: InputsFieldMatch.validateFormInputsMatch(
-    ],
+        "masterPassword",
-    acceptPolicies: [false, [Validators.requiredTrue]],
+        "confirmMasterPassword",
-  });
+        this.i18nService.t("masterPassDoesntMatch")
+      ),
+    }
+  );
 
   protected successRoute = "login";
   private masterPasswordStrengthTimeout: any;

libs/angular/src/validators/fieldsInputCheck.validator.ts

@@ -1,37 +0,0 @@
-import { AbstractControl, ValidatorFn } from "@angular/forms";
-
-import { FormGroupControls } from "@bitwarden/common/abstractions/formValidationErrors.service";
-
-//check to ensure two fields do not have the same value
-export function validateInputsDoesntMatch(matchTo: string, errorMessage: string): ValidatorFn {
-  return (control: AbstractControl) => {
-    if (control.parent && control.parent.controls) {
-      return control?.value === (control?.parent?.controls as FormGroupControls)[matchTo].value
-        ? {
-            inputsMatchError: {
-              message: errorMessage,
-            },
-          }
-        : null;
-    }
-
-    return null;
-  };
-}
-
-//check to ensure two fields have the same value
-export function validateInputsMatch(matchTo: string, errorMessage: string): ValidatorFn {
-  return (control: AbstractControl) => {
-    if (control.parent && control.parent.controls) {
-      return control?.value === (control?.parent?.controls as FormGroupControls)[matchTo].value
-        ? null
-        : {
-            inputsDoesntMatchError: {
-              message: errorMessage,
-            },
-          };
-    }
-
-    return null;
-  };
-}

libs/angular/src/validators/inputsFieldMatch.validator.ts

@@ -0,0 +1,57 @@
+import { AbstractControl, FormGroup, ValidatorFn } from "@angular/forms";
+
+import { FormGroupControls } from "@bitwarden/common/abstractions/formValidationErrors.service";
+
+export class InputsFieldMatch {
+  //check to ensure two fields do not have the same value
+  static validateInputsDoesntMatch(matchTo: string, errorMessage: string): ValidatorFn {
+    return (control: AbstractControl) => {
+      if (control.parent && control.parent.controls) {
+        return control?.value === (control?.parent?.controls as FormGroupControls)[matchTo].value
+          ? {
+              inputsMatchError: {
+                message: errorMessage,
+              },
+            }
+          : null;
+      }
+
+      return null;
+    };
+  }
+
+  //check to ensure two fields have the same value
+  static validateInputsMatch(matchTo: string, errorMessage: string): ValidatorFn {
+    return (control: AbstractControl) => {
+      if (control.parent && control.parent.controls) {
+        return control?.value === (control?.parent?.controls as FormGroupControls)[matchTo].value
+          ? null
+          : {
+              inputsDoesntMatchError: {
+                message: errorMessage,
+              },
+            };
+      }
+
+      return null;
+    };
+  }
+
+  //checks the formGroup if two fields have the same value and validation is controlled from either field
+  static validateFormInputsMatch(field: string, fieldMatchTo: string, errorMessage: string) {
+    return (formGroup: FormGroup) => {
+      const fieldCtrl = formGroup.controls[field];
+      const fieldMatchToCtrl = formGroup.controls[fieldMatchTo];
+
+      if (fieldCtrl.value !== fieldMatchToCtrl.value) {
+        fieldMatchToCtrl.setErrors({
+          inputsDoesntMatchError: {
+            message: errorMessage,
+          },
+        });
+      } else {
+        fieldMatchToCtrl.setErrors(null);
+      }
+    };
+  }
+}