orchard

 1{{ define "form" }}
 2<div class="auth-eyebrow">bythewood.me</div>
 3<h1 class="auth-title">{{ .Title }}</h1>
 4
 5{{ template "alerts" . }}
 6
 7<form method="POST" action="/code" data-otp-form>
 8  <input type="hidden" name="next" value="{{ .Next }}">
 9
10  {{/* Hidden until the script swaps them in, so a browser with no JavaScript
11       keeps the single field below and a working sign in. */}}
12  <div class="otp" data-otp hidden>
13    <input class="otp-box" inputmode="numeric" pattern="[0-9]*" maxlength="1"
14           autocomplete="one-time-code" aria-label="Digit 1">
15    <input class="otp-box" inputmode="numeric" pattern="[0-9]*" maxlength="1" aria-label="Digit 2">
16    <input class="otp-box" inputmode="numeric" pattern="[0-9]*" maxlength="1" aria-label="Digit 3">
17    <input class="otp-box" inputmode="numeric" pattern="[0-9]*" maxlength="1" aria-label="Digit 4">
18    <input class="otp-box" inputmode="numeric" pattern="[0-9]*" maxlength="1" aria-label="Digit 5">
19    <input class="otp-box" inputmode="numeric" pattern="[0-9]*" maxlength="1" aria-label="Digit 6">
20  </div>
21
22  <input type="text" class="form-control code-input" name="code" id="id_code"
23         data-otp-fallback placeholder="000000" required autofocus
24         aria-label="Six digit code"
25         inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
26         autocomplete="one-time-code" spellcheck="false">
27
28  <div class="auth-actions">
29    <button type="submit" class="btn btn-primary">Sign in →</button>
30    <a href="/recovery?next={{ .Next | urlquery }}" class="small link-footer">Recovery code</a>
31  </div>
32</form>
33
34{{/* The notification carries where the request came from, and this is the line
35     that makes somebody look at it before typing. */}}
36<p class="auth-hint">If it came from somewhere you are not, do not type it.</p>
37{{ end }}
38
39{{ define "main" }}{{ template "authShell" . }}{{ end }}