[extensions-web: 22/75] Add a proper login dialog.

[Jasper St. Pierre <jstpierre src gnome org>]

commit 9f5e769d6e4bb02b945480201c2bc9d226780ff5
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Wed Sep 14 13:16:57 2011 -0400

    Add a proper login dialog.

 sweettooth/auth/context_processors.py              |    8 +++
 sweettooth/auth/forms.py                           |   29 ++++++++++
 .../auth/templates/auth/login_popup_form.html      |   17 ++----
 sweettooth/auth/urls.py                            |    5 +-
 sweettooth/auth/views.py                           |   20 +++-----
 sweettooth/settings.py                             |    1 +
 sweettooth/static/css/sweettooth.css               |   57 ++++++++++++++------
 sweettooth/static/js/main.js                       |    6 +-
 sweettooth/templates/base.html                     |    6 ++-
 9 files changed, 102 insertions(+), 47 deletions(-)
---
diff --git a/sweettooth/auth/context_processors.py b/sweettooth/auth/context_processors.py
new file mode 100644
index 0000000..fc4f31d
--- /dev/null
+++ b/sweettooth/auth/context_processors.py
@@ -0,0 +1,8 @@
+
+from auth import forms
+
+def login_form(request):
+    if request.user.is_authenticated():
+        return dict()
+
+    return dict(login_popup_form=forms.InlineAuthenticationForm)
diff --git a/sweettooth/auth/forms.py b/sweettooth/auth/forms.py
new file mode 100644
index 0000000..d26d38e
--- /dev/null
+++ b/sweettooth/auth/forms.py
@@ -0,0 +1,29 @@
+
+from django.contrib.auth import forms
+
+class PlainOutputForm(object):
+    def as_plain(self):
+        return self._html_output(
+            normal_row = u'%(errors)s%(field)s%(help_text)s',
+            error_row = u'%s',
+            row_ender = u'',
+            help_text_html = u'<br /><span class="helptext">%s</span>',
+            errors_on_separate_row = False)
+
+class AutoFocusForm(object):
+    def __init__(self, *a, **kw):
+        super(AutoFocusForm, self).__init__(*a, **kw)
+        self.fields.value_for_index(0).widget.attrs['autofocus'] = True
+
+class InlineForm(object):
+    def __init__(self, *a, **kw):
+        super(InlineForm, self).__init__(*a, **kw)
+        for field in self.fields.itervalues():
+            field.widget.attrs['placeholder'] = field.label
+
+class InlineAuthenticationForm(PlainOutputForm, AutoFocusForm,
+                               InlineForm, forms.AuthenticationForm):
+    pass
+
+class AuthenticationForm(AutoFocusForm, forms.AuthenticationForm):
+    pass
diff --git a/sweettooth/auth/templates/auth/login_popup_form.html b/sweettooth/auth/templates/auth/login_popup_form.html
index a2aefd6..cc01adb 100644
--- a/sweettooth/auth/templates/auth/login_popup_form.html
+++ b/sweettooth/auth/templates/auth/login_popup_form.html
@@ -1,12 +1,5 @@
-{% if user.is_authenticated %}
-  <a href="{% url auth-logout %}">Log out</a>
-{% else %}
-  <a href="{% url auth-login %}" id="login_link">Login?</a>
-  <form action="{% url auth-login %}" method="POST" id="login_popup_form">
-    {% csrf_token %}
-    <input type="hidden" name="next" value="/">
-    <input type="text" placeholder="Username" name="username">
-    <input type="password" placeholder="Password" name="password">
-    <input type="submit" value="Log in">
-  </form>
-{% endif %}
+<form action="{% url auth-login %}" method="POST" class="login_popup_form">
+  {% csrf_token %}
+  {{ login_popup_form.as_plain }}
+  <input type="submit" value="Login">
+</form>
diff --git a/sweettooth/auth/urls.py b/sweettooth/auth/urls.py
index 6808eda..8896f43 100644
--- a/sweettooth/auth/urls.py
+++ b/sweettooth/auth/urls.py
@@ -1,15 +1,16 @@
 
 from django.conf.urls.defaults import patterns, url
-from auth import views
+from auth import views, forms
 
 urlpatterns = patterns('',
     url(r'^login/', views.login,
         dict(template_name='auth/login.html',
-             authentication_form=views.AutoFocusAuthenticationForm), name='auth-login'),
+             authentication_form=forms.AuthenticationForm), name='auth-login'),
 
     url(r'^logout/', views.logout,
         dict(next_page='/'), name='auth-logout'),
 
     url(r'^register/', views.register, name='auth-register'),
     url(r'^profile/(?P<user>.+)', views.profile, name='auth-profile'),
+    url(r'^profile/', views.profile_redirect, name='auth-profile'),
 )
diff --git a/sweettooth/auth/views.py b/sweettooth/auth/views.py
index 8eafbe0..451dda4 100644
--- a/sweettooth/auth/views.py
+++ b/sweettooth/auth/views.py
@@ -1,22 +1,12 @@
 
-from django.contrib.auth import forms, models
+from django.contrib.auth import models
+from django.contrib.auth.decorators import login_required
 from django.contrib.auth.views import login, logout
-from django.shortcuts import get_object_or_404, render
+from django.shortcuts import get_object_or_404, render, redirect
 
 from review.models import CodeReview
 from extensions.models import Extension
 
