wireguard_webadmin/templates/wireguard/wireguard_manage_server.html

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

{% block content %}
    <div class="row">
        <div class="{% if form_size %}{{ form_size }}{% else %}col-lg-12{% 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">
                        {% crispy form %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block custom_page_scripts %}
    <script>
        function openCommandDialog(element) {
            var command = element.getAttribute('data-command');
            var confirmation = prompt("{{ delete_confirmation_message }}");
            if (confirmation) {
                var url = "?uuid={{ instance.uuid }}&action=delete&confirmation=" + encodeURIComponent(confirmation);
                window.location.href = url;
            }
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let passwordInput = document.getElementById('id_private_key');

            if (passwordInput) {
                let groupDiv = passwordInput.parentNode;
                if (!groupDiv.classList.contains('input-group')) {
                    let newGroup = document.createElement('div');
                    newGroup.className = 'input-group';

                    passwordInput.parentNode.insertBefore(newGroup, passwordInput);
                    newGroup.appendChild(passwordInput);

                    let appendDiv = document.createElement('div');
                    appendDiv.className = 'input-group-append';

                    let btn = document.createElement('button');
                    btn.className = 'btn btn-outline-secondary toggle-password-btn';
                    btn.type = 'button';
                    btn.innerHTML = '<i class="fas fa-eye"></i>';

                    appendDiv.appendChild(btn);
                    newGroup.appendChild(appendDiv);

                    btn.addEventListener('click', function () {
                        let passStatus = passwordInput.getAttribute('type') === 'password';
                        passwordInput.setAttribute('type', passStatus ? 'text' : 'password');
                        this.innerHTML = passStatus ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
                    });
                }
            }
        });
    </script>
{% endblock %}