Mercurial > agora-palash
changeset 107:2bca07be6e51
Add login popup box
So you can log in and immediately be redirected to the same page. Sort
of like what reddit has. If Javascript is disabled, the user is simply
taken to the standard login page.
| author | dellsystem <ilostwaldo@gmail.com> |
|---|---|
| date | Tue, 11 Sep 2012 20:23:51 -0400 |
| parents | 17bc502c65a4 |
| children | 180404efc8cf |
| files | static/css/agora.less static/css/variables.less static/js/agora.js templates/base.djhtml templates/code.djhtml templates/index.djhtml templates/login.djhtml templates/login_form.djhtml urls.py views.py |
| diffstat | 10 files changed, 269 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/static/css/agora.less Tue Sep 11 18:06:01 2012 -0400 +++ b/static/css/agora.less Tue Sep 11 20:23:51 2012 -0400 @@ -265,3 +265,62 @@ border-bottom: 1px solid @lightGrey; } } + +ul { + padding: 5px 0; + margin-left: 20px; +} + +#login-popup { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + z-index: 200; +} + +#login-form { + @width: 600px; + @height: 300px; + @verticalPadding: 20px; + + .box-shadow(0 0 5px 1px rgba(0, 0, 0, 0.3)); + width: @width; + height: @height - (@verticalPadding * 2); + position: absolute; + top: 50%; + left: 50%; + margin-left: -@width / 2; + margin-top: -@height / 2; + background: @white; + .border-radius(5px); + padding: @verticalPadding 30px; +} + +.errors { + padding-top: 5px; + padding-left: 5px; + background: @lightOrange; + margin-bottom: 10px; + border: 1px solid @orange; + .border-radius(5px); +} + +form { + .form-line { + label { + float: left; + text-align: right; + } + } + + .form-input { + margin-left: 180px; + } + + .errors { + clear: both; + } +}
--- a/static/css/variables.less Tue Sep 11 18:06:01 2012 -0400 +++ b/static/css/variables.less Tue Sep 11 20:23:51 2012 -0400 @@ -9,8 +9,9 @@ @offWhite: #FBFBFB; @white: #FFF; +@darkOrange: #D45500; @orange: #FF7F2A; -@darkOrange: #D45500; +@lightOrange: lighten(@orange, 25%); @darkBlue: #1B749D; @mediumBlue: #22A2CA;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/static/js/agora.js Tue Sep 11 20:23:51 2012 -0400 @@ -0,0 +1,25 @@ +(function ($) { + // Handle showing the login popup + var handleLoginLink = function () { + var loginLink = $('.login-link'); + + if (loginLink.length) { + loginLink.click(function () { + $('#login-popup').show(); + + return false; + }); + + $('#login-popup').click(function (event) { + // Only catch events in the outer, overlay div + if (event.target === this) { + $(this).hide(); + } + }); + } + }; + + $(document).ready(function () { + handleLoginLink(); + }); +})(jQuery);
--- a/templates/base.djhtml Tue Sep 11 18:06:01 2012 -0400 +++ b/templates/base.djhtml Tue Sep 11 20:23:51 2012 -0400 @@ -54,6 +54,7 @@ {% block navbar %} <div id="breadcrumbs"> <div class="right-float"> + {% block login_breadcrumbs %} {% if user.is_authenticated %} <a href="{% url auth_logout %}">Logout</a> :: @@ -61,10 +62,11 @@ :: <a href="{% url show_profile user %}">View your profile ({{ user }})</a> {% else %} - <a href="{% url auth_login %}?next={{ request.path }}">Login</a> - :: - <a href="{% url registration_register %}">Register</a> + <a href="{% url login %}?next={{ request.path }}" class="login-link"> + Login or register + </a> {% endif %} + {% endblock %} </div> <div> {% block breadcrumbs %} @@ -92,7 +94,15 @@ </p> </div> <!-- END #footer --> + {% block login_form %} + <div id="login-popup" class="hidden"> + <div id="login-form"> + {% include "login_form.djhtml" %} + </div> + </div> + {% endblock %} <script src="/static/js/jquery.min.js"></script> + <script src="/static/js/agora.js"></script> {% block script_footer %} {% endblock %} </body>
--- a/templates/code.djhtml Tue Sep 11 18:06:01 2012 -0400 +++ b/templates/code.djhtml Tue Sep 11 20:23:51 2012 -0400 @@ -49,7 +49,7 @@ {% if user.is_authenticated %} <a class="pill" href="">Upload a modules</a> {% else %} - <a class="pill" href="{% url auth_login %}"> + <a class="pill login-link" href="{% url login %}"> Login to upload modules </a> {% endif %} @@ -67,7 +67,7 @@ {% if user.is_authenticated %} <a class="pill" href="">Add a module to the forge</a> {% else %} - <a class="pill" href="{% url auth_login %}"> + <a class="pill login-link" href="{% url login %}"> Login to add a module to the forge </a> {% endif %}
--- a/templates/index.djhtml Tue Sep 11 18:06:01 2012 -0400 +++ b/templates/index.djhtml Tue Sep 11 20:23:51 2012 -0400 @@ -57,14 +57,16 @@ </div> </div> +{% if not user.is_authenticated %} <div class="center-align"> <p><a href="{% url code %}" class="button large">Explore</a> - <a href="{% url registration_register %}" class="button large"> - Register an account + <a href="{% url login %}" class="button large login-link"> + Login or register </a></p> <p> You can sign up, if you want, won't share your email, not required, etc </p> </div> +{% endif %} {% endblock %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/templates/login.djhtml Tue Sep 11 20:23:51 2012 -0400 @@ -0,0 +1,15 @@ +{% extends "base.djhtml" %} + +{% block content %} +{% include "login_form.djhtml" %} +{% endblock %} + +{% block login_form %} +{% endblock %} + +{% block login_breadcrumbs %} +{% endblock %} + +{% block breadcrumbs %} +<a href="{% url home %}">« Back to home</a> +{% endblock %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/templates/login_form.djhtml Tue Sep 11 20:23:51 2012 -0400 @@ -0,0 +1,85 @@ +<h1>Login or register</h1> + +{% if user.is_authenticated %} +<p> + You are already logged in. + <a href="{% url auth_logout %}">Logout »</a> +</p> +{% else %} +<form method="post" + action="{% url login %}?next={{ next_url|default:request.get_full_path }}"> + {% csrf_token %} + + <p>Already have an account? Enter your username and password below.</p> + + <div class="form-line"> + <label for="username">Username</label> + <div class="form-input"> + <input type="text" id="username" name="username" maxlength="30" /> + </div> + </div> + + {% if form.username.errors %} + <div class="errors"> + {{ form.username.errors }} + </div> + {% endif %} + + <div class="form-line"> + <label for="password1">Password</label> + <div class="form-input"> + <input type="password" id="password1" name="password1" /> + </div> + </div> + + {% if form.password1.errors %} + <div class="errors"> + {{ form.password1.errors }} + </div> + {% endif %} + + <br /> + + <p> + If you don't have an account yet, you can create one by filling out + the following fields as well: + </p> + + <div class="form-line"> + <label for="password2">Confirm password</label> + <div class="form-input"> + <input type="password" id="password2" name="password2" /> + </div> + </div> + + {% if form.password2.errors %} + <div class="errors"> + {{ form.password2.errors }} + </div> + {% endif %} + + <div class="form-line"> + <label for="email">Email address</label> + <div class="form-input"> + <input type="text" id="email" name="email" /> + </div> + </div> + + {% if form.email.errors %} + <div class="errors"> + {{ form.email.errors }} + </div> + {% endif %} + + <br /> + + <div class="center-align"> + <button type="submit" class="button large" name="action" value="login"> + Login + </button> + <button type="submit" class="button large" name="action" value="register"> + Register + </button> + </div> +</form> +{% endif %}
--- a/urls.py Tue Sep 11 18:06:01 2012 -0400 +++ b/urls.py Tue Sep 11 20:23:51 2012 -0400 @@ -25,10 +25,14 @@ url(r'^code$', 'views.code', name='code'), + url(r'^login', + 'views.login_register', + name='login'), url(r'^admin/doc/', include('django.contrib.admindocs.urls')), url(r'^admin/', include(admin.site.urls)), url(r'^accounts/logout/', 'django.contrib.auth.views.logout', - {'template_name' : 'index.djhtml', 'next_page' : '/'}), + {'template_name' : 'index.djhtml', 'next_page' : '/'} + ), url(r'^accounts/', include('registration.urls')), url(r'^licenses/', include('agora.apps.free_license.urls')), url(r'^users/', include('agora.apps.profile.urls')),
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/views.py Tue Sep 11 20:23:51 2012 -0400 @@ -0,0 +1,59 @@ +from django.contrib.auth import login, authenticate +from django.contrib.auth.forms import AuthenticationForm +from django.shortcuts import render, redirect +from django.core.urlresolvers import reverse +from registration.forms import RegistrationForm + +from agora.apps.snippet.models import Snippet + + +def code(request): + context = { + 'snippets': Snippet.objects.all()[:5], + 'modules': None, # temp + 'forge': None, # temp + } + + return render(request, 'code.djhtml', context) + + +def login_register(request): + form = None + next_url = None + + if request.method == 'POST': + action = request.POST.get('action') + next_url = request.GET.get('next') or reverse('login') + + if action == 'login': + username = request.POST.get('username', '') + password = request.POST.get('password1', '') + + if username and password: + user = authenticate(username=username, password=password) + login(request, user) + + return redirect(next_url) + else: + form = { + 'password1': { + 'errors': 'Please enter a username and password.', + }, + } + elif action == 'register': + form = RegistrationForm(request.POST) + + if form.is_valid(): + user = form.save() + login(request, user) + return redirect(next_url) + else: + # The action is not set. Malicious submission? + pass + + context = { + 'next_url': next_url, + 'form': form, + } + + return render(request, 'login.djhtml', context)