167 lines
3.4 KiB
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;">×</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 %} |