Added initial check for valid email on password reset (#2315)

* Added initial check through jquery * Made the code more object oriented * Modified the code according to ES6 rules
publiclab · Feb 20, 2018 · 10ab833 · 10ab833
1 parent aa8d76e
commit 10ab833
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/app/assets/javascripts/users.js b/app/assets/javascripts/users.js
@@ -89,3 +89,20 @@ var Profile = {
     });
   }
 }
+
+class Reset {
+    validateEmail(sEmail){
+        const filter = /^(([^<>()\[\]\\.,;:\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,}))$/;
+        return filter.test(sEmail); 
+    }
+
+    runValidation(event){ 
+        const email = $('#validEmail').val();
+
+        if(!this.validateEmail(email)) {
+            $("#validPrint").attr("style", "display:block");
+            $("#validPrint").html("<p>Invalid email address</p>");
+            event.preventDefault();
+        }
+    }
+}
diff --git a/app/views/users/reset.html.erb b/app/views/users/reset.html.erb
@@ -20,17 +20,25 @@
 </form>
 
 <% else %>
-
 <p><%= t('users.reset.enter_email_reset_password') %>:</p>
 
 <form action="/reset/" class='form'>
 
-  <input class="form-control" name="email" placeholder="you@example.com" tabindex='2' type="text" /> <br />
+  <div class="alert alert-danger" id="validPrint" style="display:none"> </div>
+
+  <input class="form-control" name="email" id='validEmail' placeholder="you@example.com" tabindex='2' type="text" /> <br />
 
-  <button class="btn btn-lg btn-primary" type="submit" tabindex="3"><%= t('users.reset.reset') %></button>
+  <button class="btn btn-lg btn-primary" id="validBtn" type="submit" tabindex="3"><%= t('users.reset.reset') %></button>
 
 </form>
 
 <% end %>
 
 </div>
+
+<script type="text/javascript">
+    $("#validBtn").click(function(event) {
+        const reset = new Reset;
+        reset.runValidation(event);
+    });
+</script>