{% extends "base.html" %}
{% from "components/ui.html" import ago, card, copy_button, csrf_field, dialog_button, dialog_buttons, empty, form_dialog, icon, related, row_form, tick, tick_all, toggle with context %}
{% block title %}Second factor · {{ APP_NAME }}{% endblock %}
{% block heading %}Second factor{% endblock %}
{% block subheading %}<div class="sub">A second step after your password, when you sign in to this UI</div>{% endblock %}
{% block content %}
{% set devices = factor.totp %}
{% if codes %}
<section class="card">
  <header><h2>Recovery codes</h2><span class="right"><span class="tag warn">shown this once</span></span></header>
  <div class="body">
    <p class="muted">Each signs you in once in place of a code of a device, e.g. when a phone is lost. Keep them apart from your devices, in a password manager or on paper.</p>
    <div class="secret-line"><ul class="codes secret" id="recovery-codes">{% for code in codes %}<li>{{ code }}</li>{% endfor %}</ul>{{ copy_button("recovery-codes", "Copy all codes") }}</div>
    <div class="form-actions"><a class="btn" href="{{ codes_file }}" download="mailbox-recovery-codes.txt">{{ icon("download") }} Download as a text file</a></div>
  </div>
</section>
{% endif %}

{% if qr %}
{% call card("Scan the code for " ~ setup.name, meta="With an authenticator app, within " ~ minutes ~ " minutes.") %}
  <img class="qr" src="{{ qr }}" alt="QR code of the device {{ setup.name }}" width="225" height="225" />
  <p class="muted">Where the camera cannot reach, type in this key:</p>
  <div class="secret-line"><code class="secret" id="totp-key">{{ secret }}</code>{{ copy_button("totp-key", "Copy the key") }}</div>
  <form method="post" action="/ui/second-factor/totp/confirm">
    {{ csrf_field() }}
    <div class="form-grid">
      <div class="field">
        <label for="f-confirm">The code {{ setup.name }} shows now</label>
        <input id="f-confirm" name="code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9 ]{6,7}" maxlength="7" required autofocus />
      </div>
    </div>
    <div class="form-actions"><button class="primary" type="submit">{% if devices %}Add device{% else %}Turn on{% endif %}</button></div>
  </form>
  <form method="post" action="/ui/second-factor/totp/cancel">
    {{ csrf_field() }}
    <button class="link" type="submit">Cancel</button>
  </form>
{% endcall %}
{% endif %}

{% set can_add = not qr and devices | length < max_devices %}
{% call related("Authenticator app (TOTP)", count=devices | length, meta=("devices: a code of any of them signs in" if devices else "off now: your password alone signs you in"), add=("Add a device" if can_add else None), add_form="add-device", add_open=not devices) %}
  {% if devices | length > 1 %}
  <div class="batch-bar">
    <span class="label">Ticked devices</span>
    {{ dialog_button("remove-ticked", "Remove", alone=False) }}
  </div>
  {% endif %}
  <div class="body tight">
    <div class="table-scroll">
      <table>
        <thead><tr>{% if devices | length > 1 %}<th class="tick">{{ tick_all("devices-batch", "device") }}</th>{% endif %}<th>Name</th><th>Added</th><th>Last used</th><th class="actions"><span class="sr">Actions</span></th></tr></thead>
        <tbody>
          {% set columns = 5 if devices | length > 1 else 4 %}
          {% if can_add %}
          {% call row_form("add-device", columns, open=not devices) %}
            <form method="post" action="/ui/second-factor/totp/begin">
              {{ csrf_field() }}
              <input type="hidden" name="username" value="{{ me.name }}" autocomplete="username" />
              <div class="toolbar">
                <div class="field">
                  <label for="f-name">Its name</label>
                  <input id="f-name" name="name" maxlength="{{ max_name }}" required placeholder="e.g. Phone" />
                </div>
                <div class="field">
                  <label for="f-password">Your password</label>
                  <input id="f-password" name="password" type="password" autocomplete="current-password" required />
                </div>
                {% if devices %}
                <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>
              <span class="hint">The next step shows its QR code.{% if not devices %} Then ten recovery codes, once.{% endif %} Adding a device signs out your other sessions.</span>
              <div class="form-actions"><button class="primary" type="submit">{{ icon("check-lg") }} Next</button>{% if devices %}<button type="button" data-close>Cancel</button>{% endif %}</div>
            </form>
          {% endcall %}
          {% endif %}
          {% for device in devices %}
          <tr>
            {% if devices | length > 1 %}<td class="tick">{{ tick("devices-batch", "device", device.id, "Tick " ~ device.name) }}</td>{% endif %}
            <td class="name">{{ device.name }}</td>
            <td>{{ ago(device.created_at) }}</td>
            <td>{{ ago(device.last_used_at) }}</td>
            <td class="actions">
              {{ toggle("rename-" ~ device.id, "Rename", "pencil", name="Rename " ~ device.name) }}
              {{ dialog_button("remove-" ~ device.id, "Remove", name="Remove " ~ device.name) }}
            </td>
          </tr>
          {% call row_form("rename-" ~ device.id, columns) %}
            <form class="toolbar" method="post" action="/ui/second-factor/totp/rename">
              {{ csrf_field() }}
              <input type="hidden" name="device" value="{{ device.id }}" />
              <div class="field">
                <label for="f-rename-{{ device.id }}">Name</label>
                <input id="f-rename-{{ device.id }}" name="name" value="{{ device.name }}" maxlength="{{ max_name }}" required />
              </div>
              <div class="form-actions"><button class="primary" type="submit">{{ icon("check-lg") }} Save</button><button type="button" data-close>Cancel</button></div>
            </form>
          {% endcall %}
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if not devices %}{{ empty("No device yet. Any authenticator app works: add a phone or a tablet, scan its QR code, and keep the ten recovery codes the first one brings.") }}{% endif %}
  </div>
{% endcall %}

