wireguard_webadmin/templates/wireguard/wireguard_manage_peer.html

{% extends "base.html" %}

{% block content %}

<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">Configure Peer</h3>
    </div>
    <form method="post">
        {% csrf_token %}
        <div class="card-body row">
            <div class="col-lg-6">
                <!-- Name -->
                <div class="form-group">
                    <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
                    <input type="text" class="form-control" id="{{ form.name.id_for_label }}" name="{{ form.name.html_name }}" placeholder="Enter Name" value="{{ form.name.value|default_if_none:'' }}">
                </div>

                <!-- Persistent Keepalive -->
                <div class="form-group">
                    <label for="{{ form.persistent_keepalive.id_for_label }}">{{ form.persistent_keepalive.label }}</label>
                    <input type="number" class="form-control" id="{{ form.persistent_keepalive.id_for_label }}" name="{{ form.persistent_keepalive.html_name }}" placeholder="Persistent Keepalive" value="{{ form.persistent_keepalive.value|default_if_none:'' }}" required>
                </div>

                <!-- Public Key -->
                <div class="form-group">
                    <label for="{{ form.public_key.id_for_label }}">{{ form.public_key.label }}</label>
                    <input type="text" class="form-control" id="{{ form.public_key.id_for_label }}" name="{{ form.public_key.html_name }}" placeholder="Public Key" value="{{ form.public_key.value|default_if_none:'' }}" required>
                </div>

                <!-- Private Key -->
                <div class="form-group">
                    <label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary toggle-password" type="button"><i class="fas fa-eye"></i></button>
                        </div>
                    </div>
                </div>

                <!-- Pre-Shared Key -->
                <div class="form-group">
                    <label for="{{ form.pre_shared_key.id_for_label }}">{{ form.pre_shared_key.label }}</label>
                    <input type="text" class="form-control" id="{{ form.pre_shared_key.id_for_label }}" name="{{ form.pre_shared_key.html_name }}" placeholder="Pre-Shared Key" value="{{ form.pre_shared_key.value|default_if_none:'' }}" required>
                </div>

            </div>
            <div class="col-lg-6">
                <label>IP Addresses</label>
                {% for ip_address in peer_ip_list %}
                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
                    <p>

                        {% if ip_address.missing_from_wireguard %}
                            <a href='/peer/manage_ip_address/?ip={{ ip_address.uuid }}' class='bg-warning' title="This address does not appear in the wg show command output, likely indicating that another peer has an IP overlapping this network or that the configuration file is outdated.">
                                <i class="fas fa-network-wired"></i>
                                {{ ip_address}}
                            </a>
                        {% else %}
                            <a href="/peer/manage_ip_address/?ip={{ ip_address.uuid }}">
                                <i class="fas fa-network-wired"></i>
                                {{ ip_address}}
                            </a>
                        {% endif %}
                        
                        
                    </p>
                    <p class="d-flex flex-column text-right small">
                      Priority: {{ ip_address.priority }}
                    </p>
                  </div>
                {% endfor %}


            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary">Submit</button>
            <a href="/peer/manage_ip_address/?peer={{ current_peer.uuid }}" class="btn btn-outline-primary">Add IP Address</a>
            <a class="btn btn-outline-secondary" href="/peer/list/">Back</a>
            <a href='javascript:void(0)' class='btn btn-outline-danger' data-command='delete' onclick='openCommandDialog(this)'>Delete Peer</a>

        </div>
    </form>
</div>
{% endblock %}

{% block custom_page_scripts %}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var alertShown = false; 
        var fieldsToWatch = ['id_public_key', 'id_pre_shared_key', 'id_private_key'];
        function showAlert() {
            if (!alertShown) { 
                $(document).Toasts('create', {
                    class: 'bg-warning', 
                    title: 'Action Required!',
                    body: 'When manually updating the "Public Key", "Pre-Shared Key", or "Private Key", please ensure the configuration is correct.',
                    
                });
                alertShown = true; 
            }
        }

        
        fieldsToWatch.forEach(function(fieldId) {
            var field = document.getElementById(fieldId);
            if (field) {
                field.addEventListener('change', showAlert);
            }
        });
    });
</script>


<script>
    function openCommandDialog(element) {
        var command = element.getAttribute('data-command');
        var confirmation = prompt("Please type 'delete' to remove peer configuration.");
        if (confirmation) {
            var url = "?peer={{ current_peer.uuid }}&action=delete&confirmation=" + encodeURIComponent(confirmation);
            window.location.href = url;
        }
    }
</script>
    
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('.toggle-password').addEventListener('click', function () {
            let passwordInput = document.getElementById('{{ form.private_key.id_for_label }}');
            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>';
        });
    
        document.getElementById('{{ form.private_key.id_for_label }}').addEventListener('keypress', function () {
            this.setAttribute('type', 'text');
        });
    });
</script>

    
{% endblock %}