deblan/wireguard-ui
deblan/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui synced 2024-05-19 14:06:37 +02:00
Code Issues Projects Releases Wiki Activity

Adjustment in edit client form

Browse source
This commit is contained in:
Khanh Ngo 2020-06-01 23:49:34 +07:00
parent ec2b447b7b
commit f84055bc21
No known key found for this signature in database
GPG key ID: 29077342AA5648F6
2 changed files with 81 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
custom/js/helper.js
View file

@ -30,7 +30,8 @@ function renderClientList(data) {
<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>
data-target="#modal_edit_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">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>

94
templates/clients.html
View file

@ -34,42 +34,41 @@ Wireguard Clients
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Wireguard Client</h4>
<h4 class="modal-title">Edit Client</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form name="frm_new_client" id="frm_new_client">
<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">
<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">
<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">
<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">
<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" checked>
<label for="enabled">
Enable after creation
<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-primary">Submit</button>
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
@ -234,5 +233,70 @@ Wireguard Clients
});
});
});
// 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}}