From 976512dc198fc89d32749472b44e0336f24b7e9b Mon Sep 17 00:00:00 2001
From: Kevin Luo <kevinz.qu@gmail.com>
Date: Fri, 16 Nov 2018 01:43:47 +0000
Subject: [PATCH 1/4] Add checks for username, password, email, password match

Fix issue with password confirmation field

Add comments and fix scrollup
---
 app/views/users/_form.html.erb | 98 +++++++++++++++++++++++++++++++++-
 1 file changed, 96 insertions(+), 2 deletions(-)

diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index 57c1a2881e..8f803952b9 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -22,6 +22,8 @@
         <%= f.text_field :username, { tabindex: 1, class: 'form-control', id: 'username' } %>
   
         <input type="hidden" name="id" value="<%= @user.username %>" />
+        
+        <div class='validate' id="username-valid" style="color: red; padding-top:5px" ></div>
       </div>
       
       <% end %>
@@ -42,6 +44,7 @@
       <label for="email"><%= t('users._form.email') %></label>
       <%= f.text_field :email, { tabindex: 3, placeholder: "you@email.com", class: 'form-control', id: 'email' } %>
 
+      <div class='validate' id='email-valid' style='color: red; padding-top: 5px;'></div>
       </div>
   
   
@@ -63,10 +66,11 @@
         <%= f.password_field :password_confirmation, { placeholder: I18n.t('users._form.confirm_password'),
                                                        tabindex: 5,
                                                        class: 'form-control',
-                                                       id: 'password-confirmation' }
+                                                       id: 'password-confirmation',
+                                                       disabled: ''}
         %>
       </div>
-    
+      <div class='validate' id='password-match' style='padding-top: 5px'></div>
     </div>
 
     <div class="form-group">
@@ -120,10 +124,100 @@
       <script>
         (function() {
           $('.btn-save').click(function onClick(e) {
+            var validated = true; 
+            $('.form-control').trigger('keyup'); //Prevents bypassing check when all fields have no been touched
+            $('.validate').each(function() {  
+              if($(this).html() != '' && !this.classList.contains('chk')) { //Check that all messages are clear
+                e.preventDefault();
+                validated = false;
+                var offset = $(this).offset();
+                $('html, body').animate({
+                  scrollTop: offset.top - $(window).height() / 2
+                });
+                return false;
+              } 
+            });
+            if(validated) {
             $(this).addClass("disabled") // disable the button after it is clicked
                    .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
+            }
           })
         })();
+
+        (function() {
+          var passwordValid;
+          
+          //Check validity of username
+          $('#username').on('keyup', function() {
+            //Username Requirements:
+            //At least 3 characters
+            //Only numbers, letters, spaces, and .-_@+
+            var username = $('#username').val();
+            $('#username-valid').html("");
+            var tooShort = (username.length < 3);
+            var invalidChars = !(new RegExp("^[a-zA-Z0-9-+@_.]+$").test(username)) && username.length != 0;
+            
+            if(tooShort || invalidChars) {
+              if(tooShort)     $('#username-valid').append('Username is too short (minimum is 3 characters).<br>');
+              if(invalidChars) $('#username-valid').append('Username should use only letters, numbers, spaces, and .-_@+ please.');
+              $('#username').css('borderColor', 'red');
+            }
+            else {
+              $('#username').css('borderColor', '');
+            }
+          });
+          
+          //Check validity of email
+          $('#email').on('keyup', function() {
+            //Email Regex
+            var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+            if(!emailRegex.test($('#email').val())) {
+              $('#email').css('borderColor', 'red');
+              $('#email-valid').html('Email is invalid.');
+            }
+            else {
+              $('#email').css('borderColor', '');
+              $('#email-valid').html('');
+            }
+          });
+          
+          //Check validity of password
+          $('#password').on('keyup', function() {
+            //Password Requirement: 
+            //At least 8 chars
+            if($('#password').val().length < 8) {
+              $('#password-valid').html("Password is too short (minimum is 8 characters).");
+              $('#password').css('borderColor', 'red');
+              passwordValid = false;
+              $('#password-confirmation').val('').prop('disabled', true);
+            }
+            else {
+              $('#password-valid').html("");
+              $('#password').css('borderColor', '');
+              passwordValid = true;
+              $('#password-confirmation').prop('disabled', false);
+            }
+          });
+          
+          //Check if passwords match; only checks when password is valid
+          $('#password, #password-confirmation').on('keyup', function () {
+            if(passwordValid) {
+              if ($('#password').val() == $('#password-confirmation').val()) {
+                $('#password-match').html('&#10004 Passwords Match').css('color', 'green').toggleClass('chk', true);
+                $('#password, #password-confirmation').css('borderColor', 'green');
+                
+              } 
+              else {
+                $('#password-match').html('&#10008 Passwords Do Not Match').css('color', 'red').toggleClass('chk', false);
+                $('#password, #password-confirmation').css('borderColor', 'red');
+              }
+            }
+            else {
+              $('#password-match').html('');
+              $('#password-confirmation').css('borderColor', '');
+            }
+          });
+        })();
       </script>
 
     </div>

