Merge pull request #17904 from edx/jlajoie/LEARNER-4578

LEARNER-4578: Adds in JQuery password validation on Studio

cms/static/js/factories/register.js

@@ -29,5 +29,31 @@ define(['jquery', 'jquery.cookie'], function($) {
                 }
             });
         });
+
+        $('input#password').blur(function() {
+            var $formErrors = $('#password_error'),
+                data = {
+                    password: $('#password').val()
+                };
+
+            // Uninitialize the errors on blur
+            $formErrors.empty();
+            $formErrors.addClass('hidden');
+
+            $.ajax({
+                url: '/api/user/v1/validation/registration',
+                type: 'POST',
+                dataType: 'json',
+                data: data,
+                success: function(json) {
+                    _.each(json.validation_decisions, function(value, key) {
+                        if (key === 'password' && value) {
+                            $formErrors.html(value);
+                            $formErrors.removeClass('hidden');
+                        }
+                    });
+                }
+            });
+        });
     };
 });

cms/static/sass/views/_account.scss

@@ -160,6 +160,9 @@
               + .tip {
                 color: $gray-d1;
               }
+              + .tip-error {
+                color: $red;
+              }
             }
           }
 
@@ -187,6 +190,10 @@
             margin-top: ($baseline/4);
             color: $gray-d1;
           }
+
+          .tip-error {
+              color: $red;
+          }
         }
 
         .field-group {

cms/templates/register.html

@@ -50,6 +50,7 @@ from django.core.urlresolvers import reverse
             <li class="field text required" id="field-password">
               <label for="password">${_("Password")}</label>
               <input id="password" type="password" name="password" />
+              <span id="password_error" class="tip tip-error hidden" role="alert"></span>
             </li>
 
             <li class="field-group">

common/test/acceptance/pages/studio/signup.py

@@ -18,6 +18,10 @@ class SignupPage(PageObject, HelpMixin):
     def is_browser_on_page(self):
         return self.q(css='body.view-signup').visible
 
+    def input_password(self, password):
+        """Inputs a password and then returns the password input"""
+        return set_input_value(self, '#password', password)
+
     def sign_up_user(self, registration_dictionary):
         """
         Register the user.

common/test/acceptance/tests/studio/test_studio_general.py

@@ -3,6 +3,8 @@ Acceptance tests for Studio.
 """
 import uuid
 
+from selenium.webdriver.common.keys import Keys
+
 from base_studio_test import StudioCourseTest
 from common.test.acceptance.fixtures.course import CourseFixture, XBlockFixtureDesc
 from common.test.acceptance.pages.common.auto_auth import AutoAuthPage
@@ -128,6 +130,24 @@ class SignUpAndSignInTest(UniqueCourseTest):
         home = HomePage(self.browser)
         home.wait_for_page()
 
+    def test_sign_up_with_bad_password(self):
+        """
+        Scenario: Sign up from the homepage
+        Given I visit the Studio homepage
+        When I click the link with the text "Sign Up"
+        And I fill in the registration form
+        When I enter an insufficient password and focus out
+        I should see an error message
+        """
+        index_page = IndexPage(self.browser)
+        index_page.visit()
+        index_page.click_sign_up()
+
+        password_input = self.sign_up_page.input_password('a')  # Arbitrary short password that will fail
+        password_input.send_keys(Keys.TAB)  # Focus out of the element
+        index_page.wait_for_element_visibility('#password_error', 'Password Error Message')
+        self.assertIsNotNone(index_page.q(css='#password_error').text)  # Make sure there is an error message
+
     def test_login_with_valid_redirect(self):
         """
         Scenario: Login with a valid redirect