Migrated Login to a cleaner experience

9 files changed, 80 insertions, 47 deletions

diff --git a/static/css/login-area.css b/static/css/login-area.css
index 15351174..5f06ba54 100644
--- a/static/css/login-area.css
+++ b/static/css/login-area.css
@@ -27,6 +27,14 @@
     border-radius: 4px;
 }
 
+/* Reset auto fill */
+#login-form input:-webkit-autofill,
+#login-form input:-webkit-autofill:hover, 
+#login-form input:-webkit-autofill:focus, 
+#login-form input:-webkit-autofill:active{
+    transition: background-color 1s ease-in 2000s;
+}
+
 #login-form input::placeholder {
     color: #787dab;
 }
@@ -53,3 +61,41 @@
     right: 40px;
     background: transparent;
 }
+
+#login-error {
+    position: relative;
+}
+
+#login-error > .RFEERR {
+    background: url('../images/backgrounds/login-messages/RFEERR.png') no-repeat;
+}
+
+#login-error > .IUOPERR {
+    background: url('../images/backgrounds/login-messages/IUOPERR.png') no-repeat;
+}
+
+#login-error > .ENVERR {
+    background: url('../images/backgrounds/login-messages/ENVERR.png') no-repeat;
+}
+
+#login-error > .VESENDERR {
+    background: url('../images/backgrounds/login-messages/VESENDERR.png') no-repeat;
+}
+
+#login-error > .VESENT {
+    background: url('../images/backgrounds/login-messages/VESENT.png') no-repeat;
+}
+
+#login-error > .VESUCCESS {
+    background: url('../images/backgrounds/login-messages/VESUCCESS.png') no-repeat;
+}
+
+#login-error > .messageBox {
+    position: absolute;
+    background-size: 250px 166px;
+    width: 250px;
+    height: 166px;
+    top: -100px;
+    left: -140px;
+    z-index: 2;
+}
diff --git a/static/images/backgrounds/login-messages/ENVERR.png b/static/images/backgrounds/login-messages/ENVERR.png
new file mode 100644
index 00000000..7b22a579
--- /dev/null
+++ b/static/images/backgrounds/login-messages/ENVERR.png
diff --git a/static/images/backgrounds/login-messages/IUOPERR.png b/static/images/backgrounds/login-messages/IUOPERR.png
new file mode 100644
index 00000000..5aed36f1
--- /dev/null
+++ b/static/images/backgrounds/login-messages/IUOPERR.png
diff --git a/static/images/backgrounds/login-messages/RFEERR.png b/static/images/backgrounds/login-messages/RFEERR.png
new file mode 100644
index 00000000..1b676138
--- /dev/null
+++ b/static/images/backgrounds/login-messages/RFEERR.png
diff --git a/static/images/backgrounds/login-messages/VESENDERR.png b/static/images/backgrounds/login-messages/VESENDERR.png
new file mode 100644
index 00000000..d071f509
--- /dev/null
+++ b/static/images/backgrounds/login-messages/VESENDERR.png
diff --git a/static/images/backgrounds/login-messages/VESENT.png b/static/images/backgrounds/login-messages/VESENT.png
new file mode 100644
index 00000000..d29635dd
--- /dev/null
+++ b/static/images/backgrounds/login-messages/VESENT.png
diff --git a/static/images/backgrounds/login-messages/VESUCCESS.png b/static/images/backgrounds/login-messages/VESUCCESS.png
new file mode 100644
index 00000000..a2b3d364
--- /dev/null
+++ b/static/images/backgrounds/login-messages/VESUCCESS.png
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index 5aeecdc6..cc1fcf70 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -2,6 +2,30 @@
 {% comment %} Login Area {% endcomment %}
 {% if not user.is_authenticated %}
 <link rel="stylesheet" href="{% static 'css/login-area.css' %}">
+</div>
+{% for message in messages %}
+{% if 'loginError' in message.tags %}
+        {% if message.message == "ENVERR" and request.GET.username %}
+            <form method="post" action="{% url 'users:sendverificationemail' %}" style="position: relative;">
+                {% csrf_token %}
+                <input type="hidden" name="username" value="{{ request.GET.username }}">
+                <input type="submit" value="" style="    display: block;
+                width: 57px;
+                height: 12px;
+                cursor: pointer;
+                border-radius: 2px;
+                position: absolute;
+                top: 9px;
+                left: -87px;
+                background: transparent;
+                z-index: 3;">
+            </form>
+        {% endif %}
+        <div id="login-error">
+            <div class="messageBox {{message.message}}"></div>
+        </div>
+        {% endif %}
+    {% endfor %}
 <div id="login-area">
     <form method="post" action="{% url 'users:login' %}" id="login-form">
         <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