From 00bc7ed2a6203f9c0692de939a1903b020151b19 Mon Sep 17 00:00:00 2001
From: kevinzluo <kevinz.qu@gmail.com>
Date: Tue, 20 Nov 2018 18:37:57 -0600
Subject: [PATCH 2/4] add spamaway completion check and possible check for
 google recaptcha

---
 app/views/users/_form.html.erb | 107 ++++++++++++++++++++++++++++++---
 1 file changed, 100 insertions(+), 7 deletions(-)

diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index 8f803952b9..b79605b7ea 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -90,9 +90,88 @@
         <%= recaptcha_tags %>
         <p>If you cannot use the ReCaptcha to verify you are not a bot, <a href="/signup?spamaway=true">use this alternative verification</a>.</p>
 
+        <script>
+          var publicSpamCompleted = false;
+          function recaptchaSuccess() {
+            publicSpamCompleted = true;
+            console.log("Test: ReCaptcha submitted successfully");
+            publicSpamCompletedChange();
+          }
+          function recaptchaExpired() {
+            publicSpamCompleted = false;
+            console.log("Test: ReCaptcha expired.")
+          }
+          $(document).ready(function() {
+            $('.g-recaptcha').attr({'data-callback': 'recaptchaSuccess', 'data-expired-callback': 'recaptchaExpire'});
+          });
+          
+          function publicSpamCompletedChange() {
+            if (!publicSpamCompleted) {
+              $('.g-recaptcha').find('iframe').css('border', '1px red solid');
+            }
+            else {
+              $('.g-recaptcha').find('iframe').css('border', '');
+            }
+          }
+          
+          function publicSpamScroll() {
+            offset = $('.g-recaptcha').offset();
+            $('html, body').animate({
+              scrollTop: offset.top - $(window).height() / 2
+            });
+          }
+        </script>
       <% else %>
 
         <%= render partial: 'spamaway', locals: { spamaway: @spamaway } %>
+        
+        <script>
+          var publicSpamCompleted = false;
+          var publicHasSubmitted = false;
+          (function() {
+
+            var btnClicked = new Array(4).fill(false);
+            var btnArray = $('.spamaway .btn-group-justified');
+            $('.spamaway').on('click', '.btn-group-justified', function(e) {
+              var i = btnArray.index($(this));
+              if(!btnClicked[i]) {
+                btnClicked[i] = true;
+                console.log(btnClicked);
+                publicSpamCompleted = btnClicked.every(function(clicked) {return clicked == true});
+                console.log(publicSpamCompleted);
+              }
+              if(publicHasSubmitted) {
+                publicSpamCompletedChange();
+              }
+            });
+            
+            function publicSpamReset() {
+              $('.spamaway button').each( function() {
+                $(this).find('input').prop('checked', false);
+              });
+            }
+            
+            $(document).ready(function() {
+              publicSpamReset();
+            });
+          })();
+          
+          function publicSpamCompletedChange() {
+              if(!publicSpamCompleted) {
+                $('.spamaway').css({'border': '1px solid red', 'padding': '1px', 'borderRadius': '5px'});
+              }
+              else {
+                $('.spamaway').css({'border': '', 'padding': '', 'borderRadius': ''});
+              }
+          }
+          
+          function publicSpamScroll() {
+            offset = $('.spamaway').offset();
+            $('html, body').animate({
+              scrollTop: offset.top - $(window).height() / 2
+            });
+          }
+        </script>
 
       <% end %>
 
