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' || authType === 'ip_address') {
                $('.totp-group').hide();
                $('.oidc-group').hide();
            } else if (authType === 'totp') {
                $('.totp-group').show();
                $('.oidc-group').hide();
            } else if (authType === 'oidc') {
                $('.totp-group').hide();
                $('.oidc-group').show();
            } else {
                $('.totp-group').hide();
                $('.oidc-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" id="btnShowQr"><i class="fas fa-qrcode"></i> {% trans 'View QR Code' %}</button>');
        
        $('#div_id_totp_secret').append(btnShowQr);
        $('#div_id_totp_secret').append(qrContainer);

        $('#btnShowQr').click(function (e) {
            e.preventDefault();
            var secret = $('#id_totp_secret').val();
            var name = $('#id_name').val() || 'Gatekeeper';
            
            if (!secret) {
                alert("{% trans 'Please enter a TOTP Secret first to generate the QR code.' %}");
                return;
            }
            
            var url = '/gatekeeper/auth_method/qr/?secret=' + encodeURIComponent(secret) + '&name=' + encodeURIComponent(name);
            $('#qrCodeImg').attr('src', url);
            $('#qrCodeContainer').slideToggle();
        });
    });
</script>
{% endblock %}