Merge pull request #4668 from nucleogenesis/validate-password-length-everywhere

(Change|Reset)Password components apply length validation

Author: marcellamaki

contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js

@@ -39,8 +39,10 @@ describe('resetPassword', () => {
   });
   it('should call setPassword on submit if password data is valid', () => {
     wrapper.setData({ new_password1: 'pass', new_password2: 'pass' });
-    wrapper.find({ ref: 'form' }).trigger('submit');
-    expect(setPassword).toHaveBeenCalled();
+    wrapper.vm.$nextTick(() => {
+      wrapper.find({ ref: 'form' }).trigger('submit');
+      expect(setPassword).toHaveBeenCalled();
+    });
   });
   it('should retain data from query params so reset credentials are preserved', () => {
     router.replace({
@@ -50,7 +52,9 @@ describe('resetPassword', () => {
       },
     });
     wrapper.setData({ new_password1: 'pass', new_password2: 'pass' });
-    wrapper.find({ ref: 'form' }).trigger('submit');
-    expect(setPassword.mock.calls[0][0].test).toBe('testing');
+    wrapper.vm.$nextTick(() => {
+      wrapper.find({ ref: 'form' }).trigger('submit');
+      expect(setPassword.mock.calls[0][0].test).toBe('testing');
+    });
   });
 });

contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue

@@ -9,6 +9,7 @@
       <PasswordField
         v-model="new_password1"
         :label="$tr('passwordLabel')"
+        :additionalRules="passwordValidationRules"
         autofocus
       />
       <PasswordField
@@ -52,6 +53,9 @@
       passwordConfirmRules() {
         return [value => (this.new_password1 === value ? true : this.$tr('passwordMatchMessage'))];
       },
+      passwordValidationRules() {
+        return [value => (value.length >= 8 ? true : this.$tr('passwordValidationMessage'))];
+      },
     },
     methods: {
       ...mapActions('account', ['setPassword']),
@@ -80,6 +84,7 @@
       resetPasswordPrompt: 'Enter and confirm your new password',
       passwordLabel: 'New password',
       passwordConfirmLabel: 'Confirm password',
+      passwordValidationMessage: 'Password should be at least 8 characters long',
       passwordMatchMessage: "Passwords don't match",
       submitButton: 'Submit',
       resetPasswordFailed: 'Failed to reset password. Please try again.',

contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue

@@ -8,9 +8,11 @@
     @submit="submitPassword"
     @cancel="dialog = false"
   >
-    <VForm ref="form">
+    <!-- inline style here avoids scrollbar on validations -->
+    <VForm ref="form" style="height: 196px">
       <PasswordField
         v-model="password"
+        :additionalRules="passwordValidationRules"
         :label="$tr('newPasswordLabel')"
       />
       <PasswordField
@@ -52,6 +54,9 @@
           this.$emit('input', value);
         },
       },
+      passwordValidationRules() {
+        return [value => (value.length >= 8 ? true : this.$tr('passwordValidationMessage'))];
+      },
       passwordConfirmRules() {
         return [value => (this.password === value ? true : this.$tr('formInvalidText'))];
       },
@@ -86,6 +91,7 @@
       newPasswordLabel: 'New password',
       confirmNewPasswordLabel: 'Confirm new password',
       formInvalidText: "Passwords don't match",
+      passwordValidationMessage: 'Password should be at least 8 characters long',
       cancelAction: 'Cancel',
       saveChangesAction: 'Save changes',
       paswordChangeSuccess: 'Password updated',