@@ -124,24 +203,38 @@
       <script>
         (function() {
           $('.btn-save').click(function onClick(e) {
-            var validated = true; 
-            $('.form-control').trigger('keyup'); //Prevents bypassing check when all fields have no been touched
+            publicHasSubmitted = true;
+            var validated = true;
+            var hasScrolled = false; 
+            $('.form-control').trigger('keyup'); //Prevents bypassing check when all fields have not been touched
             $('.validate').each(function() {  
               if($(this).html() != '' && !this.classList.contains('chk')) { //Check that all messages are clear
                 e.preventDefault();
                 validated = false;
+                hasScrolled = true;
                 var offset = $(this).offset();
                 $('html, body').animate({
                   scrollTop: offset.top - $(window).height() / 2
-                });
+                }, 500);
+                $(this).parent().find('input').focus();
                 return false;
               } 
+              
+              
             });
-            if(validated) {
-            $(this).addClass("disabled") // disable the button after it is clicked
-                   .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
+            
+            if (!publicSpamCompleted) {
+              e.preventDefault();
+              publicSpamCompletedChange();
+              if(!hasScrolled) {
+                publicSpamScroll();
+              }
             }
-          })
+            else {
+              $(this).addClass("disabled") // disable the button after it is clicked
+                     .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
+            }
+          });
         })();
 
         (function() {

From 8703461d139b361a61dde7f1ced15b1b4fa3b442 Mon Sep 17 00:00:00 2001
From: kevinzluo <kevinz.qu@gmail.com>
Date: Thu, 22 Nov 2018 09:14:55 -0600
Subject: [PATCH 3/4] Move scripts to external file

---
 app/assets/javascripts/signin_verification.js | 174 +++++++++++++++
 app/views/users/_form.html.erb                | 199 +-----------------
 config/initializers/assets.rb                 |   3 +-
 3 files changed, 177 insertions(+), 199 deletions(-)
 create mode 100644 app/assets/javascripts/signin_verification.js

diff --git a/app/assets/javascripts/signin_verification.js b/app/assets/javascripts/signin_verification.js
new file mode 100644
index 0000000000..645a3c24a3
--- /dev/null
+++ b/app/assets/javascripts/signin_verification.js
@@ -0,0 +1,174 @@
+var publicSpamCompleted = false;
+var publicHasSubmitted = false;
+var publicUsingSpamaway = ($('.spamaway').length > 0);
+
+function recaptchaSuccess() {
+  publicSpamCompleted = true;
+  console.log('Test: ReCaptcha submitted successfully');
+  publicSpamCompletedChange();
+}
+
+function recaptchaExpired() {
+  publicSpamCompleted = false;
+  console.log('Test: ReCaptcha expired.');
+}
+
+$(document).ready(function() {
+  if (publicUsingSpamaway) {
+    $('.spamaway button').each(function() {
+      $(this).find('input').prop('checked', false);
+    });
+  } else {
+    $('.g-recaptcha').attr({
+      'data-callback': 'recaptchaSuccess',
+      'data-expired-callback': 'recaptchaExpired'
+    });
+  }
+});
+
+function publicSpamCompletedChange() {
+  var spamElement = (publicUsingSpamaway) ? $('.spamaway') : $('.g-recaptcha').find('iframe');
+  if (!publicSpamCompleted) {
+    spamElement.css({
+      'border': '2px solid red',
+      'padding': '1px',
+      'borderRadius': '5px'
+    });
+  } else {
+    spamElement.css({
+      'border': '',
+      'padding': '',
+      'borderRadius': ''
+    });
+  }
+}
+
+if (publicUsingSpamaway) {
+  $('.spamaway button').click(function(e) {
+    $(this).find('input').prop('checked', true);
+    console.log('working');
+  });
+  //Check spamaway completion
+  var btnClicked = new Array(4).fill(false);
+  var btnArray = $('.spamaway .btn-group-justified');
+  $('.spamaway').on('click', '.btn-group-justified', function(e) {
+    var i = btnArray.index($(this));
+    if (!btnClicked[i]) {
+      btnClicked[i] = true;
+      publicSpamCompleted = btnClicked.every(function(clicked) {
+        return clicked === true
+      });
+    }
+    if (publicHasSubmitted) {
+      publicSpamCompletedChange();
+    }
+  });
+}
+
+(function() {
+  $('.btn-save').click(function onClick(e) {
+    publicHasSubmitted = true;
+
+    if (!publicSpamCompleted) { //needs to still highlight
+      e.preventDefault();
+      publicSpamCompletedChange();
+    }
+
+    $('.form-control').trigger('keyup'); //Prevents bypassing check when all fields have not been touched
+    var validated = checkValidation();
+
+    if (publicSpamCompleted && validated) {
+      $(this).addClass("disabled") // disable the button after it is clicked
+        .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
+    }
+  });
+
+  //Check that all are valid
+  function checkValidation() {
+    $('.validate').each(function() {
+      var validated = true;
+      if ($(this).html() !== '' && !this.classList.contains('chk')) { //Check that all messages are clear
+        validated = false;
+        offset = $(this).offset().top;
+        $('html, body').animate({
+          scrollTop: offset.top - $(window).height() / 2
+        }, 500);
+        $(this).parent().find('input').focus();
+        return false;
+      }
+      return validated;
+    })
+  }
+
+  //Validity checks for username, password, email
+  var passwordValid;
+  //Check validity of username
+  $('#username').on('keyup', function() {
+    //Username Requirements:
+    //At least 3 characters
+    //Only numbers, letters, spaces, and .-_@+
+    var username = $('#username').val();
+    $('#username-valid').html('');
+    var tooShort = (username.length < 3);
+    var invalidChars = !(new RegExp('^[a-zA-Z0-9-+@_.]+$').test(username)) && username.length !== 0;
+
+    if (tooShort || invalidChars) {
+      if (tooShort) $('#username-valid').append('Username is too short (minimum is 3 characters).<br>');
+      if (invalidChars) $('#username-valid').append('Username should use only letters, numbers, spaces, and .-_@+ please.');
+      $('#username').css('borderColor', 'red');
+    } else {
+      $('#username').css('borderColor', '');
+    }
+  });
+
+  //Check validity of email
+  $('#email').on('keyup', function() {
+    //Email Regex
+    var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if (!emailRegex.test($('#email').val())) {
+      $('#email').css('borderColor', 'red');
+      $('#email-valid').html('Email is invalid.');
+    } else {
+      $('#email').css('borderColor', '');
+      $('#email-valid').html('');
+    }
+  });
+
+  //Check validity of password
+  $('#password').on('keyup', function() {
+    //Password Requirement: 
+    //At least 8 chars
+    if ($('#password').val().length < 8) {
+      $('#password-valid').html('Password is too short (minimum is 8 characters).');
+      $('#password').css('borderColor', 'red');
+      passwordValid = false;
+      $('#password-confirmation').val('').prop('disabled', true);
+    } else {
+      $('#password-valid').html('');
+      $('#password').css('borderColor', '');
+      passwordValid = true;
+      $('#password-confirmation').prop('disabled', false);
+    }
+  });
+
+  //Check if passwords match; only checks when password is valid
+  $('#password, #password-confirmation').on('keyup', function() {
+    var matchText, matchColor, matchChk;
+    if (passwordValid) {
+      if ($('#password').val() === $('#password-confirmation').val()) {
+        matchText = '&#10004 Passwords Match';
+        matchColor = 'green';
+        matchChk = true;
+      } else {
+        matchText = '&#10008 Passwords Do Not Match';
+        matchColor = 'red';
+        matchChk = false;
+      }
+      $('#password-match').html(matchText).css('color', matchColor).toggleClass('chk', matchChk);
+      $('#password, #password-confirmation').css('borderColor', matchColor);
+    } else {
+      $('#password-match').html('');
+      $('#password-confirmation').css('borderColor', '');
+    }
+  });
+}());
\ No newline at end of file
diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index b79605b7ea..8a52fea571 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -90,98 +90,13 @@
         <%= recaptcha_tags %>
         <p>If you cannot use the ReCaptcha to verify you are not a bot, <a href="/signup?spamaway=true">use this alternative verification</a>.</p>
 
-        <script>
-          var publicSpamCompleted = false;
-          function recaptchaSuccess() {
-            publicSpamCompleted = true;
-            console.log("Test: ReCaptcha submitted successfully");
-            publicSpamCompletedChange();
-          }
-          function recaptchaExpired() {
-            publicSpamCompleted = false;
-            console.log("Test: ReCaptcha expired.")
-          }
-          $(document).ready(function() {
-            $('.g-recaptcha').attr({'data-callback': 'recaptchaSuccess', 'data-expired-callback': 'recaptchaExpire'});
-          });
-          
-          function publicSpamCompletedChange() {
-            if (!publicSpamCompleted) {
-              $('.g-recaptcha').find('iframe').css('border', '1px red solid');
-            }
-            else {
-              $('.g-recaptcha').find('iframe').css('border', '');
-            }
-          }
-          
-          function publicSpamScroll() {
-            offset = $('.g-recaptcha').offset();
-            $('html, body').animate({
-              scrollTop: offset.top - $(window).height() / 2
-            });
-          }
-        </script>
       <% else %>
 
         <%= render partial: 'spamaway', locals: { spamaway: @spamaway } %>
         
-        <script>
-          var publicSpamCompleted = false;
-          var publicHasSubmitted = false;
-          (function() {
-
-            var btnClicked = new Array(4).fill(false);
-            var btnArray = $('.spamaway .btn-group-justified');
-            $('.spamaway').on('click', '.btn-group-justified', function(e) {
-              var i = btnArray.index($(this));
-              if(!btnClicked[i]) {
-                btnClicked[i] = true;
-                console.log(btnClicked);
-                publicSpamCompleted = btnClicked.every(function(clicked) {return clicked == true});
-                console.log(publicSpamCompleted);
-              }
-              if(publicHasSubmitted) {
-                publicSpamCompletedChange();
-              }
-            });
-            
-            function publicSpamReset() {
-              $('.spamaway button').each( function() {
-                $(this).find('input').prop('checked', false);
-              });
-            }
-            
-            $(document).ready(function() {
-              publicSpamReset();
-            });
-          })();
-          
-          function publicSpamCompletedChange() {
-              if(!publicSpamCompleted) {
-                $('.spamaway').css({'border': '1px solid red', 'padding': '1px', 'borderRadius': '5px'});
-              }
-              else {
-                $('.spamaway').css({'border': '', 'padding': '', 'borderRadius': ''});
-              }
-          }
-          
-          function publicSpamScroll() {
-            offset = $('.spamaway').offset();
-            $('html, body').animate({
-              scrollTop: offset.top - $(window).height() / 2
-            });
-          }
-        </script>
 
       <% end %>
 
-      <script>
-        (function() {
-          $('.spamaway button').click(function(e) {
-            $(this).find('input').prop('checked', true);
-          })
-        })();
-      </script>
 
     <% end %>
 
@@ -200,119 +115,6 @@
 
       <% end %>
 
-      <script>
-        (function() {
-          $('.btn-save').click(function onClick(e) {
-            publicHasSubmitted = true;
-            var validated = true;
-            var hasScrolled = false; 
-            $('.form-control').trigger('keyup'); //Prevents bypassing check when all fields have not been touched
-            $('.validate').each(function() {  
-              if($(this).html() != '' && !this.classList.contains('chk')) { //Check that all messages are clear
-                e.preventDefault();
-                validated = false;
-                hasScrolled = true;
-                var offset = $(this).offset();
-                $('html, body').animate({
-                  scrollTop: offset.top - $(window).height() / 2
-                }, 500);
-                $(this).parent().find('input').focus();
-                return false;
-              } 
-              
-              
-            });
-            
-            if (!publicSpamCompleted) {
-              e.preventDefault();
-              publicSpamCompletedChange();
-              if(!hasScrolled) {
-                publicSpamScroll();
-              }
-            }
-            else {
-              $(this).addClass("disabled") // disable the button after it is clicked
-                     .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
-            }
-          });
-        })();
-
-        (function() {
-          var passwordValid;
-          
-          //Check validity of username
-          $('#username').on('keyup', function() {
-            //Username Requirements:
-            //At least 3 characters
-            //Only numbers, letters, spaces, and .-_@+
-            var username = $('#username').val();
-            $('#username-valid').html("");
-            var tooShort = (username.length < 3);
-            var invalidChars = !(new RegExp("^[a-zA-Z0-9-+@_.]+$").test(username)) && username.length != 0;
-            
-            if(tooShort || invalidChars) {
-              if(tooShort)     $('#username-valid').append('Username is too short (minimum is 3 characters).<br>');
-              if(invalidChars) $('#username-valid').append('Username should use only letters, numbers, spaces, and .-_@+ please.');
-              $('#username').css('borderColor', 'red');
-            }
-            else {
-              $('#username').css('borderColor', '');
-            }
-          });
-          
-          //Check validity of email
-          $('#email').on('keyup', function() {
-            //Email Regex
-            var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-            if(!emailRegex.test($('#email').val())) {
-              $('#email').css('borderColor', 'red');
-              $('#email-valid').html('Email is invalid.');
-            }
-            else {
-              $('#email').css('borderColor', '');
-              $('#email-valid').html('');
-            }
-          });
-          
-          //Check validity of password
-          $('#password').on('keyup', function() {
-            //Password Requirement: 
-            //At least 8 chars
-            if($('#password').val().length < 8) {
-              $('#password-valid').html("Password is too short (minimum is 8 characters).");
-              $('#password').css('borderColor', 'red');
-              passwordValid = false;
-              $('#password-confirmation').val('').prop('disabled', true);
-            }
-            else {
-              $('#password-valid').html("");
-              $('#password').css('borderColor', '');
-              passwordValid = true;
-              $('#password-confirmation').prop('disabled', false);
-            }
-          });
-          
-          //Check if passwords match; only checks when password is valid
-          $('#password, #password-confirmation').on('keyup', function () {
-            if(passwordValid) {
-              if ($('#password').val() == $('#password-confirmation').val()) {
-                $('#password-match').html('&#10004 Passwords Match').css('color', 'green').toggleClass('chk', true);
-                $('#password, #password-confirmation').css('borderColor', 'green');
-                
-              } 
-              else {
-                $('#password-match').html('&#10008 Passwords Do Not Match').css('color', 'red').toggleClass('chk', false);
-                $('#password, #password-confirmation').css('borderColor', 'red');
-              }
-            }
-            else {
-              $('#password-match').html('');
-              $('#password-confirmation').css('borderColor', '');
-            }
-          });
-        })();
-      </script>
-
     </div>
 
   </div>
@@ -324,4 +126,5 @@
   </div>
 
   <% end %>
+<%= javascript_include_tag 'signin_verification' %>
 </div>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 2a362ebf78..fc6bd73a04 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -30,7 +30,8 @@
   'textbox_expand.js',
   'users.js',
   'wikis.js',
-
+  'signin_verification.js',
+  
   'blog.css',
   'comments.css',
   'dashboard.css',

From 8031c50962283128d1f097d1a512b242e191f15e Mon Sep 17 00:00:00 2001
From: Kevin Luo <kevinz.qu@gmail.com>
Date: Sat, 8 Dec 2018 02:52:45 +0000
Subject: [PATCH 4/4] allow submit on second, fix code

---
 app/assets/javascripts/signin_verification.js | 59 +++++++++++--------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/app/assets/javascripts/signin_verification.js b/app/assets/javascripts/signin_verification.js
index 645a3c24a3..0a1c31ba25 100644
--- a/app/assets/javascripts/signin_verification.js
+++ b/app/assets/javascripts/signin_verification.js
@@ -26,7 +26,7 @@ $(document).ready(function() {
   }
 });
 
-function publicSpamCompletedChange() {
+function publicSpamCompletedChange(scroll) {
   var spamElement = (publicUsingSpamaway) ? $('.spamaway') : $('.g-recaptcha').find('iframe');
   if (!publicSpamCompleted) {
     spamElement.css({
@@ -41,12 +41,17 @@ function publicSpamCompletedChange() {
       'borderRadius': ''
     });
   }
+  if(scroll) {
+    var offset = spamElement.offset().top
+    $('html, body').animate({
+      scrollTop: offset - $(window).height() / 2
+    });
+  }
 }
 
 if (publicUsingSpamaway) {
   $('.spamaway button').click(function(e) {
     $(this).find('input').prop('checked', true);
-    console.log('working');
   });
   //Check spamaway completion
   var btnClicked = new Array(4).fill(false);
@@ -67,37 +72,41 @@ if (publicUsingSpamaway) {
 
 (function() {
   $('.btn-save').click(function onClick(e) {
-    publicHasSubmitted = true;
-
-    if (!publicSpamCompleted) { //needs to still highlight
-      e.preventDefault();
-      publicSpamCompletedChange();
-    }
-
     $('.form-control').trigger('keyup'); //Prevents bypassing check when all fields have not been touched
-    var validated = checkValidation();
-
-    if (publicSpamCompleted && validated) {
+    var validated = checkValidation(publicHasSubmitted);
+    if (publicSpamCompleted && validated || publicHasSubmitted) {
       $(this).addClass("disabled") // disable the button after it is clicked
         .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
+    } else {
+      publicHasSubmitted = true;  
+      e.preventDefault();
+      publicSpamCompletedChange(validated);
+      $('#password-confirmation').trigger('keyup'); //Now that it has been submitted once these fields can highlight on 0 chars
     }
+
+      
+      
   });
 
   //Check that all are valid
-  function checkValidation() {
+  function checkValidation(hasSubmitted) {
+    if(hasSubmitted) return;
+    var validated = true;
     $('.validate').each(function() {
-      var validated = true;
-      if ($(this).html() !== '' && !this.classList.contains('chk')) { //Check that all messages are clear
+      var valid = $(this).html() === '' && !($(this).prop('id') === "password-match") || $(this).hasClass('chk');
+      if (!valid) { //Check that all messages are clear
         validated = false;
-        offset = $(this).offset().top;
+        var self = this;
+        var offset = $(this).offset().top;
         $('html, body').animate({
-          scrollTop: offset.top - $(window).height() / 2
-        }, 500);
-        $(this).parent().find('input').focus();
+          scrollTop: offset - $(window).height() / 2
+        }, 500, function() {
+          $(self).parent().find('input').focus();
+        });
         return false;
       }
-      return validated;
-    })
+    });
+    return validated;
   }
 
   //Validity checks for username, password, email
@@ -110,7 +119,8 @@ if (publicUsingSpamaway) {
     var username = $('#username').val();
     $('#username-valid').html('');
     var tooShort = (username.length < 3);
-    var invalidChars = !(new RegExp('^[a-zA-Z0-9-+@_.]+$').test(username)) && username.length !== 0;
+    var usernameRegex = /^[a-zA-Z0-9-+@_.\s]+$/
+    var invalidChars = !(usernameRegex.test(username)) && username.length !== 0;
 
     if (tooShort || invalidChars) {
       if (tooShort) $('#username-valid').append('Username is too short (minimum is 3 characters).<br>');
@@ -123,9 +133,10 @@ if (publicUsingSpamaway) {
 
   //Check validity of email
   $('#email').on('keyup', function() {
+    var emailVal = $('#email').val();
     //Email Regex
     var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    if (!emailRegex.test($('#email').val())) {
+    if (!emailRegex.test(emailVal)) {
       $('#email').css('borderColor', 'red');
       $('#email-valid').html('Email is invalid.');
     } else {
@@ -154,7 +165,7 @@ if (publicUsingSpamaway) {
   //Check if passwords match; only checks when password is valid
   $('#password, #password-confirmation').on('keyup', function() {
     var matchText, matchColor, matchChk;
-    if (passwordValid) {
+    if (passwordValid && ($('#password-confirmation').val().length || publicHasSubmitted)) {
       if ($('#password').val() === $('#password-confirmation').val()) {
         matchText = '&#10004 Passwords Match';
         matchColor = 'green';