mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-04-21 20:12:33 +03:00
302 lines
No EOL
12 KiB
HTML
302 lines
No EOL
12 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">
|
|
<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_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']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{end}} |