{% extends "pretixcontrol/base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% block title %}{% trans "Two-factor authentication" %}{% endblock %}
{% block content %}
    <h1>{% trans "Two-factor authentication" %}</h1>
    <p>
        {% blocktrans trimmed %}
            Two-factor authentication is a way to add additional security to your account. If you enable it, you will
            not only need your password to log in, but also an additional token that is generated e.g. by an app on your
            smartphone or a hardware token generator and that changes on a regular basis.
        {% endblocktrans %}
    </p>
    {% if user.require_2fa %}
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">{% trans "Two-factor status" %}</h3>
            </div>
            <div class="panel-body">
                <a href="{% url "control:user.settings.2fa.disable" %}" class="btn btn-primary pull-right">
                    {% trans "Disable" %}
                </a>
                <p>
                    <strong>{% trans "Two-factor authentication is currently enabled." %}</strong>
                </p>
            </div>
        </div>
    {% else %}
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">{% trans "Two-factor status" %}</h3>
            </div>
            <div class="panel-body">
                {% if devices|length %}
                    <a href="{% url "control:user.settings.2fa.enable" %}" class="btn btn-primary pull-right">
                        {% trans "Enable" %}
                    </a>
                {% endif %}
                <p>
                    <strong>{% trans "Two-factor authentication is currently disabled." %}</strong>
                </p>
                {% if not devices|length %}
                    <p>{% trans "To enable it, you need to configure at least one device below." %}</p>
                {% endif %}
            </div>
        </div>
    {% endif %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% trans "Registered devices" %}</h3>
        </div>
        <ul class="list-group">
            {% for d in devices %}
                <li class="list-group-item">
                    <a class="btn btn-danger btn-xs pull-right"
                            href="{% url "control:user.settings.2fa.delete" devicetype=d.devicetype device=d.pk %}">
                        Delete
                    </a>
                    {% if d.devicetype == "totp" %}
                        <span class="fa fa-mobile"></span>
                    {% elif d.devicetype == "u2f" %}
                        <span class="fa fa-usb"></span>
                    {% endif %}
                    {{ d.name }}
                </li>
            {% endfor %}

            <li class="list-group-item">
                <a href="{% url "control:user.settings.2fa.add" %}" class="btn btn-primary">
                    <span class="fa fa-plus"></span>
                    {% trans "Add a new device" %}
                </a>
            </li>
        </ul>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% trans "Emergency tokens" %}</h3>
        </div>
        <div class="panel-body">
            <p>
                {% trans "If you lose access to your devices, you can use one of the following keys to log in. We recommend to store them in a safe place, e.g. printed out or in a password manager. Every token can be used at most once." %}
            </p>
            <p>{% trans "Unused tokens:" %}</p>
            <ul>
                {% for t in static_tokens %}
                    <li><code>{{ t.token }}</code></li>
                {% endfor %}
            </ul>
            <a href="{% url "control:user.settings.2fa.regenemergency" %}" class="btn btn-default">
                <span class="fa fa-refresh"></span>
                {% trans "Generate new emergency tokens" %}
            </a>
        </div>
    </div>
{% endblock %}
