husstanden/templates/login.html
2019-04-26 04:20:31 +01:00

91 lines
2.8 KiB
HTML

{% set title = "Login" %}
{% extends "layout/bootstrap.html" %}
{% block content %}
<script src="{{ url_for('static', filename='js/alerts.js') }}"></script>
<div class="container pt-3">
<div class="row alert-section">
<div class="col-md-8 mx-auto">
<div class="card rounded-1">
<div class="card-header navbar topnav">
<h3 class="mb-0">Login Methods</h3>
<div class="my-2 my-lg-0 d-flex">
<a href="{{ url_for('register') }}">Register</a>
</div>
</div>
<div class="card-body row">
<div class="col-md-6">
<h5>Electronic ID</h5>
<p class="lead">
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>
<div class="col-md-6">
<h5>House Account</h5>
<p class="lead">
Accounts with less privileges and fast login to view non-sensitive information.<br>
Multiple house accounts can be created by logging in with house holder's verified <i>Electronic ID</i>.
</p>
</div>
</div>
<hr>
<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>
</div>
<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>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
{% macro render_field(field) %}
<dt>{{ field.label }}
<dd>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</dd>
{% endmacro %}
<form method=post>
<dl>
{{ render_field(form.email) }}
{{ render_field(form.password) }}
</dl>
<input type=submit value="Login">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</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 %}