{{define "title"}}Sign in — CONTRA{{end}}
{{define "brand"}}<a rst-shell-brand href="/">CONTRA</a>{{end}}
{{define "head"}}<script type="module" src="{{asset "static/pages/signin.js"}}"></script>{{end}}

{{define "content"}}
<h1>Sign in</h1>

<p>Your passphrase is not sent. This page stretches it, derives a signing key
from it, and signs a challenge the server chose.</p>

<form data-signin method="post" action="/auth/verify">
  <p>
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" autocomplete="username" required>
  </p>

  {{/* The tear-line, and it runs through the middle of this form because
       that is where the boundary genuinely is: the address above it goes
       to the server, as a blind index it cannot reverse. The passphrase
       below it does not go anywhere — it is stretched here and used to
       sign a challenge, which is what the paragraph above already says.

       This is the clearest place in the whole product to draw it: not a
       diagram of the promise, the promise happening in one form. */}}
  <div data-tear><span>goes to the server ↑</span><span>never leaves this page ↓</span></div>

  <p>
    <label for="passphrase">Passphrase</label>
    <input id="passphrase" name="passphrase" type="password"
           autocomplete="current-password" required>
  </p>
  <p><button type="submit">Sign in</button></p>
  <div data-status aria-live="polite"></div>
</form>

<p>No account yet? <a href="/signup">Create one</a>.</p>
{{end}}