mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-07-10 17:43:58 +03:00
Merge branch 'master' into client-default-settings
This commit is contained in:
Arminas
GitHub
commit
ca21bc4ab4
34 changed files with 1425 additions and 189 deletions
145
templates/about.html
Normal file
145
templates/about.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
{{ define "title"}}
|
||||
About
|
||||
{{ end }}
|
||||
|
||||
{{ define "top_css"}}
|
||||
{{ end }}
|
||||
|
||||
{{ define "username"}}
|
||||
{{ .username }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "page_title"}}
|
||||
About
|
||||
{{ end }}
|
||||
|
||||
{{ define "page_content"}}
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- <h5 class="mt-4 mb-2">Global Settings</h5> -->
|
||||
<div class="row">
|
||||
<!-- left column -->
|
||||
<div class="col-md-6">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">About Wireguard-UI</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="version" class="control-label">Current version</label>
|
||||
<input type="text" class="form-control" id="version" value="{{ .appVersion }}" readonly>
|
||||
</div>
|
||||
{{ if .gitCommit }}
|
||||
<div class="form-group">
|
||||
<label for="version" class="control-label">git commit hash</label>
|
||||
<input type="text" class="form-control" id="version" value="{{ .gitCommit }}" readonly>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="form-group">
|
||||
<label for="currentReleaseDate" class="control-label">Current version release date</label>
|
||||
<input type="text" class="form-control" id="currentReleaseDate" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="latestRelease" class="control-label">Latest release</label>
|
||||
<input type="text" class="form-control" id="latestRelease" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="latestReleaseDate" class="control-label">Latest release date</label>
|
||||
<input type="text" class="form-control" id="latestReleaseDate" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="author" class="control-label">Author</label>
|
||||
<div id="author">
|
||||
<a id="authorLink">
|
||||
<img id="authorImage"
|
||||
style="width: 50px; height: 50px; border-radius: 50%; border: 1px solid #000;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contributors" class="control-label">Contributors</label>
|
||||
<div id="contributors"></div>
|
||||
</div>
|
||||
<strong>Copyright ©
|
||||
<script>document.write(new Date().getFullYear())</script>
|
||||
<a href="https://github.com/ngoduykhanh/wireguard-ui">Wireguard UI</a>.
|
||||
</strong> All rights reserved.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "bottom_js"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'GET',
|
||||
url: 'https://api.github.com/repos/ngoduykhanh/wireguard-ui/releases/tags/' + $("#version").val(),
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
$("#currentReleaseDate").attr("value", data.published_at.split("T")[0]);
|
||||
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
$("#currentReleaseDate").attr("value", "Could not find this version on GitHub.com");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'GET',
|
||||
url: 'https://api.github.com/repos/ngoduykhanh/wireguard-ui/releases/latest',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
$("#latestRelease").attr("value", data.tag_name);
|
||||
$("#latestReleaseDate").attr("value", data.published_at.split("T")[0]);
|
||||
$("#author").attr("value", data.author.login);
|
||||
$("#authorImage").attr("src", data.author.avatar_url);
|
||||
$("#authorImage").after("<b> " + data.author.login + "</b>");
|
||||
$("#authorLink").attr("href", data.author.html_url);
|
||||
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
$("#latestRelease").attr("value", "Could not connect to GitHub.com");
|
||||
$("#latestReleaseDate").attr("value", "Could not connect to GitHub.com");
|
||||
$("#author").attr("value", "Could not connect to GitHub.com");
|
||||
}
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'GET',
|
||||
url: 'https://api.github.com/repos/ngoduykhanh/wireguard-ui/contributors',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
data.forEach(contributor => $("#contributors").append("<a href=\"" + contributor.html_url + "\" title=\"" + contributor.login + "\">" +
|
||||
"<img src=\"" + contributor.avatar_url + "\" style=\"width: 50px; height: 50px; border-radius: 50%; border: 1px solid #000; margin: 5px;\"/></a>"));
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
$("#contributors").html("<p>Could not connect to GitHub.com</p>");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ajaxStop(function () {
|
||||
if (Date.parse($("#currentReleaseDate").val()) < Date.parse($("#latestReleaseDate").val())) {
|
||||
$("#currentReleaseDate").after("<p style=\"color:red\">Current version is out of date</p>")
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -8,6 +8,8 @@
|
|||
<title>{{template "title" .}}</title>
|
||||
<!-- Tell the browser to be responsive to screen width -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="{{.basePath}}/favicon">
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="{{.basePath}}/static/plugins/fontawesome-free/css/all.min.css">
|
||||
|
|
@ -44,24 +46,31 @@
|
|||
</ul>
|
||||
|
||||
<!-- SEARCH FORM -->
|
||||
<!-- <form class="form-inline ml-3">-->
|
||||
<!-- <div class="input-group input-group-sm">-->
|
||||
<!-- <input class="form-control form-control-navbar" type="search" placeholder="Search"-->
|
||||
<!-- aria-label="Search">-->
|
||||
<!-- <div class="input-group-append">-->
|
||||
<!-- <button class="btn btn-navbar" type="submit">-->
|
||||
<!-- <i class="fas fa-search"></i>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<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>
|
||||
<select name="status-selector" id="status-selector" class="form-control selectpicker show-tick" style="margin-left: 10px">
|
||||
<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>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<!-- 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>
|
||||
<button style="margin-left: 0.5em;" type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
|
||||
<button id="apply-config-button" style="margin-left: 0.5em; display: none;" type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
|
||||
data-target="#modal_apply_config"><i class="nav-icon fas fa-check"></i> Apply
|
||||
Config</button>
|
||||
{{if .baseData.CurrentUser}}
|
||||
|
|
@ -88,7 +97,13 @@
|
|||
</div>
|
||||
<div class="info">
|
||||
{{if .baseData.CurrentUser}}
|
||||
<a href="{{.basePath}}/profile" class="d-block">{{.baseData.CurrentUser}}</a>
|
||||
|
||||
{{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}}
|
||||
|
||||
{{else}}
|
||||
<a href="#" class="d-block">Administrator</a>
|
||||
{{end}}
|
||||
|
|
@ -107,6 +122,8 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{{if .baseData.Admin}}
|
||||
<li class="nav-item">
|
||||
<a href="{{.basePath}}/wg-server" class="nav-link {{if eq .baseData.Active "wg-server" }}active{{end}}">
|
||||
<i class="nav-icon fas fa-server"></i>
|
||||
|
|
@ -115,6 +132,8 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-header">SETTINGS</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{.basePath}}/global-settings" class="nav-link {{if eq .baseData.Active "global-settings" }}active{{end}}">
|
||||
|
|
@ -132,6 +151,16 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<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}}
|
||||
|
||||
<li class="nav-header">UTILITIES</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{.basePath}}/status" class="nav-link {{if eq .baseData.Active "status" }}active{{end}}">
|
||||
|
|
@ -149,6 +178,15 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /.sidebar-menu -->
|
||||
|
|
@ -289,7 +327,7 @@
|
|||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
|
||||
<!--
|
||||
<footer class="main-footer">
|
||||
<div class="float-right d-none d-sm-block">
|
||||
<b>Version</b> {{ .appVersion }}
|
||||
|
|
@ -297,7 +335,7 @@
|
|||
<strong>Copyright © <script>document.write(new Date().getFullYear())</script> <a href="https://github.com/ngoduykhanh/wireguard-ui">Wireguard UI</a>.</strong> All rights
|
||||
reserved.
|
||||
</footer>
|
||||
|
||||
-->
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Control sidebar content goes here -->
|
||||
|
|
@ -328,6 +366,32 @@
|
|||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
$.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']);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
// populateClient function for render new client info
|
||||
// on the client page.
|
||||
function populateClient(client_id) {
|
||||
|
|
|
|||
|
|
@ -71,14 +71,7 @@ Wireguard Clients
|
|||
<div class="modal-body">
|
||||
<input type="hidden" id="qr_client_id" name="qr_client_id">
|
||||
<img id="qr_code" class="w-100" style="image-rendering: pixelated;" src="" alt="QR code" />
|
||||
<div class="form-group">
|
||||
<div class="icheck-primary d-inline">
|
||||
<input type="checkbox" id="qr_include_fwmark" onchange="regenerateQRCode()">
|
||||
<label for="qr_include_fwmark">
|
||||
Include FwMark
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- do not include FwMark in any client configs: it is INVALID. -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
|
|
@ -250,6 +243,93 @@ Wireguard Clients
|
|||
populateClientList();
|
||||
})
|
||||
|
||||
// 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 () {
|
||||
$("#status-selector").val("All");
|
||||
var query = $(this).val();
|
||||
$('.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();
|
||||
})
|
||||
|
||||
$("#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:
|
||||
$('.col-lg-4').show();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// modal_pause_client modal event
|
||||
$("#modal_pause_client").on('show.bs.modal', function (event) {
|
||||
const button = $(event.relatedTarget);
|
||||
|
|
@ -391,6 +471,7 @@ Wireguard Clients
|
|||
function regenerateQRCode() {
|
||||
const client_id = $("#qr_client_id").val();
|
||||
const QRCodeImg = $("#qr_code");
|
||||
const QRCodeA = $("#qr_code_a");
|
||||
let include_fwmark = false;
|
||||
if ($("#qr_include_fwmark").is(':checked')){
|
||||
include_fwmark = true;
|
||||
|
|
@ -400,9 +481,7 @@ Wireguard Clients
|
|||
cache: false,
|
||||
method: 'GET',
|
||||
url: '{{.basePath}}/api/client/' + client_id,
|
||||
data: {
|
||||
qrCodeIncludeFwMark: include_fwmark
|
||||
},
|
||||
data: JSON.stringify(data),
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (resp) {
|
||||
|
|
@ -410,6 +489,8 @@ Wireguard Clients
|
|||
|
||||
$(".modal-title").text("Scan QR Code for " + client.name + " profile");
|
||||
QRCodeImg.attr('src', resp.QRCode).show();
|
||||
QRCodeA.attr('download', resp.Client.name);
|
||||
QRCodeA.attr('href', resp.QRCode).show();
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
|
|
|
|||
|
|
@ -56,10 +56,10 @@ Global Settings
|
|||
value="{{if .globalSettings.PersistentKeepalive }}{{ .globalSettings.PersistentKeepalive }}{{end}}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="forward_mark">Forward Mark</label>
|
||||
<input type="text" class="form-control" id="forward_mark"
|
||||
name="forward_mark" placeholder="Forward Mark"
|
||||
value="{{ .globalSettings.ForwardMark }}">
|
||||
<label for="firewall_mark">Firewall Mark</label>
|
||||
<input type="text" class="form-control" id="firewall_mark"
|
||||
name="firewall_mark" placeholder="Firewall Mark"
|
||||
value="{{ .globalSettings.FirewallMark }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="config_file_path">Wireguard Config File Path</label>
|
||||
|
|
@ -91,7 +91,7 @@ Global Settings
|
|||
<dt>2. DNS Servers</dt>
|
||||
<dd>The DNS servers will be set to client config.</dd>
|
||||
<dt>3. MTU</dt>
|
||||
<dd>The MTU will be set to server and client config. By default it is <code>1420</code>. You might want
|
||||
<dd>The MTU will be set to server and client config. By default it is <code>1450</code>. You might want
|
||||
to adjust the MTU size if your connection (e.g PPPoE, 3G, satellite network, etc) has a low MTU.</dd>
|
||||
<dd>Leave blank to omit this setting in the configs.</dd>
|
||||
<dt>4. Persistent Keepalive</dt>
|
||||
|
|
@ -100,8 +100,8 @@ Global Settings
|
|||
until they reach out to other peers themselves. Adding <code>PersistentKeepalive</code>
|
||||
can ensure that the connection remains open.</dd>
|
||||
<dd>Leave blank to omit this setting in the Client config.</dd>
|
||||
<dt>5. Forward Mark</dt>
|
||||
<dd>Set an <code>fwmark</code> on all packets going out of WireGuard's UDP socket. Default value: <code>0xca6c</code></dd>
|
||||
<dt>5. Firewall Mark</dt>
|
||||
<dd>Add a matching <code>fwmark</code> on all packets going out of a WireGuard non-default-route tunnel. Default value: <code>0xca6c</code></dd>
|
||||
<dt>6. Wireguard Config File Path</dt>
|
||||
<dd>The path of your Wireguard server config file. Please make sure the parent directory
|
||||
exists and is writable.</dd>
|
||||
|
|
@ -149,9 +149,9 @@ Global Settings
|
|||
const dns_servers = $("#dns_servers").val().split(",");
|
||||
const mtu = $("#mtu").val();
|
||||
const persistent_keepalive = $("#persistent_keepalive").val();
|
||||
const forward_mark = $("#forward_mark").val();
|
||||
const firewall_mark = $("#firewall_mark").val();
|
||||
const config_file_path = $("#config_file_path").val();
|
||||
const data = {"endpoint_address": endpoint_address, "dns_servers": dns_servers, "mtu": mtu, "persistent_keepalive": persistent_keepalive, "forward_mark": forward_mark, "config_file_path": config_file_path};
|
||||
const data = {"endpoint_address": endpoint_address, "dns_servers": dns_servers, "mtu": mtu, "persistent_keepalive": persistent_keepalive, "firewall_mark": firewall_mark, "config_file_path": config_file_path};
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
|
|
@ -222,7 +222,7 @@ Global Settings
|
|||
config_file_path: {
|
||||
required: true
|
||||
},
|
||||
forward_mark: {
|
||||
firewall_mark: {
|
||||
required: false
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<title>WireGuard UI</title>
|
||||
<!-- Tell the browser to be responsive to screen width -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="{{.basePath}}/favicon">
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="{{.basePath}}/static/plugins/fontawesome-free/css/all.min.css">
|
||||
|
|
@ -99,7 +101,11 @@
|
|||
$("#btn_login").click(function () {
|
||||
const username = $("#username").val();
|
||||
const password = $("#password").val();
|
||||
const data = {"username": username, "password": password}
|
||||
let rememberMe = false;
|
||||
if ($("#remember").is(':checked')){
|
||||
rememberMe = true;
|
||||
}
|
||||
const data = {"username": username, "password": password, "rememberMe": rememberMe}
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Profile
|
|||
<div class="form-group">
|
||||
<label for="username" class="control-label">Username</label>
|
||||
<input type="text" class="form-control" name="username" id="username"
|
||||
value="{{ .userInfo.Username }}">
|
||||
value="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password" class="control-label">Password</label>
|
||||
|
|
@ -55,56 +55,82 @@ Profile
|
|||
|
||||
{{ define "bottom_js"}}
|
||||
<script>
|
||||
function updateUserInfo() {
|
||||
const username = $("#username").val();
|
||||
const password = $("#password").val();
|
||||
const data = {"username": username, "password": password};
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/profile',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
toastr.success("Updated admin user information successfully");
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
{
|
||||
var previous_username;
|
||||
var admin;
|
||||
}
|
||||
$(document).ready(function () {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'GET',
|
||||
url: '{{.basePath}}/api/user/{{.baseData.CurrentUser}}',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (resp) {
|
||||
const user = resp;
|
||||
$("#username").val(user.username);
|
||||
previous_username = user.username;
|
||||
admin = user.admin;
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function () {
|
||||
updateUserInfo();
|
||||
}
|
||||
|
||||
function updateUserInfo() {
|
||||
const username = $("#username").val();
|
||||
const password = $("#password").val();
|
||||
const data = {"username": username, "password": password, "previous_username": previous_username, "admin":admin};
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/update-user',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
toastr.success("Updated user information successfully");
|
||||
location.reload();
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function () {
|
||||
updateUserInfo();
|
||||
}
|
||||
});
|
||||
$("#frm_profile").validate({
|
||||
rules: {
|
||||
username: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
username: {
|
||||
required: "Please enter a username",
|
||||
}
|
||||
},
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
$("#frm_profile").validate({
|
||||
rules: {
|
||||
username: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
username: {
|
||||
required: "Please enter a username",
|
||||
}
|
||||
},
|
||||
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>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,8 @@ Connected Peers
|
|||
<th scope="col">#</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Allocated IPs</th>
|
||||
<th scope="col">Endpoint</th>
|
||||
<th scope="col">Public Key</th>
|
||||
<th scope="col">Received</th>
|
||||
<th scope="col">Transmitted</th>
|
||||
|
|
@ -54,6 +56,8 @@ Connected Peers
|
|||
<th scope="row">{{ $idx }}</th>
|
||||
<td>{{ $peer.Name }}</td>
|
||||
<td>{{ $peer.Email }}</td>
|
||||
<td>{{ $peer.AllocatedIP }}</td>
|
||||
<td>{{ $peer.Endpoint }}</td>
|
||||
<td>{{ $peer.PublicKey }}</td>
|
||||
<td title="{{ $peer.ReceivedBytes }} Bytes"><script>document.write(bytesToHumanReadable({{ $peer.ReceivedBytes }}))</script></td>
|
||||
<td title="{{ $peer.TransmitBytes }} Bytes"><script>document.write(bytesToHumanReadable({{ $peer.TransmitBytes }}))</script></td>
|
||||
|
|
@ -68,4 +72,4 @@ Connected Peers
|
|||
</section>
|
||||
{{end}}
|
||||
{{define "bottom_js"}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
|
|
|||
294
templates/users_settings.html
Normal file
294
templates/users_settings.html
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
{{define "title"}}
|
||||
Users Settings
|
||||
{{end}}
|
||||
|
||||
{{define "top_css"}}
|
||||
{{end}}
|
||||
|
||||
{{define "username"}}
|
||||
{{ .username }}
|
||||
{{end}}
|
||||
|
||||
{{define "page_title"}}
|
||||
Users Settings
|
||||
{{end}}
|
||||
|
||||
{{define "page_content"}}
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row" id="users-list">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="modal_edit_user">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Edit User</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form name="frm_edit_user" id="frm_edit_user">
|
||||
<div class="modal-body">
|
||||
<div class="form-group" style="display:none">
|
||||
<input type="text" style="display:none" class="form-control" id="_previous_user_name"
|
||||
name="_previous_user_name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="_user_name" class="control-label">Name</label>
|
||||
<input type="text" class="form-control" id="_user_name" name="_user_name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="_user_password" class="control-label">Password</label>
|
||||
<input type="text" class="form-control" id="_user_password" name="_user_password" value=""
|
||||
placeholder="Leave empty to keep the password unchanged">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="icheck-primary d-inline">
|
||||
<input type="checkbox" id="_admin">
|
||||
<label for="_admin">
|
||||
Admin
|
||||
</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-success">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
<!-- /.modal -->
|
||||
|
||||
<div class="modal fade" id="modal_remove_user">
|
||||
<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_user_confirm">Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
<!-- /.modal -->
|
||||
{{end}}
|
||||
|
||||
{{define "bottom_js"}}
|
||||
<script>
|
||||
function populateUsersList() {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'GET',
|
||||
url: '{{.basePath}}/getusers',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
renderUserList(data);
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// load user list
|
||||
$(document).ready(function () {
|
||||
populateUsersList();
|
||||
let newUserHtml = '<div class="col-sm-2 offset-md-4" style=" text-align: right;">' +
|
||||
'<button style="" id="btn_new_user" type="button" class="btn btn-outline-primary btn-sm" ' +
|
||||
'data-toggle="modal" data-target="#modal_edit_user" data-username="">' +
|
||||
'<i class="nav-icon fas fa-plus"></i> New User</button></div>';
|
||||
$('h1').parents(".row").append(newUserHtml);
|
||||
})
|
||||
|
||||
// modal_remove_user modal event
|
||||
$("#modal_remove_user").on('show.bs.modal', function (event) {
|
||||
const button = $(event.relatedTarget);
|
||||
const user_name = button.data('username');
|
||||
const modal = $(this);
|
||||
modal.find('.modal-body').text("You are about to remove user " + user_name);
|
||||
modal.find('#remove_user_confirm').val(user_name);
|
||||
})
|
||||
|
||||
// remove_user_confirm button event
|
||||
$(document).ready(function () {
|
||||
$("#remove_user_confirm").click(function () {
|
||||
const user_name = $(this).val();
|
||||
const data = {"username": user_name};
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/remove-user',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
$("#modal_remove_user").modal('hide');
|
||||
toastr.success('Removed user successfully');
|
||||
const divElement = document.getElementById('user_' + user_name);
|
||||
divElement.style.display = "none";
|
||||
location.reload()
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Edit user modal event
|
||||
$(document).ready(function () {
|
||||
$("#modal_edit_user").on('show.bs.modal', function (event) {
|
||||
let modal = $(this);
|
||||
const button = $(event.relatedTarget);
|
||||
const user_name = button.data('username');
|
||||
|
||||
// update user modal data
|
||||
if (user_name !== "") {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'GET',
|
||||
url: '{{.basePath}}/api/user/' + user_name,
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (resp) {
|
||||
const user = resp;
|
||||
|
||||
modal.find(".modal-title").text("Edit user " + user.username);
|
||||
modal.find("#_user_name").val(user.username);
|
||||
modal.find("#_previous_user_name").val(user.username);
|
||||
modal.find("#_user_password").val("");
|
||||
modal.find("#_user_password").prop("placeholder", "Leave empty to keep the password unchanged")
|
||||
modal.find("#_admin").prop("checked", user.admin);
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
modal.find(".modal-title").text("Add new user");
|
||||
modal.find("#_user_name").val("");
|
||||
modal.find("#_previous_user_name").val("");
|
||||
modal.find("#_user_password").val("");
|
||||
modal.find("#_user_password").prop("placeholder", "")
|
||||
modal.find("#_admin").prop("checked", false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function updateUserInfo() {
|
||||
const username = $("#_user_name").val();
|
||||
const previous_username = $("#_previous_user_name").val();
|
||||
const password = $("#_user_password").val();
|
||||
let admin = false;
|
||||
if ($("#_admin").is(':checked')) {
|
||||
admin = true;
|
||||
}
|
||||
const data = {
|
||||
"username": username,
|
||||
"password": password,
|
||||
"previous_username": previous_username,
|
||||
"admin": admin
|
||||
};
|
||||
|
||||
if (previous_username !== "") {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/update-user',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
toastr.success("Updated user information successfully");
|
||||
location.reload();
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '{{.basePath}}/create-user',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
toastr.success("Created user successfully");
|
||||
location.reload();
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function (form) {
|
||||
updateUserInfo();
|
||||
}
|
||||
});
|
||||
// Edit user form validation
|
||||
$("#frm_edit_user").validate({
|
||||
rules: {
|
||||
_user_name: {
|
||||
required: true
|
||||
},
|
||||
_user_password: {
|
||||
required: function () {
|
||||
return $("#_previous_user_name").val() === "";
|
||||
}
|
||||
},
|
||||
},
|
||||
messages: {
|
||||
_user_name: {
|
||||
required: "Please enter a username"
|
||||
},
|
||||
_user_password: {
|
||||
required: "Please input a password"
|
||||
},
|
||||
},
|
||||
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>
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue