Added backend for login page

This commit is contained in:
Zak Timson 2017-09-15 12:41:20 -04:00
parent 7c2fd01b3f
commit ef69d57661
3 changed files with 153 additions and 208 deletions

View File

@ -1,149 +1,72 @@
{% extends 'base.html' %}
{% load static %} {% load static %}
<html> {% block head %}
<head>
<style> <style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body { body {
background: #76b852; /* fallback for old browsers */ background-color: #0F4C85;
background: -webkit-linear-gradient(right, #76b852, #8DC26F); }
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F); .login {
background: linear-gradient(to left, #76b852, #8DC26F); background-color: #F7F7F7;
font-family: "Roboto", sans-serif; border-radius: 2px;
-webkit-font-smoothing: antialiased; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3)
-moz-osx-font-smoothing: grayscale; }
.btn, .form-control {
border-radius: 0;
} }
</style> </style>
<script> <script>
$(function() { $(function() {
$('.message a').click(function(){ $('#register-mode').click(function() {
$('form').animate({height: "toggle", opacity: "toggle"}, "slow"); $('#login-form').collapse('hide');
$('#register-form').collapse('show');
});
$('#login-mode').click(function() {
$('#login-form').collapse('show');
$('#register-form').collapse('hide');
}); });
}); });
</script> </script>
</head> {% endblock %}
<body> {% block body %}
<div class="login-page"> <div class="col-sm-11 col-md-6 col-lg-4 col-xl-2 mx-auto mt-5 p-5 login">
<div class="form"> <div class="form">
<a class="navbar-brand text-dark-primary" href="{% url 'home' %}"> <div class="my-4">
<img src="{% static 'main/img/logo.png' %}" width="30" height="30" class="d-inline-block align-top" alt=""> <img src="{% static 'main/img/logo.png' %}" height="30px" width="auto">
<div class="d-none d-sm-inline-block"> <a class="navbar-brand text-dark-primary" href="{% url 'home' %}" style="vertical-align: sub">
ONTARIO ASSOCIATION OF OACPL
<br>
CHILD PROTECTION LAWYERS
</div>
<div class="d-inline-block d-sm-none"> <div class="d-inline-block d-sm-none">
OACPL OACPL
</div> </div>
</a> </a>
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div> </div>
</div>
</body>
</html> <form id="login-form" class="collapse show" method="post">
{% csrf_token %}
<input type="hidden" name="request" value="login">
<input type="text" class="form-control mb-2 p-2" name="username" placeholder="Username"/>
<input type="password" class="form-control mb-2 p-2" name="password" placeholder="Password"/>
<button class="btn btn-primary col-12 mb-2 p-2">login</button>
<p class="text-muted"><a id="register-mode">Register</a></p>
</form>
<form id="register-form" class="collapse" method="post">
{% csrf_token %}
<input type="hidden" name="request" value="register">
<input type="text" class="form-control mb-2 p-2" name="username" placeholder="Username"/>
<input type="text" class="form-control mb-2 p-2" name="email" placeholder="Email"/>
<input type="password" class="form-control mb-2 p-2" name="password" placeholder="Password"/>
<input type="password" class="form-control mb-2 p-2" placeholder="Confirm Password"/>
<input type="checkbox" class="form-control mb-2" name="newsletter"> Newsletter
<input type="checkbox" class="form-control mb-2" name="caselaw"> Case Law Access
<button class="btn btn-primary col-12 mb-2 p-2">Register</button>
<p class="text-muted"><a id="login-mode">Login</a></p>
</form>
</div>
</div>
{% endblock %}

View File

@ -1,9 +1,9 @@
import json from django.shortcuts import render, redirect
from django.shortcuts import HttpResponse, render, redirect
from django.contrib import auth from django.contrib import auth
from django.contrib.auth.models import User
from charter_members.models import Attorney from charter_members.models import Attorney
from newsletters.models import Subscriber
def index(request): def index(request):
@ -13,13 +13,30 @@ def index(request):
def login(request): def login(request):
if request.method == 'POST': if request.method == 'POST':
user = auth.authenticate(request) if request.POST.get('request') == 'login':
user = auth.authenticate(request, username=request.POST.get('username'), password=request.POST.get('password'))
if user: if user:
return HttpResponse(json.dumps({'status': True})) auth.login(request, user)
return redirect('/')
else: else:
return HttpResponse(json.dumps({'status': False})) return render(request, 'login.html', {'navbar': False, 'footer': False, 'failed': True})
elif request.POST.get('request') == 'register':
user = User.objects.create_user(request.POST.get('username'),
email=request.POST.get('email'),
password=request.POST.get('password'))
user.save()
# TODO: Send confirmation email
if request.POST.get('newsletter'):
Subscriber.objects.create(email=request.POST.get('email'))
# TODO: If Case law access was requested, send an email out to staff
auth.login(request, user)
return redirect('/')
elif request.POST.get('request') == 'reset':
# TODO: Reset password and send email
pass
else: else:
return render(request, 'login.html') return render(request, 'login.html', {'navbar': False, 'footer': False})
def logout(request): def logout(request):

View File

@ -24,6 +24,7 @@
<body> <body>
{% csrf_token %} {% csrf_token %}
{% if navbar|default_if_none:True %}
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-4"> <nav class="navbar navbar-expand-lg navbar-light bg-white py-4">
<div class="container"> <div class="container">
@ -85,16 +86,20 @@
</button> </button>
</div> </div>
</nav> </nav>
{% endif %}
<!-- Content -->
{% block body %} {% block body %}
{% endblock %} {% endblock %}
{% if footer|default_if_none:True %}
<!-- Footer --> <!-- Footer -->
<footer class="container-fluid bg-white text-dark-primary py-3"> <footer class="container-fluid bg-white text-dark-primary py-3">
<div class="container text-center"> <div class="container text-center">
<p class="mb-0">© 2017 Ontario Association of Child Protection Lawyers.</p> <p class="mb-0">© 2017 Ontario Association of Child Protection Lawyers.</p>
</div> </div>
</footer> </footer>
{% endif %}
</body> </body>
</html> </html>