mirror of
https://github.com/eduardogsilva/wireguard_webadmin.git
synced 2025-04-19 08:55:12 +00:00
207 lines
10 KiB
HTML
207 lines
10 KiB
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">
|
|
<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 Peer section of wg{{ current_peer.wireguard_instance.instance_id }}.conf"></i>
|
|
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" >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 %}
|
|
Main ip address
|
|
{% else %}
|
|
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>
|
|
Client Routing Configuration
|
|
</label>
|
|
<a class="btn btn-outline-primary btn-xs" href="/peer/manage_ip_address/?peer={{ current_peer.uuid }}&config=client" >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('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('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">
|
|
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 %}
|
|
Main ip address
|
|
{% else %}
|
|
Priority: {{ ip_address.priority }}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</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 %}
|