{% 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 %}