husstanden/templates/login.html

167 lines
3.4 KiB
HTML

{% set title = "Login" %}
{% extends "layout/bootstrap.html" %}
{% block content %}
<style>
html, body {
height: 100%;
}
.main-head{
height: 150px;
background: #FFF;
}
.sidenav {
height: 100%;
background-color: #000;
overflow-x: hidden;
padding-top: 20px;
}
.main {
padding: 0px 10px;
display: grid;
grid-template-rows: 25% auto;
grid-row-gap: 8px;
height: 100%;
}
.main > .col:nth-child(1n) {
grid-row-start: 1;
}
.main > .col:nth-child(2n) {
grid-row-start: 2;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
}
@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="main">
<div class="col pt-4">
{% with messages = get_flashed_messages(with_categories = true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} fade in show" role="alert" style="margin-bottom:0px;padding:6px;">
<a href="#" class="close" data-dismiss="alert" aria-label="close" style="margin-left:10px;">&times;</a>
{{ message }}
</div>
{% endfor %}
{% endif %}
{% 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 %}
<div class="toggle-form false">
<form method="post">
{{ render_field(form.login.email) }}
{{ render_field(form.login.password) }}
<button class="btn btn-black">Login</button>
<span class="btn btn-secondary" onclick="toggleform(this)">Register</span>
</form>
<form method="post">
{{ render_field(form.register.email) }}
{{ render_field(form.register.password) }}
{{ 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>
{% endblock %}