Refactor login page to allow local account signup and login

This commit is contained in:
Michael Hall 2018-04-28 16:33:37 -04:00
parent 89b6de3651
commit 7ac3d82ac4
4 changed files with 114 additions and 15 deletions

View file

@ -77,3 +77,12 @@ form {
color: #FFFFFF;
}
ul.errorlist li {
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442;
}

View file

@ -1,4 +1,5 @@
{% extends "get_together/base.html" %}
{% load static %}
{% block content %}
<div class="container">
@ -20,8 +21,27 @@
{% endblock %}
{% block javascript %}
<script src="{% static 'js/jquery-ui-lookup.js' %}"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#city_select").lookup({
search: function(searchText, callback) {
if (searchText.length < 3) return callback(searchText, []);
$.getJSON("/api/cities/?q="+searchText, function(data) {
var m = this.url.match(/q=([^&]+)/);
var q = "";
if (m && m.length > 0) {
q = this.url.match(/q=([^&]+)/)[1]
}
return callback(q, data);
});
},
select: function( event, ui ) {
$("#id_tz").val(ui.data.tz);
$("#id_tz").selectmenu("refresh");
}
});
$("#id_tz").selectmenu()
});
</script>

View file

@ -1,19 +1,58 @@
{% extends "get_together/base.html" %}
{% block content %}
<center>
<h4>Signup or Login to get started</h4>
<!--
<a class="btn btn-primary" href="{% url 'social:begin' 'facebook' %}">Facebook</a><br/><br/>
<a class="btn btn-primary" href="{% url 'social:begin' 'twitter' %}">Twitter</a>&nbsp; &nbsp;
-->
{% if settings.SOCIAL_AUTH_GOOGLE_OAUTH2_KEY %}<span><a class="btn btn-googleplus" href="{% url 'social:begin' 'google-oauth2' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-google-plus-official"></i> Google</a></span>{% endif %}
{% if settings.SOCIAL_AUTH_FACEBOOK_KEY %}<span><a class="btn btn-facebook" href="{% url 'social:begin' 'facebook' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-facebook-official"></i> Faceboook</a></span>{% endif %}
{% if settings.SOCIAL_AUTH_TWITTER_KEY %}<span><a class="btn btn-twitter" href="{% url 'social:begin' 'twitter' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-twitter"></i> Twitter</a></span>{% endif %}
{% if settings.SOCIAL_AUTH_GITHUB_KEY %}<span><a class="btn btn-github" href="{% url 'social:begin' 'github' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-github"></i> GitHub</a></span>{% endif %}
{% if settings.DEBUG %}<span><a class="btn btn-secondary" href="{% url 'admin:login' %}?{{ request.META.QUERY_STRING }}">Local</a></span>{% endif %}
<br>
</center>
<div class="container">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<center>
<h3>Login using one of these providers:</h3>
{% if settings.SOCIAL_AUTH_GOOGLE_OAUTH2_KEY %}<span><a class="btn btn-googleplus" href="{% url 'social:begin' 'google-oauth2' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-google-plus-official"></i> Google</a></span>{% endif %}
{% if settings.SOCIAL_AUTH_FACEBOOK_KEY %}<span><a class="btn btn-facebook" href="{% url 'social:begin' 'facebook' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-facebook-official"></i> Faceboook</a></span>{% endif %}
{% if settings.SOCIAL_AUTH_TWITTER_KEY %}<span><a class="btn btn-twitter" href="{% url 'social:begin' 'twitter' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-twitter"></i> Twitter</a></span>{% endif %}
{% if settings.SOCIAL_AUTH_GITHUB_KEY %}<span><a class="btn btn-github" href="{% url 'social:begin' 'github' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-github"></i> GitHub</a></span>{% endif %}
<div class="mt-2 alert alert-info"><small><b>Note:</b> The only information GetTogether recieves from these providers is your username and (optionally) your email address. GetTogether will not have access to read any other information from these accounts, not even your password, and will not have access to post information to them. </small></div>
</center>
</div>
<div class="col-2"></div>
</div>
<hr/>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<center>
<h4>Or, use a local GetTogether account:</h4>
<ul class="nav nav-tabs justify-content-center mb-2" id="localTab" role="tablist">
<li class="nav-item">
<a class="nav-link {% if action != 'signup' %}active{% endif %}" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link {% if action == 'signup' %}active{% endif %}" id="signup-tab" data-toggle="tab" href="#signup" role="tab" aria-controls="signup" aria-selected="false">Signup</a>
</li>
</ul>
<div class="tab-content" id="localFormContent">
<div class="tab-pane fade {% if action != 'signup' %}show active{% endif %}" id="login" role="tabpanel" aria-labelledby="login-tab">
<form action="#" method="POST">
{% csrf_token %}
<table>
{{ login_form }}
</table>
<button class="btn btn-primary" type="submit" name="action" value="login">Login</button>
</form>
</div>
<div class="tab-pane fade {% if action == 'signup' %}show active{% endif %}" id="signup" role="tabpanel" aria-labelledby="signup-tab">
<form action="#" method="POST">
{% csrf_token %}
<table class="table">
{{ signup_form }}
</table>
<button class="btn btn-primary" type="submit" name="action" value="signup">Signup</button>
</form>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
{% endblock %}

View file

@ -2,6 +2,8 @@ from django.utils.translation import ugettext_lazy as _
from django.contrib import messages
from django.contrib.auth import logout as logout_user
from django.contrib.auth import login as login_user, authenticate
from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
from django.shortcuts import render, redirect, get_object_or_404
from django.http import HttpResponse, JsonResponse
from django.core.exceptions import ObjectDoesNotExist
@ -26,8 +28,37 @@ def login(request):
if request.user.is_authenticated:
messages.add_message(request, messages.INFO, message=_('You are already logged in.'))
return redirect('home')
return render(request, 'get_together/users/login.html')
context = {
'login_form': AuthenticationForm(),
'signup_form': UserCreationForm(),
}
if request.method == 'POST':
if request.POST.get('action') == 'login':
login_form = AuthenticationForm(data=request.POST)
if login_form.is_valid():
username = login_form.cleaned_data.get('username')
raw_password = login_form.cleaned_data.get('password')
user = authenticate(username=username, password=raw_password)
login_user(request, user, backend=user.backend)
return redirect('home')
else:
context['login_form'] = login_form
context['action'] = 'login'
elif request.POST.get('action') == 'signup':
signup_form = UserCreationForm(data=request.POST)
if signup_form.is_valid():
signup_form.save()
username = signup_form.cleaned_data.get('username')
raw_password = signup_form.cleaned_data.get('password1')
user = authenticate(username=username, password=raw_password)
login_user(request, user, backend=user.backend)
return redirect('home')
else:
context['signup_form'] = signup_form
context['action'] = 'signup'
return render(request, 'get_together/users/login.html', context)
def show_profile(request, user_id):
user = get_object_or_404(UserProfile, id=user_id)