update: support @ip range with CIDR

- fix: french translation - add: test with mocha - add CIDR support in firewall
2 years ago · 047373d423
11 changed files with 634 additions and 28 deletions
--- a/src/.eslintrc.json
+++ b/src/.eslintrc.json
@ -1,7 +1,8 @@
 {
  "extends": "athom",
  "ignorePatterns": [
-    "**/vendor/*.js"
+    "**/vendor/*.js",
+    "**/test/*.js"
  ],
  "rules": {
    "consistent-return": "off",
--- a/src/lib/Firewall.js
+++ b/src/lib/Firewall.js
@ -145,12 +145,38 @@ module.exports = class Firewall {
    await Util.exec(iptablesCommand);
 =======
    // Validate target
-    if (target !== 'ACCEPT' && target !== 'DROP') {
-      throw new Error('Invalid action. Must be "ACCEPT" or "DROP".');
+    if (!Util.isValidIptablesTarget(target)) {
+      throw new Error('Invalid target.');
    }

+<<<<<<< HEAD
    await Util.exec(`iptables -A ${WG_IPT_CHAIN_NAME} -s ${source} -d ${destination} -p ${protocol} -j ${target}`);
 >>>>>>> 9ec7359 (feat: firewall)
+=======
+    // Validate protocol
+    if (!Util.isValidIptablesProtocol(protocol)) {
+      throw new Error('Invalid protocol.');
+    }
+
+    /*
+      Support command :
+      iptables -A CHAIN -s [IP | IP/CIDR] -d [IP | IP/CIDR] -p PROTOCOL -j TARGET
+     */
+
+    let iptablesCommand = `iptables -A ${WG_IPT_CHAIN_NAME}`;
+
+    if (Util.isIPAddress(source) || Util.isCIDR(source)) {
+      iptablesCommand += ` -s ${source}`;
+    }
+
+    if (Util.isIPAddress(destination) || Util.isCIDR(destination)) {
+      iptablesCommand += ` -d ${destination}`;
+    }
+
+    iptablesCommand += ` -p ${protocol} -j ${target}`;
+
+    await Util.exec(iptablesCommand);
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
    await this.__saveIptablesRules();
    debug('Rule added');
  }
--- a/src/lib/Server.js
+++ b/src/lib/Server.js
@ -279,7 +279,7 @@ module.exports = class Server {
    // templates directory & vue files
    app.use(
      fromNodeMiddleware((req, res, next) => {
-        if (req.url.startsWith('/templates/') || req.url.endsWith('vue')) {
+        if (req.url.startsWith('/templates/') || req.url.endsWith('.vue')) {
          return res.status(403).json({
            error: 'Forbidden',
          });
--- a/src/lib/Util.js
+++ b/src/lib/Util.js
@ -21,7 +21,7 @@ const Target = Object.freeze({
 });

 const TargetName = Object.freeze({
-  [Target.RETURN]: 'RETURN',
+  [Target.RETURN]: '*',
  [Target.ALLOW]: 'ALLOW',
  [Target.BLOCK]: 'BLOCK',
 });
@ -101,6 +101,26 @@ module.exports = class Util {
    });
  }

+  static isCIDR(ip) {
+    // https://stackoverflow.com/a/27434991
+    const cidrRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\/([0-9]|[12][0-9]|3[0-2]))$/;
+    return cidrRegex.test(ip);
+  }
+
+  static isIPAddress(ip) {
+    // https://stackoverflow.com/a/27434991
+    const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    return ipRegex.test(ip);
+  }
+
+  static isValidIptablesTarget(target) {
+    return Object.values(Target).includes(target);
+  }
+
+  static isValidIptablesProtocol(protocol) {
+    return Object.keys(Protocol).includes(protocol);
+  }
+
  static getProtocolName(protocolNumber) {
    return ProtocolName[protocolNumber] || 'Unknown Protocol';
  }
--- a/src/package-lock.json
+++ b/src/package-lock.json
@ -16,7 +16,9 @@
        "qrcode": "^1.5.3"
      },
      "devDependencies": {
+        "chai": "^4.5.0",
        "eslint-config-athom": "^3.1.3",
+        "mocha": "^10.7.0",
        "nodemon": "^3.1.4",
        "tailwindcss": "^3.4.7",
        "vue-template-compiler": "^2.7.16"
@ -745,8 +747,11 @@
      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
      "dev": true,
+<<<<<<< HEAD
      "license": "MIT",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "engines": {
        "node": ">=6"
      }
@ -944,6 +949,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/astral-regex": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@ -1021,6 +1035,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
    "node_modules/call-bind": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@ -1071,13 +1091,34 @@
        "node": ">= 6"
      }
    },
+    "node_modules/chai": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.5.0.tgz",
+      "integrity": "sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.3",
+        "deep-eql": "^4.1.3",
+        "get-func-name": "^2.0.2",
+        "loupe": "^2.3.6",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
      "dev": true,
+<<<<<<< HEAD
      "license": "MIT",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "dependencies": {
        "ansi-styles": "^4.1.0",
        "supports-color": "^7.1.0"
@ -1089,6 +1130,18 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/check-error": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/chokidar": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@ -1338,6 +1391,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/deep-eql": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.4.tgz",
+      "integrity": "sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@ -1410,6 +1475,15 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/diff": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
+      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
    "node_modules/dijkstrajs": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
@ -1624,13 +1698,25 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/escape-string-regexp": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
      "dev": true,
+<<<<<<< HEAD
      "license": "MIT",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "engines": {
        "node": ">=10"
      },
@ -2284,6 +2370,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
    "node_modules/flat-cache": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@ -2339,9 +2434,13 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+<<<<<<< HEAD
      "dev": true,
      "license": "ISC",
      "peer": true
+=======
+      "dev": true
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
    },
    "node_modules/fsevents": {
      "version": "2.3.3",
@ -2414,6 +2513,15 @@
        "node": "6.* || 8.* || >= 10.*"
      }
    },
+    "node_modules/get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/get-intrinsic": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@ -2596,8 +2704,11 @@
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
      "dev": true,
+<<<<<<< HEAD
      "license": "MIT",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "engines": {
        "node": ">=8"
      }
@ -2731,8 +2842,11 @@
      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
      "dev": true,
+<<<<<<< HEAD
      "license": "ISC",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "dependencies": {
        "once": "^1.3.0",
        "wrappy": "1"
@ -2742,9 +2856,13 @@
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+<<<<<<< HEAD
      "dev": true,
      "license": "ISC",
      "peer": true
+=======
+      "dev": true
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
    },
    "node_modules/internal-slot": {
      "version": "1.0.7",
@ -2962,6 +3080,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-regex": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@ -3043,6 +3170,18 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-weakref": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@ -3227,6 +3366,31 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/loupe": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
    "node_modules/lru-cache": {
      "version": "10.4.3",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@ -3303,6 +3467,246 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/mocha": {
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.7.0.tgz",
+      "integrity": "sha512-v8/rBWr2VO5YkspYINnvu81inSz2y3ODJrhO175/Exzor1RcEZZkizgE2A+w/CAXXoESS8Kys5E62dOHGHzULA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-colors": "^4.1.3",
+        "browser-stdout": "^1.3.1",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.5",
+        "diff": "^5.2.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-up": "^5.0.0",
+        "glob": "^8.1.0",
+        "he": "^1.2.0",
+        "js-yaml": "^4.1.0",
+        "log-symbols": "^4.1.0",
+        "minimatch": "^5.1.6",
+        "ms": "^2.1.3",
+        "serialize-javascript": "^6.0.2",
+        "strip-json-comments": "^3.1.1",
+        "supports-color": "^8.1.1",
+        "workerpool": "^6.5.1",
+        "yargs": "^16.2.0",
+        "yargs-parser": "^20.2.9",
+        "yargs-unparser": "^2.0.0"
+      },
+      "bin": {
+        "_mocha": "bin/_mocha",
+        "mocha": "bin/mocha.js"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mocha/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/mocha/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/mocha/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mocha/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mocha/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mocha/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mocha/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/mocha/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/mocha/node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mocha/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mocha/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -3564,8 +3968,11 @@
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
      "dev": true,
+<<<<<<< HEAD
      "license": "ISC",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "dependencies": {
        "wrappy": "1"
      }
@ -3725,6 +4132,15 @@
      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
      "license": "MIT"
    },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@ -4048,6 +4464,15 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -4281,6 +4706,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
    "node_modules/set-blocking": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@ -4559,8 +4993,11 @@
      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
      "dev": true,
+<<<<<<< HEAD
      "license": "MIT",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "engines": {
        "node": ">=8"
      },
@ -4643,8 +5080,11 @@
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
      "dev": true,
+<<<<<<< HEAD
      "license": "MIT",
      "peer": true,
+=======
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
      "dependencies": {
        "has-flag": "^4.0.0"
      },
@ -4848,6 +5288,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/type-detect": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.1.0.tgz",
+      "integrity": "sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/type-fest": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@ -5119,6 +5568,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/workerpool": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.5.1.tgz",
+      "integrity": "sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==",
+      "dev": true
+    },
    "node_modules/wrap-ansi": {
      "version": "6.2.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@ -5156,9 +5611,13 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+<<<<<<< HEAD
      "dev": true,
      "license": "ISC",
      "peer": true
+=======
+      "dev": true
+>>>>>>> 88b4ba1 (update: support @ip range with CIDR)
    },
    "node_modules/y18n": {
      "version": "4.0.3",
@ -5213,6 +5672,57 @@
      "engines": {
        "node": ">=6"
      }
+    },
+    "node_modules/yargs-unparser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
+      "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^6.0.0",
+        "decamelize": "^4.0.0",
+        "flat": "^5.0.2",
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/decamelize": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
+      "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
    }
  }
 }
