210 lines
8.7 KiB
HTML
210 lines
8.7 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">
|
|
{{range .clientDataList}}
|
|
<div class="col-sm-6" id="client_{{.Client.ID}}">
|
|
<div class="info-box">
|
|
<div class="overlay" id="paused_{{.Client.ID}}"
|
|
{{if eq .Client.Enabled true}}style="visibility: hidden;" {{end}}>
|
|
<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('{{.Client.ID}}')"></i>
|
|
</div>
|
|
<img
|
|
src="{{ .QRCode }}" />
|
|
<div class="info-box-content">
|
|
<div class="btn-group">
|
|
<button onclick="location.href='/download?clientid={{ .Client.ID }}'" type="button"
|
|
class="btn btn-outline-success btn-sm">Download</button>
|
|
<!-- <button type="button" class="btn btn-outline-primary btn-sm">Edit</button> -->
|
|
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
|
|
data-target="#modal_pause_client" data-clientid="{{ .Client.ID }}"
|
|
data-clientname="{{ .Client.Name }}">Disable</button>
|
|
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
|
|
data-target="#modal_remove_client" data-clientid="{{ .Client.ID }}"
|
|
data-clientname="{{ .Client.Name }}">Remove</button>
|
|
</div>
|
|
<hr>
|
|
<span class="info-box-text"><i class="fas fa-user"></i> {{ .Client.Name }}</span>
|
|
<span class="info-box-text"><i class="fas fa-envelope"></i> {{ .Client.Email }}</span>
|
|
<span class="info-box-text"><i class="fas fa-clock"></i>
|
|
{{ .Client.CreatedAt.Format "2 Jan 2006 15:04" }}</span>
|
|
<span class="info-box-text"><i class="fas fa-history"></i>
|
|
{{ .Client.UpdatedAt.Format "2 Jan 2006 15:04" }}</span>
|
|
<span class="info-box-text"><strong>IP Allocation</strong></span>
|
|
{{range .Client.AllocatedIPs}}
|
|
<small class="badge badge-secondary"></i>{{.}}</small>
|
|
{{end}}
|
|
<span class="info-box-text"><strong>Allowed IPs</strong></span>
|
|
{{range .Client.AllowedIPs}}
|
|
<small class="badge badge-secondary"></i>{{.}}</small>
|
|
{{end}}
|
|
</div>
|
|
<!-- /.info-box-content -->
|
|
</div>
|
|
<!-- /.info-box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
{{end}}
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
</section>
|
|
|
|
<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 setClientStatus(clientID, status) {
|
|
var 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) {
|
|
var responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
|
|
function resumeClient(clientID) {
|
|
setClientStatus(clientID, true);
|
|
var divElement = document.getElementById("paused_" + clientID);
|
|
divElement.style.visibility = "hidden";
|
|
}
|
|
|
|
function pauseClient(clientID) {
|
|
setClientStatus(clientID, false);
|
|
var divElement = document.getElementById("paused_" + clientID);
|
|
divElement.style.visibility = "visible";
|
|
}
|
|
</script>
|
|
<script>
|
|
// modal_pause_client modal event
|
|
$('#modal_pause_client').on('show.bs.modal', function (event) {
|
|
var button = $(event.relatedTarget);
|
|
var client_id = button.data('clientid');
|
|
var client_name = button.data('clientname');
|
|
var 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 () {
|
|
var 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) {
|
|
var button = $(event.relatedTarget);
|
|
var client_id = button.data('clientid');
|
|
var client_name = button.data('clientname');
|
|
var 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 () {
|
|
var client_id = $(this).val();
|
|
var 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');
|
|
var divElement = document.getElementById('client_' + client_id);
|
|
divElement.style.display = "none";
|
|
},
|
|
error: function(jqXHR, exception) {
|
|
var responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{end}} |