Gr1/husstanden
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reworked login and register

Browse Source
This commit is contained in:
Emily 2019-05-12 18:31:26 +01:00
parent 3a1137561d
commit 81dbaceb46
5 changed files with 195 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
forms/login.py
View File

@ -5,6 +5,10 @@ from flask_login import UserMixin
from objects import glob from objects import glob
FORM_RENDER_KW = {
"class_": "form-control"
}
class BillForm(Form): class BillForm(Form):
payment_to = StringField("Payment to", [validators.DataRequired()]) payment_to = StringField("Payment to", [validators.DataRequired()])
description = TextAreaField("Description", render_kw = { description = TextAreaField("Description", render_kw = {
@ -19,35 +23,41 @@ class LoginForm(Form):
email = StringField("Email", [ email = StringField("Email", [
validators.DataRequired(), validators.DataRequired(),
validators.Length(min=6, max=254) validators.Length(min=6, max=254)
]) ],
render_kw = FORM_RENDER_KW)
password = PasswordField("Password", [ password = PasswordField("Password", [
validators.DataRequired(), validators.DataRequired(),
validators.Length(min=4, max=127) validators.Length(min=4, max=127)
]) ],
render_kw = FORM_RENDER_KW)
class RegisterForm(Form): class RegisterForm(Form):
email = StringField("Email", [ email = StringField("Email", [
validators.DataRequired(), validators.DataRequired(),
validators.Length(min=6, max=254) validators.Length(min=6, max=254)
]) ],
render_kw = FORM_RENDER_KW)
password = PasswordField("Password", [ password = PasswordField("Password", [
validators.DataRequired(), validators.DataRequired(),
validators.Length(min=4, max=127), validators.Length(min=4, max=127),
validators.EqualTo("confirm_password", message = "Passwords must match") validators.EqualTo("confirm_password", message = "Passwords must match")
]) ],
confirm_password = PasswordField("Repeat Password") render_kw = FORM_RENDER_KW)
confirm_password = PasswordField("Repeat Password", render_kw = FORM_RENDER_KW)
firstname = StringField("Firstname", [ firstname = StringField("Firstname", [
validators.DataRequired(), validators.DataRequired(),
validators.Length(min=2, max=30) validators.Length(min=2, max=30)
]) ],
render_kw = FORM_RENDER_KW)
surname = StringField("Surname", [ surname = StringField("Surname", [
validators.DataRequired(), validators.DataRequired(),
validators.Length(min=2, max=30) validators.Length(min=2, max=30)
]) ],
render_kw = FORM_RENDER_KW)
accept_tos = BooleanField("I accept the TOS", [validators.DataRequired()]) accept_tos = BooleanField("I accept the TOS", [validators.DataRequired()])

37
routes.py
View File

@ -70,20 +70,31 @@ def login():
flash(gettext("Already logged in"), "info") flash(gettext("Already logged in"), "info")
return redirect(url_for("dashboard")) return redirect(url_for("dashboard"))
form = LoginForm(request.form) form_login = LoginForm(request.form)
if request.method == "POST" and form.validate(): form_register = RegisterForm(request.form)
try:
user = User((form.email.data, form.password.data))
except Exception as e:
flash(gettext(str(e)), "danger")
return render_template("login.html", form=form)
flask_login.login_user(user) if request.method == "POST":
logged_in_users.append(user) if form_register.validate():
try:
flash(gettext("Logged in"), "success") register_account(form_register.email.data, form_register.password.data, form_register.firstname.data, form_register.surname.data)
return redirect(url_for("dashboard")) flash(gettext("User registered"), "success")
return render_template("login.html", form=form) except Exception as e:
flash(gettext(str(e)), "danger")
return redirect(url_for("login"))
elif form_login.validate():
try:
user = User((form_login.email.data, form_login.password.data))
flask_login.login_user(user)
logged_in_users.append(user)
flash(gettext("Logged in"), "success")
except Exception as e:
flash(gettext(str(e)), "danger")
return redirect(url_for("login"))
return redirect(url_for("dashboard")) # Valid login > Redirect to dashboard as user is logged in
return render_template("login.html", form = {
"login": form_login,
"register": form_register
})
@glob.app.route("/register", methods = ["GET", "POST"]) @glob.app.route("/register", methods = ["GET", "POST"])
def register(): def register():

BIN
static/img/login-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

230
templates/login.html
View File

@ -3,89 +3,165 @@
{% extends "layout/bootstrap.html" %} {% extends "layout/bootstrap.html" %}
{% block content %} {% block content %}
<script src="{{ url_for('static', filename='js/alerts.js') }}"></script> <style>
<div class="container pt-3"> html, body {
<div class="row alert-section"> height: 100%;
<div class="col-md-8 mx-auto"> }
<div class="card rounded-1">
<div class="card-header navbar topnav"> .main-head{
<h3 class="mb-0">Login Methods</h3> height: 150px;
<div class="my-2 my-lg-0 d-flex"> background: #FFF;
<a href="{{ url_for('register') }}">Register</a> }
</div>
</div> .sidenav {
<div class="card-body row"> height: 100%;
<div class="col-md-6"> background-color: #000;
<h5>Electronic ID</h5> overflow-x: hidden;
<p class="lead"> padding-top: 20px;
Secure login using Electronic ID allows Husstanden to show you banking details, bills and receipts.<br> }
<a target="_blank" href="https://eid.difi.no/en/id-porten/how-obtain-electronic-id">How to obtain an Electronic ID</a>
</p>
</div> .main {
<div class="col-md-6"> padding: 0px 10px;
<h5>House Account</h5> display: grid;
<p class="lead"> grid-template-rows: 25% auto;
Accounts with less privileges and fast login to view non-sensitive information.<br> grid-row-gap: 8px;
Multiple house accounts can be created by logging in with house holder's verified <i>Electronic ID</i>. height: 100%;
</p> }
</div>
</div> .main > .col:nth-child(1n) {
<hr> grid-row-start: 1;
<div class="card-body row pt-2"> }
<div class="col-md-6 pb-2">
<a class="btn btn-primary btn-lg btn-block" href="#TODO_LOGIN_EID" onclick="alertAbove(this, 'warning', 'This should redirect the user to Electronic ID page (but due to phishing, we can not demo this)')">Electronic ID</a> .main > .col:nth-child(2n) {
</div> grid-row-start: 2;
<div class="col-md-6"> }
<a class="btn btn-primary btn-lg btn-block" href="#" data-toggle="modal" data-target="#myModal">House Account</a>
</div> @media screen and (max-height: 450px) {
</div> .sidenav {padding-top: 15px;}
</div> }
</div>
@media screen and (max-width: 450px) {
.login-form{
margin-top: 10%;
}
.register-form{
margin-top: 10%;
}
}
@media screen and (min-width: 768px){
.main{
margin-left: 40%;
}
.sidenav{
width: 40%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
}
.login-main-text{
margin-top: 20%;
padding: 60px;
color: #fff;
}
.login-main-text h2{
font-weight: 300;
}
.btn-black{
background-color: #000 !important;
color: #fff;
}
.hidable[aria-expanded="true"] {
display: none;
}
.toggle-form > form:nth-child(2n) {
display: none;
}
.toggle-form.toggled > form:nth-child(1n) {
display: none;
}
.toggle-form.toggled > form:nth-child(2n) {
display: block;
}
</style>
<script>
function toggleform(caller) {
let selectedDOM = caller;
do {
if (selectedDOM.classList.contains("toggle-form")){
let classes = selectedDOM.classList;
classes[classes.contains("toggled") ? "remove" : "add"]("toggled");
return;
}
selectedDOM = selectedDOM.parentElement;
} while (selectedDOM != null);
throw Error("Missing toggle-form class for self/parent(s)");
}
</script>
<div class="sidenav">
<div class="login-main-text">
<h2>Husstanden<br>Login Page</h2>
<p>Login is required to use this service.</p>
</div> </div>
<div class="modal fade" id="myModal" role="dialog"> </div>
<div class="modal-dialog"> <div class="main">
<!-- Modal content--> <div class="col pt-4">
<div class="modal-content"> {% with messages = get_flashed_messages(with_categories = true) %}
<div class="modal-header"> {% if messages %}
<h4 class="modal-title">Login</h4> {% for category, message in messages %}
<button type="button" class="close" data-dismiss="modal">&times;</button> <div class="alert alert-{{ category }} fade in show" role="alert" style="margin-bottom:0px;padding:6px;">
</div> <a href="#" class="close" data-dismiss="alert" aria-label="close" style="margin-left:10px;">&times;</a>
<div class="modal-body"> {{ message }}
{% macro render_field(field) %} </div>
<dt>{{ field.label }}
<dd>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %} {% endfor %}
</ul>
{% endif %} {% endif %}
</dd> {% endwith %}
</div>
<div class="col col-md-6 col-sm-12">
<div class="login-form">
{% macro render_field(field) %}
<div class="form-group">
{{ field.label }}
{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endmacro %} {% endmacro %}
<form method=post> <div class="toggle-form false">
<dl> <form method="post">
{{ render_field(form.email) }} {{ render_field(form.login.email) }}
{{ render_field(form.password) }} {{ render_field(form.login.password) }}
</dl> <button class="btn btn-black">Login</button>
<input type=submit value="Login"> <span class="btn btn-secondary" onclick="toggleform(this)">Register</span>
</form> </form>
</div> <form method="post">
<div class="modal-footer"> {{ render_field(form.register.email) }}
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> {{ render_field(form.register.password) }}
</div> {{ render_field(form.register.confirm_password) }}
{{ render_field(form.register.firstname) }}
{{ render_field(form.register.surname) }}
{{ render_field(form.register.accept_tos) }}
<span class="btn btn-secondary" onclick="toggleform(this)">Login</span>
<button class="btn btn-black">Register</button>
</form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script>
{% with messages = get_flashed_messages() %}
{% if messages %}
let alertArea = document.getElementsByClassName("alert-section")[0];
{% for message in messages %}
alertAbove(alertArea, "info", "{{ message }}");
{% endfor %}
{% endif %}
{% endwith %}
</script>
{% endblock %} {% endblock %}

2
templates/pages/bills.html
View File

@ -18,7 +18,7 @@
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title">Add bill</h4> <h4 class="modal-title">{{ _("Add bill") }}</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">