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

{% if let Some((secret, uri, qr)) = enrol %}

<form class="card" method="post" action="/settings/security/totp/enable">

  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

  <input type="hidden" name="secret" value="{{ secret }}">

  <h2>Scan, then enter the code</h2>

  <div class="qr">{{ qr|safe }}</div>

  <p class="small">Or enter the secret by hand: <code>{{ secret }}</code></p>

  <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>

</form>

{% else if me.totp_enabled() %}

<form class="card" method="post" action="/settings/security/totp/disable">

  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

  <h2><span class="sig sig-valid">✔</span> Two-factor authentication is on</h2>

  <label for="password">Your password, to turn it off</label><input type="password" id="password" name="password" autocomplete="current-password" required>

  <button type="submit">TURN OFF</button>

</form>

{% else %}

<form class="card" method="post" action="/settings/security/totp/begin">

  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

  <h2><span class="sig sig-unsigned">○</span> Two-factor authentication is off</h2>

  <p class="small">A time-based code from an authenticator app is asked for at every sign in.</p>

  <button type="submit">SET UP</button>

</form>

{% endif %}

{% if !connected.is_empty() %}<section class="panel" id="connected">

  <h2>Connected accounts</h2>

  <p class="small">Sign in with these instead of a password.</p>

  <ul class="plain">{% for (id, name, login) in connected %}<li>{{ name }}: {% if let Some(l) = login %}<strong>{{ l }}</strong> <form class="tiny inline" method="post" action="/settings/security/disconnect/{{ id }}"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="linkish">disconnect</button></form>{% else %}<a href="/settings/security/connect/{{ id }}">connect</a>{% endif %}</li>{% endfor %}</ul>

</section>{% endif %}

{% if !sessions.is_empty() %}<section class="panel" id="sessions">

  <h2>Signed in</h2>

  <ul class="plain sessions">{% for x in sessions %}<li><strong>{{ x.browser }}</strong>{% if x.current %} <span class="tag">this browser</span>{% endif %}<span class="small mute">{% if !x.address.is_empty() %} · {{ x.address }}{% endif %} · used {{ x.seen_ms|ago_i }} · signed in {{ x.created_ms|ago_i }}</span>

    <form class="tiny inline" method="post" action="/settings/security/sessions/{{ x.id }}/end"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="linkish">sign out</button></form></li>{% endfor %}</ul>

</section>{% endif %}

<form class="card" method="post" action="/settings/security/sessions">

  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

  <h2>Sessions</h2>

  <p class="small">Sign out every browser except this one. A session ends by itself after 14 days unused, or 30 days after signing in.</p>

  <button type="submit">SIGN OUT EVERYWHERE</button>

</form>

{% endblock %}