Signup form validation (publiclab#7768)

* fixes signup form validation on page reload

* adds system test

app/assets/javascripts/validation.js

@@ -37,15 +37,21 @@ $(document).ready(function() {
 $(document).ready(function() {
   // The two forms have the same ID
   var signUpForms = document.querySelectorAll("#create-form");
+  var signUpErrorMessages = document.querySelector("#error-message");
 
   // Sign up modal form
   signUpForms[0].classList.add("signup-modal-form");
   var signUpModalForm = new SignUpFormValidator(".signup-modal-form");
-
   // publiclab.org/register form
   if (signUpForms[1]) {
     signUpForms[1].classList.add("signup-register-form");
     var signUpRegisterForm = new SignUpFormValidator(".signup-register-form");
+    signUpRegisterForm.validateForm()
+
+    if (signUpErrorMessages.innerHTML.includes("Email")) {
+      signUpRegisterForm.updateUI(signUpRegisterForm.emailElement, false, "Email already exists");
+    }
+    signUpRegisterForm.isFormValid()
   }
 
   // The same goes for login forms
@@ -133,39 +139,40 @@ function SignUpFormValidator(formClass) {
   if (!signUpForm) return;
 
   this.validationTracker = {};
-  this.submitBtn = document.querySelector(formClass + ' [type="submit"');
+
+  this.submitBtn = document.querySelector(formClass + ' [type="submit"]');
 
   this.isFormValid();
 
-  var usernameElement = document.querySelector(
+  this.usernameElement = document.querySelector(
     formClass + " [name='user[username]']"
   );
-  var emailElement = document.querySelector(
+  this.emailElement = document.querySelector(
     formClass + " [name='user[email]']"
   );
-  var passwordElement = document.querySelector(
+  this.passwordElement = document.querySelector(
     formClass + " [name='user[password]']"
   );
-  var confirmPasswordElement = document.querySelector(
+  this.confirmPasswordElement = document.querySelector(
     formClass + " [name='user[password_confirmation]']"
   );
 
   // Every time user types something, corresponding event listener are triggered
-  usernameElement.addEventListener(
+  this.usernameElement.addEventListener(
     "input",
-    validateUsername.bind(usernameElement, this)
+    validateUsername.bind(this.usernameElement, this)
   );
-  emailElement.addEventListener(
+  this.emailElement.addEventListener(
     "input",
-    validateEmail.bind(emailElement, this)
+    validateEmail.bind(this.emailElement, this)
   );
-  passwordElement.addEventListener(
+  this.passwordElement.addEventListener(
     "input",
-    validatePassword.bind(passwordElement, confirmPasswordElement, this)
+    validatePassword.bind(this.passwordElement, this.confirmPasswordElement, this)
   );
-  confirmPasswordElement.addEventListener(
+  this.confirmPasswordElement.addEventListener(
     "input",
-    validateConfirmPassword.bind(confirmPasswordElement, passwordElement, this)
+    validateConfirmPassword.bind(this.confirmPasswordElement, this.passwordElement, this)
   );
 }
 
@@ -195,6 +202,13 @@ SignUpFormValidator.prototype.enableSubmitBtn = function() {
   this.submitBtn.removeAttribute("disabled");
 };
 
+SignUpFormValidator.prototype.validateForm = function() {
+  validateUsername.call(this.usernameElement, this)
+  validateEmail.call(this.emailElement, this)
+  validatePassword.call(this.passwordElement, this.confirmPasswordElement, this)
+  validateConfirmPassword.call(this.confirmPasswordElement, this.passwordElement, this)
+};
+
 SignUpFormValidator.prototype.isFormValid = function() {
   // Form is valid if all elements have passsed validation successfully
   var isValidForm =
@@ -242,6 +256,7 @@ function validateEmail(obj) {
 }
 
 function validatePassword(confirmPasswordElement, obj) {
+
   var password = this.value.trim();
 
   if (password.length === 0) {

app/views/users/_create_form.html.erb

@@ -1,6 +1,6 @@
 <div style="padding:10px;">
  <%= form_for :user, :as => :user, :url => "/register", :html => {:class => "container", :id => "create-form", :'data-toggle' => "validator"} do |f| %>
- <% if f.error_messages != "" %><div class="alert alert-danger"><%= f.error_messages %></div><% end %>
+ <% if f.error_messages != "" %><div class="alert alert-danger" id="error-message"><%= f.error_messages %></div><% end %>
 
   <input type="hidden" name="return_to" class="login-modal-redirect" value="<%= params[:return_to] || request.fullpath %>" />
 
@@ -110,7 +110,7 @@
 
     <div class="col-md-12 form-group form-inline" style="clear:both;padding-top:10px;">
         <!-- button for creating new users -->
-        <button style="margin-right:8px;" class="btn btn-lg btn-primary btn-save sranje" type="submit" tabindex="7"><%= translation('users._form.sign_up') %></button>
+        <button style="margin-right:8px;" class="btn btn-lg btn-primary btn-save sranje" id="signup-button" type="submit" tabindex="7"><%= translation('users._form.sign_up') %></button>
         <span>or <a id="toLogin" href="/login">
           <%= translation('users._form.log_in') %>
         </a>

test/system/signup_form_test.rb

@@ -0,0 +1,30 @@
+require "application_system_test_case"
+
+class SignupFormTest < ApplicationSystemTestCase
+  def setup
+    visit "/"
+  end
+
+  test "the signup form is validated on page reload" do
+    visit "/signup"
+
+    #Signs up with registered email
+    fill_in("username-signup", with: "abc")
+    fill_in("email", with: "[email protected]")
+    fill_in("password1", with: "secretive")
+    fill_in("password-confirmation", with: "secretive")
+
+    find("#create-form #signup-button").click()
+    path = URI.parse(current_url).request_uri
+    assert_equal path, "/register"
+    #Searches for error
+    assert_selector("#error-message #errorExplanation", text: "Email")
+
+    fill_in("username-signup", with: "abc")
+    fill_in("email", with: "[email protected]")
+    fill_in("password1", with: "secretive")
+    fill_in("password-confirmation", with: "secretive")
+    #Checks if submit button is enabled
+    find_button("signup-button")
+  end
+end