{% extends "base_settings_page.html" %}
{% block content %}


<div class="alert alert-dismissible alert-warning">
    <h4 class="alert-heading">Warning!</h4>
    <p class="mb-0">Once a new factor has been added to your account, you can not access
        your account anymore using only your password. If you remove all your second factors,
        2 Factor Authentication is automatically disabled for your account.</p>
</div>


<p>
    <a href="/settings/two_factors/add_totp" type="button" class="btn btn-primary">Add Authenticator App</a>
    <a href="/settings/two_factors/add_webauthn" type="button" class="btn btn-primary">Add Security Key</a>
</p>

<table class="table table-hover" style="max-width: 800px;" aria-describedby="Factors list">
    <thead>
    <tr>
        <th scope="col">Factor type</th>
        <th scope="col">Name</th>
        <th scope="col">Actions</th>
    </tr>
    </thead>
    <tbody>
    {% for f in user.two_factor %}
    <tr id="factor-{{ f.id.0 }}">
        <td>{{ f.type_str() }}</td>
        <td>{{ f.name }}</td>
        <td><a href="javascript:delete_factor('{{ f.id.0 }}');">Delete</a></td>
    </tr>
    {% endfor %}
    </tbody>
</table>

<script>
    async function delete_factor(id) {
        if (!confirm("Do you really want to remove this factor?"))
            return;

        try {
            const res = await fetch("/settings/api/two_factor/delete_factor", {
                method: "post",
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    id: id,
                })
            });

            let text = await res.text();
            alert(text);

            if (res.status == 200)
                document.getElementById("factor-" + id).remove();
        } catch(e) {
            console.error(e);
            alert("Failed to remove factor!");
        }
    }

</script>
{% endblock content %}