{% extends "base.html" %}
{% from "components/ui.html" import card, csrf_field, secret_card with context %}
{% block title %}Recovery key · {{ APP_NAME }}{% endblock %}
{% block heading %}Recovery key{% endblock %}
{% block subheading %}<div class="sub">The master key written out: it opens every stored secret</div>{% endblock %}
{% block content %}
{% if key %}
{% call secret_card("Recovery key", key) %}Keep it apart from any backup: without it, a backup cannot be restored on another machine. Whoever holds it can read every stored password and token.{% endcall %}
{% else %}
{% call card("Show the recovery key") %}
  <div class="notice warn">Show it only where nobody looks over your shoulder. The service log notes that it was shown, and to whom.</div>
  <form method="post" action="/ui/recovery-key">
    {{ csrf_field() }}
    <input type="hidden" name="name" value="{{ me.name }}" autocomplete="username" />
    <div class="form-grid">
      <div class="field">
        <label for="f-password">Your password</label>
        <input id="f-password" name="password" type="password" autocomplete="current-password" required autofocus />
      </div>
      {% if needs_code %}
      <div class="field">
        <label for="f-code">A code of any of your devices, or a recovery code</label>
        <input id="f-code" name="code" autocomplete="one-time-code" spellcheck="false" maxlength="40" required />
      </div>
      {% endif %}
    </div>
    <div class="form-actions"><button class="primary" type="submit">Show</button></div>
  </form>
{% endcall %}
{% endif %}
{% endblock %}