mirror of
https://github.com/eduardogsilva/wireguard_webadmin.git
synced 2025-08-27 05:41:15 +00:00
Initial commit
This commit is contained in:
Eduardo Silva
5
templates/wireguard/welcome.html
Normal file
5
templates/wireguard/welcome.html
Normal file
@@ -0,0 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
this page is just a placeholder for the moment
|
||||
{% endblock %}
|
||||
66
templates/wireguard/wireguard_manage_ip.html
Normal file
66
templates/wireguard/wireguard_manage_ip.html
Normal file
@@ -0,0 +1,66 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class='row'>
|
||||
<div class='col-lg-4'>
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Configure Peer Allowed IP</h3>
|
||||
</div>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<div class="card-body row">
|
||||
<div class="col-lg-12">
|
||||
<!-- Allowed IP -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.allowed_ip.id_for_label }}">{{ form.allowed_ip.label }}</label>
|
||||
<input type="text" class="form-control" id="{{ form.allowed_ip.id_for_label }}" name="{{ form.allowed_ip.html_name }}" placeholder="Enter Allowed IP" value="{{ form.allowed_ip.value|default_if_none:'' }}" required>
|
||||
</div>
|
||||
|
||||
<!-- Netmask -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.netmask.id_for_label }}">{{ form.netmask.label }}</label>
|
||||
<select class="form-control" id="{{ form.netmask.id_for_label }}" name="{{ form.netmask.html_name }}">
|
||||
{% for value, display in form.netmask.field.choices %}
|
||||
<option value="{{ value }}" {% if form.netmask.value|stringformat:"s" == value|stringformat:"s" %}selected{% endif %}>{{ display }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Priority -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.priority.id_for_label }}">{{ form.priority.label }}</label>
|
||||
<input type="number" class="form-control" id="{{ form.priority.id_for_label }}" name="{{ form.priority.html_name }}" placeholder="Priority" value="{{ form.priority.value|default_if_none:'' }}" required>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<a class="btn btn-outline-secondary" href="/peer/manage/?peer={{ current_peer.uuid }}">Back</a>
|
||||
{% if current_ip %}<a href='javascript:void(0)' class='btn btn-outline-danger' data-command='delete' onclick='openCommandDialog(this)'>Delete IP</a>{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block custom_page_scripts %}
|
||||
|
||||
<script>
|
||||
function openCommandDialog(element) {
|
||||
var command = element.getAttribute('data-command');
|
||||
var confirmation = prompt("Please type 'delete' to remove this IP address.");
|
||||
if (confirmation) {
|
||||
var url = "?ip={{ current_ip.uuid }}&action=delete&confirmation=" + encodeURIComponent(confirmation);
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
125
templates/wireguard/wireguard_manage_peer.html
Normal file
125
templates/wireguard/wireguard_manage_peer.html
Normal file
@@ -0,0 +1,125 @@
|
||||
{% 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>
|
||||
<input type="text" 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
146
templates/wireguard/wireguard_manage_server.html
Normal file
146
templates/wireguard/wireguard_manage_server.html
Normal file
@@ -0,0 +1,146 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="card card-primary card-outline">
|
||||
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
{% for wgconf in wireguard_instances %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {%if wgconf == current_instance%}active{%endif%}" href="/server/manage/?uuid={{wgconf.uuid}}" role="tab" >
|
||||
wg{{wgconf.instance_id}} {%if wgconf.name %}({{wgconf.name}}){%endif%}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {%if not current_instance%}active{%endif%}" href="/server/manage/?action=create" role="tab" >Create Instance</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="tab-content" id="custom-content-below-tabContent">
|
||||
<div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<div class="card-body row">
|
||||
<div class="col-lg-6">
|
||||
<!-- Line 1: Name and Instance ID -->
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<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>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="{{ form.instance_id.id_for_label }}">{{ form.instance_id.label }}</label>
|
||||
<input type="number" class="form-control" id="{{ form.instance_id.id_for_label }}" name="{{ form.instance_id.html_name }}" placeholder="Instance ID" value="{{ form.instance_id.value|default_if_none:'' }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Line 2: Hostname and Listen Port -->
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="{{ form.hostname.id_for_label }}">{{ form.hostname.label }}</label>
|
||||
<input type="text" class="form-control" id="{{ form.hostname.id_for_label }}" name="{{ form.hostname.html_name }}" placeholder="Hostname" value="{{ form.hostname.value|default_if_none:'' }}" required>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="{{ form.listen_port.id_for_label }}">{{ form.listen_port.label }}</label>
|
||||
<input type="number" class="form-control" id="{{ form.listen_port.id_for_label }}" name="{{ form.listen_port.html_name }}" placeholder="Listen Port" value="{{ form.listen_port.value|default_if_none:'' }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Line 3: Private Key and Persistent Keepalive -->
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label>
|
||||
<input type="text" 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>
|
||||
<div class="form-group col-md-6">
|
||||
<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>
|
||||
</div>
|
||||
<!-- Line 4: Address and Netmask -->
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="{{ form.address.id_for_label }}">{{ form.address.label }}</label>
|
||||
<input type="text" class="form-control" id="{{ form.address.id_for_label }}" name="{{ form.address.html_name }}" placeholder="Address" value="{{ form.address.value|default_if_none:'' }}" required>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="{{ form.netmask.id_for_label }}">{{ form.netmask.label }}</label>
|
||||
<select class="form-control" id="{{ form.netmask.id_for_label }}" name="{{ form.netmask.html_name }}">
|
||||
{% for value, display in form.netmask.field.choices %}
|
||||
<option value="{{ value }}" {% if form.netmask.value == value %}selected{% endif %}>{{ display }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<!-- Line 1: Post Up -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.post_up.id_for_label }}">{{ form.post_up.label }}</label>
|
||||
<textarea class="form-control" id="{{ form.post_up.id_for_label }}" name="{{ form.post_up.html_name }}" placeholder="Post Up" style="height: 150px;">{{ form.post_up.value|default_if_none:'' }}</textarea>
|
||||
</div>
|
||||
<!-- Line 2: Post Down -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.post_down.id_for_label }}">{{ form.post_down.label }}</label>
|
||||
<textarea class="form-control" id="{{ form.post_down.id_for_label }}" name="{{ form.post_down.html_name }}" placeholder="Post Down" style="height: 150px;">{{ form.post_down.value|default_if_none:'' }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
{% if current_instance.uuid %}
|
||||
<a href='javascript:void(0)' class='btn btn-outline-danger' data-command='delete' onclick='openCommandDialog(this)'>Delete Configuration</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openCommandDialog(element) {
|
||||
var command = element.getAttribute('data-command');
|
||||
var confirmation = prompt("Please type 'delete wg{{ current_instance.instance_id }}' to remove the configuration.");
|
||||
if (confirmation) {
|
||||
var url = "?uuid={{current_instance.uuid}}&action=delete&confirmation=" + encodeURIComponent(confirmation);
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block custom_page_scripts %}
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var alertShown = false;
|
||||
var fieldsToWatch = ['id_address', 'id_listen_port', 'id_instance_id', 'netmask'];
|
||||
function showAlert() {
|
||||
if (!alertShown) {
|
||||
$(document).Toasts('create', {
|
||||
class: 'bg-warning',
|
||||
title: 'Action Required!',
|
||||
body: 'When manually updating the "IP Address", "Netmask", "Listen Port", or "Instance ID", it is essential that you also manually review and update the "PostUp" and "PostDown" scripts to ensure that the new configuration matches your firewall.',
|
||||
|
||||
});
|
||||
alertShown = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
fieldsToWatch.forEach(function(fieldId) {
|
||||
var field = document.getElementById(fieldId);
|
||||
if (field) {
|
||||
field.addEventListener('change', showAlert);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
90
templates/wireguard/wireguard_peer_list.html
Normal file
90
templates/wireguard/wireguard_peer_list.html
Normal file
@@ -0,0 +1,90 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% if wireguard_instances %}
|
||||
<div class="card card-primary card-outline">
|
||||
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
{% for wgconf in wireguard_instances %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {%if wgconf == current_instance%}active{%endif%}" href="/peer/list/?uuid={{wgconf.uuid}}" role="tab" >
|
||||
wg{{wgconf.instance_id}} {%if wgconf.name %}({{wgconf.name}}){%endif%}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
<div class="tab-content" id="custom-content-below-tabContent">
|
||||
<div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
|
||||
<div class="row">
|
||||
{% for peer in peer_list %}
|
||||
<div class="col-md-6">
|
||||
<div class="callout callout-success">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<h5>{% if peer.name %}{{ peer.name}}{% else %}{{ peer.public_key }}{% endif %}</h5>
|
||||
<a href="/peer/manage/?peer={{ peer.uuid }}"><i class="far fa-edit"></i></a>
|
||||
</div>
|
||||
{% comment %}This needs to be improved{% endcomment %}
|
||||
<p>{% for address in peer.peerallowedip_set.all %}{% if address.priority == 0 %}
|
||||
{% if address.missing_from_wireguard %}
|
||||
<a href='#' 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.">{{ address }}</a>
|
||||
{% else %}
|
||||
{{ address }}
|
||||
{% endif %}
|
||||
{% endif %}{% endfor %}
|
||||
|
||||
{% for address in peer.peerallowedip_set.all %}{% if address.priority >= 1 %}
|
||||
{% if address.missing_from_wireguard %}
|
||||
<a href='#' 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.">{{ address }}</a>
|
||||
{% else %}
|
||||
{{ address }}
|
||||
{% endif %}
|
||||
{% endif %}{% endfor %}</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="btn btn-primary" href="/peer/manage/?instance={{ current_instance.uuid}}">Create Peer</a>
|
||||
<a class="btn btn-outline-primary disabled" href="/peer/import_peers/?instance={{ current_instance.uuid}}" title='teste'>Import peers</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openCommandDialog(element) {
|
||||
var command = element.getAttribute('data-command');
|
||||
var confirmation = prompt("Please type 'delete wg{{ current_instance.instance_id }}' to remove the configuration.");
|
||||
if (confirmation) {
|
||||
var url = "?uuid={{current_instance.uuid}}&action=delete&confirmation=" + encodeURIComponent(confirmation);
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% else %}
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<h4 class="alert-heading">No WireGuard Instances Found</h4>
|
||||
<p>There are no WireGuard instances configured. You can add a new instance by clicking the button below.</p>
|
||||
</div>
|
||||
<p>
|
||||
<a href="/server/manage/" class="btn btn-primary">Add WireGuard Instance</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block custom_page_scripts %}
|
||||
{% endblock %}
|
||||
5
templates/wireguard/wireguard_status.html
Normal file
5
templates/wireguard/wireguard_status.html
Normal file
@@ -0,0 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
this page is just a placeholder for the moment
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user