{% extends "base.html" %}
{% from "library.j2" import box, form_button, render_errors %}
{% set body_id = "login" %}
{% block head_lead %}
<title>{{ _("Snikket Login") }}</title>
{% endblock %}
{% block style %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/app.css') }}">
{{ super() }}
{% endblock %}
{% block body %}
<div id="mwrap"><div class="filler"></div><main><div class="form layout-expanded">
	<h1 class="form-title">{{ config["SITE_NAME"] }}</h1>
	<p class="form-desc">{{ _("Enter your Snikket address and password to manage your account.") }}</p>
	<form method="POST" action="{{ url_for('.login') }}" name="login" id="login-form" onsubmit="return domainCheck();" data-addressid="{{ form.address.id }}" data-domain="{{ config["SNIKKET_DOMAIN"] }}">
		{{ form.csrf_token }}
		{% call render_errors(form) %}{% endcall %}
		<div class="box alert" role="alert" style="display: none;" id="id-warning">
			<header>{% trans %}Incorrect address{% endtrans %}</header>
			<p>{% trans snikket_domain=config["SNIKKET_DOMAIN"] %}This Snikket service only hosts addresses ending in <em>@{{ snikket_domain }}</em>. Your password was not sent.{% endtrans %}</p>
		</div>
		<div class="f-ebox">
			{{ form.address.label(class="a11y-only") }}
			{{ form.address(placeholder=form.address.label.text) }}
		</div>
		<div class="f-ebox">
			{{ form.password.label(class="a11y-only") }}
			{{ form.password(placeholder=form.password.label.text) }}
		</div>
		<div class="f-bbox">
			{%- call form_button("login", form.action_signin, class="primary") -%}{% endcall -%}
		</div>
	</form>
	<script type="text/javascript">
var domainCheck = function() {
	var form = document.getElementById("login-form");
	var addressId = form.dataset.addressid;
	var addressField = document.getElementById(addressId);
	var domain = form.dataset.domain;
	var address = addressField.value;
	var errorBox = document.getElementById("id-warning");
	if (address.includes("@") && !address.endsWith(domain)) {
		errorBox.style.display = "block";
		return false;
	}
	errorBox.style.display = "none";
	return true;
};
	</script>
</div></main><div class="filler"></div></div>
{%- include "_footer.html" -%}
{% endblock %}