mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-04-21 20:12:33 +03:00
302 lines
No EOL
13 KiB
HTML
302 lines
No EOL
13 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 Wireguard Client</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form name="frm_new_client" id="frm_new_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"
|
|
value="0.0.0.0/0">
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="icheck-primary d-inline">
|
|
<input type="checkbox" id="enabled" checked>
|
|
<label for="enabled">
|
|
Enable after creation
|
|
</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-primary">Submit</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 type="text/html" id="template">
|
|
|
|
|
|
</script>
|
|
|
|
<script>
|
|
function renderClient(data) {
|
|
$.each(data, function(index, obj) {
|
|
// render client status css tag style
|
|
let clientStatusHtml = '>'
|
|
if (obj.Client.enabled) {
|
|
clientStatusHtml = `style="visibility: hidden;">`
|
|
}
|
|
|
|
// render client allocated ip addresses
|
|
let allocatedIpsHtml = "";
|
|
$.each(obj.Client.allocated_ips, function(index, obj) {
|
|
allocatedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
|
|
})
|
|
|
|
// render client allowed ip addresses
|
|
let allowedIpsHtml = "";
|
|
$.each(obj.Client.allowed_ips, function(index, obj) {
|
|
allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
|
|
})
|
|
|
|
// render client html content
|
|
let html = `<div class="col-sm-6" id="client_${obj.Client.id}">
|
|
<div class="info-box">
|
|
<div class="overlay" id="paused_${obj.Client.id}"` + clientStatusHtml
|
|
+ `<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('${obj.Client.id}')"></i>
|
|
</div>
|
|
<img src="${obj.QRCode}" />
|
|
<div class="info-box-content">
|
|
<div class="btn-group">
|
|
<button onclick="location.href='/download?clientid=${obj.Client.id}'" type="button"
|
|
class="btn btn-outline-success btn-sm">Download</button>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
|
|
data-target="#modal_edit_client">Edit</button>
|
|
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
|
|
data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
|
|
data-clientname="${obj.Client.name}">Disable</button>
|
|
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
|
|
data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
|
|
data-clientname="${obj.Client.name}">Remove</button>
|
|
</div>
|
|
<hr>
|
|
<span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
|
|
<span class="info-box-text"><i class="fas fa-envelope"></i> ${obj.Client.email}</span>
|
|
<span class="info-box-text"><i class="fas fa-clock"></i>
|
|
${obj.Client.created_at}</span>
|
|
<span class="info-box-text"><i class="fas fa-history"></i>
|
|
${obj.Client.updated_at}</span>
|
|
<span class="info-box-text"><strong>IP Allocation</strong></span>`
|
|
+ allocatedIpsHtml
|
|
+ `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
|
|
+ allowedIpsHtml
|
|
+`</div>
|
|
</div>
|
|
</div>`
|
|
|
|
// add the client html elements to the list
|
|
$('#client-list').append(html);
|
|
});
|
|
}
|
|
function populateClientList() {
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'GET',
|
|
url: '/api/clients',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function (data) {
|
|
renderClient(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']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{end}} |