mirror of
https://github.com/ngoduykhanh/wireguard-ui
synced 2024-04-24 18:40:27 +02:00
380 lines
15 KiB
HTML
380 lines
15 KiB
HTML
{{define "title"}}
|
|
Wireguard Clients
|
|
{{end}}
|
|
|
|
{{define "top_css"}}
|
|
<style>
|
|
.paused-client {
|
|
transition: transform .2s;
|
|
cursor: pointer;
|
|
}
|
|
i[class^="paused-client"]:hover { transform: scale(1.5); }
|
|
</style>
|
|
{{end}}
|
|
|
|
{{define "username"}}
|
|
{{ .username }}
|
|
{{end}}
|
|
|
|
{{define "page_title"}}
|
|
Wireguard Clients
|
|
{{end}}
|
|
|
|
{{define "page_content"}}
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<!-- <h5 class="mt-4 mb-2">Wireguard Clients</h5> -->
|
|
<div class="row" id="client-list">
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade" id="modal_edit_client">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Edit Client</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form name="frm_edit_client" id="frm_edit_client">
|
|
<div class="modal-body">
|
|
<input type="hidden" id="_client_id" name="_client_id">
|
|
<div class="form-group">
|
|
<label for="_client_name" class="control-label">Name</label>
|
|
<input type="text" class="form-control" id="_client_name" name="_client_name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_client_email" class="control-label">Email</label>
|
|
<input type="text" class="form-control" id="_client_email" name="client_email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_client_allocated_ips" class="control-label">IP Allocation</label>
|
|
<input type="text" data-role="tagsinput" class="form-control" id="_client_allocated_ips">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="_client_allowed_ips" class="control-label">Allowed IPs</label>
|
|
<input type="text" data-role="tagsinput" class="form-control" id="_client_allowed_ips">
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="icheck-primary d-inline">
|
|
<input type="checkbox" id="_enabled">
|
|
<label for="_enabled">
|
|
Enable this client
|
|
</label>
|
|
</div>
|
|
</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_pause_client">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-warning">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Disable</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-outline-dark" id="pause_client_confirm">Apply</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
|
|
<div class="modal fade" id="modal_remove_client">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-danger">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Remove</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-outline-dark" id="remove_client_confirm">Apply</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
{{end}}
|
|
|
|
{{define "bottom_js"}}
|
|
<script>
|
|
function populateClientList() {
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'GET',
|
|
url: '/api/clients',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (data) {
|
|
renderClientList(data);
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
function setClientStatus(clientID, status) {
|
|
const data = {"id": clientID, "status": status};
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '/client/set-status',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
console.log("Set client " + clientID + " status to " + status);
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
function resumeClient(clientID) {
|
|
setClientStatus(clientID, true);
|
|
const divElement = document.getElementById("paused_" + clientID);
|
|
divElement.style.visibility = "hidden";
|
|
}
|
|
|
|
function pauseClient(clientID) {
|
|
setClientStatus(clientID, false);
|
|
const divElement = document.getElementById("paused_" + clientID);
|
|
divElement.style.visibility = "visible";
|
|
}
|
|
</script>
|
|
<script>
|
|
// load client list
|
|
$(document).ready(function () {
|
|
populateClientList();
|
|
})
|
|
|
|
// modal_pause_client modal event
|
|
$("#modal_pause_client").on('show.bs.modal', function (event) {
|
|
const button = $(event.relatedTarget);
|
|
const client_id = button.data('clientid');
|
|
const client_name = button.data('clientname');
|
|
const modal = $(this);
|
|
modal.find('.modal-body').text("You are about to disable client " + client_name);
|
|
modal.find('#pause_client_confirm').val(client_id);
|
|
})
|
|
|
|
// pause_client_confirm button event
|
|
$(document).ready(function () {
|
|
$("#pause_client_confirm").click(function () {
|
|
const client_id = $(this).val();
|
|
pauseClient(client_id);
|
|
$("#modal_pause_client").modal('hide');
|
|
});
|
|
});
|
|
|
|
// modal_remove_client modal event
|
|
$("#modal_remove_client").on('show.bs.modal', function (event) {
|
|
const button = $(event.relatedTarget);
|
|
const client_id = button.data('clientid');
|
|
const client_name = button.data('clientname');
|
|
const modal = $(this);
|
|
modal.find('.modal-body').text("You are about to remove client " + client_name);
|
|
modal.find('#remove_client_confirm').val(client_id);
|
|
})
|
|
|
|
// remove_client_confirm button event
|
|
$(document).ready(function () {
|
|
$("#remove_client_confirm").click(function () {
|
|
const client_id = $(this).val();
|
|
const data = {"id": client_id};
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '/remove-client',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function(data) {
|
|
$("#modal_remove_client").modal('hide');
|
|
toastr.success('Removed client successfully');
|
|
const divElement = document.getElementById('client_' + client_id);
|
|
divElement.style.display = "none";
|
|
},
|
|
error: function(jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Edit client modal event
|
|
$(document).ready(function () {
|
|
$("#modal_edit_client").on('shown.bs.modal', function (event) {
|
|
let modal = $(this);
|
|
const button = $(event.relatedTarget);
|
|
const client_id = button.data('clientid');
|
|
|
|
// IP Allocation tag input
|
|
modal.find("#_client_allocated_ips").tagsInput({
|
|
'width': '100%',
|
|
'height': '75%',
|
|
'interactive': true,
|
|
'defaultText': 'Add More',
|
|
'removeWithBackspace': true,
|
|
'minChars': 0,
|
|
'maxChars': 18,
|
|
'placeholderColor': '#666666'
|
|
});
|
|
|
|
// AllowedIPs tag input
|
|
modal.find("#_client_allowed_ips").tagsInput({
|
|
'width': '100%',
|
|
'height': '75%',
|
|
'interactive': true,
|
|
'defaultText': 'Add More',
|
|
'removeWithBackspace': true,
|
|
'minChars': 0,
|
|
'maxChars': 18,
|
|
'placeholderColor': '#666666'
|
|
});
|
|
|
|
// update client modal data
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'GET',
|
|
url: '/api/client/' + client_id,
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (resp) {
|
|
const client = resp.Client;
|
|
|
|
modal.find(".modal-title").text("Edit Client " + client.name);
|
|
modal.find("#_client_id").val(client.id);
|
|
modal.find("#_client_name").val(client.name);
|
|
modal.find("#_client_email").val(client.email);
|
|
|
|
modal.find("#_client_allocated_ips").importTags('');
|
|
client.allocated_ips.forEach(function (obj) {
|
|
modal.find("#_client_allocated_ips").addTag(obj);
|
|
});
|
|
|
|
modal.find("#_client_allowed_ips").importTags('');
|
|
client.allowed_ips.forEach(function (obj) {
|
|
modal.find("#_client_allowed_ips").addTag(obj);
|
|
});
|
|
|
|
modal.find("#_enabled").prop("checked", client.enabled);
|
|
},
|
|
error: function (jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// submitEditClient function for updating an existing client
|
|
function submitEditClient() {
|
|
const client_id = $("#_client_id").val();
|
|
const name = $("#_client_name").val();
|
|
const email = $("#_client_email").val();
|
|
const allocated_ips = $("#_client_allocated_ips").val().split(",");
|
|
const allowed_ips = $("#_client_allowed_ips").val().split(",");
|
|
let enabled = false;
|
|
|
|
if ($("#_enabled").is(':checked')){
|
|
enabled = true;
|
|
}
|
|
|
|
const data = {"id": client_id, "name": name, "email": email, "allocated_ips": allocated_ips,
|
|
"allowed_ips": allowed_ips, "enabled": enabled};
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '/update-client',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function(resp) {
|
|
$("#modal_edit_client").modal('hide');
|
|
toastr.success('Updated client successfully');
|
|
// Refresh the home page (clients page) after updating successfully
|
|
location.reload();
|
|
},
|
|
error: function(jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Edit client form validation
|
|
$(document).ready(function () {
|
|
$.validator.setDefaults({
|
|
submitHandler: function () {
|
|
submitEditClient();
|
|
}
|
|
});
|
|
$("#frm_edit_client").validate({
|
|
rules: {
|
|
client_name: {
|
|
required: true,
|
|
},
|
|
client_email: {
|
|
required: true,
|
|
email: true,
|
|
},
|
|
},
|
|
messages: {
|
|
client_name: {
|
|
required: "Please enter a name"
|
|
},
|
|
client_email: {
|
|
required: "Please enter an email address",
|
|
email: "Please enter a valid email address"
|
|
},
|
|
},
|
|
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}} |