fix(password): Add inline confirm password validation

Author: vbudhram

packages/fxa-content-server/app/scripts/views/sign_up_password.js

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { assign } from 'underscore';
+import { assign, debounce } from 'underscore';
 import AuthErrors from '../lib/auth-errors';
 import CWTSOnSignupPasswordExperimentMixin from './mixins/cwts-on-signup-password-experiment-mixin';
 import Cocktail from 'cocktail';
@@ -22,6 +22,10 @@ import Template from 'templates/sign_up_password.mustache';
 
 const t = msg => msg;
 
+const PASSWORD_INPUT_SELECTOR = '#password';
+const VPASSWORD_INPUT_SELECTOR = '#vpassword';
+const DELAY_BEFORE_PASSWORD_CHECK_MS = 1500;
+
 const proto = FormView.prototype;
 const SignUpPasswordView = FormView.extend({
   template: Template,
@@ -32,6 +36,7 @@ const SignUpPasswordView = FormView.extend({
 
   events: assign({}, FormView.prototype.events, {
     'click .use-different': preventDefaultThen('useDifferentAccount'),
+    'keyup #vpassword': '_onConfirmPasswordKeyUp',
   }),
 
   useDifferentAccount() {
@@ -63,6 +68,14 @@ const SignUpPasswordView = FormView.extend({
       canChangeAccount: !this.model.get('forceEmail'),
       email: this.getAccount().get('email'),
     });
+
+    // We debounce the password check function to give the password input
+    // some smarts. There will be a slight delay to show the tooltip which
+    // makes the experience less janky,
+    this.checkPasswordsMatchDebounce = debounce(
+      this._checkPasswordsMatch,
+      DELAY_BEFORE_PASSWORD_CHECK_MS
+    );
   },
 
   isValidEnd() {
@@ -75,7 +88,10 @@ const SignUpPasswordView = FormView.extend({
 
   showValidationErrorsEnd() {
     if (!this._doPasswordsMatch()) {
-      this.displayError(AuthErrors.toError('PASSWORDS_DO_NOT_MATCH'));
+      this.showValidationError(
+        this.$(VPASSWORD_INPUT_SELECTOR),
+        AuthErrors.toError('PASSWORDS_DO_NOT_MATCH')
+      );
     }
   },
 
@@ -97,16 +113,26 @@ const SignUpPasswordView = FormView.extend({
   },
 
   _getPassword() {
-    return this.getElementValue('#password');
+    return this.getElementValue(PASSWORD_INPUT_SELECTOR);
   },
 
   _getVPassword() {
-    return this.getElementValue('#vpassword');
+    return this.getElementValue(VPASSWORD_INPUT_SELECTOR);
   },
 
   _doPasswordsMatch() {
     return this._getPassword() === this._getVPassword();
   },
+
+  _onConfirmPasswordKeyUp() {
+    this.checkPasswordsMatchDebounce();
+  },
+
+  _checkPasswordsMatch() {
+    if (this._getVPassword() !== '' && this._getPassword() !== '') {
+      this.showValidationErrorsEnd();
+    }
+  },
 });
 
 Cocktail.mixin(

packages/fxa-content-server/app/tests/spec/views/sign_up_password.js

@@ -142,7 +142,7 @@ describe('views/sign_up_password', () => {
     beforeEach(() => {
       sinon.stub(view, 'signUp').callsFake(() => Promise.resolve());
       sinon.stub(view, 'tooYoung');
-      sinon.spy(view, 'displayError');
+      sinon.spy(view, 'showValidationError');
     });
 
     describe('password and vpassword do not match', () => {
@@ -155,10 +155,13 @@ describe('views/sign_up_password', () => {
           assert.fail,
           () => {
             assert.isFalse(view.signUp.called);
-            assert.isTrue(view.displayError.calledOnce);
-            const displayedError = view.displayError.args[0][0];
+            assert.isTrue(view.showValidationError.calledOnce);
+            const displayedError = view.showValidationError.args[0][1];
             assert.isTrue(
-              AuthErrors.is(displayedError, 'PASSWORDS_DO_NOT_MATCH')
+              AuthErrors.is(
+                displayedError,
+                AuthErrors.toError('PASSWORDS_DO_NOT_MATCH')
+              )
             );
           }
         );
@@ -174,7 +177,7 @@ describe('views/sign_up_password', () => {
         return Promise.resolve(view.validateAndSubmit()).then(() => {
           assert.isTrue(view.tooYoung.calledOnce);
           assert.isFalse(view.signUp.called);
-          assert.isFalse(view.displayError.called);
+          assert.isFalse(view.showValidationError.called);
         });
       });
     });
@@ -196,7 +199,7 @@ describe('views/sign_up_password', () => {
             'take-action-for-the-internet',
           ]);
 
-          assert.isFalse(view.displayError.called);
+          assert.isFalse(view.showValidationError.called);
         });
       });
     });
@@ -216,6 +219,66 @@ describe('views/sign_up_password', () => {
     });
   });
 
+  describe('_checkPasswordsMatch', () => {
+    beforeEach(() => {
+      sinon.stub(view, 'signUp').callsFake(() => Promise.resolve());
+      sinon.stub(view, 'tooYoung');
+      sinon.spy(view, 'showValidationError');
+    });
+
+    describe('password and vpassword do not match', () => {
+      it('displays an error', () => {
+        view.$(Selectors.PASSWORD).val('password123123');
+        view.$(Selectors.VPASSWORD).val('different_password');
+        view.$(Selectors.AGE).val('21');
+
+        return Promise.resolve(view._checkPasswordsMatch()).then(() => {
+          assert.isTrue(view.showValidationError.calledOnce);
+          const displayedError = view.showValidationError.args[0][1];
+          assert.isTrue(
+            AuthErrors.is(
+              displayedError,
+              AuthErrors.toError('PASSWORDS_DO_NOT_MATCH')
+            )
+          );
+        });
+      });
+    });
+
+    describe('password and vpassword do match', () => {
+      it('displays an error', () => {
+        view.$(Selectors.PASSWORD).val('password123123');
+        view.$(Selectors.VPASSWORD).val('password123123');
+        view.$(Selectors.AGE).val('21');
+
+        return Promise.resolve(view._checkPasswordsMatch()).then(() => {
+          assert.isFalse(view.showValidationError.called);
+        });
+      });
+    });
+  });
+
+  describe('inline confirm password validation', () => {
+    beforeEach(() => {
+      sinon.stub(view, 'signUp').callsFake(() => Promise.resolve());
+      sinon.spy(view, 'showValidationError');
+      sinon.spy(view, 'checkPasswordsMatchDebounce');
+    });
+
+    describe('check password and vpassword', () => {
+      it('calls debounced password check', () => {
+        view.$(Selectors.PASSWORD).val('password123123');
+        view.$(Selectors.VPASSWORD).val('different_password');
+        view.$(Selectors.AGE).val('21');
+
+        return Promise.resolve(view.$(Selectors.VPASSWORD).keyup()).then(() => {
+          assert.isFalse(view.signUp.called);
+          assert.isTrue(view.checkPasswordsMatchDebounce.calledOnce);
+        });
+      });
+    });
+  });
+
   describe('useDifferentAccount', () => {
     it('navigates to `/` with the account', () => {
       sinon.spy(view, 'navigate');

packages/fxa-content-server/tests/functional/lib/selectors.js

@@ -422,6 +422,7 @@ module.exports = {
     SUBMIT: 'button[type="submit"]',
     TOOLTIP_AGE_REQUIRED: '#age ~ .tooltip',
     TOS: '#fxa-tos',
+    TOOLTIP: '.tooltip',
     VPASSWORD: '#vpassword',
   },
   SMS_LEARN_MORE: {

packages/fxa-content-server/tests/functional/sign_up.js

@@ -31,6 +31,7 @@ const {
   openVerificationLinkInSameTab,
   switchToWindow,
   testElementExists,
+  testElementTextEquals,
   testElementTextInclude,
   testElementValueEquals,
   testErrorTextInclude,
@@ -421,7 +422,12 @@ registerSuite('signup', {
           // wait five seconds to allow any errant navigation to occur
           .then(noPageTransition(selectors.SIGNUP_PASSWORD.HEADER))
           // the validation tooltip should be visible
-          .then(visibleByQSA(selectors.SIGNUP_PASSWORD.ERROR))
+          .then(
+            testElementTextEquals(
+              selectors.SIGNUP_PASSWORD.TOOLTIP,
+              'Passwords do not match'
+            )
+          )
       );
     },
 

packages/fxa-content-server/tests/functional/sync_v3_email_first.js

@@ -36,7 +36,6 @@ const {
   testElementTextEquals,
   testElementTextInclude,
   testElementValueEquals,
-  testErrorTextInclude,
   testIsBrowserNotified,
   type,
   visibleByQSA,
@@ -173,7 +172,12 @@ registerSuite('Firefox Desktop Sync v3 email first', {
               selectors.SIGNUP_PASSWORD.ERROR_PASSWORDS_DO_NOT_MATCH
             )
           )
-          .then(testErrorTextInclude('Passwords do not match'))
+          .then(
+            testElementTextEquals(
+              selectors.SIGNUP_PASSWORD.TOOLTIP,
+              'Passwords do not match'
+            )
+          )
 
           // fix the password mismatch
           .then(type(selectors.SIGNUP_PASSWORD.VPASSWORD, PASSWORD))