wireguard_webadmin/templates/gatekeeper/gatekeeper_auth_method_form.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block content %}
    <div class='row'>
        <div class='{% if form_size %}{{ form_size }}{% else %}col-lg-6{% endif %}'>
            <div class="card card-primary card-outline">
                {% if page_title %}
                    <div class="card-header">
                        <h3 class="card-title">{{ page_title }}</h3>
                    </div>
                {% endif %}
                <div class="card-body row">
                    <div class="col-lg-12">
                            {% csrf_token %}
                            {% crispy form %}
                    </div>
                </div>
            </div>
        </div>
    
    {% if form_description %}
        <div class='{% if form_description.size %}{{ form_description.size }}{% else %}col-lg-6{% endif %}'>
            <div class="card card-primary card-outline">
                
                <div class="card-body row">
                    <div class="col-lg-12">
                        {{ form_description.content|safe }}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    
    </div>
{% endblock %}

{% block custom_page_scripts %}
<script>
    $(document).ready(function () {
        function toggleFields() {
            var authType = $('#id_auth_type').val();
            if (authType === 'local_password') {
                $('.totp-group').hide();
                $('.oidc-group').hide();
                $('.expiration-group').show();
            } else if (authType === 'totp') {
                $('.totp-group').show();
                $('.oidc-group').hide();
                $('.expiration-group').hide();
            } else if (authType === 'oidc') {
                $('.totp-group').hide();
                $('.oidc-group').show();
                $('.expiration-group').show();
            } else {
                $('.totp-group').hide();
                $('.oidc-group').hide();
                $('.expiration-group').hide();
            }
        }

        $('#id_auth_type').change(toggleFields);
        toggleFields();

        var qrContainer = $('<div class="mt-3 text-center" style="display:none;" id="qrCodeContainer"><img id="qrCodeImg" src="" class="img-fluid" style="border: 2px solid #ddd; border-radius: 8px; max-width: 250px;"/></div>');
        var btnShowQr = $('<button type="button" class="btn btn-sm btn-info mt-2 mr-1" id="btnShowQr"><i class="fas fa-qrcode"></i> {% trans 'View QR Code' %}</button>');
        var btnGenerate = $('<button type="button" class="btn btn-sm btn-secondary mt-2" id="btnGenerateTotp"><i class="fas fa-sync-alt"></i> {% trans 'Generate TOTP Secret' %}</button>');

        $('#div_id_totp_secret').append(btnShowQr);
        $('#div_id_totp_secret').append(btnGenerate);
        $('#div_id_totp_secret').append(qrContainer);

        function generateBase32Secret() {
            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
            var randomBytes = new Uint8Array(32);
            window.crypto.getRandomValues(randomBytes);
            var result = '';
            for (var digit = 0; digit < 32; digit++) {
                result += chars[randomBytes[digit] % 32];
            }
            return result;
        }

        $('#btnGenerateTotp').click(function (e) {
            e.preventDefault();
            $('#id_totp_secret').val(generateBase32Secret());
            $('#qrCodeContainer').slideUp();
        });

        var _qrObjectUrl = null;

        $('#btnShowQr').click(function (e) {
            e.preventDefault();

            if ($('#qrCodeContainer').is(':visible')) {
                $('#qrCodeContainer').slideUp();
                return;
            }

            var secret = $('#id_totp_secret').val();
            var name = $('#id_display_name').val() || 'Gatekeeper';

            if (!secret) {
                alert("{% trans 'Please enter a TOTP Secret first to generate the QR code.' %}");
                return;
            }

            var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
            var formData = new FormData();
            formData.append('secret', secret);
            formData.append('name', name);
            formData.append('csrfmiddlewaretoken', csrfToken);

            fetch('/gatekeeper/auth_method/qr/', { method: 'POST', body: formData })
                .then(function (response) {
                    if (!response.ok) throw new Error('Failed');
                    return response.blob();
                })
                .then(function (blob) {
                    if (_qrObjectUrl) { URL.revokeObjectURL(_qrObjectUrl); }
                    _qrObjectUrl = URL.createObjectURL(blob);
                    $('#qrCodeImg').attr('src', _qrObjectUrl);
                    $('#qrCodeContainer').slideDown();
                })
                .catch(function () {
                    alert("{% trans 'Error generating QR code.' %}");
                });
        });
    });
</script>
{% endblock %}