Mirrors/wireguard_webadmin
1
0
Fork 0
mirror of https://github.com/eduardogsilva/wireguard_webadmin.git synced 2025-08-26 21:31:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Eduardo Silva
2024-02-14 16:36:01 -03:00
commit ed55724808
2505 changed files with 1136655 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
templates/accounts/create_first_user.html Normal file
View File

@@ -0,0 +1,71 @@
{% extends "base_login.html" %}
{% block 'content' %}
<div class="register-box">
<div class="register-logo">
<a href="/"><b>wireguard-webadmin</b></a>
</div>
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Create new administrator</p>
<form action="/accounts/create_first_user/" method="post">
{% csrf_token %}
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="username" name="username">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password" name="password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Retype password" name="password2">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
</div>
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
</div>
<!-- /.form-box -->
</div><!-- /.card -->
</div>
<!-- /.register-box -->
<script>
document.querySelector('input[name="username"]').addEventListener('input', function() {
this.value = this.value.toLowerCase().replace(/\s/g, '');
});
</script>
{% endblock %}
```

62
templates/accounts/login.html Normal file
View File

@@ -0,0 +1,62 @@
{% extends "base_login.html" %}
{% block 'content' %}
<div class="register-box">
<div class="register-logo">
<a href="/"><b>wireguard-webadmin</b></a>
</div>
<div class="card">
<div class="card-body register-card-body">
<form action="/accounts/login/" method="post">
{% csrf_token %}
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="username" name="username">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password" name="password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
</div>
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
</div>
</form>
</div>
<!-- /.form-box -->
</div><!-- /.card -->
</div>
<!-- /.register-box -->
<script>
document.querySelector('input[name="username"]').addEventListener('input', function() {
this.value = this.value.toLowerCase().replace(/\s/g, '');
});
</script>
{% endblock %}
```

35
templates/accounts/logout.html Normal file
View File

