{% extends "base.html" %}
{% import "settings_tabs.html" as t %}
{% block title %}Security{% endblock %}
{% block tabs %}{% call t::tabs("security") %}{% endblock %}
{% block content %}
<div class="head"><h1>Security <small>two-factor authentication and sessions</small></h1></div>
{% if let Some(n) = notice %}<p class="note">{{ n }}</p>{% endif %}
{% if let Some(e) = error %}<p class="error">{{ e }}</p>{% endif %}
{% if !recovery.is_empty() %}
<div class="panel"><h2>Recovery codes</h2><ul class="codes">{% for c in recovery %}<li>{{ c }}</li>{% endfor %}</ul></div>
{% endif %}
<section class="card-box" id="two-factor">
  <div class="card-head"><h2>Two-factor authentication</h2>{% if enrol.is_some() %}<span class="small mute more">setting up</span>{% else if me.totp_enabled() %}<span class="tag ok more"><span class="sig sig-valid">✔</span> on</span>{% else %}<span class="tag more"><span class="sig sig-unsigned">○</span> off</span>{% endif %}</div>
  {% if let Some((secret, uri, qr)) = enrol %}
  <form class="pad sec-form" method="post" action="/settings/security/totp/enable">
    <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
    <input type="hidden" name="secret" value="{{ secret }}">
    <p>Scan this with your authenticator app, then enter the code it shows.</p>
    <div class="qr">{{ qr|safe }}</div>
    <p class="small mute">Or enter the secret by hand: <code>{{ secret }}</code></p>
    <div class="sec-row"><label for="code">Code from the app</label><input type="text" id="code" name="code" inputmode="numeric" autocomplete="one-time-code" autofocus required><button type="submit">TURN ON</button></div>
  </form>
  {% else if me.totp_enabled() %}
  <form class="pad sec-form" method="post" action="/settings/security/totp/disable">
    <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
    <p class="small mute">A code from your authenticator app is asked for at every sign in.</p>
    <div class="sec-row"><label for="password">Your password, to turn it off</label><input type="password" id="password" name="password" autocomplete="current-password" required><button type="submit" class="danger">TURN OFF</button></div>
  </form>
  {% else %}
  <form class="pad sec-form sec-split" method="post" action="/settings/security/totp/begin">
    <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
    <p class="small mute">With it on, a time-based code from an authenticator app is asked for at every sign in.</p>
    <button type="submit">SET UP</button>
  </form>
  {% endif %}
</section>
{% if me.totp_enabled() %}<section class="card-box" id="phones">
  <div class="card-head"><h2>Phones</h2><span class="count-chip">{{ phones.len() }}</span><span class="small mute more">approve with a fingerprint instead of typing a code</span></div>
  {% if phones.is_empty() %}<p class="empty small">No phone approves for you yet. In the OxygenHub app, Account › <strong>Use this phone as a second factor</strong>.</p>{% else %}
  <ul class="rows token-rows">{% for p in phones %}
    <li>
      <div class="token-main">
        <div class="token-name"><strong>{{ p.name }}</strong></div>
        <div class="small mute">added <time title="{{ p.created_ms|when_i }}">{{ p.created_ms|ago_i }}</time> · {% if p.last_used_ms > 0 %}last approved <time title="{{ p.last_used_ms|when_i }}">{{ p.last_used_ms|ago_i }}</time>{% else %}never used{% endif %}</div>
      </div>
      <div class="token-actions"><form class="inline" method="post" action="/settings/security/phones/{{ p.token_id }}/remove"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="small">Remove</button></form></div>
    </li>{% endfor %}
  </ul>{% endif %}
  <p class="small mute pad sec-foot">Signing in, a phone shows three numbers; pick the one this page shows and confirm with your fingerprint, face or PIN. Your authenticator app's codes still work when the phone is not to hand.</p>
</section>{% endif %}
{% if !connected.is_empty() %}<section class="card-box" id="connected">
  <div class="card-head"><h2>Connected accounts</h2><span class="small mute more">sign in with these instead of a password</span></div>
  <ul class="rows token-rows">{% for (id, name, login) in connected %}
    <li>
      <div class="token-main"><div class="token-name"><strong>{{ name }}</strong>{% if let Some(l) = login %} <span class="mute">{{ l }}</span>{% else %} <span class="small mute">not connected</span>{% endif %}</div></div>
      <div class="token-actions">{% if login.is_some() %}<form class="inline" method="post" action="/settings/security/disconnect/{{ id }}"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="small">Disconnect</button></form>{% else %}<a class="go small" href="/settings/security/connect/{{ id }}">Connect</a>{% endif %}</div>
    </li>{% endfor %}
  </ul>
</section>{% endif %}
<section class="card-box" id="sessions">
  <div class="card-head"><h2>Signed in</h2><span class="count-chip">{{ sessions.len() }}</span>
    <form class="inline more" method="post" action="/settings/security/sessions"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="small" title="Sign out every browser except this one">Sign out everywhere else</button></form></div>
  {% if sessions.is_empty() %}<p class="empty small">No sessions.</p>{% else %}
  <ul class="rows token-rows">{% for x in sessions %}
    <li>
      <div class="token-main">
        <div class="token-name"><strong>{{ x.browser }}</strong>{% if x.current %} <span class="tag">this browser</span>{% endif %}</div>
        <div class="small mute">{% if !x.address.is_empty() %}{{ x.address }} · {% endif %}used <time title="{{ x.seen_ms|when_i }}">{{ x.seen_ms|ago_i }}</time> · signed in <time title="{{ x.created_ms|when_i }}">{{ x.created_ms|ago_i }}</time></div>
      </div>
      <div class="token-actions"><form class="inline" method="post" action="/settings/security/sessions/{{ x.id }}/end"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="small">Sign out</button></form></div>
    </li>{% endfor %}
  </ul>{% endif %}
  <p class="small mute pad sec-foot">A session ends by itself after 14 days unused, or 30 days after signing in.</p>
</section>
{% endblock %}