@@ -12,46 +36,6 @@
     </form>
     <a href="{% url 'blog:register' %}" id="register-now-button"></a>
 </div>
-
-{% comment %} <div id="login-area">
-    <h2>Login</h2>
-        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
-        <table style="width: 250px; border-spacing: 0; border-collapse: separate;">
-            <tr>
-                <td style="width: 70px;"><label for="username"><b>Username:</b></label></td>
-                <td style="padding-top: 10px; width: 160px;"></td>
-            </tr>
-            <tr>
-                <td style="width: 70px;"><label for="password"><b>Password:</b></label></td>
-                <td style="padding-top: 10px; width: 160px;"><input style="width: 150px;" type="password" id="password" name="password" placeholder="Password" autocomplete="off"></td>
-            </tr>
-            <tr>
-                <td style="padding-top: 10px;" colspan="2">
-                    <input type="hidden" name="next" value="{{ request.path }}">
-                    <input class="button button-special" type="submit" value="Login">
-                    {% if not user.is_authenticated %}
-                    <a href="{% url 'blog:register' %}" class="button button" style="text-decoration: none;">
-                        New User?
-                    </a>
-                    {% endif %}
-                </td>
-            </tr>
-        </table>
-    </form>
-    {% for message in messages %}
-        {% if 'loginError' in message.tags %}
-            {% if message.message == "EVERR" and request.GET.username %}
-            <form method="post" action="{% url 'users:sendverificationemail' %}">
-                <p class="message {{message.tags}}">
-                    Your email is unverified. Please check your inbox for a verification email or to request a new verification email by clicking{% csrf_token %}<input type="hidden" name="username" value="{{ request.GET.username }}"><input style="display: inline; background: none; border: none; color: blue; text-decoration: underline; cursor: pointer; margin: 0;" type="submit" value="here.">
-                </p>
-            </form>
-            {% else %}
-            <p class="message {{message.tags}}">{{message.message}}</p>
-            {% endif %}
-        {% endif %}
-    {% endfor %}
-</div> {% endcomment %}
 {% endif %}
 
 
diff --git a/users/views.py b/users/views.py
index f1c4ab61..3780d80f 100644
--- a/users/views.py
+++ b/users/views.py
@@ -17,7 +17,8 @@ def login_user(request):
     username = request.POST['username']
     password = request.POST['password']
     if username == '' or password == '' or username is None or password is None:
-        messages.error(request, 'Please fill in all fields.', extra_tags='loginError')
+        # required fields are empty
+        messages.error(request, 'RFEERR', extra_tags='loginError')
         return HttpResponseRedirect(next + '?username=' + username)
     else: 
         # check if email is verified
@@ -32,10 +33,12 @@ def login_user(request):
                 login(request, user)
                 return HttpResponseRedirect(next)
             else:
-                messages.error(request, 'EVERR', extra_tags='loginError')
+                # email not verified
+                messages.error(request, 'ENVERR', extra_tags='loginError')
                 return HttpResponseRedirect(next + '?username=' + username)
         else:
-            messages.error(request, 'Invalid username or password.', extra_tags='loginError')
+            # invalid credentials
+            messages.error(request, 'IUOPERR', extra_tags='loginError')
             return HttpResponseRedirect(next + '?username=' + username)
 
 def logout_user(request):
@@ -197,19 +200,19 @@ def send_verification_email(request):
         })
         message = strip_tags(message)
         if (send_email(sender='[email protected]', sender_name='That Computer Scientist', recipient=user.email, subject=subject, body_html=message, body_text=message)):
-            messages.success(request, 'Verification email was sent! Please check your email.', extra_tags='loginError')
+            messages.success(request, 'VESENT', extra_tags='loginError')
             return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
         else:
-            messages.error(request, 'Unable to send verification email! Please try again later.', extra_tags='loginError')
+            messages.error(request, 'VESENDERR', extra_tags='loginError')
             return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
     else:
-        messages.error(request, 'Unable to send verification email! Please try again later.', extra_tags='loginError')
+        messages.error(request, 'VESENDERR', extra_tags='loginError')
         return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
 
 def verify_email(request, mode, uid, token):
     token_object = verify_token(mode, uid, token)
     redirect_to = reverse('blog:account') + '?tab=email' if mode == 'changeemail' else 'blog:home'
-    success_message = 'Email was successfully changed!' if mode == 'changeemail' else 'Email was successfully verified!'
+    success_message = 'Email was successfully changed!' if mode == 'changeemail' else 'VESUCCESS'
     error_message = 'Unable to verify email! Please try again later.'
 
     if token_object is not None and token_object.verified: