{% extends "layout.html" %}
{% block title %}2-Factor configuration{% endblock %}
{% block content %}
<script>
    document.addEventListener("DOMContentLoaded", e => {
        document.querySelector('#register_fido2').addEventListener('click', register);
        document.querySelector('#gen_totp').addEventListener('click', gen_totp);
        document.querySelector('#del_totp').addEventListener('click', del_totp);
        new QRCode(document.getElementById("qrcode"), "{{ totp_uri }}");
    });
    
    function register(e) {
        e.preventDefault();
        const form = document.querySelector('#register-form');
        const formData = new FormData(form);
        fetch('{{ url_for("register_begin") }}', {
            method: 'POST',
            body: formData
        }).then(function(response) {
            if(response.ok) return response.arrayBuffer();
            throw new Error('Error getting registration data!');
        }).then(CBOR.decode).then(function(options) {
            return navigator.credentials.create(options);
        }).then(function(attestation) {
            return fetch('{{ url_for("register_complete") }}', {
                method: 'POST',
                headers: {'Content-Type': 'application/cbor'},
                body: CBOR.encode({
                    "attestationObject": new Uint8Array(attestation.response.attestationObject),
                    "clientDataJSON": new Uint8Array(attestation.response.clientDataJSON),
                })
            });
        }).then(function(response) {
            var stat = response.ok ? 'successful' : 'unsuccessful';
            //alert('Registration ' + stat + ' More details in server log...');
        }, function(reason) {
            alert(reason);
        }).then(function() {
            window.location.reload();
        });
    }

    function gen_totp(e) {
        if (!confirm("Warning. This will replace an existing TOTP token!")) {
            return;
        }
        document.getElementById('gen_totp').classList.add("is-loading");
        fetch('{{ url_for("totp_generate") }}', {})
        .then(
            function(response) {
                if (response.status !== 200) {
                    alert("Could not generate TOTP.");
                    document.getElementById('gen_totp').classList.remove("is-loading");
                    return;
                }
                response.json().then(function(data) {
                    if (data.status == "success") {
                        window.location.reload();
                    }
                    else {
                        alert("Error while generating TOTP.");
                        document.getElementById('gen_totp').classList.remove("is-loading");
                    }
                });
            }
        )
        .catch(function(err) {
            console.log("Fetch Error :-S", err);
            document.getElementById('gen_totp').classList.remove("is-loading");
        });
    }

    function del_totp(e) {
        if (!confirm("Warning. This will delete an existing TOTP token!")) {
            return;
        }
        document.getElementById('del_totp').classList.add("is-loading");
        fetch('{{ url_for("totp_delete") }}', {})
        .then(
            function(response) {
                if (response.status !== 200) {
                    alert("Could not delete TOTP.");
                    document.getElementById('del_totp').classList.remove("is-loading");
                    return;
                }
                response.json().then(function(data) {
                    if (data.status == "success") {
                        window.location.reload();
                    }
                    else {
                        alert("Error while deleting TOTP.");
                        document.getElementById('del_totp').classList.remove("is-loading");
                    }
                });
            }
        )
        .catch(function(err) {
            console.log("Fetch Error :-S", err);
            document.getElementById('del_totp').classList.remove("is-loading");
        });
    }
    </script>
<h4 class="title is-4">2-Factor configuration</h4>
<h5 class="title is-5">FIDO2 tokens</h5>
<div class="table__wrapper">
    <table class="table is-bordered">
        <thead>
            <tr>
                <th>ID</th><th>Name</th><th></th>
            </tr>
        </thead>
        <tbody>
        {% for authenticator in authenticators %}
            <tr>
                <td>{{ authenticator.id }}</td>
                <td>{{ authenticator.name }}</td>
                <td><a href="{{ url_for('zfa', del_authenticator=authenticator.id) }}" class="button is-danger is-small">Delete</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div><br />
<h6 class="title is-6">Add FIDO2 token</h6>
<form id="register-form" name="register" method="POST">
    <input type="text" name="token_name" class="input" placeholder="My Token" autocomplete="off" required /><br />
    <button id="register_fido2" type="button" class="button is-outlined is-fullwidth"{% if authenticators|length >= maxfido %} disabled{% endif %}>Add FIDO2 token</button>
</form>
{% if totp_enabled and user.totp_enabled %}<hr>
<h5 class="title is-5">TOTP token</h5>
<button id="gen_totp" type="button" class="button is-outlined is-fullwidth">Generate TOTP token</button>
<button id="del_totp" type="button" class="button is-outlined is-fullwidth">Delete TOTP token</button><br />
<label for="totp_secret" class="label">Base32 secret:</label><input id="totp_secret" type="text" class="input" value="{{ totp_secret }}" disabled />
<label for="totp_uri" class="label">Provisioning URI:</label><input id="totp_uri" type="text" class="input" value="{{ totp_uri }}" disabled /><br /><br />
<a style="display: flex; justify-content: center; text-align: center;" href="{{ totp_uri }}"><div id="qrcode"></div></a>{% endif %}
<br />
{% endblock %}