wireguard_webadmin/templates/wireguard/wireguard_manage_peer.html

{% extends "base.html" %}
{% load i18n %}

{% block content %}

<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">{% trans 'Peer Configuration' %}</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="{% trans '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="{% trans '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="{% trans '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="{% trans 'Private Key' %}" value="{{ form.private_key.value|default_if_none:'' }}">
                        <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="{% trans 'Pre-Shared Key' %}" value="{{ form.pre_shared_key.value|default_if_none:'' }}" required>
                </div>

            </div>
            <div class="col-lg-6">

            <div class="row mt-3">
                <div class="col-lg-12">
                    <div class="d-flex justify-content-between align-items-center ">
                            <label>
                                <i class="fas fa-chart-area"></i>
                                {% trans 'Peer Traffic' %}
                            </label>
                            <div class="btn-group" role="group" aria-label="Graph interval">
                                <a href="#" data-period="1h" class="btn btn-outline-primary btn-xs">1h</a>
                                <a href="#" data-period="3h" class="btn btn-outline-primary btn-xs">3h</a>
                                <a href="#" data-period="6h" class="btn btn-outline-primary btn-xs">6h</a>
                                <a href="#" data-period="1d" class="btn btn-outline-primary btn-xs">1d</a>
                                <a href="#" data-period="7d" class="btn btn-outline-primary btn-xs">7d</a>
                                <a href="#" data-period="30d" class="btn btn-outline-primary btn-xs">1m</a>
                                <a href="#" data-period="90d" class="btn btn-outline-primary btn-xs">3m</a>
                                <a href="#" data-period="180d" class="btn btn-outline-primary btn-xs">6m</a>
                                <a href="#" data-period="365d" class="btn btn-outline-primary btn-xs">1y</a>
                            </div>
                    </div>

                    <center>
                        <img id="graphImg" src="/rrd/graph/?peer={{ current_peer.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}" class="img-fluid" alt="{% trans 'No traffic history, please wait a few minutes' %}" onerror="this.onerror=null; this.style.display='none'; this.insertAdjacentHTML('afterend', this.alt);">
                    </center>

                    <div class="d-flex justify-content-between align-items-center border-bottom mb-3" style="padding-top: 16px;"></div>
                </div>
            </div>


                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <label>
                                <i class="fas fa-info-circle" title="{% trans 'AllowedIPs at Peer section of wg' %}{{ current_peer.wireguard_instance.instance_id }}.conf"></i>
                                {% trans 'Peer IP Addresses and networks' %}
                            </label>
                            <a class="btn btn-outline-primary btn-xs" href="/peer/manage_ip_address/?peer={{ current_peer.uuid }}&config=server" >{% trans 'Add IP Address' %}</a>
                        </div>
                    
                        {% for ip_address in peer_ip_list %}
                            <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
                                <p>
                                    <a href="/peer/manage_ip_address/?ip={{ ip_address.uuid }}">
                                        <i class="fas fa-network-wired"></i>
                                        {{ ip_address}}
                                    </a>
                                </p>
                                <p class="d-flex flex-column text-right small">
                                    {% if ip_address.priority == 0 %}
                                        {% trans 'Main ip address' %}
                                    {% else %}
                                        {% trans 'Priority' %}: {{ ip_address.priority }}
                                    {% endif %}
                                </p>
                            </div>
                        {% endfor %}

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <label>
                                <i class="fas fa-info-circle" title="AllowedIPs at client configuration file"></i> 
                                {% trans 'Client Routing Configuration' %}
                            </label>
                            <a class="btn btn-outline-primary btn-xs" href="/peer/manage_ip_address/?peer={{ current_peer.uuid }}&config=client" >{% trans 'Add Client route' %}</a>
                        </div>
                        <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
                                <p>
                                    <a href="#"
                                       {% if peer_client_ip_list %}
                                            onclick="alert('{% trans 'The client is not configured to use the VPN as the default gateway.\n\nOnly the specific networks listed below are routed through the VPN.\n\nNote: These routes are not automatically pushed to the client. You will need to manually update the client configuration file to reflect these settings.' %}');"
                                       style="text-decoration: line-through;"
                                       {% else %}
                                            onclick="alert('{% trans 'The client is configured to use the VPN as the default gateway. \n\nThis setting routes all client internet traffic through the VPN, enhancing privacy and security across all connections.' %}');"
                                        {% endif %}
                                        
                                    >
                                        <i class="fas fa-network-wired"></i>
                                        0.0.0.0/0, ::/0
                                    </a>
                                </p>
                                <p class="d-flex flex-column text-right small">
                                    {% trans 'default route' %}
                                </p>
                        </div>


                        {% for ip_address in peer_client_ip_list %}
                            <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
                                <p>
                                    <a href="/peer/manage_ip_address/?ip={{ ip_address.uuid }}">
                                        <i class="fas fa-network-wired"></i>
                                        {{ ip_address}}
                                    </a>
                                </p>
                                <p class="d-flex flex-column text-right small">
                                    {% if ip_address.priority == 0 %}
                                        {% trans 'Main ip address' %}
                                    {% else %}
                                        {% trans 'Priority' %}: {{ ip_address.priority }}
                                    {% endif %}
                                </p>
                            </div>
                        {% endfor %}

                    </div>
                </div>




            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary">{% trans 'Save' %}</button>
            <a href="/peer/manage_ip_address/?peer={{ current_peer.uuid }}" class="btn btn-outline-primary">{% trans 'Add IP Address' %}</a>
            <a class="btn btn-outline-secondary" href="/peer/list/?uuid={{ current_peer.wireguard_instance.uuid }}#peer-{{ current_peer.public_key }}">{% trans 'Back' %}</a>
            <a href='javascript:void(0)' class='btn btn-outline-danger' data-command='delete' onclick='openCommandDialog(this)'>{% trans '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: '{% trans 'Action Required!' %}',
                    body: '{% trans '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("{% trans '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>


<script>
document.addEventListener('DOMContentLoaded', function(){
    var buttons = document.querySelectorAll('.btn-group a');
    buttons.forEach(function(button){
        button.addEventListener('click', function(e){
            e.preventDefault();
            var period = this.getAttribute('data-period');
            var newSrc = '/rrd/graph/?peer={{ current_peer.uuid }}&period=' + period;
            var imgElement = document.getElementById('graphImg');
            if(imgElement){
                imgElement.setAttribute('src', newSrc);
            }
        });
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form[method="post"]');
    if (form) {
        form.addEventListener('submit', function(e) {
            var privateKeyField = document.getElementById('{{ form.private_key.id_for_label }}');
            if (privateKeyField && privateKeyField.value.trim() === '') {
                var confirmed = confirm('{% trans "The private key is empty. The peer’s configuration file and QR code will be generated without the private key.\n It must be inserted manually when importing.\n\n Do you want to continue?" %}');
                if (!confirmed) {
                    e.preventDefault();
                    return false;
                }
            }
        });
    }
});
</script>

    
{% endblock %}