Mercurial > hg > agora
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 +++ b/static/css/agora.less @@ -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 +++ b/static/css/variables.less @@ -9,8 +9,9 @@ @offWhite: #FBFBFB; @white: #FFF; +@darkOrange: #D45500; @orange: #FF7F2A; -@darkOrange: #D45500; +@lightOrange: lighten(@orange, 25%); @darkBlue: #1B749D; @mediumBlue: #22A2CA;
new file mode 100644 --- /dev/null +++ b/static/js/agora.js @@ -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 +++ b/templates/base.djhtml @@ -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 +++ b/templates/code.djhtml @@ -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 +++ b/templates/index.djhtml @@ -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 %}
new file mode 100644 --- /dev/null +++ b/templates/login.djhtml @@ -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 %}
new file mode 100644 --- /dev/null +++ b/templates/login_form.djhtml @@ -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 +++ b/urls.py @@ -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')),
new file mode 100644 --- /dev/null +++ b/views.py @@ -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)