mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-07-11 17:53:58 +03:00
Telegram support (#488)
This commit is contained in:
0xCA
GitHub
parent
841db62347
commit
41bf0bc92c
14 changed files with 588 additions and 32 deletions
|
|
@ -281,6 +281,14 @@
|
|||
<input type="text" class="form-control" id="client_preshared_key" name="client_preshared_key" placeholder="Autogenerated - enter "-" to skip generation">
|
||||
</div>
|
||||
</details>
|
||||
<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>
|
||||
</details>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
|
|
@ -452,6 +460,7 @@
|
|||
function submitNewClient() {
|
||||
const name = $("#client_name").val();
|
||||
const email = $("#client_email").val();
|
||||
const telegram_userid = $("#client_telegram_userid").val();
|
||||
const allocated_ips = $("#client_allocated_ips").val().split(",");
|
||||
const allowed_ips = $("#client_allowed_ips").val().split(",");
|
||||
const endpoint = $("#client_endpoint").val();
|
||||
|
|
@ -475,7 +484,7 @@
|
|||
const public_key = $("#client_public_key").val();
|
||||
const preshared_key = $("#client_preshared_key").val();
|
||||
|
||||
const data = {"name": name, "email": email, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
|
||||
const data = {"name": name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
|
||||
"extra_allowed_ips": extra_allowed_ips, "endpoint": endpoint, "use_server_dns": use_server_dns, "enabled": enabled,
|
||||
"public_key": public_key, "preshared_key": preshared_key};
|
||||
|
||||
|
|
@ -616,6 +625,8 @@
|
|||
$("#client_preshared_key").val("");
|
||||
$("#client_allocated_ips").importTags('');
|
||||
$("#client_extra_allowed_ips").importTags('');
|
||||
$("#client_endpoint").val('');
|
||||
$("#client_telegram_userid").val('');
|
||||
updateSubnetRangesList("#subnet_ranges");
|
||||
updateIPAllocationSuggestion(true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -80,6 +80,35 @@ Wireguard Clients
|
|||
</div>
|
||||
<!-- /.modal -->
|
||||
|
||||
<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 -->
|
||||
|
||||
<div class="modal fade" id="modal_edit_client">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
|
|
@ -159,6 +188,14 @@ Wireguard Clients
|
|||
<input type="text" class="form-control" id="_client_preshared_key" name="_client_preshared_key">
|
||||
</div>
|
||||
</details>
|
||||
<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>
|
||||
</details>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
|
|
@ -383,6 +420,11 @@ Wireguard Clients
|
|||
}
|
||||
})
|
||||
$(".badge-secondary").filter(':contains("' + query + '")').parent().parent().parent().show();
|
||||
$(".fa-tguserid").each(function () {
|
||||
if ($(this).parent().text().trim().indexOf(query.trim()) != -1) {
|
||||
$(this).closest('.col-lg-4').show();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$("#status-selector").on('change', function () {
|
||||
|
|
@ -573,6 +615,7 @@ Wireguard Clients
|
|||
|
||||
modal.find(".modal-title").text("Edit Client " + client.name);
|
||||
modal.find("#_client_id").val(client.id);
|
||||
modal.find("#_client_telegram_userid").val(client.telegram_userid);
|
||||
modal.find("#_client_name").val(client.name);
|
||||
modal.find("#_client_email").val(client.email);
|
||||
|
||||
|
|
@ -664,8 +707,29 @@ Wireguard Clients
|
|||
success: function(resp) {
|
||||
$("#modal_email_client").modal('hide');
|
||||
toastr.success('Sent email to client successfully');
|
||||
// Refresh the home page (clients page) after sending email successfully
|
||||
location.reload();
|
||||
},
|
||||
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');
|
||||
},
|
||||
error: function(jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
|
|
@ -681,6 +745,7 @@ Wireguard Clients
|
|||
const client_id = $("#_client_id").val();
|
||||
const name = $("#_client_name").val();
|
||||
const email = $("#_client_email").val();
|
||||
const telegram_userid = $("#_client_telegram_userid").val();
|
||||
const allocated_ips = $("#_client_allocated_ips").val().split(",");
|
||||
const allowed_ips = $("#_client_allowed_ips").val().split(",");
|
||||
let use_server_dns = false;
|
||||
|
|
@ -704,7 +769,7 @@ Wireguard Clients
|
|||
enabled = true;
|
||||
}
|
||||
|
||||
const data = {"id": client_id, "name": name, "email": email, "allocated_ips": allocated_ips,
|
||||
const data = {"id": client_id, "name": name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips,
|
||||
"allowed_ips": allowed_ips, "extra_allowed_ips": extra_allowed_ips, "endpoint": endpoint,
|
||||
"use_server_dns": use_server_dns, "enabled": enabled, "public_key": public_key, "preshared_key": preshared_key};
|
||||
|
||||
|
|
@ -735,6 +800,8 @@ Wireguard Clients
|
|||
submitEditClient();
|
||||
} else if (formId === "frm_email_client") {
|
||||
submitEmailClient();
|
||||
} else if (formId === "frm_telegram_client") {
|
||||
submitTelegramClient();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -771,6 +838,30 @@ Wireguard Clients
|
|||
regenerateQRCode();
|
||||
});
|
||||
|
||||
$("#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']);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function (form) {
|
||||
|
|
@ -826,6 +917,32 @@ Wireguard Clients
|
|||
$(element).removeClass('is-invalid');
|
||||
}
|
||||
});
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
//
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ Table = {{ .globalSettings.Table }}
|
|||
# ID: {{ .Client.ID }}
|
||||
# Name: {{ .Client.Name }}
|
||||
# Email: {{ .Client.Email }}
|
||||
# Telegram: {{ .Client.TgUserid }}
|
||||
# Created at: {{ .Client.CreatedAt }}
|
||||
# Update at: {{ .Client.UpdatedAt }}
|
||||
[Peer]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue