{% extends "base.html" %}

{% block title %}Login{% endblock %}

{% block body %}
	<div class="slim center wrap">
		<h2>Login</h2>
		{% if login_attempted %}
			<p class="error">You entered invalid credentials.</p>
		{% elseif login_attempted_token %}
			<p class="error">You entered an invalid multi-factor authentication token.</p>
		{% else %}
			<p>Enter your username and password to continue.</p>
		{% endif %}
		<form action="" method="post">
			<label>
				<span><b>Username</b></span>
				<input type="text" name="username" size="35" value="{{ username }}" autofocus required {% if needs_token %}disabled{% endif %}/>
				{% if needs_token %}<input type="hidden" name="username" value="{{ username }}"/>{% endif %}
			</label>
			<label>
				<span><b>Password</b></span>
				<input type="password" name="password" size="35" value="{{ password }}" required {% if needs_token %}disabled{% endif %}/>
				{% if needs_token %}<input type="hidden" name="password" value="{{ password }}"/>{% endif %}
			</label>
			{% if needs_token %}
				<label>
					<span><b>Token</b></span>
					<span class="info">Enter your multi-factor authentication token.</span>
					<input type="text" name="token" required autofocus autocomplete="off"/>
				</label>
			{% endif %}
			<p><button type="submit">Login</button></p>
		</form>
	</div>
	<script>
		document.getElementById('username').focus();
	</script>
{% endblock %}