From 82dbe6fc4809d10381b33e220922a31f4ad5a3ec Mon Sep 17 00:00:00 2001 From: jcosmao Date: Sun, 14 Apr 2024 12:51:20 +0200 Subject: [PATCH] Update allowed Ips from xwvike/allowed-ips - Fix dark mode - adjust style to fit wg-easy theme - added check for valid ipv4 - added js helper to jump on next input when '.' pressed - rm allowed ip from New client create for simplicity --- README.md | 4 +- src/lib/Server.js | 8 +-- src/lib/WireGuard.js | 24 +++---- src/www/css/app.css | 8 +++ src/www/index.html | 157 ++++++++++++++++++++++++------------------- src/www/js/api.js | 4 +- src/www/js/app.js | 14 ++-- src/www/js/i18n.js | 10 ++- 8 files changed, 128 insertions(+), 101 deletions(-) diff --git a/README.md b/README.md index 8294e4a4..b27ef9f3 100644 --- a/README.md +++ b/README.md @@ -109,12 +109,12 @@ These options can be configured by setting environment variables using `-e KEY=" | `WG_HOST` | - | `vpn.myserver.com` | The public hostname of your VPN server. | | `WG_DEVICE` | `eth0` | `ens6f0` | Ethernet device the wireguard traffic should be forwarded through. | | `WG_PORT` | `51820` | `12345` | The public UDP port of your VPN server. WireGuard will listen on that (othwise default) inside the Docker container. | -| `WG_CONFIG_PORT`| `51820` | `12345` | The UDP port used on [Home Assistant Plugin](https://github.com/adriy-be/homeassistant-addons-jdeath/tree/main/wgeasy) +| `WG_CONFIG_PORT`| `51820` | `12345` | The UDP port used on [Home Assistant Plugin](https://github.com/adriy-be/homeassistant-addons-jdeath/tree/main/wgeasy) | `WG_MTU` | `null` | `1420` | The MTU the clients will use. Server uses default WG MTU. | | `WG_PERSISTENT_KEEPALIVE` | `0` | `25` | Value in seconds to keep the "connection" open. If this value is 0, then connections won't be kept alive. | | `WG_DEFAULT_ADDRESS` | `10.8.0.x` | `10.6.0.x` | Clients IP address range. | | `WG_DEFAULT_DNS` | `1.1.1.1` | `8.8.8.8, 8.8.4.4` | DNS server clients will use. If set to blank value, clients will not use any DNS. | -| `WG_ALLOWED_IPS` | `0.0.0.0/0, ::/0` | `192.168.15.0/24, 10.0.1.0/24` | Allowed IPs clients will use. | +| `WG_ALLOWED_IPS` | `0.0.0.0/0, ::/0` | `192.168.15.0/24, 10.0.1.0/24` | Allowed IPs clients will use. It specify which destination address will be routed to wireguard interface. | | `WG_PRE_UP` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L19) for the default value. | | `WG_POST_UP` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L20) for the default value. | | `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. | diff --git a/src/lib/Server.js b/src/lib/Server.js index cd00782a..80810368 100644 --- a/src/lib/Server.js +++ b/src/lib/Server.js @@ -191,8 +191,8 @@ module.exports = class Server { return config; })) .post('/api/wireguard/client', defineEventHandler(async (event) => { - const { name, allowedIps } = await readBody(event); - await WireGuard.createClient({ name, allowedIps }); + const { name } = await readBody(event); + await WireGuard.createClient({ name }); return { success: true }; })) .delete('/api/wireguard/client/:clientId', defineEventHandler(async (event) => { @@ -234,7 +234,7 @@ module.exports = class Server { await WireGuard.updateClientAddress({ clientId, address }); return { success: true }; })) - .put('/api/wireguard/client/:clientId/allowedips', defineEventHandler(async (event) => { + .put('/api/wireguard/client/:clientId/allowedIPs', defineEventHandler(async (event) => { const clientId = getRouterParam(event, 'clientId'); if (clientId === '__proto__' || clientId === 'constructor' || clientId === 'prototype') { throw createError({ status: 403 }); @@ -242,7 +242,7 @@ module.exports = class Server { const { allowedIPs } = await readBody(event); await WireGuard.updateClientAllowedIPs({ clientId, allowedIPs }); return { success: true }; - })) + })); const safePathJoin = (base, target) => { // Manage web root (edge case) diff --git a/src/lib/WireGuard.js b/src/lib/WireGuard.js index 9db73def..dfc091ad 100644 --- a/src/lib/WireGuard.js +++ b/src/lib/WireGuard.js @@ -117,7 +117,7 @@ PostDown = ${WG_POST_DOWN} } allowedIPs = allowedIPs.substring(1); } else { - allowedIPs = client.address; + allowedIPs = `${client.address}/32`; } result += ` @@ -235,7 +235,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`; }); } - async createClient({ name, allowedIps }) { + async createClient({ name }) { if (!name) { throw new Error('Missing: Name'); } @@ -248,20 +248,16 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`; }); const preSharedKey = await Util.exec('wg genpsk'); + // Calculate next IP let address; - if (allowedIps) { - address = allowedIps; - } else { - // Calculate next IP - for (let i = 2; i < 255; i++) { - const client = Object.values(config.clients).find((client) => { - return client.address.includes(WG_DEFAULT_ADDRESS.replace('x', i)); - }); + for (let i = 2; i < 255; i++) { + const client = Object.values(config.clients).find((client) => { + return client.address.includes(WG_DEFAULT_ADDRESS.replace('x', i)); + }); - if (!client) { - address = `${WG_DEFAULT_ADDRESS.replace('x', i)}`; - break; - } + if (!client) { + address = `${WG_DEFAULT_ADDRESS.replace('x', i)}`; + break; } } diff --git a/src/www/css/app.css b/src/www/css/app.css index fbaf3a81..733caef8 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -843,6 +843,10 @@ video { height: 2rem; } +.h-9 { + height: 2.25rem; +} + .min-h-5 { min-height: 1.25rem; } @@ -887,6 +891,10 @@ video { width: 2rem; } +.w-9 { + width: 2.25rem; +} + .w-fit { width: -moz-fit-content; width: fit-content; diff --git a/src/www/index.html b/src/www/index.html index 530fde2c..08cacfbe 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -112,7 +112,7 @@ {{$t("backup")}} - + + + +
+
+
+ {{item.address+'/'+item.cidr}} +
+ + + + + +
+
- -
- - +
+ + +
+
diff --git a/src/www/js/api.js b/src/www/js/api.js index 242f505d..a32bfbf1 100644 --- a/src/www/js/api.js +++ b/src/www/js/api.js @@ -93,11 +93,11 @@ class API { }))); } - async createClient({ name, allowedIps }) { + async createClient({ name }) { return this.call({ method: 'post', path: '/wireguard/client', - body: { name, allowedIps }, + body: { name }, }); } diff --git a/src/www/js/app.js b/src/www/js/app.js index 954159d1..9631da77 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -59,13 +59,12 @@ new Vue({ clientDelete: null, clientCreate: null, clientCreateName: '', - clientCreateAllowedIps: '', clientEditName: null, clientEditNameId: null, clientEditAddress: null, clientEditAddressId: null, clientEditAllowedIPs: null, - userInputIP: [0, 0, 0, 0, 0], + userInputIP: [], qrcode: null, currentRelease: null, @@ -271,10 +270,9 @@ new Vue({ }, createClient() { const name = this.clientCreateName; - const allowedIps = this.clientCreateAllowedIps; if (!name) return; - this.api.createClient({ name, allowedIps }) + this.api.createClient({ name }) .catch((err) => alert(err.message || err.toString())) .finally(() => this.refresh().catch(console.error)); }, @@ -324,13 +322,19 @@ new Vue({ .catch((err) => alert(err.message || err.toString())) .finally(() => this.refresh().catch(console.error)); }, + handleKeyDown(event, key, nextInputRef) { + if (event.key === key) { + event.preventDefault(); + this.$refs[nextInputRef].focus(); + } + }, addNewIP() { const address = this.userInputIP.slice(0, 4).join('.'); const allowedIPs = [...this.clientEditAllowedIPs.allowedIPs]; const obj = { type: 'ipv4', address, cidr: this.userInputIP[4] }; allowedIPs.push(obj); this.clientEditAllowedIPs.allowedIPs = allowedIPs; - this.userInputIP = [0, 0, 0, 0, 0]; + this.userInputIP = []; }, removeIP(index) { const allowedIPs = [...this.clientEditAllowedIPs.allowedIPs]; diff --git a/src/www/js/i18n.js b/src/www/js/i18n.js index 3b616e4c..76b61fd2 100644 --- a/src/www/js/i18n.js +++ b/src/www/js/i18n.js @@ -34,6 +34,8 @@ const messages = { // eslint-disable-line no-unused-vars backup: 'Backup', titleRestoreConfig: 'Restore your configuration', titleBackupConfig: 'Backup your configuration', + editAllowedIPs: 'Edit server AllowedIPs parameter', + allowedIPs: 'Server AllowedIPs', }, ua: { name: 'Ім`я', @@ -174,14 +176,14 @@ const messages = { // eslint-disable-line no-unused-vars fr: { // github.com/clem3109 name: 'Nom', password: 'Mot de passe', - signIn: 'Se Connecter', + signIn: 'Se connecter', logout: 'Se déconnecter', updateAvailable: 'Une mise à jour est disponible !', update: 'Mise à jour', clients: 'Clients', new: 'Nouveau', deleteClient: 'Supprimer ce client', - deleteDialog1: 'Êtes-vous que vous voulez supprimer', + deleteDialog1: 'Êtes-vous sûr de vouloir supprimer ?', deleteDialog2: 'Cette action ne peut pas être annulée.', cancel: 'Annuler', create: 'Créer', @@ -193,7 +195,7 @@ const messages = { // eslint-disable-line no-unused-vars disableClient: 'Désactiver ce client', enableClient: 'Activer ce client', noClients: 'Aucun client pour le moment.', - showQR: 'Afficher le code à réponse rapide (QR Code)', + showQR: 'Afficher le QR Code', downloadConfig: 'Télécharger la configuration', madeBy: 'Développé par', donate: 'Soutenir', @@ -201,6 +203,8 @@ const messages = { // eslint-disable-line no-unused-vars backup: 'Sauvegarder', titleRestoreConfig: 'Restaurer votre configuration', titleBackupConfig: 'Sauvegarder votre configuration', + editAllowedIPs: 'Editer le paramètre AllowedIPs du serveur', + allowedIPs: 'Serveur AllowedIPs', }, de: { // github.com/florian-asche name: 'Name',