diff --git a/libs/angular/src/components/register.component.ts b/libs/angular/src/components/register.component.ts index 50d7f8a150..b07891371b 100644 --- a/libs/angular/src/components/register.component.ts +++ b/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 { - validateInputsDoesntMatch, - validateInputsMatch, -} from "@bitwarden/angular/validators/fieldsInputCheck.validator"; +import { InputsFieldMatch } from "@bitwarden/angular/validators/inputsFieldMatch.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({ - email: ["", [Validators.required, Validators.email]], - name: [""], - masterPassword: ["", [Validators.required, Validators.minLength(8)]], - confirmMasterPassword: [ - "", - [ - Validators.required, - Validators.minLength(8), - validateInputsMatch("masterPassword", this.i18nService.t("masterPassDoesntMatch")), + formGroup = this.formBuilder.group( + { + email: ["", [Validators.required, Validators.email]], + name: [""], + masterPassword: ["", [Validators.required, Validators.minLength(8)]], + confirmMasterPassword: ["", [Validators.required, Validators.minLength(8)]], + hint: [ + null, + [ + InputsFieldMatch.validateInputsDoesntMatch( + "masterPassword", + this.i18nService.t("hintEqualsPassword") + ), + ], ], - ], - hint: [ - null, - [validateInputsDoesntMatch("masterPassword", this.i18nService.t("hintEqualsPassword"))], - ], - acceptPolicies: [false, [Validators.requiredTrue]], - }); + acceptPolicies: [false, [Validators.requiredTrue]], + }, + { + validator: InputsFieldMatch.validateFormInputsMatch( + "masterPassword", + "confirmMasterPassword", + this.i18nService.t("masterPassDoesntMatch") + ), + } + ); protected successRoute = "login"; private masterPasswordStrengthTimeout: any; diff --git a/libs/angular/src/validators/fieldsInputCheck.validator.ts b/libs/angular/src/validators/fieldsInputCheck.validator.ts deleted file mode 100644 index ac1b4d5a40..0000000000 --- a/libs/angular/src/validators/fieldsInputCheck.validator.ts +++ /dev/null @@ -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; - }; -} diff --git a/libs/angular/src/validators/inputsFieldMatch.validator.ts b/libs/angular/src/validators/inputsFieldMatch.validator.ts new file mode 100644 index 0000000000..9ef1ab789d --- /dev/null +++ b/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); + } + }; + } +}