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

{{define "content"}}
<h1>Your vault</h1>

{{/* The counterfoil — the server's half of the ticket, and everything on
     it is something the server already holds: that you have a session,
     which vaults you can reach, and their opaque ids. It prints on the
     tint block because that is what a counterfoil is, and it ends at the
     perforation below. */}}
<div data-counterfoil>

{{/* Signing in is not unlocking. The session proved who you are; the keys
     come from a wrap this server cannot open, so the page asks again and
     does the work in the browser. */}}
<form data-unlock method="post" action="#">
  <p>Signing in proved who you are. Opening the vault needs your passphrase
  again, because the key comes from something this server cannot read.</p>
  <p>
    <label for="passphrase">Passphrase</label>
    <input id="passphrase" name="passphrase" type="password"
           autocomplete="current-password" required>
  </p>
  <p><button type="submit">Unlock</button></p>
  <div data-status aria-live="polite"></div>
</form>

{{/* Shown only when there is more than one vault to choose between. The
     labels come out of the keysets, so this list is built from names the
     server has never seen. */}}
<p data-vault-choice hidden>
  <label for="vault-picker">Vault</label>
  <select id="vault-picker" data-vault-picker></select>
</p>

</div>

{{/* The tear-line, and the only one in the app. Everything above it is
     what this server holds and could hand to anyone who stole it: a
     public key, opaque ids, counts, the times of day you connected.
     Everything below it was opened in this browser and the server has
     never seen a byte of it in the clear.

     Every product in this category has this boundary. Most would find
     it awkward to draw honestly, which is the reason to draw it. */}}
<div data-tear><span>held by this server ↑</span><span>opened only here ↓</span></div>

<div data-vault hidden></div>

{{/* Sharing. Hidden until the vault is open, because everything in it needs
     the vault key: sharing seals the keyset to somebody, and removing
     somebody re-seals every item under a new one. */}}
<section data-sharing hidden>
  <h2>Sharing</h2>

  <p>Your account id is <code data-my-account></code>. Give it to somebody who
  wants to share a vault with you — there is no directory to look you up in,
  and deliberately so: an address-to-account lookup would let anyone test
  whether an address has an account here.</p>

  <form data-share-form method="post" action="#">
    <p>
      <label for="account_id">Share with this account id</label>
      <input id="account_id" name="account_id" type="text" autocomplete="off"
             spellcheck="false" required
             placeholder="32 hexadecimal characters">
    </p>
    <p><button type="submit">Share this vault</button></p>
  </form>

  <h3>Members</h3>
  <ul data-members></ul>

  {{/* PROTOCOL.md's revocation answer, all three parts, before the button
       rather than after it. The third is the one every product in this
       category quietly omits. */}}
  <p data-kind="warning">Removing somebody does three things, and only two of
  them are what people expect. Their access stops immediately. The vault gets
  a new key, and every item is re-encrypted under it. But
  <strong>anything they already downloaded is still theirs</strong> — no
  design can take that back, and ours does not pretend to.</p>

  <p>
    <label>
      <input type="checkbox" data-understood>
      I understand that removing somebody cannot un-download what they already
      have.
    </label>
  </p>

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

{{/* PROTOCOL.md: the reprint flow must be obvious rather than buried, and
     the nag to enrol a second device lives beside it. Both are the
     mitigation for the one loss mode the Account Key introduced. */}}
<p><a href="/kit">Your printed kit</a> — reprint the Account Key card, or
issue a new recovery sheet. <a href="/device">This device</a> — approve
another browser, or give this one your Account Key.</p>


<form method="post" action="/auth/signout">
  <button type="submit">Sign out</button>
</form>
{{end}}