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

{{define "content"}}
<h1>This device</h1>

{{/* Two jobs, one page. A person arriving here is either holding a browser
     that needs the Account Key, or holding one that already has it and is
     being asked to hand it over. Which of those they are is obvious to them
     and not to us, so both are offered rather than guessed at.

     PROTOCOL.md: every screen that needs an Account Key offers all available
     rungs and never dead-ends. */}}

<section data-need>
  <h2>Give this device your Account Key</h2>
  <p>Your vault is sealed with a key this server has never had. A browser can
  only open it once it holds your Account Key, and this one does not yet.
  Any of these will do it.</p>

  <ol data-rungs>
    <li data-rung="handoff">
      <h3>From another signed-in device</h3>
      <p>Easiest, and needs nothing printed. Open CONTRA on a device that
      already works, go to <strong>This device</strong>, and type the code
      below.</p>
      <p><button type="button" data-start-handoff>Show me a code</button></p>

      <div data-handoff hidden>
        <p>On your other device, type this code:</p>
        <p><output data-code class="code"></output></p>
        <p data-handoff-status aria-live="polite">Waiting for the other
        device…</p>
        <p><button type="button" data-cancel-handoff>Stop waiting</button></p>
      </div>
    </li>

    <li data-rung="scan" hidden>
      <h3>Scan the card</h3>
      <p>Point the camera at the QR code on your Account Key card.</p>
      <p><button type="button" data-start-scan>Use the camera</button></p>
      <div data-scan hidden>
        <video data-video playsinline muted></video>
        <p data-scan-status aria-live="polite"></p>
        <p><button type="button" data-stop-scan>Stop</button></p>
      </div>
    </li>

    <li data-rung="type">
      <h3>Type it from the card</h3>
      <p>The line under the QR code, starting <code>A1</code>. Hyphens are
      optional, and it is not case sensitive.</p>
      <form data-type-form method="post" action="#">
        <p>
          <label for="account-key">Account Key</label>
          <input id="account-key" name="account_key" type="text"
                 autocomplete="off" autocapitalize="characters"
                 spellcheck="false" required
                 placeholder="A1-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX">
        </p>

        {{/* Only revealed when the checksum fails. Repairing a mistyped
             character means testing candidates against the wrap's KCV, and
             that needs the passphrase — but the common case is a code typed
             correctly, and that case should not be asked for one. */}}
        <p data-repair hidden>
          <label for="repair-passphrase">Passphrase</label>
          <input id="repair-passphrase" name="passphrase" type="password"
                 autocomplete="current-password">
          <small>That code did not check out. With your passphrase this can
          try the single-character corrections and find the right one.</small>
        </p>

        <p><button type="submit">Use this key</button></p>
      </form>
    </li>
  </ol>

  <p data-need-status aria-live="polite"></p>

  <details>
    <summary>What if I have lost the card and every other device?</summary>
    <p>Then the vault cannot be opened, by you or by anyone, including us.
    That is the product rather than a fault in it: a vault the operator can
    open is a vault the operator can be made to open. If you still have a
    working device, print a new card today — it is on
    <a href="/vault">your vault</a>.</p>
  </details>
</section>

<section data-have hidden>
  <h2>Approve another device</h2>
  <p>A device asking to join will show you an eight-character code. Type it
  here.</p>

  <form data-approve-form method="post" action="#">
    <p>
      <label for="link-code">Code from the other device</label>
      <input id="link-code" name="code" type="text" autocomplete="off"
             autocapitalize="characters" spellcheck="false" required
             placeholder="XXXX-XXXX">
    </p>
    <p><button type="submit">Look it up</button></p>
  </form>

  <div data-confirm hidden>
    {{/* slopbox's wording, and it is the honest version: say what approving
         actually hands over, not that a device "would like access". */}}
    <p><strong>Only approve this if you started it.</strong> Approving hands
    that device a copy of your Account Key. With your passphrase as well, it
    will be able to read everything in your vault.</p>
    <p>
      <label for="approve-passphrase">Your passphrase</label>
      <input id="approve-passphrase" type="password"
             autocomplete="current-password">
      <small>Needed to unlock this device's copy of the key so it can be
      sealed to the other one. It is not sent anywhere.</small>
    </p>
    <p>
      <button type="button" data-do-approve>Approve that device</button>
      <button type="button" data-not-me>Not me</button>
    </p>
  </div>

  <p data-approve-status aria-live="polite"></p>
</section>

<p><a href="/vault">Back to your vault</a></p>
{{end}}