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

{{/* Three screens in one document, one visible at a time.
     They cannot be three URLs: the Emergency Kit exists only in memory, on
     purpose — the recovery code is never stored by anyone, so a redirect
     between choosing a passphrase and seeing the kit would be a redirect that
     throws it away. So the document swaps instead, and each screen is a whole
     screen rather than something appended under the last one. */}}
{{define "content"}}

<section data-screen="form">
  <h1>Choose a passphrase</h1>
  <p rst-steps>Step 2 of 3 &middot; Your address is confirmed</p>

  <p>Your passphrase never leaves this page. Your vault key is generated here,
  in your browser, and the server only ever receives sealed copies of it that
  it cannot open.</p>

  <form data-passphrase data-kdf-params="{{.KDFParams}}" method="post" action="/auth/complete">
    <p>
      <label for="passphrase">Passphrase</label>
      <input id="passphrase" name="passphrase" type="password"
             autocomplete="new-password" required minlength="12">
    </p>
    <p>
      <label for="passphrase_again">Passphrase again</label>
      <input id="passphrase_again" name="passphrase_again" type="password"
             autocomplete="new-password" required minlength="12">
    </p>
    <p><button type="submit">Create my vault</button></p>
    <div data-status aria-live="polite"></div>
  </form>
</section>

<section data-screen="working" hidden>
  <h1>Creating your vault</h1>
  <p rst-steps>Step 2 of 3 &middot; This takes a few seconds</p>

  <p>Stretching your passphrase is deliberately slow — a second of work per
  guess is what makes guessing expensive. Everything below is happening in
  this browser.</p>

  {{/* The names match the progress messages the crypto module emits, so the
       list is driven by what is actually happening rather than by a timer
       pretending to know. */}}
  <ol data-progress>
    <li data-task="stretch your passphrase">Stretching your passphrase</li>
    <li data-task="build your keys">Building your keys</li>
    <li data-task="seal your vault key">Sealing your vault key</li>
    <li data-task="create your account">Creating your account</li>
    <li data-task="open your vault">Opening your vault</li>
  </ol>

  <p>Please keep this tab open.</p>
</section>

<section data-screen="kit" hidden>
  <h1>Your Emergency Kit</h1>
  <p rst-steps>Step 2 of 3 &middot; Save these before you go on</p>
  <div data-kit-body></div>
</section>

{{end}}