| 1 | {{define "title"}}Choose a passphrase — CONTRA{{end}} |
| 2 | {{define "brand"}}<a rst-shell-brand href="/">CONTRA</a>{{end}} |
| 3 | {{define "head"}}<script type="module" src="{{asset "static/pages/signup.js"}}"></script>{{end}} |
| 4 | |
| 5 | {{/* Three screens in one document, one visible at a time. |
| 6 | They cannot be three URLs: the Emergency Kit exists only in memory, on |
| 7 | purpose — the recovery code is never stored by anyone, so a redirect |
| 8 | between choosing a passphrase and seeing the kit would be a redirect that |
| 9 | throws it away. So the document swaps instead, and each screen is a whole |
| 10 | screen rather than something appended under the last one. */}} |
| 11 | {{define "content"}} |
| 12 | |
| 13 | <section data-screen="form"> |
| 14 | <h1>Choose a passphrase</h1> |
| 15 | <p rst-steps>Step 2 of 3 · Your address is confirmed</p> |
| 16 | |
| 17 | <p>Your passphrase never leaves this page. Your vault key is generated here, |
| 18 | in your browser, and the server only ever receives sealed copies of it that |
| 19 | it cannot open.</p> |
| 20 | |
| 21 | <form data-passphrase data-kdf-params="{{.KDFParams}}" method="post" action="/auth/complete"> |
| 22 | <p> |
| 23 | <label for="passphrase">Passphrase</label> |
| 24 | <input id="passphrase" name="passphrase" type="password" |
| 25 | autocomplete="new-password" required minlength="12"> |
| 26 | </p> |
| 27 | <p> |
| 28 | <label for="passphrase_again">Passphrase again</label> |
| 29 | <input id="passphrase_again" name="passphrase_again" type="password" |
| 30 | autocomplete="new-password" required minlength="12"> |
| 31 | </p> |
| 32 | <p><button type="submit">Create my vault</button></p> |
| 33 | <div data-status aria-live="polite"></div> |
| 34 | </form> |
| 35 | </section> |
| 36 | |
| 37 | <section data-screen="working" hidden> |
| 38 | <h1>Creating your vault</h1> |
| 39 | <p rst-steps>Step 2 of 3 · This takes a few seconds</p> |
| 40 | |
| 41 | <p>Stretching your passphrase is deliberately slow — a second of work per |
| 42 | guess is what makes guessing expensive. Everything below is happening in |
| 43 | this browser.</p> |
| 44 | |
| 45 | {{/* The names match the progress messages the crypto module emits, so the |
| 46 | list is driven by what is actually happening rather than by a timer |
| 47 | pretending to know. */}} |
| 48 | <ol data-progress> |
| 49 | <li data-task="stretch your passphrase">Stretching your passphrase</li> |
| 50 | <li data-task="build your keys">Building your keys</li> |
| 51 | <li data-task="seal your vault key">Sealing your vault key</li> |
| 52 | <li data-task="create your account">Creating your account</li> |
| 53 | <li data-task="open your vault">Opening your vault</li> |
| 54 | </ol> |
| 55 | |
| 56 | <p>Please keep this tab open.</p> |
| 57 | </section> |
| 58 | |
| 59 | <section data-screen="kit" hidden> |
| 60 | <h1>Your Emergency Kit</h1> |
| 61 | <p rst-steps>Step 2 of 3 · Save these before you go on</p> |
| 62 | <div data-kit-body></div> |
| 63 | </section> |
| 64 | |
| 65 | {{end}} |
| 66 | |
amadan