Add per-server settings editor (step 5)
New servers previously got a bare ConfigFilePath default with no way to set/edit EndpointAddress, FirewallMark, or Table afterward. Adds GET/POST /servers/:id/settings (view/save ServerSetting, admin-only for writes) and a "Settings" button + modal on each server card in servers.html. CreateServer now seeds FirewallMark/Table with the same defaults the legacy single-server bootstrap uses, instead of leaving them blank.
This commit is contained in:
sysops
@@ -70,6 +70,50 @@ Servers
|
||||
<!-- /.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>
|
||||
<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 -->
|
||||
{{end}}
|
||||
|
||||
{{define "bottom_js"}}
|
||||
@@ -90,6 +134,10 @@ Servers
|
||||
<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>
|
||||
<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>
|
||||
@@ -181,6 +229,70 @@ Servers
|
||||
});
|
||||
}
|
||||
|
||||
// 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("");
|
||||
|
||||
$.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);
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function submitServerSettings() {
|
||||
const serverId = $("#_settings_server_id").val();
|
||||
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()
|
||||
};
|
||||
|
||||
$.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();
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function (form) {
|
||||
|
||||
Reference in New Issue
Block a user