{% extends "base.html" %}
{% block title %}Sign In{% endblock %}
{% block content %}
{% if submitted %}
<h1>Signed in</h1>
<!-- Echoes what the site received, the way a careless site would. -->
<div id="echo" class="output">user={{ submitted.email }} password={{ submitted.password }} otp={{ submitted.otp }}</div>
{% else %}
<h1>Sign In</h1>
<form id="login-form" method="post" action="/login">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="username">
  <label for="password">Password</label>
  <input type="password" id="password" name="password" autocomplete="current-password">
  <label for="otp">One-time code</label>
  <input type="text" id="otp" name="otp" autocomplete="one-time-code">
  <!-- Not a text field: fill_credential must refuse it before typing anything. -->
  <label for="remember">Remember me</label>
  <input type="checkbox" id="remember" name="remember">
  <button type="submit" id="sign-in">Sign in</button>
</form>
<!-- Outside the form, so a submission never carries them: where a password or a
     one-time code must not go. -->
<label for="q">Search</label>
<input type="search" id="q" name="q">
<label for="notes">Notes</label>
<textarea id="notes" name="notes"></textarea>
<!-- One box per input type a one-time code may or may not go into. -->
<label for="code-number">Code (number)</label>
<input type="number" id="code-number">
<label for="code-tel">Code (tel)</label>
<input type="tel" id="code-tel">
<label for="code-pin">Code (masked)</label>
<input type="password" id="code-pin">
<label for="site">Website</label>
<input type="url" id="site">
<label for="born">Born</label>
<input type="date" id="born">
<div id="rich" contenteditable="true" aria-label="Rich note"></div>
{% endif %}
{% endblock %}