{% extends "base_settings_page.html" %}
{% block content %}
<div style="max-width: 700px;">

    <p>On this page you can configure a new Authenticator app. Please use an authenticator app to scan the QR code.</p>

    <p>Note: if you have not an authenticator app yet, you might want to use
        <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" rel="noopener" target="_blank">FreeOTP
            Authenticator</a> for example.</p>

    <img src="data:image/png;base64,{{ qr_code }}" style="width: 150px; margin: 20px 0px;"/>

    <p>If you can't scan the QrCode, please use the following parameters instead:</p>
    <ul>
        <li><strong>Account name:</strong> <i>{{ account_name }}</i> <a
                href="javascript:copyToClipboard('{{ account_name }}')">Copy to clipboard</a></li>
        <li><strong>Secret key:</strong> <i>{{ secret_key }}</i> <a
                href="javascript:copyToClipboard('{{ secret_key }}')">Copy
            to clipboard</a></li>
    </ul>

    <p>Once you have scanned the QrCode, please generate a code and type it below:</p>

    <form id="validateForm" method="post">
        <input type="hidden" name="secret" id="secretInput" value="{{ secret_key }}"/>

        <div class="form-group">
            <label for="inputDevName" class="form-label mt-4">Device name</label>
            <input type="text" class="form-control" id="inputDevName"
                   placeholder="Device / Authenticator app name"
                   value="Authenticator app" minlength="1" maxlength="{{ max_name_len }}" required/>
            <small class="form-text text-muted">Please give a name to your device to identify it more easily
                later.</small>
            <div class="invalid-feedback">Please give a name to this authenticator app</div>
        </div>

        <div class="form-group">
            <label for="inputFirstCode" class="form-label mt-4">First code</label>
            <input type="text" class="form-control" id="inputFirstCode"
                   placeholder="XXXXXX"
                   maxlength="6" minlength="6" required/>
            <small class="form-text text-muted">Check that your authenticator app is working correctly by typing a first
                code.</small>
            <div class="invalid-feedback">Please enter a first code (must have 6 digits)</div>
        </div>

        <input type="submit" value="Register app" class="btn btn-primary">
    </form>

    <script src="/assets/js/clipboard_utils.js"></script>

    <script>
        const form = document.getElementById("validateForm");
        form.addEventListener("submit", async (e) => {
            e.preventDefault();
            const secret = document.getElementById("secretInput").value;
            const factorNameInput = document.getElementById("inputDevName");
            const firstCodeInput = document.getElementById("inputFirstCode");

            let fail = false;
            factorNameInput.classList.remove("is-invalid");
            if (factorNameInput.value.length === 0) {
                fail = true;
                factorNameInput.classList.add("is-invalid");
            }

            firstCodeInput.classList.remove("is-invalid");
            if (firstCodeInput.value.length != 6) {
                fail = true;
                firstCodeInput.classList.add("is-invalid");
            }


            if (fail)
                return;

            try {
                const res = await fetch("/settings/api/two_factor/save_totp_factor", {
                    method: "post",
                    headers: {
                      'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        factor_name: factorNameInput.value,
                        secret: secret,
                        first_code: firstCodeInput.value,
                    })
                });

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

                if (res.status == 200)
                    location.href = "/settings/two_factors";
            } catch(e) {
                console.error(e);
                alert("Failed to register authenticator app!");
            }
        });
    </script>
</div>

{% endblock content %}