2020-04-18 11:17:49 +02:00
{{define "base.html"}}
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< title > {{template "title" .}}< / title >
<!-- Tell the browser to be responsive to screen width -->
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2023-02-16 17:09:24 +01:00
<!-- Favicon -->
< link rel = "icon" href = "{{.basePath}}/favicon" >
2020-04-18 11:17:49 +02:00
<!-- Font Awesome -->
2022-04-25 09:17:13 +02:00
< link rel = "stylesheet" href = "{{.basePath}}/static/plugins/fontawesome-free/css/all.min.css" >
2020-04-18 11:17:49 +02:00
<!-- iCheck for checkboxes and radio inputs -->
2022-04-25 09:17:13 +02:00
< link rel = "stylesheet" href = "{{.basePath}}/static/plugins/icheck-bootstrap/icheck-bootstrap.min.css" >
2020-04-18 11:17:49 +02:00
<!-- Select2 -->
2022-04-25 09:17:13 +02:00
< link rel = "stylesheet" href = "{{.basePath}}/static/plugins/select2/css/select2.min.css" >
2020-04-18 11:17:49 +02:00
<!-- Toastr -->
2022-04-25 09:17:13 +02:00
< link rel = "stylesheet" href = "{{.basePath}}/static/plugins/toastr/toastr.min.css" >
2020-04-18 19:44:51 +02:00
<!-- Jquery Tags Input -->
2022-04-25 09:17:13 +02:00
< link rel = "stylesheet" href = "{{.basePath}}/static/plugins/jquery-tags-input/dist/jquery.tagsinput.min.css" >
2020-04-18 11:17:49 +02:00
<!-- Ionicons -->
< link rel = "stylesheet" href = "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" >
<!-- overlayScrollbars -->
2022-04-25 09:17:13 +02:00
< link rel = "stylesheet" href = "{{.basePath}}/static/dist/css/adminlte.min.css" >
2020-04-18 11:17:49 +02:00
<!-- Google Font: Source Sans Pro -->
< link href = "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel = "stylesheet" >
2020-04-22 12:11:28 +02:00
<!-- START: On page css -->
{{template "top_css" .}}
<!-- END: On page css -->
2020-04-18 11:17:49 +02:00
< / head >
< body class = "hold-transition sidebar-mini" >
<!-- Site wrapper -->
< div class = "wrapper" >
<!-- Navbar -->
< nav class = "main-header navbar navbar-expand navbar-white navbar-light" >
<!-- Left navbar links -->
< ul class = "navbar-nav" >
< li class = "nav-item" >
< a class = "nav-link" data-widget = "pushmenu" href = "#" role = "button" > < i class = "fas fa-bars" > < / i > < / a >
< / li >
< / ul >
<!-- SEARCH FORM -->
2023-02-16 17:17:10 +01:00
< form class = "form-inline ml-3" style = "display: none" id = "search-form" >
< div class = "input-group input-group-sm" >
< input class = "form-control form-control-navbar" placeholder = "Search"
aria-label="Search" id="search-input">
< div class = "input-group-append" >
< button class = "btn-navbar" type = "submit" disabled >
< i class = "fas fa-search" > < / i >
< / button >
< / div >
< / div >
2023-03-16 08:58:28 +01:00
< div class = "form-group form-group-sm" >
< select name = "status-selector" id = "status-selector" class = "custom-select form-control-navbar" style = "margin-left: 0.5em; height: 90%; font-size: 14px;" >
2023-12-27 09:08:55 +01:00
<!-- THIS SECTION IS OVERRIDDEN BY JS. SEE updateSearchList() function in clients.html BEFORE EDITING -->
2023-03-16 08:58:28 +01:00
< option value = "All" > All< / option >
< option value = "Enabled" > Enabled< / option >
< option value = "Disabled" > Disabled< / option >
< option value = "Connected" > Connected< / option >
< option value = "Disconnected" > Disconnected< / option >
2023-12-27 09:08:55 +01:00
<!-- THIS SECTION IS OVERRIDDEN BY JS. SEE updateSearchList() function in clients.html BEFORE EDITING -->
2023-03-16 08:58:28 +01:00
< / select >
< / div >
2023-02-16 17:17:10 +01:00
< / form >
2020-04-18 11:17:49 +02:00
2020-06-02 06:20:50 +02:00
<!-- Right navbar links -->
< div class = "navbar-nav ml-auto" >
< button style = "margin-left: 0.5em;" type = "button" class = "btn btn-outline-primary btn-sm" data-toggle = "modal"
data-target="#modal_new_client">< i class = "nav-icon fas fa-plus" > < / i > New
Client< / button >
2023-03-15 21:15:41 +01:00
< button id = "apply-config-button" style = "margin-left: 0.5em; display: none;" type = "button" class = "btn btn-outline-danger btn-sm" data-toggle = "modal"
2020-06-02 06:20:50 +02:00
data-target="#modal_apply_config">< i class = "nav-icon fas fa-check" > < / i > Apply
Config< / button >
2020-10-09 23:33:29 +02:00
{{if .baseData.CurrentUser}}
2022-04-25 09:17:13 +02:00
< button onclick = "location.href='{{.basePath}}/logout';" style = "margin-left: 0.5em;" type = "button"
2020-06-02 06:20:50 +02:00
class="btn btn-outline-danger btn-sm">< i class = "nav-icon fas fa-sign-out-alt" > < / i > Logout< / button >
2020-10-09 23:33:29 +02:00
{{end}}
2020-06-02 06:20:50 +02:00
< / div >
2020-04-18 11:17:49 +02:00
< / nav >
<!-- /.navbar -->
<!-- Main Sidebar Container -->
< aside class = "main-sidebar sidebar-dark-primary elevation-4" >
<!-- Brand Logo -->
2022-04-25 09:17:13 +02:00
< a href = "{{.basePath}}" class = "brand-link" >
2022-03-20 13:53:09 +01:00
< span class = "brand-text" > WIREGUARD UI< / span >
2020-04-18 11:17:49 +02:00
< / a >
<!-- Sidebar -->
< div class = "sidebar" >
<!-- Sidebar user (optional) -->
< div class = "user-panel mt-3 pb-3 mb-3 d-flex" >
< div class = "image" >
2020-04-24 13:14:54 +02:00
< i class = "nav-icon fas fa-2x fa-user" > < / i >
2020-04-18 11:17:49 +02:00
< / div >
< div class = "info" >
2022-12-21 21:52:00 +01:00
{{if .baseData.CurrentUser}}
2023-03-15 21:13:53 +01:00
{{if .baseData.Admin}}
< a href = "{{.basePath}}/profile" class = "d-block" > Administrator: {{.baseData.CurrentUser}}< / a >
{{else}}
< a href = "{{.basePath}}/profile" class = "d-block" > Manager: {{.baseData.CurrentUser}}< / a >
{{end}}
2022-12-21 21:52:00 +01:00
{{else}}
< a href = "#" class = "d-block" > Administrator< / a >
{{end}}
2020-04-18 11:17:49 +02:00
< / div >
< / div >
<!-- Sidebar Menu -->
< nav class = "mt-2" >
< ul class = "nav nav-pills nav-sidebar flex-column" data-widget = "treeview" role = "menu" data-accordion = "false" >
2022-03-20 13:53:09 +01:00
< li class = "nav-header" > MAIN< / li >
2020-04-18 11:17:49 +02:00
< li class = "nav-item" >
2022-04-26 20:36:39 +02:00
< a href = "{{.basePath}}/" class = "nav-link {{if eq .baseData.Active " " } } active { { end } } " >
2020-04-19 10:50:59 +02:00
< i class = "nav-icon fas fa-user-secret" > < / i >
2020-04-18 11:17:49 +02:00
< p >
2020-04-19 10:50:59 +02:00
Wireguard Clients
2020-04-18 11:17:49 +02:00
< / p >
< / a >
< / li >
2023-03-15 21:13:53 +01:00
{{if .baseData.Admin}}
2020-04-18 11:17:49 +02:00
< li class = "nav-item" >
2022-04-25 09:17:13 +02:00
< a href = "{{.basePath}}/wg-server" class = "nav-link {{if eq .baseData.Active " wg-server " } } active { { end } } " >
2020-04-18 11:17:49 +02:00
< i class = "nav-icon fas fa-server" > < / i >
< p >
2020-04-19 10:50:59 +02:00
Wireguard Server
< / p >
< / a >
< / li >
2023-03-15 21:13:53 +01:00
2022-03-20 13:53:09 +01:00
< li class = "nav-header" > SETTINGS< / li >
2020-04-19 10:50:59 +02:00
< li class = "nav-item" >
2022-04-25 09:17:13 +02:00
< a href = "{{.basePath}}/global-settings" class = "nav-link {{if eq .baseData.Active " global-settings " } } active { { end } } " >
2020-04-19 10:50:59 +02:00
< i class = "nav-icon fas fa-cog" > < / i >
< p >
Global Settings
2020-04-18 11:17:49 +02:00
< / p >
< / a >
< / li >
2023-05-24 12:04:02 +02:00
{{if not .loginDisabled}}
2023-03-15 21:13:53 +01:00
< li class = "nav-item" >
< a href = "{{.basePath}}/users-settings" class = "nav-link {{if eq .baseData.Active " users-settings " } } active { { end } } " >
< i class = "nav-icon fas fa-cog" > < / i >
< p >
Users Settings
< / p >
< / a >
< / li >
{{end}}
2023-05-24 12:04:02 +02:00
{{end}}
2023-03-15 21:13:53 +01:00
2022-03-20 13:53:09 +01:00
< li class = "nav-header" > UTILITIES< / li >
2021-08-28 15:10:30 +02:00
< li class = "nav-item" >
2022-04-25 09:17:13 +02:00
< a href = "{{.basePath}}/status" class = "nav-link {{if eq .baseData.Active " status " } } active { { end } } " >
2022-03-20 13:53:09 +01:00
< i class = "nav-icon fas fa-signal" > < / i >
2021-08-28 15:10:30 +02:00
< p >
Status
< / p >
< / a >
< / li >
2022-03-20 10:03:27 +01:00
< li class = "nav-item" >
2022-04-25 09:17:13 +02:00
< a href = "{{.basePath}}/wake_on_lan_hosts" class = "nav-link {{if eq .baseData.Active " wake_on_lan_hosts " } } active { { end } } " >
2022-03-20 10:03:27 +01:00
< i class = "nav-icon fas fa-solid fa-power-off" > < / i >
< p >
2022-03-20 13:53:09 +01:00
WoL Hosts
2022-03-20 10:03:27 +01:00
< / p >
< / a >
< / li >
2023-02-16 17:31:24 +01:00
< li class = "nav-header" > ABOUT< / li >
< li class = "nav-item" >
< a href = "{{.basePath}}/about" class = "nav-link {{if eq .baseData.Active " about " } } active { { end } } " >
< i class = "nav-icon fas fa-solid fa-id-card" > < / i >
< p >
About
< / p >
< / a >
< / li >
2020-04-18 11:17:49 +02:00
< / ul >
< / nav >
<!-- /.sidebar - menu -->
< / div >
<!-- /.sidebar -->
< / aside >
< div class = "modal fade" id = "modal_new_client" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h4 class = "modal-title" > New 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 >
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-04-18 11:17:49 +02:00
< div class = "form-group" >
< label for = "client_allocated_ips" class = "control-label" > IP Allocation< / label >
2020-04-20 19:26:49 +02:00
< input type = "text" data-role = "tagsinput" class = "form-control" id = "client_allocated_ips" >
2020-04-18 11:17:49 +02:00
< / div >
< div class = "form-group" >
2022-03-20 13:53:09 +01:00
< label for = "client_allowed_ips" class = "control-label" > Allowed IPs
< i class = "fas fa-info-circle" data-toggle = "tooltip"
data-original-title="Specify a list of addresses that will get routed to the
server. These addresses will be included in 'AllowedIPs' of client config">
< / i >
< / label >
2020-04-18 19:44:51 +02:00
< input type = "text" data-role = "tagsinput" class = "form-control" id = "client_allowed_ips"
2022-04-26 20:35:35 +02:00
value="{{ StringsJoin .client_defaults.AllowedIps "," }}">
2020-04-18 11:17:49 +02:00
< / div >
2022-01-29 08:45:00 +01:00
< div class = "form-group" >
2022-03-20 13:53:09 +01:00
< label for = "client_extra_allowed_ips" class = "control-label" > Extra Allowed IPs
< i class = "fas fa-info-circle" data-toggle = "tooltip"
data-original-title="Specify a list of addresses that will get routed to the
client. These addresses will be included in 'AllowedIPs' of WG server config">
< / i >
< / label >
2022-04-26 20:35:35 +02:00
< input type = "text" data-role = "tagsinput" class = "form-control" id = "client_extra_allowed_ips" value = "{{ StringsJoin .client_defaults.ExtraAllowedIps " , " } } " >
2022-01-29 08:45:00 +01:00
< / 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" >
2022-04-26 20:35:35 +02:00
< input type = "checkbox" id = "use_server_dns" { { if . client_defaults . UseServerDNS } } checked { { end } } >
2021-08-05 19:58:01 +02:00
< label for = "use_server_dns" >
Use server DNS
< / label >
< / div >
< / div >
2020-04-18 11:17:49 +02:00
< div class = "form-group" >
< div class = "icheck-primary d-inline" >
2022-04-26 20:35:35 +02:00
< input type = "checkbox" id = "enabled" { { if . client_defaults . EnableAfterCreation } } checked { { end } } >
2020-04-18 11:17:49 +02:00
< label for = "enabled" >
Enable after creation
< / label >
< / div >
< / div >
2022-03-13 17:33:37 +01:00
< details >
2022-03-20 13:53:09 +01:00
< summary > < strong > Public and Preshared Keys< / strong >
< i class = "fas fa-info-circle" data-toggle = "tooltip"
data-original-title="If you don't want to let the server generate and store the
2022-12-13 21:35:13 +01:00
client's private key, you can manually specify its public and preshared key here
2022-03-20 13:53:09 +01:00
. Note: QR code will not be generated">
< / i >
< / summary >
2022-03-13 17:33:37 +01:00
< div class = "form-group" style = "margin-top: 1rem" >
< label for = "client_public_key" class = "control-label" >
Public Key
< / label >
2022-03-20 13:53:09 +01:00
< input type = "text" class = "form-control" id = "client_public_key" name = "client_public_key" placeholder = "Autogenerated" aria-invalid = "false" >
2022-03-13 17:33:37 +01:00
< / div >
< div class = "form-group" >
< label for = "client_preshared_key" class = "control-label" >
Preshared Key
< / label >
2022-12-13 21:35:13 +01:00
< input type = "text" class = "form-control" id = "client_preshared_key" name = "client_preshared_key" placeholder = "Autogenerated - enter "-" to skip generation" >
2022-03-13 17:33:37 +01:00
< / 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 >
< 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 -->
2020-04-23 04:29:44 +02:00
< div class = "modal fade" id = "modal_apply_config" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h4 class = "modal-title" > Apply Config< / h4 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< p > Do you want to write config file and restart WireGuard server?< / p >
< / div >
< div class = "modal-footer justify-content-between" >
< button type = "button" class = "btn btn-default" data-dismiss = "modal" > Cancel< / button >
< button type = "button" class = "btn btn-danger" id = "apply_config_confirm" > Apply< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
2020-04-18 11:17:49 +02:00
<!-- Content Wrapper. Contains page content -->
< div class = "content-wrapper" >
<!-- Content Header (Page header) -->
< section class = "content-header" >
< div class = "container-fluid" >
< div class = "row mb-2" >
< div class = "col-sm-6" >
< h1 > {{template "page_title" .}}< / h1 >
< / div >
< / div >
< / div > <!-- /.container - fluid -->
< / section >
<!-- Main content -->
{{template "page_content" .}}
<!-- /.content -->
< / div >
<!-- /.content - wrapper -->
2023-02-16 17:31:24 +01:00
<!--
2020-04-18 11:17:49 +02:00
< footer class = "main-footer" >
< div class = "float-right d-none d-sm-block" >
2020-06-01 10:24:11 +02:00
< b > Version< / b > {{ .appVersion }}
2020-04-18 11:17:49 +02:00
< / div >
2021-11-21 21:55:43 +01:00
< strong > Copyright © < script > document . write ( new Date ( ) . getFullYear ( ) ) < / script > < a href = "https://github.com/ngoduykhanh/wireguard-ui" > Wireguard UI< / a > .< / strong > All rights
2020-04-18 11:17:49 +02:00
reserved.
< / footer >
2023-02-16 17:31:24 +01:00
-->
2020-04-18 11:17:49 +02:00
<!-- Control Sidebar -->
< aside class = "control-sidebar control-sidebar-dark" >
<!-- Control sidebar content goes here -->
< / aside >
<!-- /.control - sidebar -->
< / div >
<!-- ./wrapper -->
<!-- jQuery -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/plugins/jquery/jquery.min.js" > < / script >
2020-04-18 11:17:49 +02:00
<!-- Bootstrap 4 -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/plugins/bootstrap/js/bootstrap.bundle.min.js" > < / script >
2020-04-18 11:17:49 +02:00
<!-- Select2 -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/plugins/select2/js/select2.full.min.js" > < / script >
2020-04-18 11:17:49 +02:00
<!-- jquery - validation -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/plugins/jquery-validation/jquery.validate.min.js" > < / script >
2020-04-18 11:17:49 +02:00
<!-- Toastr -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/plugins/toastr/toastr.min.js" > < / script >
2020-04-18 19:44:51 +02:00
<!-- Jquery Tags Input -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/plugins/jquery-tags-input/dist/jquery.tagsinput.min.js" > < / script >
2020-04-18 11:17:49 +02:00
<!-- AdminLTE App -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/dist/js/adminlte.min.js" > < / script >
2020-06-02 06:20:50 +02:00
<!-- Custom js -->
2022-04-25 09:17:13 +02:00
< script src = "{{.basePath}}/static/custom/js/helper.js" > < / script >
2020-04-18 11:17:49 +02:00
< script >
2022-03-20 13:53:09 +01:00
// initialize all tooltips
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
2023-03-15 21:15:41 +01:00
$(document).ready(function () {
2023-12-27 09:08:55 +01:00
addGlobalStyle(`
.toast-top-right-fix {
top: 67px;
right: 12px;
}
`, 'toastrToastStyleFix')
toastr.options.closeDuration = 100;
// toastr.options.timeOut = 10000;
toastr.options.positionClass = 'toast-top-right-fix';
updateApplyConfigVisibility()
});
function addGlobalStyle(css, id) {
if (!document.querySelector('#' + id)) {
let head = document.head
if (!head) { return }
let style = document.createElement('style')
style.type = 'text/css'
style.id = id
style.innerHTML = css
head.appendChild(style)
}
}
function updateApplyConfigVisibility() {
2023-03-15 21:15:41 +01:00
$.ajax({
cache: false,
method: 'GET',
url: '{{.basePath}}/test-hash',
dataType: 'json',
contentType: "application/json",
success: function(data) {
if (data.status) {
$("#apply-config-button").show()
}
else
{
$("#apply-config-button").hide()
}
},
error: function(jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
2023-12-27 09:08:55 +01:00
}
2023-03-15 21:15:41 +01:00
2020-06-02 06:20:50 +02:00
// populateClient function for render new client info
// on the client page.
function populateClient(client_id) {
$.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) {
renderClientList([resp]);
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
2020-05-29 09:22:29 +02:00
// submitNewClient function for new client form submission
2020-04-18 11:17:49 +02:00
function submitNewClient() {
2020-05-29 09:22:29 +02:00
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-05-29 09:22:29 +02:00
const allocated_ips = $("#client_allocated_ips").val().split(",");
const allowed_ips = $("#client_allowed_ips").val().split(",");
2023-12-25 20:21:37 +01:00
const endpoint = $("#client_endpoint").val();
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 = [];
if ($("#client_extra_allowed_ips").val() !== "") {
extra_allowed_ips = $("#client_extra_allowed_ips").val().split(",");
}
2021-08-05 19:58:01 +02:00
if ($("#use_server_dns").is(':checked')){
use_server_dns = true;
}
2020-05-29 09:22:29 +02:00
let enabled = false;
2020-04-18 11:17:49 +02:00
if ($("#enabled").is(':checked')){
enabled = true;
}
2022-03-13 17:33:37 +01:00
const public_key = $("#client_public_key").val();
const preshared_key = $("#client_preshared_key").val();
2024-01-09 21:03:27 +01:00
const additional_notes = $("#additional_notes").val();
2020-04-18 11:17:49 +02:00
2023-12-29 09:22:12 +01:00
const data = {"name": name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
2023-12-25 20:21:37 +01:00
"extra_allowed_ips": extra_allowed_ips, "endpoint": endpoint, "use_server_dns": use_server_dns, "enabled": enabled,
2024-01-09 21:03:27 +01:00
"public_key": public_key, "preshared_key": preshared_key, "additional_notes": additional_notes};
2020-04-18 11:17:49 +02:00
$.ajax({
cache: false,
method: 'POST',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/new-client',
2020-04-18 11:17:49 +02:00
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
2020-06-02 06:20:50 +02:00
success: function(resp) {
2020-05-29 06:27:23 +02:00
$("#modal_new_client").modal('hide');
2020-04-18 11:17:49 +02:00
toastr.success('Created new client successfully');
2020-06-02 06:20:50 +02:00
// Update the home page (clients page) after adding successfully
2022-12-02 23:08:07 +01:00
if (window.location.pathname === "{{.basePath}}/") {
2020-06-02 06:20:50 +02:00
populateClient(resp.id);
2020-05-29 09:22:29 +02:00
}
2023-12-27 09:08:55 +01:00
updateApplyConfigVisibility()
2020-04-19 05:46:43 +02:00
},
error: function(jqXHR, exception) {
2020-05-29 09:22:29 +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-04-20 19:26:49 +02:00
// updateIPAllocationSuggestion function for automatically fill
// the IP Allocation input with suggested ip addresses
2023-12-27 09:08:55 +01:00
function updateIPAllocationSuggestion(forceDefault = false) {
let subnetRange = $("#subnet_ranges").select2('val');
if (forceDefault || !subnetRange || subnetRange.length === 0) {
subnetRange = '__default_any__'
}
2020-04-20 19:26:49 +02:00
$.ajax({
cache: false,
method: 'GET',
2023-12-27 09:08:55 +01:00
url: `{{.basePath}}/api/suggest-client-ips?sr=${subnetRange}`,
2020-04-20 19:26:49 +02:00
dataType: 'json',
contentType: "application/json",
success: function(data) {
2023-12-27 09:08:55 +01:00
const allocated_ips = $("#client_allocated_ips").val().split(",");
allocated_ips.forEach(function (item, index) {
$('#client_allocated_ips').removeTag(escape(item));
})
2020-04-20 19:26:49 +02:00
data.forEach(function (item, index) {
$('#client_allocated_ips').addTag(item);
})
},
error: function(jqXHR, exception) {
2023-12-27 09:08:55 +01:00
const allocated_ips = $("#client_allocated_ips").val().split(",");
allocated_ips.forEach(function (item, index) {
$('#client_allocated_ips').removeTag(escape(item));
})
2020-05-29 09:22:29 +02:00
const responseJson = jQuery.parseJSON(jqXHR.responseText);
2020-04-20 19:26:49 +02:00
toastr.error(responseJson['message']);
}
});
}
2020-04-18 11:17:49 +02:00
< / script >
< script >
//Initialize Select2 Elements
2020-05-29 06:27:23 +02:00
$(".select2").select2()
2020-04-18 11:17:49 +02:00
2020-04-20 19:26:49 +02:00
// IP Allocation tag input
2020-05-29 06:27:23 +02:00
$("#client_allocated_ips").tagsInput({
2020-04-20 19:26:49 +02:00
'width': '100%',
'height': '75%',
'interactive': true,
'defaultText': 'Add More',
'removeWithBackspace': true,
'minChars': 0,
2023-12-28 08:37:26 +01:00
'minInputWidth': '100%',
2020-04-20 19:26:49 +02:00
'placeholderColor': '#666666'
});
2020-04-18 19:44:51 +02:00
// AllowedIPs tag input
2020-05-29 06:27:23 +02:00
$("#client_allowed_ips").tagsInput({
2020-04-18 19:44:51 +02:00
'width': '100%',
'height': '75%',
'interactive': true,
'defaultText': 'Add More',
'removeWithBackspace': true,
'minChars': 0,
2023-12-28 08:37:26 +01:00
'minInputWidth': '100%',
2020-04-18 19:44:51 +02:00
'placeholderColor': '#666666'
});
2022-01-29 08:45:00 +01:00
$("#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-04-18 11:17:49 +02:00
// New client form validation
$(document).ready(function () {
$.validator.setDefaults({
submitHandler: function () {
submitNewClient();
}
});
2020-05-29 06:27:23 +02:00
$("#frm_new_client").validate({
2020-04-18 11:17:49 +02:00
rules: {
client_name: {
required: true,
},
},
messages: {
client_name: {
2020-04-19 05:51:55 +02:00
required: "Please enter a name"
2020-04-18 11:17:49 +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');
}
});
});
2020-04-20 19:26:49 +02:00
// New Client modal event
$(document).ready(function () {
2020-05-29 06:27:23 +02:00
$("#modal_new_client").on('shown.bs.modal', function (e) {
2020-06-02 06:20:50 +02:00
$("#client_name").val("");
$("#client_email").val("");
2022-03-13 17:33:37 +01:00
$("#client_public_key").val("");
$("#client_preshared_key").val("");
2020-05-29 06:27:23 +02:00
$("#client_allocated_ips").importTags('');
2022-01-29 08:45:00 +01:00
$("#client_extra_allowed_ips").importTags('');
2023-12-29 09:22:12 +01:00
$("#client_endpoint").val('');
$("#client_telegram_userid").val('');
2024-01-09 21:03:27 +01:00
$("#additional_notes").val('');
2023-12-27 09:08:55 +01:00
updateSubnetRangesList("#subnet_ranges");
updateIPAllocationSuggestion(true);
2020-04-20 19:26:49 +02:00
});
});
2020-04-23 04:29:44 +02:00
2023-12-27 09:08:55 +01:00
// handle subnet range select
$('#subnet_ranges').on('select2:select', function (e) {
// console.log('Selected Option: ', $("#subnet_ranges").select2('val'));
updateIPAllocationSuggestion();
});
2020-04-23 04:29:44 +02:00
// apply_config_confirm button event
$(document).ready(function () {
2020-05-29 06:27:23 +02:00
$("#apply_config_confirm").click(function () {
2020-04-23 04:29:44 +02:00
$.ajax({
cache: false,
2022-07-14 08:36:47 +02:00
method: 'POST',
2022-04-25 09:17:13 +02:00
url: '{{.basePath}}/api/apply-wg-config',
2020-04-23 04:29:44 +02:00
dataType: 'json',
contentType: "application/json",
success: function(data) {
2023-12-27 09:08:55 +01:00
updateApplyConfigVisibility()
2020-05-29 06:27:23 +02:00
$("#modal_apply_config").modal('hide');
2020-04-23 04:29:44 +02:00
toastr.success('Applied config successfully');
},
error: function(jqXHR, exception) {
2020-05-29 09:22:29 +02:00
const responseJson = jQuery.parseJSON(jqXHR.responseText);
2020-04-23 04:29:44 +02:00
toastr.error(responseJson['message']);
}
});
});
});
2020-04-18 11:17:49 +02:00
< / script >
<!-- START: On page script -->
{{template "bottom_js" .}}
<!-- END: On page script -->
< / body >
< / html >
2021-08-28 15:10:30 +02:00
{{end}}
