Merge branch 'master' into email-settings-UI

This commit is contained in:
Arminas 2023-03-07 14:58:39 +02:00 committed by GitHub
commit 0722c0f43d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 245 additions and 18 deletions

139
templates/about.html Normal file
View file

@ -0,0 +1,139 @@
{{ 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>
<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 &copy;
<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 }}

View file

@ -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,17 +46,17 @@
</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>
</form>
<!-- Right navbar links -->
<div class="navbar-nav ml-auto">
@ -149,6 +151,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 -->
@ -297,7 +308,7 @@
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!--
<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b>Version</b> {{ .appVersion }}
@ -305,7 +316,7 @@
<strong>Copyright &copy; <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 -->

View file

@ -70,7 +70,9 @@ Wireguard Clients
</div>
<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" />
<a href="" download="" id="qr_code_a">
<img id="qr_code" class="w-100" style="image-rendering: pixelated;" src="" alt="QR code" />
</a>
<div class="form-group">
<div class="icheck-primary d-inline">
<input type="checkbox" id="qr_include_fwmark" onchange="regenerateQRCode()">
@ -250,6 +252,28 @@ 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 () {
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();
})
// modal_pause_client modal event
$("#modal_pause_client").on('show.bs.modal', function (event) {
const button = $(event.relatedTarget);
@ -391,6 +415,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;
@ -410,6 +435,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);

View file

@ -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>

View file

@ -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">

View file

@ -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}}