mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #282 from WeeJeWel/master 

Merge Master into Production
pull/194/head
Emile Nijssen 3 years ago
committed by GitHub
parent
17d9b576c5 2abefa90eb
commit
2935bfe354
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 53 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      README.md
  2. 3
      docs/changelog.json
  3. 8
      src/lib/Server.js
  4. 2
      src/package.json
  5. 25
      src/www/index.html
  6. 2
      src/www/js/api.js
  7. 45
      src/www/js/app.js

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.
# Updating
## Updating
To update to the latest version, simply run:
@ -103,4 +103,8 @@ docker rm 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!",
"3": "Many improvements and small changes. 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.save();
debug(`New Session: ${req.session.id})`);
debug(`New Session: ${req.session.id}`);
}))
// WireGuard
@ -99,7 +99,11 @@ module.exports = class Server {
const { clientId } = req.params;
const client = await WireGuard.getClient({ 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-Type', 'text/plain');
res.send(config);

2
src/package.json
View File

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

25
src/www/index.html
View File

@ -11,11 +11,17 @@
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body class="bg-gray-50">
<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">
<span v-if="requiresPassword"
@ -72,13 +78,8 @@
class="relative overflow-hidden border-b border-gray-100 border-solid">
<!-- Chart -->
<div class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries">
</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);">
<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.chartSeries">
</apexchart>
</div>
@ -101,7 +102,7 @@
<div class="flex-grow">
<!-- 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 -->
<input v-show="clientEditNameId === client.id" v-model="clientEditName"
@ -154,7 +155,7 @@
</span>
<!-- 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"
fill="currentColor">
@ -179,7 +180,7 @@
<!-- Last seen -->
<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}}
</span>
</div>
@ -465,7 +466,7 @@
</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://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline"
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 {
async call({ method, path, body }) {
const res = await fetch(`/api${path}`, {
const res = await fetch(`./api${path}`, {
method,
headers: {
'Content-Type': 'application/json',

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

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

Write Preview
Loading…
Cancel
Save