basic password validation without client side gem

The client_side_validations gem is not maintained anymore and the validations
were not working lately. So instead of trying to fix it I started working on
independent validations for the password as it can't be validated on the
server due to SRP.

So far these validations are very primitive. They require 8 characters length
and a matching confirmation.

2 files changed, 102 insertions, 9 deletions

diff --git a/app/assets/javascripts/users.js b/app/assets/javascripts/users.js
index 4a86ef5..fa20399 100644
--- a/app/assets/javascripts/users.js
+++ b/app/assets/javascripts/users.js
@@ -1,13 +1,24 @@
 (function() {
+
+
+  var settings = {
+    "error_class":"help-inline",
+    "error_tag":"span",
+    "wrapper_error_class":"error",
+    "wrapper_tag":"div",
+    "wrapper_class":"control-group"
+  }
+
   //
   // LOCAL FUNCTIONS
   //
 
-  var poll_users, 
-      prevent_default, 
-      form_failed, 
-      form_passed, 
+  var poll_users,
+      prevent_default,
       clear_errors,
+      clear_field_errors,
+      validate_password_confirmation,
+      validate_password_length,
       update_user;
 
   prevent_default = function(event) {
@@ -24,6 +35,10 @@
     return $('#messages').empty();
   };
 
+  clear_field_errors = function() {
+    return $(settings.error_tag + '.' + settings.error_class).remove();
+  };
+
   update_user = function(submitEvent) {
     var form = submitEvent.target;
     var token = form.dataset.token;
@@ -38,7 +53,34 @@
       $(form).find('.btn[type="submit"]').button('reset');
     });
   };
-  
+
+  validate_password_confirmation = function(submitEvent) {
+    var form = submitEvent.target;
+    var password = $(form).find('input#srp_password').val();
+    var confirmation = $(form).find('input#srp_password_confirmation').val();
+    if (password === confirmation) {
+      return true;
+    }
+    else {
+      displayFieldError("password_confirmation", "does not match.");
+      submitEvent.stopImmediatePropagation()
+      return false;
+    }
+  };
+
+  validate_password_length = function(submitEvent) {
+    var form = submitEvent.target;
+    var password = $(form).find('input#srp_password').val();
+    if (password.length > 7) {
+      return true;
+    }
+    else {
+      displayFieldError("password", "needs to be at least 8 characters long.");
+      submitEvent.stopImmediatePropagation()
+      return false;
+    }
+  };
+
   //
   // PUBLIC FUNCTIONS
   //
@@ -90,18 +132,38 @@
   }
 
   function displayFieldError(field, error) {
+    var message = $.isArray(error) ? error[0] : error;
     var element = $('form input[name$="[' + field + ']"]');
     if (element) {
-      element.trigger('element:validate:fail.ClientSideValidations', error).data('valid', false);
+      addError(element, settings, message);
     }
   };
 
-  //
-  // INIT
-  //
+  function addError(element, settings, message) {
+    var errorElement, wrapper;
+
+    errorElement = element.parent().find("" + settings.error_tag + "." + settings.error_class);
+    wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class);
+    if (errorElement[0] == null) {
+      errorElement = $("<" + settings.error_tag + "/>", {
+        "class": settings.error_class,
+        text: message
+      });
+      element.after(errorElement);
+    }
+    wrapper.addClass(settings.wrapper_error_class);
+    return errorElement.text(message);
+  }
+
+//
+// INIT
+//
 
   $(document).ready(function() {
     $('#new_user').submit(prevent_default);
+    $('#new_user').submit(clear_field_errors);
+    $('#new_user').submit(validate_password_length);
+    $('#new_user').submit(validate_password_confirmation);
     $('#new_user').submit(srp.signup);
     $('#new_session').submit(prevent_default);
     $('#new_session').submit(srp.login);
diff --git a/test/integration/browser/password_validation_test.rb b/test/integration/browser/password_validation_test.rb
new file mode 100644
index 0000000..45eb0bf
--- /dev/null
+++ b/test/integration/browser/password_validation_test.rb
@@ -0,0 +1,31 @@
+require 'test_helper'
+
+class PasswordValidationTest < BrowserIntegrationTest
+
+  test "password confirmation is validated" do
+    username ||= "test_#{SecureRandom.urlsafe_base64}".downcase
+    password ||= SecureRandom.base64
+    visit '/users/new'
+    fill_in 'Username', with: username
+    fill_in 'Password', with: password
+    fill_in 'Password confirmation', with: password + "-typo"
+    click_on 'Sign Up'
+    assert page.has_content? "does not match."
+    assert_equal '/users/new', current_path
+    assert page.has_selector? ".error #srp_password_confirmation"
+  end
+
+  test "password needs to be at least 8 chars long" do
+    username ||= "test_#{SecureRandom.urlsafe_base64}".downcase
+    password ||= SecureRandom.base64[0,7]
+    visit '/users/new'
+    fill_in 'Username', with: username
+    fill_in 'Password', with: password
+    fill_in 'Password confirmation', with: password
+    click_on 'Sign Up'
+    assert page.has_content? "needs to be at least 8 characters long"
+    assert_equal '/users/new', current_path
+    assert page.has_selector? ".error #srp_password"
+  end
+end
+