--- a/src/package.json
+++ b/src/package.json
@ -11,7 +11,8 @@
    "serve-with-password": "PASSWORD=wg npm run serve",
    "lint": "eslint .",
    "buildcss": "npx tailwindcss -i ./www/src/css/app.css -o ./www/css/app.css",
-    "buildfirewall": "vue-cli-service build --dest www/js/vendor --no-module --formats umd-min --target lib --name VueFirewall --filename vue-firewall --no-clean www/templates/Firewall.vue"
+    "buildfirewall": "vue-cli-service build --dest www/js/vendor --no-module --formats umd-min --target lib --name VueFirewall --filename vue-firewall --no-clean www/templates/Firewall.vue",
+    "test": "mocha test/**/*.test.js"
  },
  "author": "Emile Nijssen",
  "license": "CC BY-NC-SA 4.0",
@ -23,7 +24,9 @@
    "qrcode": "^1.5.3"
  },
  "devDependencies": {
+    "chai": "^4.5.0",
    "eslint-config-athom": "^3.1.3",
+    "mocha": "^10.7.0",
    "nodemon": "^3.1.4",
    "tailwindcss": "^3.4.7",
    "vue-template-compiler": "^2.7.16"
@ -36,4 +39,4 @@
  "engines": {
    "node": ">=18"
  }
-}
+}
--- a/src/test/util.test.js
+++ b/src/test/util.test.js
@ -0,0 +1,45 @@
+const { expect } = require('chai');
+const Util = require('../lib/Util');
+
+describe('Util Class', () => {
+  it('should validate IPv4 addresses correctly', () => {
+    expect(Util.isValidIPv4('0.0.0.0')).to.be.true;
+    expect(Util.isValidIPv4('192.168.1.1')).to.be.true;
+    expect(Util.isValidIPv4('255.255.255.255')).to.be.true;
+    expect(Util.isValidIPv4('999.999.999.999')).to.be.false;
+  });
+
+  it('should identify CIDR correctly', () => {
+    expect(Util.isCIDR('192.168.1.0/24')).to.be.true;
+    expect(Util.isCIDR('192.168.1.1')).to.be.false;
+  });
+
+  it('should identify single IP addresses correctly', () => {
+    expect(Util.isIPAddress('192.168.1.1')).to.be.true;
+    expect(Util.isIPAddress('192.168.1.0/24')).to.be.false;
+  });
+
+  it('should validate iptables target correctly', () => {
+    expect(Util.isValidIptablesTarget('ACCEPT')).to.be.true;
+    expect(Util.isValidIptablesTarget('DROP')).to.be.true;
+    expect(Util.isValidIptablesTarget('YEP!')).to.be.false;
+  });
+
+  it('should validate iptables protocol correctly', () => {
+    expect(Util.isValidIptablesProtocol('UDP')).to.be.true;
+    expect(Util.isValidIptablesProtocol('TCP')).to.be.true;
+    expect(Util.isValidIptablesProtocol('PEY!')).to.be.false;
+  });
+
+  it('should return correct protocol name', () => {
+    expect(Util.getProtocolName(6)).to.equal('TCP');
+    expect(Util.getProtocolName(17)).to.equal('UDP');
+    expect(Util.getProtocolName(999)).to.equal('Unknown Protocol');
+  });
+
+  it('should return correct target name', () => {
+    expect(Util.getTargetName('ACCEPT')).to.equal('ALLOW');
+    expect(Util.getTargetName('DROP')).to.equal('BLOCK');
+    expect(Util.getTargetName('WAZUP!')).to.equal('Unknown Target');
+  });
+});
--- a/src/www/js/i18n.js
+++ b/src/www/js/i18n.js
@ -219,8 +219,8 @@ const messages = { // eslint-disable-line no-unused-vars
    titleBackupConfig: 'Sauvegarder votre configuration',
    fwFirewall: 'Parefeu',
    fwInterface: 'Interface',
-    fwIpv4: 'Address IPv4',
-    fwIpv6: 'Address IPv4',
+    fwIpv4: 'Adresse IPv4',
+    fwIpv6: 'Adresse IPv4',
    fwAction: 'Action',
    fwSource: 'Source',
    fwDestination: 'Destination',
--- a/src/www/js/vendor/vue-firewall.umd.min.js
+++ b/src/www/js/vendor/vue-firewall.umd.min.js
--- a/src/www/js/vendor/vue-firewall.umd.min.js.map
+++ b/src/www/js/vendor/vue-firewall.umd.min.js.map
--- a/src/www/templates/Firewall.vue
+++ b/src/www/templates/Firewall.vue
@ -7,10 +7,10 @@ export default {
    let interfaces = [];
    let rules = [];
    let newRule = {
-      source: '',
-      destination: '',
-      protocol: '',
-      target: '',
+      source: '*',
+      destination: '*',
+      protocol: 'TCP',
+      target: 'DROP',
    };
    return { interfaces, rules, newRule };
  },
@ -37,10 +37,10 @@ export default {
      const { source, destination, protocol, target } = this.newRule;
      this.api.addRule({ source, destination, protocol, target }).then(() => {
        this.newRule = {
-          source: '',
-          destination: '',
-          protocol: '',
-          target: '',
+          source: '*',
+          destination: '*',
+          protocol: 'TCP',
+          target: 'DROP',
        };
      }).catch((err) => {
        alert(err.message || err.toString());
@ -93,7 +93,7 @@ export default {
      <form id="fw" @submit="addRule"></form>

      <div class="overflow-x-auto">
-        <table class=" dark:text-neutral-200 border-t-2 border-collapse dark:border-neutral-200 p-2">
+        <table class="dark:text-neutral-200 border-t-2 border-collapse dark:border-neutral-200 p-2">
          <thead class="bg-gray-200 dark:bg-neutral-600">
            <tr>
              <th class="border dark:border-neutral-200 p-1">{{ $t('fwAction') }}</th>
@ -110,7 +110,7 @@ export default {
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
-                      d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                      d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                  </svg>
                </button>
              </td>
@ -124,28 +124,29 @@ export default {
                <button form="fw" type="submit">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                  </svg>
                </button>
              </td>
              <td class="border border-neutral-500/50">
                <input form="fw" type="text" name="source" v-model="newRule.source"
-                  class=" outline-none bg-transparent text-center" />
+                  class="outline-none bg-transparent text-center"/>
              </td>
              <td class="border border-neutral-500/50">
                <input form="fw" type="text" name="destination" v-model="newRule.destination"
-                  class=" outline-none bg-transparent text-center" />
+                  class="outline-none bg-transparent text-center"/>
              </td>
              <td class="border border-neutral-500/50">
-                <select form="fw" name="protocol" v-model="newRule.protocol" class="bg-transparent">
-                  <option class="dark:text-white dark:bg-neutral-700" value="tcp">TCP</option>
-                  <option class="dark:text-white dark:bg-neutral-700" value="udp">UDP</option>
+                <select form="fw" name="protocol" @change="(e) => newRule.protocol = e.target.value"
+                  class="bg-transparent">
+                  <option class="dark:text-white dark:bg-neutral-700" selected value="TCP">TCP</option>
+                  <option class="dark:text-white dark:bg-neutral-700" value="UDP">UDP</option>
                </select>
              </td>
              <td class="border border-neutral-500/50 p-1">
                <select form="fw" name="target" v-model="newRule.target" class="bg-transparent">
                  <option class="dark:text-white dark:bg-neutral-700" value="ACCEPT">ALLOW</option>
-                  <option class="dark:text-white dark:bg-neutral-700" value="DROP">BLOCK</option>
+                  <option class="dark:text-white dark:bg-neutral-700" selected value="DROP">BLOCK</option>
                </select>
              </td>
            </tr>