91 lines
2.8 KiB
HTML
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">×</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 %} |