fix: equality validation of input fields like password/passwordConfir…

…mation (#1297)
intershop · Oct 12, 2022 · 7895931 · 7895931
1 parent 51a161e
commit 7895931
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 130 deletions.
diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
@@ -15,6 +15,11 @@ This has been done to prevent an unintentional application of filters for produc
 To prevent deprecation warnings we removed the unnecessary `~` from all 3rd party SCSS imports (see https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules - "Using ~ is deprecated and can be removed from your code (we recommend it)").
 This should be done for additional imports in the customizations as well.
 
+The validator `equalToControl` did not work properly.
+For that reason we removed it.
+Use the validator `equalTo` instead.
+Find more information in the method description in the [`special-validators.ts`](https://github.com/intershop/intershop-pwa/blob/3.0.0/src/app/shared/forms/validators/special-validators.ts#L82-L87).
+
 ## 2.4 to 3.0
 
 With the 2.4.1 Hotfix we introduced a more fixed Node.js version handling to the version used and tested by us.

diff --git a/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts b/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts
@@ -78,6 +78,9 @@ export class PunchoutUserFormComponent implements OnInit {
       },
       {
         type: 'ish-fieldset-field',
+        validators: {
+          validation: [SpecialValidators.equalTo('passwordConfirmation', 'password')],
+        },
         fieldGroup: [
           {
             key: 'password',
@@ -105,9 +108,6 @@ export class PunchoutUserFormComponent implements OnInit {
               attributes: { autocomplete: 'new-password' },
               hideRequiredMarker: true,
             },
-            validators: {
-              validation: [SpecialValidators.equalToControl('password')],
-            },
             validation: {
               messages: {
                 required: 'account.punchout.password.confirmation.error.required',

diff --git a/...pages/account-profile-email/account-profile-email/account-profile-email.component.spec.ts b/...pages/account-profile-email/account-profile-email/account-profile-email.component.spec.ts
@@ -39,7 +39,7 @@ describe('Account Profile Email Component', () => {
   it('should display 3 input fields for email, emailConfirmation and password', () => {
     fixture.detectChanges();
 
-    expect(element.querySelectorAll('formly-field')).toHaveLength(3);
+    expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(3);
   });
 
   it('should emit updateEmail event if form is valid', () => {

diff --git a/src/app/pages/account-profile-email/account-profile-email/account-profile-email.component.ts b/src/app/pages/account-profile-email/account-profile-email/account-profile-email.component.ts
@@ -37,46 +37,51 @@ export class AccountProfileEmailComponent implements OnInit {
   private getFields() {
     return [
       {
-        key: 'email',
-        type: 'ish-email-field',
-        templateOptions: {
-          label: 'account.update_email.newemail.label',
-          hideRequiredMarker: true,
-          required: true,
+        validators: {
+          validation: [SpecialValidators.equalTo('emailConfirmation', 'email')],
         },
-      },
+        fieldGroup: [
+          {
+            key: 'email',
+            type: 'ish-email-field',
+            templateOptions: {
+              label: 'account.update_email.newemail.label',
+              hideRequiredMarker: true,
+              required: true,
+            },
+          },
 
-      {
-        key: 'emailConfirmation',
-        type: 'ish-email-field',
+          {
+            key: 'emailConfirmation',
+            type: 'ish-email-field',
 
-        templateOptions: {
-          hideRequiredMarker: true,
-          required: true,
-          label: 'account.update_email.email_confirmation.label',
-        },
-        validators: {
-          validation: [SpecialValidators.equalToControl('email')],
-        },
-        validation: {
-          messages: {
-            required: 'account.update_email.email.error.notempty',
+            templateOptions: {
+              hideRequiredMarker: true,
+              required: true,
+              label: 'account.update_email.email_confirmation.label',
+            },
+            validation: {
+              messages: {
+                required: 'account.update_email.email.error.notempty',
+                equalTo: 'account.registration.email.not_match.error',
+              },
+            },
           },
-        },
-      },
-      {
-        key: 'currentPassword',
-        type: 'ish-password-field',
-        templateOptions: {
-          hideRequiredMarker: true,
-          required: true,
-          label: 'account.update_email.password.label',
-        },
-        validation: {
-          messages: {
-            required: 'account.update_password.old_password.error.required',
+          {
+            key: 'currentPassword',
+            type: 'ish-password-field',
+            templateOptions: {
+              hideRequiredMarker: true,
+              required: true,
+              label: 'account.update_email.password.label',
+            },
+            validation: {
+              messages: {
+                required: 'account.update_password.old_password.error.required',
+              },
+            },
           },
-        },
+        ],
       },
     ];
   }

diff --git a/...ount-profile-password/account-profile-password/account-profile-password.component.spec.ts b/...ount-profile-password/account-profile-password/account-profile-password.component.spec.ts
@@ -35,7 +35,7 @@ describe('Account Profile Password Component', () => {
 
   it('should display 3 input fields for oldPassword, password and passwordConfirmation', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toHaveLength(3);
+    expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(3);
   });
 
   it('should emit updatePassword event if form is valid', () => {

diff --git a/...s/account-profile-password/account-profile-password/account-profile-password.component.ts b/...s/account-profile-password/account-profile-password/account-profile-password.component.ts
@@ -36,52 +36,56 @@ export class AccountProfilePasswordComponent implements OnInit, OnChanges {
   ngOnInit() {
     this.fields = [
       {
-        key: 'currentPassword',
-        type: 'ish-text-input-field',
-        templateOptions: {
-          type: 'password',
-          required: true,
-          hideRequiredMarker: true,
-          label: 'account.password.label',
+        validators: {
+          validation: [SpecialValidators.equalTo('passwordConfirmation', 'password')],
         },
-        validation: {
-          messages: {
-            incorrect: 'account.update_password.old_password.error.incorrect',
-          },
-        },
-      },
-      {
-        key: 'password',
-        type: 'ish-password-field',
-        templateOptions: {
-          postWrappers: [{ wrapper: 'description', index: -1 }],
-          required: true,
-          hideRequiredMarker: true,
-          label: 'account.update_password.newpassword.label',
-          customDescription: {
-            key: 'account.register.password.extrainfo.message',
-            args: { 0: '7' },
+        fieldGroup: [
+          {
+            key: 'currentPassword',
+            type: 'ish-text-input-field',
+            templateOptions: {
+              type: 'password',
+              required: true,
+              hideRequiredMarker: true,
+              label: 'account.password.label',
+            },
+            validation: {
+              messages: {
+                incorrect: 'account.update_password.old_password.error.incorrect',
+              },
+            },
           },
+          {
+            key: 'password',
+            type: 'ish-password-field',
+            templateOptions: {
+              postWrappers: [{ wrapper: 'description', index: -1 }],
+              required: true,
+              hideRequiredMarker: true,
+              label: 'account.update_password.newpassword.label',
+              customDescription: {
+                key: 'account.register.password.extrainfo.message',
+                args: { 0: '7' },
+              },
 
-          attributes: { autocomplete: 'new-password' },
-        },
-      },
-      {
-        key: 'passwordConfirmation',
-        type: 'ish-password-field',
-        templateOptions: {
-          required: true,
-          hideRequiredMarker: true,
-          label: 'account.update_password.newpassword_confirmation.label',
-        },
-        validators: {
-          validation: [SpecialValidators.equalToControl('password')],
-        },
-        validation: {
-          messages: {
-            required: 'account.register.password_confirmation.error.default',
+              attributes: { autocomplete: 'new-password' },
+            },
           },
-        },
+          {
+            key: 'passwordConfirmation',
+            type: 'ish-password-field',
+            templateOptions: {
+              required: true,
+              hideRequiredMarker: true,
+              label: 'account.update_password.newpassword_confirmation.label',
+            },
+            validation: {
+              messages: {
+                required: 'account.register.password_confirmation.error.default',
+              },
+            },
+          },
+        ],
       },
     ];
   }

diff --git a/src/app/pages/forgot-password/update-password-form/update-password-form.component.ts b/src/app/pages/forgot-password/update-password-form/update-password-form.component.ts
@@ -31,40 +31,44 @@ export class UpdatePasswordFormComponent implements OnInit {
   ngOnInit() {
     this.fields = [
       {
-        key: 'password',
-        type: 'ish-password-field',
-        templateOptions: {
-          postWrappers: [{ wrapper: 'description', index: -1 }],
-          required: true,
-          hideRequiredMarker: true,
-          label: 'account.register.password.label',
-          customDescription: {
-            key: 'account.register.password.extrainfo.message',
-            args: { 0: '7' },
-          },
-        },
-        validation: {
-          messages: {
-            minLength: 'account.update_password.new_password.error.length',
-          },
-        },
-      },
-      {
-        key: 'passwordConfirmation',
-        type: 'ish-password-field',
-        templateOptions: {
-          required: true,
-          hideRequiredMarker: true,
-          label: 'account.register.password_confirmation.label',
-        },
         validators: {
-          validation: [SpecialValidators.equalToControl('password')],
+          validation: [SpecialValidators.equalTo('passwordConfirmation', 'password')],
         },
-        validation: {
-          messages: {
-            required: 'account.register.password_confirmation.error.default',
+        fieldGroup: [
+          {
+            key: 'password',
+            type: 'ish-password-field',
+            templateOptions: {
+              postWrappers: [{ wrapper: 'description', index: -1 }],
+              required: true,
+              hideRequiredMarker: true,
+              label: 'account.register.password.label',
+              customDescription: {
+                key: 'account.register.password.extrainfo.message',
+                args: { 0: '7' },
+              },
+            },
+            validation: {
+              messages: {
+                minLength: 'account.update_password.new_password.error.length',
+              },
+            },
           },
-        },
+          {
+            key: 'passwordConfirmation',
+            type: 'ish-password-field',
+            templateOptions: {
+              required: true,
+              hideRequiredMarker: true,
+              label: 'account.register.password_confirmation.label',
+            },
+            validation: {
+              messages: {
+                required: 'account.register.password_confirmation.error.default',
+              },
+            },
+          },
+        ],
       },
     ];
   }

diff --git a/...ation/services/registration-form-configuration/registration-form-configuration.service.ts b/...ation/services/registration-form-configuration/registration-form-configuration.service.ts
@@ -224,6 +224,12 @@ export class RegistrationFormConfigurationService {
           fieldsetClass: 'row',
           childClass: 'col-md-10 col-lg-8 col-xl-6',
         },
+        validators: {
+          validation: [
+            SpecialValidators.equalTo('loginConfirmation', 'login'),
+            SpecialValidators.equalTo('passwordConfirmation', 'password'),
+          ],
+        },
         fieldGroup: [
           {
             key: 'login',
@@ -240,9 +246,6 @@ export class RegistrationFormConfigurationService {
               label: 'account.register.email_confirmation.label',
               required: true,
             },
-            validators: {
-              validation: [SpecialValidators.equalToControl('login')],
-            },
             validation: {
               messages: {
                 equalTo: 'account.registration.email.not_match.error',
@@ -273,9 +276,6 @@ export class RegistrationFormConfigurationService {
 
               attributes: { autocomplete: 'new-password' },
             },
-            validators: {
-              validation: [SpecialValidators.equalToControl('password')],
-            },
             validation: {
               messages: {
                 required: 'account.register.password_confirmation.error.default',

diff --git a/src/app/shared/forms/validators/special-validators.ts b/src/app/shared/forms/validators/special-validators.ts
@@ -101,17 +101,6 @@ export class SpecialValidators {
     };
   }
 
-  static equalToControl(otherControlName: string): ValidatorFn {
-    return (control: FormControl) => {
-      const otherControl = control.parent?.get(otherControlName);
-      if (otherControl && otherControl.value !== control.value) {
-        return {
-          equalTo: { valid: false },
-        };
-      }
-    };
-  }
-
   static moneyAmount(control: FormControl): { [error: string]: { valid: boolean } } {
     const moneyAmountPattern = /^$|^\d{1,9}(\.\d{1,2})?$/;
     if (!control.value) {