2020-04-18 11:17:49 +02:00
{{define "title"}}
2020-04-19 10:50:59 +02:00
Wireguard Clients
2020-04-18 11:17:49 +02:00
{{end}}
2020-04-22 12:11:28 +02:00
{{define "top_css"}}
< style >
.paused-client {
transition: transform .2s;
cursor: pointer;
}
i[class^="paused-client"]:hover { transform: scale(1.5); }
< / style >
{{end}}
2020-04-18 11:17:49 +02:00
{{define "username"}}
2020-04-24 13:14:54 +02:00
{{ .username }}
2020-04-18 11:17:49 +02:00
{{end}}
{{define "page_title"}}
2020-04-19 10:50:59 +02:00
Wireguard Clients
2020-04-18 11:17:49 +02:00
{{end}}
{{define "page_content"}}
< section class = "content" >
< div class = "container-fluid" >
2020-04-19 10:50:59 +02:00
<!-- <h5 class="mt - 4 mb - 2">Wireguard Clients</h5> -->
2020-06-02 06:20:50 +02:00
< div class = "row" id = "client-list" >
< / div >
<!-- /.row -->
< / div >
< / section >
2021-08-08 19:55:59 +02:00
< div class = "modal fade" id = "modal_email_client" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h4 class = "modal-title" > Email Configuration< / h4 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< form name = "frm_email_client" id = "frm_email_client" >
< div class = "modal-body" >
2021-08-25 07:38:04 +02:00
< input type = "hidden" id = "e_client_id" name = "e_client_id" >
2021-08-08 19:55:59 +02:00
< div class = "form-group" >
2022-03-20 13:53:09 +01:00
< label for = "e_client_email" class = "control-label" > Email address< / label >
2021-11-20 16:08:24 +01:00
< input type = "text" class = "form-control" id = "e_client_email" name = "e_client_email" >
2021-08-08 19:55:59 +02:00
< / 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" > Send< / button >
< / div >
< / form >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
2022-01-29 08:53:56 +01:00
<!-- /.modal -->
< div class = "modal fade" id = "modal_qr_client" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h4 class = "modal-title" > QR Code< / h4 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2022-12-02 23:40:29 +01:00
< div class = "modal-body" >
< input type = "hidden" id = "qr_client_id" name = "qr_client_id" >
2023-03-15 21:37:39 +01:00
< img id = "qr_code" class = "w-100" style = "image-rendering: pixelated;" src = "" alt = "QR code" / >
<!-- do not include FwMark in any client configs: it is INVALID. -->
2022-12-02 23:40:29 +01:00
< / div >
2022-01-29 08:53:56 +01:00
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
2021-08-08 19:55:59 +02:00
2023-12-29 09:22:12 +01:00
< div class = "modal fade" id = "modal_telegram_client" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h4 class = "modal-title" > Telegram Configuration< / h4 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< form name = "frm_telegram_client" id = "frm_telegram_client" >
< div class = "modal-body" >
< input type = "hidden" id = "tg_client_id" name = "tg_client_id" >
< div class = "form-group" >
< label for = "tg_client_userid" class = "control-label" > Telegram userid< / label >
< input type = "text" class = "form-control" id = "tg_client_userid" name = "tg_client_userid" >
< / 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" > Send< / button >
< / div >
< / form >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
2020-06-02 06:20:50 +02:00
< 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" >
2020-04-22 12:11:28 +02:00
< / div >
2023-12-27 09:08:55 +01:00
< div class = "form-group" >
< label for = "_subnet_ranges" class = "control-label" > Subnet range< / label >
< select id = "_subnet_ranges" class = "select2"
data-placeholder="Select a subnet range" style="width: 100%;">
< / select >
< / div >
2020-06-02 06:20:50 +02:00
< 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 >
2022-01-29 08:45:00 +01:00
< div class = "form-group" >
< label for = "_client_extra_allowed_ips" class = "control-label" > Extra Allowed IPs< / label >
< input type = "text" data-role = "tagsinput" class = "form-control"
id="_client_extra_allowed_ips">
< / div >
2023-12-25 20:21:37 +01:00
< div class = "form-group" >
< label for = "_client_endpoint" class = "control-label" > Endpoint< / label >
< input type = "text" class = "form-control" id = "_client_endpoint" name = "client_endpoint" >
< / div >
2021-08-05 19:58:01 +02:00
< div class = "form-group" >
< div class = "icheck-primary d-inline" >
< input type = "checkbox" id = "_use_server_dns" >
< label for = "_use_server_dns" >
Use server DNS
< / label >
< / div >
< / div >
2020-06-02 06:20:50 +02:00
< div class = "form-group" >
< div class = "icheck-primary d-inline" >
< input type = "checkbox" id = "_enabled" >
< label for = "_enabled" >
Enable this client
< / label >
2020-04-18 11:17:49 +02:00
< / div >
< / div >
2023-08-11 10:34:11 +02:00
< details >
< summary > < strong > Public and Preshared Keys< / strong >
< i class = "fas fa-info-circle" data-toggle = "tooltip"
data-original-title="Update the server stored
client Public and Preshared keys.">
< / i >
< / summary >
< div class = "form-group" style = "margin-top: 1rem" >
< label for = "_client_public_key" class = "control-label" >
Public Key
< / label >
< input type = "text" class = "form-control" id = "_client_public_key" name = "_client_public_key" aria-invalid = "false" >
< / div >
< div class = "form-group" >
< label for = "_client_preshared_key" class = "control-label" >
Preshared Key
< / label >
< input type = "text" class = "form-control" id = "_client_preshared_key" name = "_client_preshared_key" >
< / div >
< / details >
2023-12-29 09:22:12 +01:00
< details style = "margin-top: 0.5rem;" >
< summary > < strong > Additional configuration< / strong >
< / summary >
< div class = "form-group" style = "margin-top: 0.5rem;" >
< label for = "_client_telegram_userid" class = "control-label" > Telegram userid< / label >
< input type = "text" class = "form-control" id = "_client_telegram_userid" name = "_client_telegram_userid" >
< / div >
2024-01-09 21:03:27 +01:00
< div class = "form-group" >
< label for = "_additional_notes" class = "control-label" > Notes< / label >
< textarea class = "form-control" style = "min-height: 6rem;" id = "_additional_notes" name = "_additional_notes" placeholder = "Additional notes about this client" > < / textarea >
< / div >
2023-12-29 09:22:12 +01:00
< / details >
2020-04-18 11:17:49 +02:00
< / div >
2020-06-02 06:20:50 +02:00
< 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 >
2020-04-18 11:17:49 +02:00
< / div >
2020-06-02 06:20:50 +02:00
<!-- /.modal - content -->
2020-04-18 11:17:49 +02:00
< / div >
2020-06-02 06:20:50 +02:00
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
2020-04-18 11:17:49 +02:00
2020-04-22 12:11:28 +02:00
< 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 -->
2020-04-18 11:17:49 +02:00
< 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" >
2020-04-22 12:11:28 +02:00
< 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 >
2020-04-18 11:17:49 +02:00
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
{{end}}
{{define "bottom_js"}}
< script >
2020-06-02 06:20:50 +02:00
function populateClientList() {
$.ajax({
cache: false,
method: 'GET',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/api/clients',
2020-06-02 06:20:50 +02:00
dataType: 'json',
contentType: "application/json",
success: function (data) {
renderClientList(data);
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
2020-04-22 12:11:28 +02:00
function setClientStatus(clientID, status) {
2020-05-29 05:47:55 +02:00
const data = {"id": clientID, "status": status};
2020-04-22 12:11:28 +02:00
$.ajax({
cache: false,
method: 'POST',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/client/set-status',
2020-04-22 12:11:28 +02:00
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
success: function (data) {
2020-06-02 06:20:50 +02:00
console.log("Set client " + clientID + " status to " + status);
2020-04-22 12:11:28 +02:00
},
error: function (jqXHR, exception) {
2020-05-29 05:47:55 +02:00
const responseJson = jQuery.parseJSON(jqXHR.responseText);
2020-04-22 12:11:28 +02:00
toastr.error(responseJson['message']);
}
});
}
function resumeClient(clientID) {
setClientStatus(clientID, true);
2020-05-29 05:47:55 +02:00
const divElement = document.getElementById("paused_" + clientID);
2020-04-22 16:39:35 +02:00
divElement.style.visibility = "hidden";
2023-12-27 09:08:55 +01:00
updateApplyConfigVisibility()
2020-04-22 12:11:28 +02:00
}
function pauseClient(clientID) {
setClientStatus(clientID, false);
2020-05-29 05:47:55 +02:00
const divElement = document.getElementById("paused_" + clientID);
2020-04-22 16:39:35 +02:00
divElement.style.visibility = "visible";
2023-12-27 09:08:55 +01:00
updateApplyConfigVisibility()
}
// updateIPAllocationSuggestion function for automatically fill
// the IP Allocation input with suggested ip addresses
// FOR CHANGING A SUBNET OF AN EXISTING CLIENT
function updateIPAllocationSuggestionExisting() {
let subnetRange = $("#_subnet_ranges").select2('val');
if (!subnetRange || subnetRange.length === 0) {
subnetRange = '__default_any__'
}
$.ajax({
cache: false,
method: 'GET',
url: `{{.basePath}}/api/suggest-client-ips?sr=${subnetRange}`,
dataType: 'json',
contentType: "application/json",
success: function(data) {
const allocated_ips = $("#_client_allocated_ips").val().split(",");
allocated_ips.forEach(function (item, index) {
$('#_client_allocated_ips').removeTag(escape(item));
})
data.forEach(function (item, index) {
$('#_client_allocated_ips').addTag(item);
})
},
error: function(jqXHR, exception) {
const allocated_ips = $("#_client_allocated_ips").val().split(",");
allocated_ips.forEach(function (item, index) {
$('#_client_allocated_ips').removeTag(escape(item));
})
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
2020-04-22 12:11:28 +02:00
}
2023-12-27 09:08:55 +01:00
function updateSubnetRangesList(elementID, preselectedVal) {
$.getJSON("{{.basePath}}/api/subnet-ranges", null, function(data) {
$(`${elementID} option`).remove();
$(elementID).append(
$("< option > < / option > ")
.text("Any")
.val("__default_any__")
);
$.each(data, function(index, item) {
$(elementID).append(
$("< option > < / option > ")
.text(item)
.val(item)
);
if (item === preselectedVal) {
console.log(preselectedVal);
$(elementID).val(preselectedVal).trigger('change')
}
});
});
}
function updateSearchList() {
$.getJSON("{{.basePath}}/api/subnet-ranges", null, function(data) {
$("#status-selector option").remove();
$("#status-selector").append(
$("< option > < / option > ")
.text("All")
.val("All"),
$("< option > < / option > ")
.text("Enabled")
.val("Enabled"),
$("< option > < / option > ")
.text("Disabled")
.val("Disabled"),
$("< option > < / option > ")
.text("Connected")
.val("Connected"),
$("< option > < / option > ")
.text("Disconnected")
.val("Disconnected")
);
$.each(data, function(index, item) {
$("#status-selector").append(
$("< option > < / option > ")
.text(item)
.val(item)
);
});
});
2024-01-09 20:52:23 +01:00
}
2020-04-22 12:11:28 +02:00
< / script >
< script >
2020-06-02 06:20:50 +02:00
// load client list
$(document).ready(function () {
2024-01-09 20:52:23 +01:00
updateSearchList();
2020-06-02 06:20:50 +02:00
populateClientList();
})
2023-02-16 17:17:10 +01:00
// show search bar and override :contains to be case-insensitive
$(document).ready(function () {
$("#search-form").show();
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
})
// hide all clients and display only the ones that meet the search criteria (name, email, IP)
$('#search-input').keyup(function () {
2023-03-15 21:24:44 +01:00
$("#status-selector").val("All");
2024-01-12 21:28:15 +01:00
let query = $(this).val().trim();
2023-02-16 17:17:10 +01:00
$('.col-lg-4').hide();
$(".info-box-text").each(function() {
if($(this).children('i.fa-user').length > 0 || $(this).children('i.fa-envelope').length > 0)
{
$(this).filter(':contains("' + query + '")').parent().parent().parent().show();
}
})
$(".badge-secondary").filter(':contains("' + query + '")').parent().parent().parent().show();
2023-12-29 09:22:12 +01:00
$(".fa-tguserid").each(function () {
2024-01-12 21:28:15 +01:00
if ($(this).parent().text().trim().indexOf(query) != -1) {
2023-12-29 09:22:12 +01:00
$(this).closest('.col-lg-4').show();
}
})
2024-01-12 21:28:15 +01:00
let upperQuery = query.toUpperCase()
2024-01-09 21:03:27 +01:00
$(".fa-additional_notes").each(function () {
2024-01-12 21:28:15 +01:00
if ($(this).parent().text().trim().indexOf(upperQuery) != -1) {
2024-01-09 21:03:27 +01:00
$(this).closest('.col-lg-4').show();
}
})
2023-02-16 17:17:10 +01:00
})
2023-03-15 21:24:44 +01:00
$("#status-selector").on('change', function () {
$('#search-input').val("");
switch ($("#status-selector").val()) {
case "All":
$('.col-lg-4').show();
break;
case "Enabled":
$('.col-lg-4').hide();
$('[id^="paused_"]').each(function () {
if ($(this).css("visibility") === "hidden") {
$(this).parent().parent().show();
}
});
break;
case "Disabled":
$('.col-lg-4').hide();
$('[id^="paused_"]').each(function () {
if ($(this).css("visibility") !== "hidden") {
$(this).parent().parent().show();
}
});
break;
case "Connected":
$('.col-lg-4').hide();
$.ajax({
cache: false,
method: 'GET',
url: '{{.basePath}}/status',
success: function (data) {
const returnedHTML = $(data).find(".table-success").get();
var returnedString = "";
returnedHTML.forEach(entry => returnedString += entry.outerHTML);
$(".fa-key").each(function () {
if (returnedString.indexOf($(this).parent().text().trim()) != -1) {
$(this).closest('.col-lg-4').show();
}
})
}
});
break;
case "Disconnected":
$('.col-lg-4').show();
$.ajax({
cache: false,
method: 'GET',
url: '{{.basePath}}/status',
success: function (data) {
const returnedHTML = $(data).find(".table-success").get();
var returnedString = "";
returnedHTML.forEach(entry => returnedString += entry.outerHTML);
$(".fa-key").each(function () {
if (returnedString.indexOf($(this).parent().text().trim()) != -1) {
$(this).closest('.col-lg-4').hide();
}
})
}
});
break;
default:
2023-12-27 09:08:55 +01:00
$('.col-lg-4').hide();
const selectedSR = $("#status-selector").val()
$(".fa-subnetrange").each(function () {
const srs = $(this).parent().text().trim().split(',')
for (const sr of srs) {
if (sr === selectedSR) {
$(this).closest('.col-lg-4').show();
break
}
}
})
// $('.col-lg-4').show();
2023-03-15 21:24:44 +01:00
break;
}
});
2020-04-22 12:11:28 +02:00
// modal_pause_client modal event
2020-05-29 06:27:23 +02:00
$("#modal_pause_client").on('show.bs.modal', function (event) {
2020-05-29 05:47:55 +02:00
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
const client_name = button.data('clientname');
const modal = $(this);
2020-04-22 12:11:28 +02:00
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 () {
2020-05-29 06:27:23 +02:00
$("#pause_client_confirm").click(function () {
2020-05-29 05:47:55 +02:00
const client_id = $(this).val();
2020-04-22 12:11:28 +02:00
pauseClient(client_id);
2020-05-29 06:27:23 +02:00
$("#modal_pause_client").modal('hide');
2020-04-22 12:11:28 +02:00
});
});
2020-04-18 11:17:49 +02:00
// modal_remove_client modal event
2020-05-29 06:27:23 +02:00
$("#modal_remove_client").on('show.bs.modal', function (event) {
2020-05-29 05:47:55 +02:00
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
const client_name = button.data('clientname');
const modal = $(this);
2020-04-18 11:17:49 +02:00
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 () {
2020-05-29 06:27:23 +02:00
$("#remove_client_confirm").click(function () {
2020-05-29 05:47:55 +02:00
const client_id = $(this).val();
const data = {"id": client_id};
2020-04-18 11:17:49 +02:00
$.ajax({
cache: false,
method: 'POST',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/remove-client',
2020-04-18 11:17:49 +02:00
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
success: function(data) {
2020-05-29 06:27:23 +02:00
$("#modal_remove_client").modal('hide');
2020-04-18 11:17:49 +02:00
toastr.success('Removed client successfully');
2020-05-29 05:47:55 +02:00
const divElement = document.getElementById('client_' + client_id);
2020-04-22 16:49:45 +02:00
divElement.style.display = "none";
2023-12-27 09:08:55 +01:00
updateApplyConfigVisibility()
2020-04-19 05:46:43 +02:00
},
error: function(jqXHR, exception) {
2020-05-29 05:47:55 +02:00
const responseJson = jQuery.parseJSON(jqXHR.responseText);
2020-04-19 05:46:43 +02:00
toastr.error(responseJson['message']);
2020-04-18 11:17:49 +02:00
}
});
});
});
2020-06-02 06:20:50 +02:00
2021-08-08 19:55:59 +02:00
2020-06-02 06:20:50 +02:00
// Edit client modal event
2023-08-11 10:34:11 +02:00
// This fills the modal dialogue with data from the DB when we open the edit menu
2020-06-02 06:20:50 +02:00
$(document).ready(function () {
2022-01-29 08:53:56 +01:00
$("#modal_edit_client").on('show.bs.modal', function (event) {
2020-06-02 06:20:50 +02:00
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,
2023-12-28 08:37:26 +01:00
'minInputWidth': '100%',
2020-06-02 06:20:50 +02:00
'placeholderColor': '#666666'
});
// AllowedIPs tag input
modal.find("#_client_allowed_ips").tagsInput({
'width': '100%',
'height': '75%',
'interactive': true,
'defaultText': 'Add More',
'removeWithBackspace': true,
'minChars': 0,
2023-12-28 08:37:26 +01:00
'minInputWidth': '100%',
2020-06-02 06:20:50 +02:00
'placeholderColor': '#666666'
});
2022-01-29 08:45:00 +01:00
modal.find("#_client_extra_allowed_ips").tagsInput({
'width': '100%',
'height': '75%',
'interactive': true,
'defaultText': 'Add More',
'removeWithBackspace' : true,
'minChars': 0,
2023-12-28 08:37:26 +01:00
'minInputWidth': '100%',
2022-01-29 08:45:00 +01:00
'placeholderColor': '#666666'
})
2020-06-02 06:20:50 +02:00
// update client modal data
$.ajax({
cache: false,
method: 'GET',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/api/client/' + client_id,
2020-06-02 06:20:50 +02:00
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);
2023-12-29 09:22:12 +01:00
modal.find("#_client_telegram_userid").val(client.telegram_userid);
2020-06-02 06:20:50 +02:00
modal.find("#_client_name").val(client.name);
modal.find("#_client_email").val(client.email);
2023-12-27 09:08:55 +01:00
let preselectedEl
if (client.subnet_ranges & & client.subnet_ranges.length > 0) {
preselectedEl = client.subnet_ranges[0]
}
updateSubnetRangesList("#_subnet_ranges", preselectedEl);
2020-06-02 06:20:50 +02:00
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);
});
2022-01-29 08:45:00 +01:00
modal.find("#_client_extra_allowed_ips").importTags('');
client.extra_allowed_ips.forEach(function (obj) {
modal.find("#_client_extra_allowed_ips").addTag(obj);
});
2023-12-25 20:21:37 +01:00
modal.find("#_client_endpoint").val(client.endpoint);
2021-08-05 19:58:01 +02:00
modal.find("#_use_server_dns").prop("checked", client.use_server_dns);
2020-06-02 06:20:50 +02:00
modal.find("#_enabled").prop("checked", client.enabled);
2023-08-11 10:34:11 +02:00
modal.find("#_client_public_key").val(client.public_key);
modal.find("#_client_preshared_key").val(client.preshared_key);
2024-01-09 21:03:27 +01:00
modal.find("#_additional_notes").val(client.additional_notes);
2023-12-27 09:08:55 +01:00
// handle subnet range select
$('#_subnet_ranges').on('select2:select', function (e) {
updateIPAllocationSuggestionExisting();
});
2020-06-02 06:20:50 +02:00
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
});
});
2022-12-02 23:40:29 +01:00
// regenerateQRCode function for regenerating QR Code adding/removing some parts of configuration because of compatibility issues with some clients
function regenerateQRCode() {
const client_id = $("#qr_client_id").val();
const QRCodeImg = $("#qr_code");
2023-02-16 17:08:26 +01:00
const QRCodeA = $("#qr_code_a");
2022-12-02 23:40:29 +01:00
QRCodeImg.hide();
$.ajax({
cache: false,
method: 'GET',
url: '{{.basePath}}/api/client/' + client_id,
2023-03-16 09:09:48 +01:00
data: {
2023-05-24 12:02:07 +02:00
2023-03-16 09:09:48 +01:00
},
2022-12-02 23:40:29 +01:00
dataType: 'json',
contentType: "application/json",
success: function (resp) {
const client = resp.Client;
$(".modal-title").text("Scan QR Code for " + client.name + " profile");
QRCodeImg.attr('src', resp.QRCode).show();
2023-02-16 17:08:26 +01:00
QRCodeA.attr('download', resp.Client.name);
QRCodeA.attr('href', resp.QRCode).show();
2022-12-02 23:40:29 +01:00
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
2022-12-26 10:02:07 +01:00
// submitEmailClient function for sending an email with the configuration to the client
2021-08-08 19:55:59 +02:00
function submitEmailClient() {
2021-08-25 07:38:04 +02:00
const client_id = $("#e_client_id").val();
const email = $("#e_client_email").val();
2021-08-08 19:55:59 +02:00
const data = {"id": client_id, "email": email};
$.ajax({
cache: false,
method: 'POST',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/email-client',
2021-08-08 19:55:59 +02:00
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
success: function(resp) {
$("#modal_email_client").modal('hide');
toastr.success('Sent email to client successfully');
2023-12-29 09:22:12 +01:00
},
error: function(jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
// submitTelegramClient function for sending a telegram message with the configuration to the client
function submitTelegramClient() {
const client_id = $("#tg_client_id").val();
const userid = $("#tg_client_userid").val();
const data = {"id": client_id, "userid": userid};
$.ajax({
cache: false,
method: 'POST',
url: '{{.basePath}}/send-telegram-client',
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
success: function(resp) {
$("#modal_telegram_client").modal('hide');
toastr.success('Sent config via telegram to client successfully');
2021-08-08 19:55:59 +02:00
},
error: function(jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
2020-06-02 06:20:50 +02:00
// submitEditClient function for updating an existing client
2023-08-11 10:34:11 +02:00
// This sends dialogue data to the back-end when user presses "Save"
// See e.g. routes.go:UpdateClient for where data is processed/verified.
2020-06-02 06:20:50 +02:00
function submitEditClient() {
const client_id = $("#_client_id").val();
const name = $("#_client_name").val();
const email = $("#_client_email").val();
2023-12-29 09:22:12 +01:00
const telegram_userid = $("#_client_telegram_userid").val();
2020-06-02 06:20:50 +02:00
const allocated_ips = $("#_client_allocated_ips").val().split(",");
const allowed_ips = $("#_client_allowed_ips").val().split(",");
2021-08-05 19:58:01 +02:00
let use_server_dns = false;
2022-01-29 08:45:00 +01:00
let extra_allowed_ips = [];
2023-08-11 10:34:11 +02:00
const public_key = $("#_client_public_key").val();
const preshared_key = $("#_client_preshared_key").val();
2022-01-29 08:45:00 +01:00
if( $("#_client_extra_allowed_ips").val() !== "" ) {
extra_allowed_ips = $("#_client_extra_allowed_ips").val().split(",");
}
2021-08-05 19:58:01 +02:00
2023-12-25 20:21:37 +01:00
const endpoint = $("#_client_endpoint").val();
2021-08-05 19:58:01 +02:00
if ($("#_use_server_dns").is(':checked')){
use_server_dns = true;
}
2020-06-02 06:20:50 +02:00
let enabled = false;
if ($("#_enabled").is(':checked')){
enabled = true;
}
2024-01-09 21:03:27 +01:00
const additional_notes = $("#_additional_notes").val();
2023-12-29 09:22:12 +01:00
const data = {"id": client_id, "name": name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips,
2023-12-25 20:21:37 +01:00
"allowed_ips": allowed_ips, "extra_allowed_ips": extra_allowed_ips, "endpoint": endpoint,
2024-01-09 21:03:27 +01:00
"use_server_dns": use_server_dns, "enabled": enabled, "public_key": public_key, "preshared_key": preshared_key, "additional_notes": additional_notes};
2020-06-02 06:20:50 +02:00
$.ajax({
cache: false,
method: 'POST',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/update-client',
2020-06-02 06:20:50 +02:00
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']);
}
});
}
2021-08-08 19:55:59 +02:00
// submitHandler
function submitHandler(form) {
const formId = $(form).attr('id');
if (formId === "frm_edit_client") {
submitEditClient();
2022-12-02 23:40:29 +01:00
} else if (formId === "frm_email_client") {
2021-08-08 19:55:59 +02:00
submitEmailClient();
2023-12-29 09:22:12 +01:00
} else if (formId === "frm_telegram_client") {
submitTelegramClient();
2021-08-08 19:55:59 +02:00
}
}
2022-01-29 08:53:56 +01:00
$("#modal_email_client").on('show.bs.modal', function (event) {
2021-08-08 19:55:59 +02:00
let modal = $(this);
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
$.ajax({
cache: false,
method: 'GET',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/api/client/' + client_id,
2021-08-08 19:55:59 +02:00
dataType: 'json',
contentType: "application/json",
success: function (resp) {
const client = resp.Client;
2022-03-20 13:53:09 +01:00
modal.find(".modal-title").text("Send config to client " + client.name);
2021-08-25 07:38:04 +02:00
modal.find("#e_client_id").val(client.id);
modal.find("#e_client_email").val(client.email);
2021-08-08 19:55:59 +02:00
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
});
2022-01-29 08:53:56 +01:00
$("#modal_qr_client").on('show.bs.modal', function (event) {
let modal = $(this);
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
2022-12-02 23:40:29 +01:00
modal.find("#qr_client_id").val(client_id);
regenerateQRCode();
2022-01-29 08:53:56 +01:00
});
2023-12-29 09:22:12 +01:00
$("#modal_telegram_client").on('show.bs.modal', function (event) {
let modal = $(this);
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
$.ajax({
cache: false,
method: 'GET',
url: '{{.basePath}}/api/client/' + client_id,
dataType: 'json',
contentType: "application/json",
success: function (resp) {
const client = resp.Client;
modal.find(".modal-title").text("Send config to client " + client.name);
modal.find("#tg_client_id").val(client.id);
modal.find("#tg_client_userid").val(client.telegram_userid);
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
});
2020-06-02 06:20:50 +02:00
$(document).ready(function () {
$.validator.setDefaults({
2021-08-08 19:55:59 +02:00
submitHandler: function (form) {
submitHandler(form);
2020-06-02 06:20:50 +02:00
}
});
2021-08-08 19:55:59 +02:00
// Edit client form validation
2021-11-20 16:08:24 +01:00
$("#frm_edit_client").validate({
rules: {
client_name: {
required: true,
2021-08-08 19:55:59 +02:00
},
2021-11-20 16:08:24 +01:00
},
messages: {
client_name: {
required: "Please enter a name"
2021-08-08 19:55:59 +02:00
},
2021-11-20 16:08:24 +01:00
},
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');
}
});
// Email client form validation
$("#frm_email_client").validate({
2021-08-08 19:55:59 +02:00
rules: {
2021-11-20 16:08:24 +01:00
e_client_email: {
2020-06-02 06:20:50 +02:00
required: true,
email: true,
},
},
messages: {
2021-11-20 16:08:24 +01:00
e_client_email: {
required: "Please enter an email"
2020-06-02 06:20:50 +02:00
},
},
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');
}
});
2023-12-29 09:22:12 +01:00
// Telegram client form validation
$("#frm_telegram_client").validate({
rules: {
tg_client_userid: {
required: true,
number: true,
},
},
messages: {
tg_client_userid: {
required: "Please enter a telegram userid",
number: "Please enter a valid telegram userid"
},
},
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');
}
});
2022-12-02 23:40:29 +01:00
//
2020-06-02 06:20:50 +02:00
});
2020-04-18 11:17:49 +02:00
< / script >
2021-08-08 19:55:59 +02:00
{{end}}