sysopsandClaude Sonnet 5
388a8377cd
Redact the private key from the /servers/:id/keypair response body - the UI never rendered it, but the raw key was still returned over the wire (json:"private_key,omitempty" plus explicit clearing before the JSON response). Add a new import flow: an admin can upload an OPNsense config.xml, preview the WireGuard servers/clients it defines (editable before committing), and confirm to create the corresponding Server/ServerSetting/Client records. Nothing is auto-applied - no wg-quick/systemctl call happens, matching the existing manual "Apply" step for regular server management. Schema verified against OPNsense core (WireGuard has been in core since 22.1, not a plugin) - see opnsense/parse.go for the confirmed tag reference. Public keys are always re-derived from private keys rather than trusted from the export; client public-key collisions against existing store data are skipped and reported per-batch rather than aborting the whole import. Since OPNsense stores DNS/MTU per-server and keepalive per-client, but this fork only had those app-wide (GlobalSetting), extended ServerSetting with DNSServers/MTU and Client with PersistentKeepalive as optional overrides that fall back to the global default when unset - existing single-server behavior is unchanged when the override is empty/zero. Manual UI editing of the per-client keepalive override outside the import flow is left for a later pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019VjwLYRA87o8m9a9zztgs3
1007 lines
47 KiB
HTML
1007 lines
47 KiB
HTML
{{define "title"}}
|
|
All Servers
|
|
{{end}}
|
|
|
|
{{define "top_css"}}
|
|
{{end}}
|
|
|
|
{{define "username"}}
|
|
{{ .username }}
|
|
{{end}}
|
|
|
|
{{define "page_title"}}
|
|
All Servers
|
|
{{end}}
|
|
|
|
{{define "page_content"}}
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row" id="servers-list">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade" id="modal_new_server">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Add new server</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form name="frm_new_server" id="frm_new_server">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="_server_id" class="control-label">ID</label>
|
|
<input type="text" class="form-control" id="_server_id" name="_server_id"
|
|
placeholder="e.g. wg-home">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_server_name" class="control-label">Name</label>
|
|
<input type="text" class="form-control" id="_server_name" name="_server_name"
|
|
placeholder="e.g. WGhome">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_server_interface" class="control-label">Interface</label>
|
|
<input type="text" class="form-control" id="_server_interface" name="_server_interface"
|
|
placeholder="e.g. wg-home">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_server_addresses" class="control-label">Addresses</label>
|
|
<input type="text" class="form-control" id="_server_addresses" name="_server_addresses"
|
|
placeholder="e.g. 10.20.22.0/24, fd00::/64">
|
|
<small class="form-text text-muted">Comma-separated list of address ranges.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_server_listen_port" class="control-label">Listen Port</label>
|
|
<input type="text" class="form-control" id="_server_listen_port" name="_server_listen_port"
|
|
placeholder="e.g. 51822">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-success">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
|
|
<div class="modal fade" id="modal_server_settings">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Server Settings</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form name="frm_server_settings" id="frm_server_settings">
|
|
<div class="modal-body">
|
|
<input type="hidden" id="_settings_server_id" name="_settings_server_id">
|
|
<div class="form-group">
|
|
<label for="_settings_endpoint_address" class="control-label">Endpoint Address</label>
|
|
<input type="text" class="form-control" id="_settings_endpoint_address"
|
|
placeholder="e.g. vpn.example.com or vpn.example.com:51822">
|
|
<small class="form-text text-muted">Leave empty to fall back to the app-wide default endpoint.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_settings_config_file_path" class="control-label">Config File Path</label>
|
|
<input type="text" class="form-control" id="_settings_config_file_path"
|
|
placeholder="/etc/wireguard/wg-home.conf">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_settings_firewall_mark" class="control-label">Firewall Mark</label>
|
|
<input type="text" class="form-control" id="_settings_firewall_mark" placeholder="0xca6c">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_settings_table" class="control-label">Table</label>
|
|
<input type="text" class="form-control" id="_settings_table" placeholder="auto">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_settings_lan_interface" class="control-label">LAN Interface</label>
|
|
<input type="text" class="form-control" id="_settings_lan_interface" placeholder="e.g. eth0, br-lan">
|
|
<small class="form-text text-muted">Optional. Used only for the Firewall Preview - lets peers forward to this interface.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_settings_dns_servers" class="control-label">DNS Servers (override)</label>
|
|
<input type="text" class="form-control" id="_settings_dns_servers"
|
|
placeholder="e.g. 1.1.1.1, 8.8.8.8">
|
|
<small class="form-text text-muted">Comma-separated. Leave empty to fall back to the app-wide default DNS servers.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_settings_mtu" class="control-label">MTU (override)</label>
|
|
<input type="text" class="form-control" id="_settings_mtu" placeholder="e.g. 1420">
|
|
<small class="form-text text-muted">Leave empty to fall back to the app-wide default MTU.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-success">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
|
|
<div class="modal fade" id="modal_server_interface">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Server Interface</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form name="frm_server_interface" id="frm_server_interface">
|
|
<div class="modal-body">
|
|
<input type="hidden" id="_iface_server_id" name="_iface_server_id">
|
|
<div class="form-group">
|
|
<label for="_iface_addresses" class="control-label">Server Interface Addresses</label>
|
|
<input type="text" class="form-control" id="_iface_addresses"
|
|
placeholder="e.g. 10.20.22.1/24, fd00::1/64">
|
|
<small class="form-text text-muted">Comma-separated list of address ranges.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_iface_listen_port" class="control-label">Listen Port</label>
|
|
<input type="text" class="form-control" id="_iface_listen_port" name="_iface_listen_port"
|
|
placeholder="e.g. 51822">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_iface_pre_up" class="control-label">Pre Up Script</label>
|
|
<input type="text" class="form-control" id="_iface_pre_up" placeholder="Pre Up Script">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_iface_post_up" class="control-label">Post Up Script</label>
|
|
<input type="text" class="form-control" id="_iface_post_up" placeholder="Post Up Script">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_iface_pre_down" class="control-label">Pre Down Script</label>
|
|
<input type="text" class="form-control" id="_iface_pre_down" placeholder="Pre Down Script">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_iface_post_down" class="control-label">Post Down Script</label>
|
|
<input type="text" class="form-control" id="_iface_post_down" placeholder="Post Down Script">
|
|
</div>
|
|
<hr>
|
|
<div class="form-group">
|
|
<label class="control-label">Public Key</label>
|
|
<input type="text" class="form-control" id="_iface_public_key" disabled>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-danger btn-sm" id="btn_regenerate_keypair">
|
|
Regenerate Keypair
|
|
</button>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-success">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
|
|
<div class="modal fade" id="modal_import_opnsense">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Import from OPNsense</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Upload an OPNsense <code>config.xml</code>. This only stages the data below for
|
|
you to review and edit - nothing is written until you click "Confirm Import", and the resulting
|
|
servers are never started automatically (use the normal per-server "Apply" flow for that).</p>
|
|
<div class="form-inline mb-2">
|
|
<input type="file" id="_opnsense_file" accept=".xml">
|
|
<button type="button" class="btn btn-primary btn-sm ml-2" id="btn_opnsense_preview">Preview</button>
|
|
</div>
|
|
<div id="_opnsense_preview_area"></div>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" id="btn_opnsense_confirm" style="display:none;">Confirm Import</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
|
|
<div class="modal fade" id="modal_firewall">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Firewall Rules (nftables) - <span id="_fw_server_label"></span></h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="_fw_server_id">
|
|
|
|
<table class="table table-sm" id="_fw_rules_table">
|
|
<thead>
|
|
<tr>
|
|
<th>On</th><th>Chain</th><th>Proto</th><th>Port</th><th>Source</th><th>Action</th><th>Comment</th><th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="_fw_rules_tbody"></tbody>
|
|
</table>
|
|
|
|
<form id="frm_firewall_rule" class="form-inline">
|
|
<select class="form-control form-control-sm mr-1 mb-1" id="_fw_direction">
|
|
<option value="input">input</option>
|
|
<option value="forward">forward</option>
|
|
</select>
|
|
<select class="form-control form-control-sm mr-1 mb-1" id="_fw_protocol">
|
|
<option value="">any</option>
|
|
<option value="tcp">tcp</option>
|
|
<option value="udp">udp</option>
|
|
</select>
|
|
<input type="text" class="form-control form-control-sm mr-1 mb-1" id="_fw_port" placeholder="port(s) e.g. 8080" style="width:9em">
|
|
<input type="text" class="form-control form-control-sm mr-1 mb-1" id="_fw_source" placeholder="source CIDR (optional)" style="width:11em">
|
|
<select class="form-control form-control-sm mr-1 mb-1" id="_fw_action">
|
|
<option value="accept">accept</option>
|
|
<option value="drop">drop</option>
|
|
<option value="reject">reject</option>
|
|
</select>
|
|
<input type="text" class="form-control form-control-sm mr-1 mb-1" id="_fw_comment" placeholder="comment" style="width:11em">
|
|
<button type="submit" class="btn btn-primary btn-sm mb-1">Add rule</button>
|
|
</form>
|
|
|
|
<hr>
|
|
<p class="text-muted mb-1">Ruleset preview:</p>
|
|
<pre id="_firewall_preview_text" style="max-height: 30vh; overflow:auto;"></pre>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-danger" id="btn_apply_firewall">Apply now (live)</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
{{end}}
|
|
|
|
{{define "bottom_js"}}
|
|
<script>
|
|
// cache of the last-fetched server list, keyed by id, so the Interface
|
|
// modal can prefill fields without a second round trip
|
|
var serversById = {};
|
|
|
|
function renderServersList(data) {
|
|
$.each(data, function (index, obj) {
|
|
serversById[obj.id] = obj;
|
|
const addresses = (obj.Interface && obj.Interface.addresses) ? obj.Interface.addresses.join(", ") : "";
|
|
const listenPort = obj.Interface ? obj.Interface.listen_port : "";
|
|
const interfaceName = obj.Interface ? obj.Interface.name : "";
|
|
|
|
// obj.id/interfaceName are server-side validated against [a-zA-Z0-9_-],
|
|
// safe to interpolate; obj.name is free text and must be escaped.
|
|
const safeName = $('<div>').text(obj.name).html();
|
|
|
|
let html = `<div class="col-sm-6 col-md-6 col-lg-4" id="server_${obj.id}">
|
|
<div class="info-box">
|
|
<div class="info-box-content">
|
|
<div class="btn-group">
|
|
<a href="{{.basePath}}/servers/${obj.id}/clients" class="btn btn-outline-primary btn-sm">Manage clients</a>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
|
|
data-target="#modal_server_settings" data-serverid="${obj.id}">Settings</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
|
|
data-target="#modal_server_interface" data-serverid="${obj.id}">Interface</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-info btn-sm btn-firewall-preview" data-serverid="${obj.id}" data-servername="${safeName}">Firewall</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-danger btn-sm btn-delete-server" data-serverid="${obj.id}" data-servername="${safeName}">Delete</button>
|
|
</div>
|
|
<hr>
|
|
<span class="info-box-text"><i class="fas fa-server"></i> ${safeName}</span>
|
|
<span class="info-box-text"><i class="fas fa-fingerprint"></i> ID: ${obj.id}</span>
|
|
<span class="info-box-text"><i class="fas fa-ethernet"></i> Interface: ${interfaceName}</span>
|
|
<span class="info-box-text"><i class="fas fa-plug"></i> Listen Port: ${listenPort}</span>
|
|
<span class="info-box-text"><i class="fas fa-map-marker-alt"></i> Addresses: ${addresses}</span>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
|
|
$('#servers-list').append(html);
|
|
});
|
|
}
|
|
|
|
function populateServersList() {
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'GET',
|
|
url: '{{.basePath}}/servers',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (data) {
|
|
renderServersList(data);
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
// load server list
|
|
$(document).ready(function () {
|
|
populateServersList();
|
|
let newServerHtml = '<div class="col-sm-3 offset-md-3" style=" text-align: right;">' +
|
|
'<button style="" id="btn_new_server" type="button" class="btn btn-outline-primary btn-sm" ' +
|
|
'data-toggle="modal" data-target="#modal_new_server">' +
|
|
'<i class="nav-icon fas fa-plus"></i> New Server</button> ' +
|
|
'<button id="btn_import_opnsense" type="button" class="btn btn-outline-secondary btn-sm" ' +
|
|
'data-toggle="modal" data-target="#modal_import_opnsense">' +
|
|
'<i class="nav-icon fas fa-file-import"></i> Import from OPNsense</button></div>';
|
|
$('h1').parents(".row").append(newServerHtml);
|
|
})
|
|
|
|
// New server modal event: reset the form each time it is opened
|
|
$(document).ready(function () {
|
|
$("#modal_new_server").on('show.bs.modal', function (event) {
|
|
let modal = $(this);
|
|
modal.find("#_server_id").val("");
|
|
modal.find("#_server_name").val("");
|
|
modal.find("#_server_interface").val("");
|
|
modal.find("#_server_addresses").val("");
|
|
modal.find("#_server_listen_port").val("");
|
|
});
|
|
});
|
|
|
|
function submitNewServer() {
|
|
const id = $("#_server_id").val();
|
|
const name = $("#_server_name").val();
|
|
const iface = $("#_server_interface").val();
|
|
const addresses = $("#_server_addresses").val().split(",").map(function (a) {
|
|
return a.trim();
|
|
}).filter(function (a) {
|
|
return a !== "";
|
|
});
|
|
const listen_port = parseInt($("#_server_listen_port").val(), 10);
|
|
|
|
const data = {
|
|
"id": id,
|
|
"name": name,
|
|
"interface": iface,
|
|
"addresses": addresses,
|
|
"listen_port": listen_port
|
|
};
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
$("#modal_new_server").modal('hide');
|
|
toastr.success("Created server successfully");
|
|
location.reload();
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Server settings modal event: load current settings for the clicked server
|
|
$("#modal_server_settings").on('show.bs.modal', function (event) {
|
|
const button = $(event.relatedTarget);
|
|
const serverId = button.data('serverid');
|
|
const modal = $(this);
|
|
modal.find("#_settings_server_id").val(serverId);
|
|
modal.find("#_settings_endpoint_address").val("");
|
|
modal.find("#_settings_config_file_path").val("");
|
|
modal.find("#_settings_firewall_mark").val("");
|
|
modal.find("#_settings_table").val("");
|
|
modal.find("#_settings_lan_interface").val("");
|
|
modal.find("#_settings_dns_servers").val("");
|
|
modal.find("#_settings_mtu").val("");
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'GET',
|
|
url: '{{.basePath}}/servers/' + serverId + '/settings',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (settings) {
|
|
modal.find("#_settings_endpoint_address").val(settings.endpoint_address);
|
|
modal.find("#_settings_config_file_path").val(settings.config_file_path);
|
|
modal.find("#_settings_firewall_mark").val(settings.firewall_mark);
|
|
modal.find("#_settings_table").val(settings.table);
|
|
modal.find("#_settings_lan_interface").val(settings.lan_interface);
|
|
modal.find("#_settings_dns_servers").val((settings.dns_servers || []).join(", "));
|
|
modal.find("#_settings_mtu").val(settings.mtu || "");
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
|
|
function submitServerSettings() {
|
|
const serverId = $("#_settings_server_id").val();
|
|
const dnsServers = $("#_settings_dns_servers").val().split(",").map(function (a) {
|
|
return a.trim();
|
|
}).filter(function (a) {
|
|
return a !== "";
|
|
});
|
|
const data = {
|
|
"endpoint_address": $("#_settings_endpoint_address").val(),
|
|
"config_file_path": $("#_settings_config_file_path").val(),
|
|
"firewall_mark": $("#_settings_firewall_mark").val(),
|
|
"table": $("#_settings_table").val(),
|
|
"lan_interface": $("#_settings_lan_interface").val(),
|
|
"dns_servers": dnsServers,
|
|
"mtu": parseInt($("#_settings_mtu").val(), 10) || 0
|
|
};
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/' + serverId + '/settings',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
$("#modal_server_settings").modal('hide');
|
|
toastr.success("Updated server settings successfully");
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$("#frm_server_settings").on('submit', function (e) {
|
|
e.preventDefault();
|
|
submitServerSettings();
|
|
});
|
|
});
|
|
|
|
// Server interface modal event: prefill from the cached server list data
|
|
$("#modal_server_interface").on('show.bs.modal', function (event) {
|
|
const button = $(event.relatedTarget);
|
|
const serverId = button.data('serverid');
|
|
const modal = $(this);
|
|
const obj = serversById[serverId] || {};
|
|
|
|
modal.find("#_iface_server_id").val(serverId);
|
|
modal.find("#_iface_addresses").val((obj.Interface && obj.Interface.addresses) ? obj.Interface.addresses.join(", ") : "");
|
|
modal.find("#_iface_listen_port").val(obj.Interface ? obj.Interface.listen_port : "");
|
|
modal.find("#_iface_pre_up").val(obj.Interface ? obj.Interface.pre_up : "");
|
|
modal.find("#_iface_post_up").val(obj.Interface ? obj.Interface.post_up : "");
|
|
modal.find("#_iface_pre_down").val(obj.Interface ? obj.Interface.pre_down : "");
|
|
modal.find("#_iface_post_down").val(obj.Interface ? obj.Interface.post_down : "");
|
|
modal.find("#_iface_public_key").val(obj.KeyPair ? obj.KeyPair.public_key : "");
|
|
});
|
|
|
|
function submitServerInterface() {
|
|
const serverId = $("#_iface_server_id").val();
|
|
const addresses = $("#_iface_addresses").val().split(",").map(function (a) {
|
|
return a.trim();
|
|
}).filter(function (a) {
|
|
return a !== "";
|
|
});
|
|
const data = {
|
|
"addresses": addresses,
|
|
"listen_port": $("#_iface_listen_port").val(),
|
|
"pre_up": $("#_iface_pre_up").val(),
|
|
"post_up": $("#_iface_post_up").val(),
|
|
"pre_down": $("#_iface_pre_down").val(),
|
|
"post_down": $("#_iface_post_down").val()
|
|
};
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/' + serverId + '/interface',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
$("#modal_server_interface").modal('hide');
|
|
toastr.success("Updated server interface successfully");
|
|
$('#servers-list').empty();
|
|
populateServersList();
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$("#frm_server_interface").validate({
|
|
rules: {
|
|
_iface_listen_port: {
|
|
required: true,
|
|
digits: true,
|
|
range: [1, 65535]
|
|
}
|
|
},
|
|
messages: {
|
|
_iface_listen_port: {
|
|
required: "Please enter a port",
|
|
digits: "Port must be an integer",
|
|
range: "Port must be in range 1..65535"
|
|
}
|
|
},
|
|
errorElement: 'span',
|
|
errorPlacement: function (error, element) {
|
|
error.addClass('invalid-feedback');
|
|
element.closest('.form-group').append(error);
|
|
},
|
|
highlight: function (element, errorClass, validClass) {
|
|
$(element).addClass('is-invalid');
|
|
},
|
|
unhighlight: function (element, errorClass, validClass) {
|
|
$(element).removeClass('is-invalid');
|
|
},
|
|
submitHandler: function (form) {
|
|
submitServerInterface();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Regenerate keypair button: confirm, then POST and refresh the field
|
|
$(document).ready(function () {
|
|
$("#btn_regenerate_keypair").click(function () {
|
|
const serverId = $("#_iface_server_id").val();
|
|
if (!confirm("Are you sure you want to generate a new key pair for this server?\n" +
|
|
"All existing peers will lose connectivity until their configuration is updated with the new public key.")) {
|
|
return;
|
|
}
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/' + serverId + '/keypair',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (data) {
|
|
toastr.success("Generated new key pair successfully");
|
|
$("#_iface_public_key").val(data['public_key']);
|
|
$('#servers-list').empty();
|
|
populateServersList();
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Firewall management modal
|
|
function refreshFirewallPreview(serverId) {
|
|
$("#_firewall_preview_text").text("Loading...");
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'GET',
|
|
url: '{{.basePath}}/servers/' + serverId + '/firewall-preview',
|
|
dataType: 'text',
|
|
success: function (data) { $("#_firewall_preview_text").text(data); },
|
|
error: function () { $("#_firewall_preview_text").text("Could not load firewall preview."); }
|
|
});
|
|
}
|
|
|
|
function renderFirewallRules(serverId, rules) {
|
|
const tbody = $("#_fw_rules_tbody");
|
|
tbody.empty();
|
|
$.each(rules, function (i, rule) {
|
|
const safeComment = $('<div>').text(rule.comment || "").html();
|
|
const row = `<tr data-ruleid="${rule.id}">
|
|
<td>${rule.enabled ? "yes" : "no"}</td>
|
|
<td>${rule.direction}</td>
|
|
<td>${rule.protocol || "any"}</td>
|
|
<td>${rule.port || "any"}</td>
|
|
<td>${rule.source || "any"}</td>
|
|
<td>${rule.action}</td>
|
|
<td>${safeComment}</td>
|
|
<td><button type="button" class="btn btn-outline-danger btn-sm btn-delete-fw-rule" data-serverid="${serverId}" data-ruleid="${rule.id}">Delete</button></td>
|
|
</tr>`;
|
|
tbody.append(row);
|
|
});
|
|
}
|
|
|
|
function loadFirewallRules(serverId) {
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'GET',
|
|
url: '{{.basePath}}/servers/' + serverId + '/firewall/rules',
|
|
dataType: 'json',
|
|
success: function (rules) { renderFirewallRules(serverId, rules); },
|
|
error: function (jqXHR) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Firewall button: rendered dynamically, use event delegation
|
|
$(document).ready(function () {
|
|
$('#servers-list').on('click', '.btn-firewall-preview', function () {
|
|
const serverId = $(this).data('serverid');
|
|
const serverName = $(this).data('servername');
|
|
$("#_fw_server_id").val(serverId);
|
|
$("#_fw_server_label").text(serverName + " (" + serverId + ")");
|
|
$("#modal_firewall").modal('show');
|
|
loadFirewallRules(serverId);
|
|
refreshFirewallPreview(serverId);
|
|
});
|
|
|
|
$("#frm_firewall_rule").on('submit', function (e) {
|
|
e.preventDefault();
|
|
const serverId = $("#_fw_server_id").val();
|
|
const data = {
|
|
direction: $("#_fw_direction").val(),
|
|
protocol: $("#_fw_protocol").val(),
|
|
port: $("#_fw_port").val(),
|
|
source: $("#_fw_source").val(),
|
|
action: $("#_fw_action").val(),
|
|
comment: $("#_fw_comment").val(),
|
|
enabled: true
|
|
};
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/' + serverId + '/firewall/rules',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function () {
|
|
toastr.success("Rule added");
|
|
$("#frm_firewall_rule")[0].reset();
|
|
loadFirewallRules(serverId);
|
|
refreshFirewallPreview(serverId);
|
|
},
|
|
error: function (jqXHR) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#_fw_rules_tbody").on('click', '.btn-delete-fw-rule', function () {
|
|
const serverId = $(this).data('serverid');
|
|
const ruleId = $(this).data('ruleid');
|
|
if (!confirm("Delete this firewall rule?")) return;
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/' + serverId + '/firewall/rules/' + ruleId + '/delete',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function () {
|
|
toastr.success("Rule deleted");
|
|
loadFirewallRules(serverId);
|
|
refreshFirewallPreview(serverId);
|
|
},
|
|
error: function (jqXHR) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#btn_apply_firewall").click(function () {
|
|
const serverId = $("#_fw_server_id").val();
|
|
if (!confirm("Apply this ruleset to the live firewall now?\n" +
|
|
"This runs 'nft -f' on the server, scoped to this server's own nftables table only.")) {
|
|
return;
|
|
}
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/' + serverId + '/firewall/apply',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (data) {
|
|
toastr.success(data.message);
|
|
if (data.output) { $("#_firewall_preview_text").text(data.output); }
|
|
},
|
|
error: function (jqXHR) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message'] || "Failed to apply firewall rules");
|
|
if (responseJson['output']) { $("#_firewall_preview_text").text(responseJson['output']); }
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Delete server button: rendered dynamically, use event delegation
|
|
$(document).ready(function () {
|
|
$('#servers-list').on('click', '.btn-delete-server', function () {
|
|
const serverId = $(this).data('serverid');
|
|
const serverName = $(this).data('servername');
|
|
if (!confirm("Are you sure you want to delete server \"" + serverName + "\" (" + serverId + ")?\n" +
|
|
"This only works if no clients are assigned to it anymore.")) {
|
|
return;
|
|
}
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/' + serverId + '/delete',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (data) {
|
|
toastr.success("Server deleted successfully");
|
|
$('#servers-list').empty();
|
|
populateServersList();
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// OPNsense import: preview step (multipart upload, no store writes)
|
|
var opnsensePreviewData = null;
|
|
|
|
function csvList(arr) {
|
|
return (arr || []).join(", ");
|
|
}
|
|
|
|
function renderOPNsensePreview(preview) {
|
|
opnsensePreviewData = preview;
|
|
const area = $("#_opnsense_preview_area");
|
|
area.empty();
|
|
|
|
if (!preview.servers || preview.servers.length === 0) {
|
|
area.append('<p class="text-muted">No WireGuard servers found in this config.xml.</p>');
|
|
$("#btn_opnsense_confirm").hide();
|
|
return;
|
|
}
|
|
|
|
$.each(preview.servers, function (si, server) {
|
|
let warnings = "";
|
|
if (server.warnings && server.warnings.length) {
|
|
warnings = '<div class="alert alert-warning py-1 px-2 mb-2">' + server.warnings.join("<br>") + '</div>';
|
|
}
|
|
let html = '<div class="card mb-3" data-serverindex="' + si + '">' +
|
|
'<div class="card-header py-1"><strong>Server</strong></div>' +
|
|
'<div class="card-body py-2">' + warnings +
|
|
'<div class="form-row">' +
|
|
'<div class="col-md-2"><label>ID</label><input type="text" class="form-control form-control-sm _f_id" value="' + (server.id || "") + '"></div>' +
|
|
'<div class="col-md-2"><label>Name</label><input type="text" class="form-control form-control-sm _f_name" value="' + (server.name || "") + '"></div>' +
|
|
'<div class="col-md-2"><label>Interface</label><input type="text" class="form-control form-control-sm _f_interface" value="' + (server.interface || "") + '"></div>' +
|
|
'<div class="col-md-3"><label>Addresses</label><input type="text" class="form-control form-control-sm _f_addresses" value="' + csvList(server.addresses) + '"></div>' +
|
|
'<div class="col-md-1"><label>Port</label><input type="text" class="form-control form-control-sm _f_port" value="' + (server.listen_port || "") + '"></div>' +
|
|
'<div class="col-md-2"><label>MTU</label><input type="text" class="form-control form-control-sm _f_mtu" value="' + (server.mtu || "") + '"></div>' +
|
|
'</div>' +
|
|
'<div class="form-row mt-1">' +
|
|
'<div class="col-md-4"><label>DNS servers</label><input type="text" class="form-control form-control-sm _f_dns" value="' + csvList(server.dns_servers) + '"></div>' +
|
|
'<div class="col-md-4"><label>Endpoint address</label><input type="text" class="form-control form-control-sm _f_endpoint" value="' + (server.endpoint_address || "") + '"></div>' +
|
|
'</div>' +
|
|
'<table class="table table-sm mt-2 mb-0"><thead><tr><th>Client name</th><th>Allocated IP</th><th>Allowed IPs</th><th>Keepalive</th><th>Public key</th></tr></thead><tbody>';
|
|
|
|
$.each(server.clients || [], function (ci, client) {
|
|
let cwarn = "";
|
|
if (client.warnings && client.warnings.length) {
|
|
cwarn = '<br><small class="text-warning">' + client.warnings.join("; ") + '</small>';
|
|
}
|
|
html += '<tr data-clientindex="' + ci + '">' +
|
|
'<td><input type="text" class="form-control form-control-sm _c_name" value="' + (client.name || "") + '">' + cwarn + '</td>' +
|
|
'<td><input type="text" class="form-control form-control-sm _c_allocated" value="' + csvList(client.allocated_ips) + '"></td>' +
|
|
'<td><input type="text" class="form-control form-control-sm _c_allowed" value="' + csvList(client.allowed_ips) + '"></td>' +
|
|
'<td><input type="text" class="form-control form-control-sm _c_keepalive" value="' + (client.persistent_keepalive || "") + '"></td>' +
|
|
'<td><small class="text-muted">' + (client.public_key || "(missing)") + '</small></td>' +
|
|
'</tr>';
|
|
});
|
|
|
|
html += '</tbody></table></div></div>';
|
|
area.append(html);
|
|
});
|
|
|
|
$("#btn_opnsense_confirm").show();
|
|
}
|
|
|
|
$("#btn_opnsense_preview").click(function () {
|
|
const fileInput = document.getElementById('_opnsense_file');
|
|
if (!fileInput.files || fileInput.files.length === 0) {
|
|
toastr.error("Please choose a config.xml file first");
|
|
return;
|
|
}
|
|
const formData = new FormData();
|
|
formData.append('config', fileInput.files[0]);
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/import/opnsense/preview',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
renderOPNsensePreview(data);
|
|
},
|
|
error: function (jqXHR) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message'] || "Could not parse config.xml");
|
|
}
|
|
});
|
|
});
|
|
|
|
// Read the (possibly edited) preview form back into the same shape the
|
|
// preview endpoint returned, so the commit endpoint gets full PreviewServer/
|
|
// PreviewClient structures - not the original XML.
|
|
function collectOPNsensePreviewEdits() {
|
|
const servers = [];
|
|
$("#_opnsense_preview_area > .card").each(function () {
|
|
const card = $(this);
|
|
const clients = [];
|
|
card.find("tbody tr").each(function () {
|
|
const row = $(this);
|
|
clients.push({
|
|
name: row.find("._c_name").val(),
|
|
allocated_ips: row.find("._c_allocated").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
|
|
allowed_ips: row.find("._c_allowed").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
|
|
persistent_keepalive: parseInt(row.find("._c_keepalive").val(), 10) || 0,
|
|
enabled: true
|
|
});
|
|
});
|
|
servers.push({
|
|
id: card.find("._f_id").val(),
|
|
name: card.find("._f_name").val(),
|
|
interface: card.find("._f_interface").val(),
|
|
addresses: card.find("._f_addresses").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
|
|
listen_port: parseInt(card.find("._f_port").val(), 10) || 0,
|
|
mtu: parseInt(card.find("._f_mtu").val(), 10) || 0,
|
|
dns_servers: card.find("._f_dns").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
|
|
endpoint_address: card.find("._f_endpoint").val(),
|
|
enabled: true,
|
|
clients: clients
|
|
});
|
|
});
|
|
return servers;
|
|
}
|
|
|
|
// The public key is display-only (not editable) and matched back to
|
|
// the original preview payload by position, since the input form
|
|
// doesn't carry it. Merge it in from the last preview response before
|
|
// sending the commit request.
|
|
function mergeOriginalPreviewFields(edited) {
|
|
if (!opnsensePreviewData || !opnsensePreviewData.servers) return edited;
|
|
$.each(edited, function (si, server) {
|
|
const orig = opnsensePreviewData.servers[si] || {};
|
|
server.private_key = orig.private_key;
|
|
server.public_key = orig.public_key;
|
|
server.source_uuid = orig.source_uuid;
|
|
$.each(server.clients, function (ci, client) {
|
|
const origClient = (orig.clients || [])[ci] || {};
|
|
client.public_key = origClient.public_key;
|
|
client.preshared_key = origClient.preshared_key;
|
|
client.additional_notes = origClient.additional_notes;
|
|
client.source_uuid = origClient.source_uuid;
|
|
});
|
|
});
|
|
return edited;
|
|
}
|
|
|
|
$("#btn_opnsense_confirm").click(function () {
|
|
if (!opnsensePreviewData) return;
|
|
const edited = mergeOriginalPreviewFields(collectOPNsensePreviewEdits());
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/servers/import/opnsense/commit',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify({ servers: edited }),
|
|
success: function (results) {
|
|
let created = 0, failed = 0;
|
|
$.each(results, function (i, r) {
|
|
if (r.imported) { created++; } else { failed++; }
|
|
if (r.error) { toastr.error(r.id + ": " + r.error); }
|
|
if (r.clients_skipped && r.clients_skipped.length) {
|
|
toastr.warning(r.id + " skipped clients: " + r.clients_skipped.join(", "));
|
|
}
|
|
});
|
|
toastr.success("Imported " + created + " server(s)" + (failed ? (", " + failed + " failed") : ""));
|
|
$("#modal_import_opnsense").modal('hide');
|
|
$('#servers-list').empty();
|
|
populateServersList();
|
|
},
|
|
error: function (jqXHR) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message'] || "Import failed");
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#modal_import_opnsense").on('show.bs.modal', function () {
|
|
$("#_opnsense_file").val("");
|
|
$("#_opnsense_preview_area").empty();
|
|
$("#btn_opnsense_confirm").hide();
|
|
opnsensePreviewData = null;
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
$.validator.setDefaults({
|
|
submitHandler: function (form) {
|
|
submitNewServer();
|
|
}
|
|
});
|
|
$("#frm_new_server").validate({
|
|
rules: {
|
|
_server_id: {
|
|
required: true
|
|
},
|
|
_server_name: {
|
|
required: true
|
|
},
|
|
_server_interface: {
|
|
required: true
|
|
},
|
|
_server_listen_port: {
|
|
required: true,
|
|
digits: true,
|
|
range: [1, 65535]
|
|
}
|
|
},
|
|
messages: {
|
|
_server_id: {
|
|
required: "Please enter a server ID"
|
|
},
|
|
_server_name: {
|
|
required: "Please enter a server name"
|
|
},
|
|
_server_interface: {
|
|
required: "Please enter an interface name"
|
|
},
|
|
_server_listen_port: {
|
|
required: "Please enter a port",
|
|
digits: "Port must be an integer",
|
|
range: "Port must be in range 1..65535"
|
|
}
|
|
},
|
|
errorElement: 'span',
|
|
errorPlacement: function (error, element) {
|
|
error.addClass('invalid-feedback');
|
|
element.closest('.form-group').append(error);
|
|
},
|
|
highlight: function (element, errorClass, validClass) {
|
|
$(element).addClass('is-invalid');
|
|
},
|
|
unhighlight: function (element, errorClass, validClass) {
|
|
$(element).removeClass('is-invalid');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{{end}}
|