error messages for emails and more!

centered stuff and other stuff i cant remember
ncss · Jan 24, 2017 · 1f59c7e · 1f59c7e · tracey-le · Jan 24, 2017
1 parent aba5844
commit 1f59c7e
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 17 deletions.
diff --git a/back_end/ajax.py b/back_end/ajax.py
@@ -1,9 +1,13 @@
 from db import db_api
 
 def username_handler(request):
-    print(request.get_field("username"))
     valid = db_api.User.find_by_username(request.get_field("username").lower())
     # checks if the user already signed up
     # if there is no user, it is valid
     valid = True if valid is None else False
     request.write({"user_valid" : valid})
+
+def email_handler(request):
+    valid = db_api.User.find_by_email(request.get_field("email").lower())
+    valid = True if valid is None else False
+    request.write({"email_valid" : valid})
diff --git a/db/db_api.py b/db/db_api.py
@@ -88,6 +88,21 @@ def find_all():
                 return rows
             else:
                 return None
+        @staticmethod
+        def find_by_email(email):
+            cur.execute(
+                '''
+                SELECT *
+                FROM users
+                WHERE email = ?
+                ''', (email,)
+            )
+            row = cur.fetchone()
+
+            if row is None:
+                return None
+            return User(*row)
+
 
         @staticmethod
         def sign_up(username, password, nickname, email):

diff --git a/server.py b/server.py
@@ -50,6 +50,8 @@ def not_found_handler(request):
 server.register(r'/profile/edit/(.+)', profile.edit_handler, post=profile.edit_handler_post)
 server.register(r'/aboutus'     , aboutus_handler)
 server.register(r'/ajax/user_validate', not_found_handler, post=ajax.username_handler)
+server.register(r'/ajax/email_validate', not_found_handler, post=ajax.email_handler)
+
 server.register(r'/monkey'      , monkey_handler)
 server.register(r'/.*'          , not_found_handler)
 server.run()
diff --git a/static/css/Profile.css → static/css/profile.css b/static/css/Profile.css → static/css/profile.css
diff --git a/static/css/signup.css b/static/css/signup.css
@@ -34,7 +34,7 @@ input[type="email"] {
 
 .error {
   color: red;
-  font-size: 16px;
+  font-size: 12px;
 }
 
 .photobox {
@@ -55,3 +55,16 @@ input[type="email"] {
   -webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
 }
+
+.signup_div{
+  margin:0 auto;
+  text-align:center;
+}
+
+.signup_text{
+    text-align: center;
+}
+
+.signup_div input{
+
+}
diff --git a/static/js/validate.js b/static/js/validate.js
@@ -28,7 +28,6 @@ function checkIfPresent($input) {
 
 function validateSignupForm() {
     var $form = $('form.sign-in');
-    $('.error').html("");
 
     var $username = $form.find('#username');
     var $nickname = $form.find('#nickname');
@@ -121,6 +120,16 @@ $(document).ready(function(){
     var $email = $form.find('#email');
     var isValidEmail = checkIfPresent($email) && validateEmail($email);
 
+     $.ajax("/ajax/email_validate", {datatype: "json", type: "post", data: {email: $email.val()},
+       success: function(data){
+         if(!data.email_valid){
+           $email.parent().find(".error").html("This email is already registered. Click here to <a href=\"/signin\">login</a> or <a>here</a> to reset password (WIP)");
+           isValidEmail = false;
+         }},
+         failure: function(){
+           alert("failed to ajax. This can be caused by network issues");
+         }
+        });
     return Boolean(isValidEmail);
   });
 

diff --git a/templates/profile.html b/templates/profile.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <link rel="stylesheet" type='text/css' href='/static/css/Profile.css'>
+    <link rel="stylesheet" type='text/css' href='/static/css/profile.css'>
     {% include _shared_head.html %}
   </head>
   <body>

diff --git a/templates/signup.html b/templates/signup.html
@@ -15,30 +15,32 @@ <h2>Sign Up</h2>
         <p>Fields marked with * need to be filled in to continue.</p>
         <form class="sign-in" action="/signup" method="post" enctype = "multipart/form-data">
           <fieldset>
-            <div>
-              <label for="username">Username *</label>
+            <div class="signup_div">
+              <label for="username" class="signup_text">Username *</label>
               <input id="username" type="text" name="username" placeholder="Enter a username" autofocus required>
               <p class='error'></p>
             </div>
-            <div>
-              <label for="nickname">Nickname *</label>
-              <input id="nickname" type="text" name="nickname" placeholder="Enter a nickname" required>
+            <div class="signup_div">
+              <label for="nickname" class="signup_text">Nickname *</label>
+              <input  id="nickname" type="text" name="nickname" placeholder="Enter a nickname" required>
               <p class='error'></p>
             </div>
-            <div>
+            <div class="signup_div">
               <label for="password">Password *</label>
               <input id="password" type="password" name="password" placeholder="Enter a password" required>
               <p class ='error'> </p>
             </div>
-            <div>
-              <label for="email">Email *</label>
+            <div class="signup_div">
+              <label for="email" class="signup_text">Email *</label>
               <input id="email" type='email' name="email" placeholder="Enter an email" required>
-              <p class ='error'> </p>
+                <p class ='error'></p>
+            </div>
+            <div class="signup_div">
+                <p>
+                  <label for="profile_picture" class="signup_text">Profile Image</label>
+                  <input type="file" id="profile_picture" name="profile_picture">
+                </p>
             </div>
-
-            <p>
-              <label>Profile Image</label>
-              <input type="file" id="profile_picture" name="profile_picture">
 
               <!-- Experimental live profile pic + Matilda, Tracey, Steph and Sam -->
             <div class='photobox'>