@@ -0,0 +1,35 @@
{% extends "base_login.html" %}
{% block 'content' %}
<div class="register-box">
<div class="register-logo">
<a href="/"><b>wireguard-webadmin</b></a>
</div>
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">You have been successfully logged out.</p>
<div class="row">
<div class="col-12">
<a href="/accounts/login/" class="btn btn-primary btn-block">Login again</a>
</div>
</div>
</div>
<!-- /.form-box -->
</div><!-- /.card -->
</div>
<!-- /.register-box -->
{% endblock %}
```

35
templates/accounts/superuser_created.html Normal file
View File

@@ -0,0 +1,35 @@
{% extends "base_login.html" %}
{% block 'content' %}
<div class="register-box">
<div class="register-logo">
<a href="/"><b>wireguard-webadmin</b></a>
</div>
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Superuser created!</p>
<div class="row">
<div class="col-12">
<a href="/accounts/login/" class="btn btn-primary btn-block">Proceed to login</a>
</div>
</div>
</div>
<!-- /.form-box -->
</div><!-- /.card -->
</div>
<!-- /.register-box -->
{% endblock %}

257
templates/base.html Normal file
View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{page_title}} | wireguard-webadmin</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Preloader -->
<div class="preloader flex-column justify-content-center align-items-center">
</div>
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="/status/" class="nav-link">Status</a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="/accounts/logout/" class="nav-link">
<i class="fas fa-sign-out-alt"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="/" class="brand-link">
<span class="brand-text font-weight-light">wireguard-webadmin</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="/" class="nav-link {% if '/' == request.path %}active{% endif %}">
<i class="fas fa-home nav-icon"></i>
<p>
Home
</p>
</a>
</li>
<li class="nav-item">
<a href="/status/" class="nav-link {% if '/status/' in request.path %}active{% endif %}">
<i class="fas fa-tachometer-alt nav-icon"></i>
<p>
Status
</p>
</a>
</li>
<li class="nav-item">
<a href="/peer/list/" class="nav-link {% if '/peer/' in request.path %}active{% endif %}">
<i class="fas fa-users-cog nav-icon"></i>
<p>
Peers
</p>
</a>
</li>
<li class="nav-item">
<a href="/console/" class="nav-link {% if '/console/' in request.path %}active{% endif %}">
<i class="fas fa-terminal nav-icon"></i>
<p>
Console
</p>
</a>
</li>
<li class="nav-item">
<a href="/user/list/" class="nav-link {% if '/user/' in request.path %}active{% endif %}">
<i class="fas fa-users nav-icon"></i>
<p>
User Manager
</p>
</a>
</li>
<li class="nav-item">
<a href="/server/manage/" class="nav-link {% if '/server/' in request.path %}active{% endif %}">
<i class="fas fa-cogs nav-icon"></i>
<p>
Server Settings
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">{{ page_title }}</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="/">Home</a></li>
{% if breadcrumb %}
<li class="breadcrumb-item active">
{%if breadcrumb.level2.href%}
<a href="{{ breadcrumb.level2.href }}">{{ breadcrumb.level2.title }}</a>
{%else%}
{{breadcrumb.level2.title}}
{%endif%}
</li>
{% endif %}
<li class="breadcrumb-item active">{{ page_title }}</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
{% block content %}{% endblock %}
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
wireguard-webadmin
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 0.0001
</div>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="/static/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="/static/AdminLTE-3.2.0/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="/static/AdminLTE-3.2.0/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="/static/AdminLTE-3.2.0/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="/static/AdminLTE-3.2.0/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="/static/AdminLTE-3.2.0/plugins/moment/moment.min.js"></script>
<script src="/static/AdminLTE-3.2.0/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="/static/AdminLTE-3.2.0/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="/static/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/AdminLTE-3.2.0/dist/js/adminlte.js"></script>
<script src="/static/AdminLTE-3.2.0/dist/js/pages/dashboard.js"></script>
{% comment %}{% if messages %}
<script>
{% for message in messages %}
{% with message.message|split:"|" as message_part %}
$(document).Toasts('create', {
{% if message.tags %}
class: 'bg-{{ message.tags}}',
{% endif %}
{% if partes|length > 1 %}
title: '{{ message_part.1 }}',
{% endif %}
delay: 750,
body: '{{ message_part.0 }}'
})
{% endwith %}
{% endfor %}
</script>
{% endif %}
{% endcomment %}
{% include "template_messages.html" %}
{% block custom_page_scripts %}
{% endblock %}
</body>
</html>

29
templates/base_login.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | Registration Page</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/AdminLTE-3.2.0/dist/css/adminlte.min.css">
</head>
<body class="hold-transition register-page">
{% block 'content' %}
{% endblock %}
<!-- jQuery -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/AdminLTE-3.2.0/dist/js/adminlte.min.js"></script>
{% include "template_messages.html" %}
</body>
</html>

56
templates/console/console.html Normal file
View File

@@ -0,0 +1,56 @@
{% extends "base.html" %}
{% block content %}
<div class="card card-primary card-outline">
<div class="card-header">
<div class="card-title">
<div class='row'>
<div class='col-md-12'>
<a href='/console/' class='btn btn-outline-primary'>Clear</a>
<a href='?command=iptables' class='btn btn-outline-primary'>iptables</a>
<a href='?command=ifconfig' class='btn btn-outline-primary'>ifconfig</a>
<a href='?command=ps' class='btn btn-outline-primary'>processes</a>
<a href='?command=wgshow' class='btn btn-outline-primary'>wg show</a>
<a href='?command=freem' class='btn btn-outline-primary'>free -m</a>
<a href='?command=top' class='btn btn-outline-primary'>top</a>
<a href='?command=route' class='btn btn-outline-primary'>route -n</a>
<a href='javascript:void(0)' class='btn btn-outline-primary' data-command='traceroute' onclick='openCommandDialog(this)'>traceroute</a>
<a href='javascript:void(0)' class='btn btn-outline-primary' data-command='ping' onclick='openCommandDialog(this)'>ping</a>
<script>
function openCommandDialog(element) {
var command = element.getAttribute('data-command');
var destination = prompt("Host or IP address to " + command);
if (destination) {
var url = "?command=" + command + "&target=" + encodeURIComponent(destination);
window.location.href = url;
}
}
</script>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class='row'>
<div class='col-md-12'>
<pre>{{command_output}}</pre>
</div>
</div>
</div>
</div>
{%comment%}<div style='white-space: pre-wrap;'>{{command_output}}</div>{%endcomment%}
{% endblock %}

46
templates/template_messages.html Normal file
View File

@@ -0,0 +1,46 @@
{% if messages %}
<script>
{% for message in messages %}
var fullMessage = "{{ message.message|escapejs }}";
var parts = fullMessage.split("|");
if (parts.length > 1) {
$(document).Toasts('create', {
{% if message.tags %}
class: 'bg-{{ message.tags }}',
{% endif %}
title: parts[0],
subtitle: '{{ message.tags }}',
body: parts[1],
delay: 10000,
autohide: true,
});
} else {
$(document).Toasts('create', {
{% if message.tags %}
class: 'bg-{{ message.tags }}',
{% endif %}
subtitle: '{{ message.tags }}',
body: parts[0],
delay: 10000,
autohide: true,
});
}
{% endfor %}
</script>
{% endif %}
{% if form.errors %}
<script>
{% for field, errors in form.errors.items %}
{% for error in errors %}
$(document).Toasts('create', {
class: 'bg-danger',
title: 'Error!',
body: '{{ error|escapejs }}',
delay: 10000,
autohide: true,
});
{% endfor %}
{% endfor %}
</script>
{% endif %}

5
templates/user_manager/list.html Normal file
View File

@@ -0,0 +1,5 @@
{% extends "base.html" %}
{% block content %}
this page is just a placeholder for the moment
{% endblock %}

5
templates/wireguard/welcome.html Normal file
View 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
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1,5 @@
{% extends "base.html" %}
{% block content %}
this page is just a placeholder for the moment
{% endblock %}