{% macro confirm_fields(id) %}
  <input type="hidden" name="username" value="{{ me.name }}" autocomplete="username" />
  <div class="form-grid">
    <div class="field">
      <label for="f-{{ id }}-password">Your password</label>
      <input id="f-{{ id }}-password" name="password" type="password" autocomplete="current-password" required />
    </div>
    <div class="field">
      <label for="f-{{ id }}-code">A code of any of your devices, or a recovery code</label>
      <input id="f-{{ id }}-code" name="code" autocomplete="one-time-code" spellcheck="false" maxlength="40" required />
    </div>
  </div>
{% endmacro %}
{% for device in devices %}
{% call form_dialog("remove-" ~ device.id, "Remove " ~ device.name ~ "?", "Its codes work no more." ~ (" It is the last one: the second factor is off then, and the recovery codes go with it." if devices | length == 1 else "")) %}
  <form method="post" action="/ui/second-factor/totp/remove">
    {{ csrf_field() }}
    <input type="hidden" name="device" value="{{ device.id }}" />
    {{ confirm_fields("remove-" ~ device.id) }}
    {{ dialog_buttons("Remove device") }}
  </form>
{% endcall %}
{% endfor %}
{% if devices | length > 1 %}
{% call form_dialog("remove-ticked", "Remove the ticked devices?", "Their codes work no more. With every device ticked, the second factor is off, and the recovery codes go with it.") %}
  <form method="post" action="/ui/second-factor/totp/remove-ticked" id="devices-batch">
    {{ csrf_field() }}
    {{ confirm_fields("remove-ticked") }}
    {{ dialog_buttons("Remove devices") }}
  </form>
{% endcall %}
{% endif %}

{% if factor.totp %}
{% call card("Recovery codes", meta=factor.recovery_codes_left ~ " left. New ones replace them all.") %}
  {% if factor.recovery_codes_left == 0 %}<div class="notice warn">No recovery codes are left. Make new ones.</div>
  {% elif factor.recovery_codes_left <= 2 %}<div class="notice warn">Few recovery codes are left. Make new ones.</div>{% endif %}
  <form method="post" action="/ui/second-factor/codes">
    {{ csrf_field() }}
    <input type="hidden" name="username" value="{{ me.name }}" autocomplete="username" />
    <div class="form-grid">
      <div class="field">
        <label for="f-codes-password">Your password</label>
        <input id="f-codes-password" name="password" type="password" autocomplete="current-password" required />
      </div>
      <div class="field">
        <label for="f-codes-code">A code of any of your devices, or a recovery code</label>
        <input id="f-codes-code" name="code" autocomplete="one-time-code" spellcheck="false" maxlength="40" required />
      </div>
    </div>
    <div class="form-actions"><button type="submit">Make new codes</button></div>
  </form>
{% endcall %}
{% endif %}
{% endblock %}