MigrateRepos/wg-easy
1
0
Fork 0
mirror of https://github.com/WeeJeWel/wg-easy.git synced 2025-01-09 22:45:35 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #282 from WeeJeWel/master

Browse Source 
Merge Master into Production
This commit is contained in:
Emile Nijssen 2022-06-12 23:06:25 +02:00 committed by GitHub
commit 2935bfe354
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -93,7 +93,7 @@ These options can be configured by setting environment variables using `-e KEY="
> If you change `WG_PORT`, make sure to also change the exposed port. > If you change `WG_PORT`, make sure to also change the exposed port.
# Updating ## Updating
To update to the latest version, simply run: To update to the latest version, simply run:
@ -103,4 +103,8 @@ docker rm wg-easy
docker pull weejewel/wg-easy docker pull weejewel/wg-easy
``` ```
And then run the `docker run -d \ ...` command above again. And then run the `docker run -d \ ...` command above again.
## Common Use Cases
* [Using WireGuard-Easy with Pi-Hole](https://github.com/WeeJeWel/wg-easy/wiki/Using-WireGuard-Easy-with-Pi-Hole)

3
docs/changelog.json
View File

@ -3,5 +3,6 @@
"2": "You can now rename a client, and update the address. Enjoy!", "2": "You can now rename a client, and update the address. Enjoy!",
"3": "Many improvements and small changes. Enjoy!", "3": "Many improvements and small changes. Enjoy!",
"4": "Now with pretty charts for client's network speed. Enjoy!", "4": "Now with pretty charts for client's network speed. Enjoy!",
"5": "Many small improvements & feature requests. Enjoy!" "5": "Many small improvements & feature requests. Enjoy!",
"6": "Many small performance improvements & bug fixes. Enjoy!"
} }

8
src/lib/Server.js
View File

@ -62,7 +62,7 @@ module.exports = class Server {
req.session.authenticated = true; req.session.authenticated = true;
req.session.save(); req.session.save();
debug(`New Session: ${req.session.id})`); debug(`New Session: ${req.session.id}`);
})) }))
// WireGuard // WireGuard
@ -99,7 +99,11 @@ module.exports = class Server {
const { clientId } = req.params; const { clientId } = req.params;
const client = await WireGuard.getClient({ clientId }); const client = await WireGuard.getClient({ clientId });
const config = await WireGuard.getClientConfiguration({ clientId }); const config = await WireGuard.getClientConfiguration({ clientId });
const configName = client.name.replace(/[^a-zA-Z0-9_=+.-]/g, '-').replace(/(-{2,}|-$)/g, '-').replace(/-$/, '').substring(0, 32); const configName = client.name
.replace(/[^a-zA-Z0-9_=+.-]/g, '-')
.replace(/(-{2,}|-$)/g, '-')
.replace(/-$/, '')
.substring(0, 32);
res.header('Content-Disposition', `attachment; filename="${configName}.conf"`); res.header('Content-Disposition', `attachment; filename="${configName}.conf"`);
res.header('Content-Type', 'text/plain'); res.header('Content-Type', 'text/plain');
res.send(config); res.send(config);

2
src/package.json
View File

@ -1,5 +1,5 @@
{ {
"release": 5, "release": 6,
"name": "wg-easy", "name": "wg-easy",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "",

25
src/www/index.html
View File

@ -11,11 +11,17 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>
<style>
[v-cloak] {
display: none;
}
</style>
<body class="bg-gray-50"> <body class="bg-gray-50">
<div id="app"> <div id="app">
<div class="container mx-auto max-w-3xl"> <div v-cloak class="container mx-auto max-w-3xl">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
<span v-if="requiresPassword" <span v-if="requiresPassword"
@ -72,13 +78,8 @@
class="relative overflow-hidden border-b border-gray-100 border-solid"> class="relative overflow-hidden border-b border-gray-100 border-solid">
<!-- Chart --> <!-- Chart -->
<div class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%;"> <div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 30%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries"> <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.chartSeries">
</apexchart>
</div>
<div class="absolute z-0 top-0 left-0 right-0" style="bottom: 60%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferRxSeries"
style="transform: scaleY(-1);">
</apexchart> </apexchart>
</div> </div>
@ -101,7 +102,7 @@
<div class="flex-grow"> <div class="flex-grow">
<!-- Name --> <!-- Name -->
<div class="text-gray-700 group" :title="'Created at ' + dateTime(new Date(client.createdAt))"> <div class="text-gray-700 group" :title="'Created on ' + dateTime(new Date(client.createdAt))">
<!-- Show --> <!-- Show -->
<input v-show="clientEditNameId === client.id" v-model="clientEditName" <input v-show="clientEditNameId === client.id" v-model="clientEditName"
@ -154,7 +155,7 @@
</span> </span>
<!-- Transfer TX --> <!-- Transfer TX -->
<span v-if="client.transferTx":title="'Total Download: ' + bytes(client.transferTx)"> <span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)">
· ·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor"> fill="currentColor">
@ -179,7 +180,7 @@
<!-- Last seen --> <!-- Last seen -->
<span v-if="client.latestHandshakeAt" <span v-if="client.latestHandshakeAt"
:title="'Last seen at ' + dateTime(new Date(client.latestHandshakeAt))"> :title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))">
· {{new Date(client.latestHandshakeAt) | timeago}} · {{new Date(client.latestHandshakeAt) | timeago}}
</span> </span>
</div> </div>
@ -465,7 +466,7 @@
</div> </div>
<p class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline" <p v-cloak class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline"
href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline" href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline"
href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline" href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline"
href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p> href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p>

2
src/www/js/api.js
View File

@ -6,7 +6,7 @@
class API { class API {
async call({ method, path, body }) { async call({ method, path, body }) {
const res = await fetch(`/api${path}`, { const res = await fetch(`./api${path}`, {
method, method,
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',

45
src/www/js/app.js
View File

@ -51,31 +51,36 @@ new Vue({
chartOptions: { chartOptions: {
chart: { chart: {
background: 'transparent', background: 'transparent',
type: 'area', type: 'bar',
stacked: false,
toolbar: { toolbar: {
show: false, show: false,
}, },
animations: {
enabled: false,
},
}, },
fill: { colors: [
type: 'gradient', '#DDDDDD', // rx
}, '#EEEEEE', // tx
colors: ['#CCCCCC'], ],
dataLabels: { dataLabels: {
enabled: false, enabled: false,
}, },
stroke: { plotOptions: {
curve: 'smooth', bar: {
width: 0, horizontal: false,
},
}, },
xaxis: { xaxis: {
labels: { labels: {
show: false, show: false,
}, },
axisTicks: { axisTicks: {
show: false, show: true,
}, },
axisBorder: { axisBorder: {
show: false, show: true,
}, },
}, },
yaxis: { yaxis: {
@ -130,9 +135,9 @@ new Vue({
if (!this.clientsPersist[client.id]) { if (!this.clientsPersist[client.id]) {
this.clientsPersist[client.id] = {}; this.clientsPersist[client.id] = {};
this.clientsPersist[client.id].transferRxHistory = Array(20).fill(0); this.clientsPersist[client.id].transferRxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferRxPrevious = client.transferRx; this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxHistory = Array(20).fill(0); this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferTxPrevious = client.transferTx; this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].chartOptions = { this.clientsPersist[client.id].chartOptions = {
@ -155,22 +160,20 @@ new Vue({
this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent); this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
this.clientsPersist[client.id].transferTxHistory.shift(); this.clientsPersist[client.id].transferTxHistory.shift();
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent; client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
client.transferTxSeries = [{ client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.chartOptions = this.clientsPersist[client.id].chartOptions;
client.chartSeries = [{
name: 'tx', name: 'tx',
data: this.clientsPersist[client.id].transferTxHistory, data: this.clientsPersist[client.id].transferTxHistory,
}]; }, {
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.transferRxSeries = [{
name: 'rx', name: 'rx',
data: this.clientsPersist[client.id].transferRxHistory, data: this.clientsPersist[client.id].transferRxHistory,
}]; }];
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
client.chartOptions = this.clientsPersist[client.id].chartOptions;
return client; return client;
}); });
}, },