-class AutoFocusAuthenticationForm(forms.AuthenticationForm):
-    def __init__(self, *a, **kw):
-        super(AutoFocusAuthenticationForm, self).__init__(*a, **kw)
-        self.fields['username'].widget.attrs['autofocus'] = True
-
-class InlineAuthenticationForm(forms.AuthenticationForm):
-    def __init__(self, *a, **kw):
-        super(InlineAuthenticationForm, self).__init__(*a, **kw)
-        for field in self.fields.itervalues():
-            field.widget.attrs['placeholder'] = field.label
-
 def profile(request, user):
     userobj = get_object_or_404(models.User, username=user)
 
@@ -33,5 +23,9 @@ def profile(request, user):
                                           extensions=extensions,
                                           reviews=reviews,))
 
+ login_required
+def profile_redirect(request):
+    return redirect('auth-profile', user=request.user.username)
+
 def register(request):
     return None
diff --git a/sweettooth/settings.py b/sweettooth/settings.py
index 68e5f55..71ef1ed 100644
--- a/sweettooth/settings.py
+++ b/sweettooth/settings.py
@@ -123,6 +123,7 @@ TEMPLATE_CONTEXT_PROCESSORS = (
     "django.core.context_processors.static",
     "django.contrib.messages.context_processors.messages",
     "sweettooth.review.context_processors.n_unreviewed_extensions",
+    "sweettooth.auth.context_processors.login_form",
 )
 
 LOGIN_URL = '/accounts/login/'
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 0306253..f8c3d89 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -20,27 +20,52 @@
 /* Login Area */
 /* ==================================================================== */
 
-/* FIXME */
+#global_domain_bar .login_popup_form:before {
+    width: 20px;
+    height: 10px;
+    margin-top: -17px;
+    right: 10px;
+    position: absolute;
+    content: url(../images/globaldomain-popup-arrow.png);
+}
 
-#login_link {
-    border-top-left-radius: 0px !important;
-    border-top-right-radius: 0px !important;
-    -moz-transition: background-color 200ms ease-out 0s;
+#global_domain_bar .login_popup_form {
+    display: none;
+    z-index: 10;
+    position: absolute;
+    background: #000;
+    background: rgba(0, 0, 0, 0.9);
+    border: 2px solid rgba(100%, 100%, 100%, 0.2);
+    right: 0;
+    top: -10px;
+    margin: 32px 0;
+    min-width: 140px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
 }
 
-#login_link.selected {
-    background-color: #eee;
+#global_domain_bar .login_popup_form * {
+    display: block;
+    margin: 10px 5px;
 }
 
-#login_popup_form {
-    position: absolute;
-    padding: 20px;
-    background-color: rgba(255,255,255,0.9);
-    border-radius: 5px;
-    top: 35px;
-    right: 30px;
-    display: none;
-    z-index: 99;
+#global_domain_bar .login_popup_form input[type=submit],
+#global_domain_bar .login_popup_form a {
+    color: #fff;
+    display: block;
+    margin: 0;
+    border: 0;
+    background: none;
+    font-weight: normal;
+    padding: 3px 16px;
+    border-radius: 0;
+    width: 100%;
+}
+
+#global_domain_bar .login_popup_form input[type=submit]:hover,
+#global_domain_bar .login_popup_form a:hover {
+    background: rgba(100%, 100%, 100%, 0.2);
 }
 
 #login_form ol {
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 0d6cb9d..f77910b 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -37,7 +37,7 @@ require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable'], function($,
                 return false;
 
             $('#global_domain_bar .user').removeClass('active');
-            $('#global_domain_bar .user_settings').animate({ top: '10px', opacity: 0 }, 200, function() {
+            $('#global_domain_bar .user_settings, #global_domain_bar .login_popup_form').animate({ top: '10px', opacity: 0 }, 200, function() {
                 $(this).hide();
             });
             return true;
@@ -45,7 +45,7 @@ require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable'], function($,
 
         function openUserSettings() {
             $('#global_domain_bar .user').addClass('active');
-            $('#global_domain_bar .user_settings').show().css({ top: '-10px', opacity: 0 }).animate({ top: '0', opacity: 1 }, 200);
+            $('#global_domain_bar .user_settings, #global_domain_bar .login_popup_form').show().css({ top: '-10px', opacity: 0 }).animate({ top: '0', opacity: 1 }, 200);
         }
 
         $(document.body).click(function() {
@@ -53,7 +53,7 @@ require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable'], function($,
                 return false;
         });
 
-        $('#global_domain_bar .user_settings').click(function(e) {
+        $('#global_domain_bar .user_settings, #global_domain_bar .login_popup_form').click(function(e) {
             e.stopPropagation();
         });
 
diff --git a/sweettooth/templates/base.html b/sweettooth/templates/base.html
index f894d54..3902597 100644
--- a/sweettooth/templates/base.html
+++ b/sweettooth/templates/base.html
@@ -27,11 +27,12 @@ window._SW = function() {
           {% if request.user.is_authenticated %}
           <a class="user" href="#">{{ request.user.username }}</a>
           {% else %}
-          <a href="{% url auth-login %}">Login</a>
+          <a class="user" href="{% url auth-login %}">Login</a>
           {% endif %}
 
           {% endspaceless %}
         </div>
+        {% if request.user.is_authenticated %}
         <div class="user_settings">
           <ul>
             <li><a href="{% url auth-profile user=request.user.username %}">Your profile</a></li>
@@ -39,6 +40,9 @@ window._SW = function() {
             <li><a href="{% url auth-logout %}">Log out</a></li>
           </ul>
         </div>
+        {% else %}
+        {% include "auth/login_popup_form.html" %}
+        {% endif %}
       </div>
     </div>