diff --git a/README.md b/README.md
new file mode 100644
index 0000000..beff5d0
--- /dev/null
+++ b/README.md
@@ -0,0 +1,68 @@
+# WireGuard GUI
+
+A desktop application for generating WireGuard server and client configuration files through a graphical interface, built with [Electron](https://www.electronjs.org/).
+
+Instead of hand-editing `.conf` files, you fill in a form and get ready-to-use WireGuard configs, including all the `iptables` rules, instantly.
+
+## Getting Started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) v18 or later
+- npm
+
+### Install and run
+
+```bash
+npm install
+npm start
+```
+
+## Usage
+
+1. Fill in the **Server** panel on the left -> interface, address, port, keys, and any optional settings
+2. Add one or more clients with the **New client** button on the right
+3. Fill in each client's keys and toggle internet access as needed
+4. Click **Sync** -> both config previews update immediately
+5. Use the **Copy** button on either panel to copy the config text to your clipboard
+6. Use **Save JSON** in the header to persist the full setup, and **Load** to restore it later
+
+### Field reference
+
+**Server**
+
+| Field | Description |
+| --------------------- | ------------------------------------------------------ |
+| Network interface | WireGuard interface name, e.g. `wg0` |
+| Server address | Internal VPN address in CIDR, e.g. `10.0.0.1/24` |
+| Listen port | UDP port WireGuard listens on, e.g. `51820` |
+| LAN between clients | Allows peers to reach each other directly |
+| Forwarded ports | Comma-separated list of ports to DNAT into the VPN |
+| Private / Public key | WireGuard base64 key pair for the server |
+| Public address | Hostname or IP clients use to reach the server |
+| Running in Docker | Uses the Docker host interface in iptables rules |
+| Docker host interface | The physical interface on the Docker host, e.g. `eth0` |
+
+**Client** (per peer)
+
+| Field | Description |
+| -------------------- | --------------------------------------------------------- |
+| Client name | Label used in tabs and config comments |
+| Internet traffic | When on, routes all traffic through the VPN (`0.0.0.0/0`) |
+| Private / Public key | WireGuard base64 key pair for this client |
+
+### Key generation
+
+WireGuard keys can be generated on the server with:
+
+```bash
+wg genkey | tee privatekey | wg pubkey > publickey
+```
+
+---
+
+## Screenshots
+
+
+
+
diff --git a/docs/Screenshot01.png b/docs/Screenshot01.png
new file mode 100644
index 0000000..87556ef
Binary files /dev/null and b/docs/Screenshot01.png differ
diff --git a/docs/Screenshot02.png b/docs/Screenshot02.png
new file mode 100644
index 0000000..ec59285
Binary files /dev/null and b/docs/Screenshot02.png differ
diff --git a/src/gui/gui.html b/src/gui/gui.html
index a98a9ab..83aa5fb 100644
--- a/src/gui/gui.html
+++ b/src/gui/gui.html
@@ -1,102 +1,273 @@
-
+
-
-
+
+
- Wireguard GUI
+ WireGuard GUI
-
Wireguard GUI!
-
-
-
-
Server Side
-
-
-
-
-
+
+
+
+
+ WireGuard GUI
-
-
-
Client Side
-
-
-
-
-
+
+ Sync
+
-
+
-
+
+
+
+
+
+ SERVER
+
Server Configuration
+
+
+
+
+
+
Interface
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Routing
+
+
+
+
+ Disabled
+
+
+
+
+ Comma-separated list
+
+
+
Keys
+
+
+
+
+
+
+
+
+
+
+
Connection
+
+
+
+
+ Used as Endpoint in client configs
+
+
+
Docker
+
+
+
+
+ No
+
+
+
+
+
+
+
+
+
+
+ wg0.conf
+
+
+
+# Fill in server fields and click Sync
+
+
+
+
+
+
+
+ CLIENT
+
Client Configuration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Add a client to get started
+
+
+
+
+
+
+ client.conf
+
+
+
+
+# No client selected
+
+
+
+
+
+
diff --git a/src/gui/gui.js b/src/gui/gui.js
index b49f43f..bbf9803 100644
--- a/src/gui/gui.js
+++ b/src/gui/gui.js
@@ -1,2 +1,930 @@
-console.log("GUI works");
-// Complete Wireguard conf yielding
+// WireGuard GUI — gui.js
+// State management, validation, config generation
+
+/*****************************************************************************
+ * State
+ *****************************************************************************/
+
+let state = {
+ server: {
+ iface: "",
+ address: "",
+ port: "",
+ lanBetweenClients: false,
+ allowedPorts: "",
+ privateKey: "",
+ publicKey: "",
+ publicAddress: "",
+ docker: false,
+ dockerIface: "",
+ },
+ clients: [],
+};
+
+let activeClientId = null;
+let clientCounter = 0;
+
+/*****************************************************************************
+ * Validation index
+ * Each entry: { regex, hint, optional, isBool }
+ * - isBool: skips regex check entirely (checkboxes)
+ * - optional: empty string is accepted as valid
+ * - extra: additional predicate run after regex passes
+ *****************************************************************************/
+
+const SERVER_VALIDATORS = {
+ iface: {
+ regex: /^[a-zA-Z][a-zA-Z0-9_-]{0,14}$/,
+ hint: "Interface name: letters, numbers, dash, underscore (max 15 chars)",
+ },
+ address: {
+ regex: /^(\d{1,3}\.){3}\d{1,3}\/\d{1,2}$/,
+ hint: "CIDR notation required, e.g. 10.0.0.1/24",
+ extra: (v) => {
+ const [ip, prefix] = v.split("/");
+ const parts = ip.split(".").map(Number);
+ return (
+ parts.every((p) => p >= 0 && p <= 255) && +prefix >= 0 && +prefix <= 32
+ );
+ },
+ },
+ port: {
+ regex: /^\d{1,5}$/,
+ hint: "Port number between 1 and 65535",
+ extra: (v) => +v >= 1 && +v <= 65535,
+ },
+ lanBetweenClients: { isBool: true },
+ allowedPorts: {
+ regex: /^(\d{1,5}(\s*,\s*\d{1,5})*)?$/,
+ hint: "Comma-separated port numbers, e.g. 22, 80, 443",
+ optional: true,
+ },
+ privateKey: {
+ regex: /^[A-Za-z0-9+/]{43}=$/,
+ hint: "WireGuard base64 private key (44 chars ending in =)",
+ },
+ publicKey: {
+ regex: /^[A-Za-z0-9+/]{43}=$/,
+ hint: "WireGuard base64 public key (44 chars ending in =)",
+ },
+ publicAddress: {
+ regex: /^[a-zA-Z0-9.-]+$/,
+ hint: "Hostname or IP address, e.g. vpn.example.com or 203.0.113.1",
+ },
+ docker: { isBool: true },
+ dockerIface: {
+ regex: /^[a-zA-Z][a-zA-Z0-9_-]{0,14}$/,
+ hint: "Docker host interface name, e.g. eth0 or enp1s0",
+ optional: true,
+ },
+};
+
+const CLIENT_VALIDATORS = {
+ name: {
+ regex: /^.{1,32}$/,
+ hint: "Client name required (max 32 chars)",
+ },
+ internetTraffic: { isBool: true },
+ privateKey: {
+ regex: /^[A-Za-z0-9+/]{43}=$/,
+ hint: "WireGuard base64 private key (44 chars ending in =)",
+ },
+ publicKey: {
+ regex: /^[A-Za-z0-9+/]{43}=$/,
+ hint: "WireGuard base64 public key (44 chars ending in =)",
+ },
+};
+
+/*****************************************************************************
+ * Validation helpers
+ *****************************************************************************/
+
+/**
+ * Runs the validator spec for a single field against a given value.
+ *
+ * Looks up the field key in the provided validators map and applies, in order:
+ * the isBool shortcut, the optional-empty shortcut, the regex test, and any
+ * extra predicate. Returns a result object so the caller can decide how to
+ * surface the error.
+ *
+ * @param {Object} validators - One of SERVER_VALIDATORS or CLIENT_VALIDATORS.
+ * @param {string} fieldKey - Key matching an entry in the validators map.
+ * @param {string} value - Current field value to test.
+ * @returns {{ valid: boolean, hint?: string }}
+ */
+function validateValue(validators, fieldKey, value) {
+ const spec = validators[fieldKey];
+ if (!spec) return { valid: true };
+ if (spec.isBool) return { valid: true };
+ if (spec.optional && (value === "" || value === undefined || value === null))
+ return { valid: true };
+ if (!spec.regex) return { valid: true };
+ if (!spec.regex.test(String(value))) return { valid: false, hint: spec.hint };
+ if (spec.extra && !spec.extra(value))
+ return { valid: false, hint: spec.hint };
+ return { valid: true };
+}
+
+/**
+ * Applies or clears visual validation state on an input element.
+ *
+ * Toggles the field-invalid / field-valid CSS classes and injects or removes
+ * a .field-hint inside the parent .field-row. Safe to call repeatedly;
+ * it updates the existing hint element rather than appending duplicates.
+ *
+ * @param {HTMLInputElement} inputEl - The input to decorate.
+ * @param {boolean} valid - Whether the current value is valid.
+ * @param {string} [hint] - Error message shown below the input.
+ */
+function markField(inputEl, valid, hint) {
+ const wrapper = inputEl.closest(".field-row") || inputEl.parentElement;
+ const existingHint = wrapper.querySelector(".field-hint");
+
+ inputEl.classList.toggle("field-invalid", !valid);
+ inputEl.classList.toggle("field-valid", valid);
+
+ if (!valid && hint) {
+ if (!existingHint) {
+ const hintEl = document.createElement("span");
+ hintEl.className = "field-hint";
+ hintEl.textContent = hint;
+ wrapper.appendChild(hintEl);
+ } else {
+ existingHint.textContent = hint;
+ }
+ } else if (existingHint) {
+ existingHint.remove();
+ }
+}
+
+/*****************************************************************************
+ * IP utilities
+ *****************************************************************************/
+
+/** Returns the host part of a CIDR string, e.g. "10.0.0.1/24" -> "10.0.0.1". */
+function parseBaseIP(cidr) {
+ return cidr ? cidr.split("/")[0] : "";
+}
+
+/** Returns the prefix length of a CIDR string, defaulting to "24". */
+function parsePrefix(cidr) {
+ return cidr && cidr.includes("/") ? cidr.split("/")[1] : "24";
+}
+
+/** Converts a dotted-decimal IPv4 string to a 32-bit unsigned integer. */
+function ipToInt(ip) {
+ return ip.split(".").reduce((acc, oct) => (acc << 8) + parseInt(oct, 10), 0);
+}
+
+/** Converts a 32-bit unsigned integer back to a dotted-decimal IPv4 string. */
+function intToIp(int) {
+ return [
+ (int >>> 24) & 255,
+ (int >>> 16) & 255,
+ (int >>> 8) & 255,
+ int & 255,
+ ].join(".");
+}
+
+/**
+ * Returns the network base address for a CIDR, e.g. "10.0.0.3/24" -> "10.0.0.0/24".
+ * Used to build the AllowedIPs line in client configs.
+ *
+ * @param {string} cidr - e.g. "10.0.0.1/24"
+ * @returns {string} - e.g. "10.0.0.0/24"
+ */
+function getNetworkAddress(cidr) {
+ const [ip, prefix] = cidr.split("/");
+ const mask = prefix === "0" ? 0 : (~0 << (32 - +prefix)) >>> 0;
+ return intToIp((ipToInt(ip) & mask) >>> 0) + "/" + prefix;
+}
+
+/**
+ * Derives the IP address to assign to a specific client.
+ *
+ * Clients are allocated sequentially from the server's own address.
+ * e.g. if the server is 10.0.0.1/24, client 1 gets 10.0.0.2/24,
+ * client 2 gets 10.0.0.3/24, and so on.
+ *
+ * @param {string} serverCIDR - Server address in CIDR notation.
+ * @param {number} clientIndex - 1-based index of the client.
+ * @returns {string} - Client CIDR, e.g. "10.0.0.2/24".
+ */
+function getClientIP(serverCIDR, clientIndex) {
+ const [ip] = serverCIDR.split("/");
+ const prefix = parsePrefix(serverCIDR);
+ const parts = ip.split(".").map(Number);
+ parts[3] = parts[3] + clientIndex;
+ return parts.join(".") + "/" + prefix;
+}
+
+/*****************************************************************************
+ * Config generators
+ *****************************************************************************/
+
+/**
+ * Builds the complete wg0.conf text for the server side.
+ *
+ * Assembles the [Interface] block with all iptables PostUp/PostDown rules,
+ * then appends a [Peer] block for every client that has a public key set.
+ * Rules vary based on: NAT/internet forwarding (always on), LAN-between-clients
+ * flag, per-port DNAT forwards, and whether the server runs inside Docker
+ * (which changes the outbound interface used in iptables rules).
+ *
+ * @returns {string} Full .conf file content, or a placeholder comment if
+ * required fields are missing.
+ */
+function generateServerConf() {
+ const s = state.server;
+ if (!s.iface || !s.address || !s.port || !s.privateKey) {
+ return "# Fill in required server fields (Interface, Address, Port, Private Key) and click Sync";
+ }
+
+ // When running in Docker the host's physical interface is used for iptables
+ // rules rather than the WireGuard interface itself.
+ const outIface = s.docker && s.dockerIface ? s.dockerIface : s.iface;
+ const ports = s.allowedPorts
+ ? s.allowedPorts
+ .split(",")
+ .map((p) => p.trim())
+ .filter(Boolean)
+ : [];
+ const serverIP = parseBaseIP(s.address);
+
+ let lines = [];
+
+ lines.push("[Interface]");
+ lines.push(`Address = ${s.address}`);
+ lines.push("SaveConfig = false");
+ lines.push("");
+
+ lines.push("# Internet access for VPN clients");
+ lines.push(
+ `PostUp = iptables -A FORWARD -i ${s.iface} -o ${outIface} -j ACCEPT`,
+ );
+ lines.push(
+ `PostUp = iptables -A FORWARD -i ${outIface} -o ${s.iface} -m state --state RELATED,ESTABLISHED -j ACCEPT`,
+ );
+ lines.push(
+ `PostUp = iptables -t nat -A POSTROUTING -o ${outIface} -j MASQUERADE`,
+ );
+
+ if (s.lanBetweenClients) {
+ lines.push("");
+ lines.push("# Allow VPN clients to talk to each other");
+ lines.push(
+ `PostUp = iptables -A FORWARD -i ${s.iface} -o ${s.iface} -j ACCEPT`,
+ );
+ }
+
+ ports.forEach((port) => {
+ lines.push("");
+ lines.push(`# Port ${port} forward`);
+ lines.push(
+ `PostUp = iptables -t nat -A PREROUTING -i ${outIface} -p tcp --dport ${port} -j DNAT --to-destination ${serverIP}:${port}`,
+ );
+ lines.push(
+ `PostUp = iptables -A FORWARD -i ${outIface} -o ${s.iface} -p tcp --dport ${port} -j ACCEPT`,
+ );
+ });
+
+ lines.push("");
+ lines.push("# Cleanup");
+ lines.push(
+ `PostDown = iptables -D FORWARD -i ${s.iface} -o ${outIface} -j ACCEPT`,
+ );
+ lines.push(
+ `PostDown = iptables -D FORWARD -i ${outIface} -o ${s.iface} -m state --state RELATED,ESTABLISHED -j ACCEPT`,
+ );
+ lines.push(
+ `PostDown = iptables -t nat -D POSTROUTING -o ${outIface} -j MASQUERADE`,
+ );
+
+ if (s.lanBetweenClients) {
+ lines.push(
+ `PostDown = iptables -D FORWARD -i ${s.iface} -o ${s.iface} -j ACCEPT`,
+ );
+ }
+
+ ports.forEach((port) => {
+ lines.push(
+ `PostDown = iptables -t nat -D PREROUTING -i ${outIface} -p tcp --dport ${port} -j DNAT --to-destination ${serverIP}:${port}`,
+ );
+ lines.push(
+ `PostDown = iptables -D FORWARD -i ${outIface} -o ${s.iface} -p tcp --dport ${port} -j ACCEPT`,
+ );
+ });
+
+ lines.push("");
+ lines.push(`ListenPort = ${s.port}`);
+ lines.push(`PrivateKey = ${s.privateKey}`);
+
+ state.clients.forEach((client, idx) => {
+ if (!client.publicKey) return;
+ const clientAddr = getClientIP(s.address, idx + 1);
+ const clientIP = parseBaseIP(clientAddr);
+ lines.push("");
+ lines.push(`# ${client.name || "Client " + (idx + 1)}`);
+ lines.push("[Peer]");
+ lines.push(`PublicKey = ${client.publicKey}`);
+ lines.push(`AllowedIPs = ${clientIP}/32`);
+ lines.push(
+ `#Endpoint = ${s.publicAddress || ""}:${s.port}`,
+ );
+ });
+
+ return lines.join("\n");
+}
+
+/**
+ * Builds the client-side .conf text for a single peer.
+ *
+ * The AllowedIPs line differs based on the client's internetTraffic flag:
+ * when true, 0.0.0.0/0 is included so all traffic routes through the VPN;
+ * when false, only the VPN subnet is routed (LAN-only access).
+ *
+ * @param {Object} client - Client object from state.clients.
+ * @param {number} clientIndex - 0-based index in state.clients, used to
+ * derive this client's VPN IP address.
+ * @returns {string} Full .conf file content.
+ */
+function generateClientConf(client, clientIndex) {
+ const s = state.server;
+ if (!client) return "";
+
+ const clientAddr = getClientIP(s.address, clientIndex + 1);
+ const networkBase = s.address ? getNetworkAddress(s.address) : "10.0.0.0/24";
+ const allowedIPs = client.internetTraffic
+ ? `${networkBase}, 0.0.0.0/0`
+ : networkBase;
+
+ let lines = [];
+ lines.push("# Client configuration");
+ lines.push("[Interface]");
+ lines.push(`Address = ${clientAddr || "/"}`);
+ lines.push("DNS = 1.1.1.1");
+ lines.push(`PrivateKey = ${client.privateKey || ""}`);
+ lines.push("");
+ lines.push("# Server configuration");
+ lines.push("[Peer]");
+ lines.push(`PublicKey = ${s.publicKey || ""}`);
+ lines.push(`AllowedIPs = ${allowedIPs}`);
+ lines.push(
+ `Endpoint = ${s.publicAddress || ""}:${s.port || ""}`,
+ );
+ lines.push("PersistentKeepalive = 25");
+
+ return lines.join("\n");
+}
+
+/*****************************************************************************
+ * DOM helpers
+ *****************************************************************************/
+
+/** Shorthand for document.getElementById. */
+function $(id) {
+ return document.getElementById(id);
+}
+
+/** Reads all server form inputs into a plain object matching the state shape. */
+function getServerFormValues() {
+ return {
+ iface: $("s-iface").value.trim(),
+ address: $("s-address").value.trim(),
+ port: $("s-port").value.trim(),
+ lanBetweenClients: $("s-lan").checked,
+ allowedPorts: $("s-ports").value.trim(),
+ privateKey: $("s-privkey").value.trim(),
+ publicKey: $("s-pubkey").value.trim(),
+ publicAddress: $("s-pubaddr").value.trim(),
+ docker: $("s-docker").checked,
+ dockerIface: $("s-docker-iface").value.trim(),
+ };
+}
+
+/**
+ * Reads the currently visible client form inputs.
+ * Returns safe defaults when the form elements don't exist (no active client).
+ */
+function getActiveClientFormValues() {
+ return {
+ name: $("c-name") ? $("c-name").value.trim() : "",
+ internetTraffic: $("c-internet") ? $("c-internet").checked : true,
+ privateKey: $("c-privkey") ? $("c-privkey").value.trim() : "",
+ publicKey: $("c-pubkey") ? $("c-pubkey").value.trim() : "",
+ };
+}
+
+/**
+ * Writes server state back into all form inputs and updates toggle labels.
+ * Called after loading a JSON config file.
+ */
+function populateServerForm() {
+ const s = state.server;
+ $("s-iface").value = s.iface;
+ $("s-address").value = s.address;
+ $("s-port").value = s.port;
+ $("s-lan").checked = s.lanBetweenClients;
+ $("s-ports").value = s.allowedPorts;
+ $("s-privkey").value = s.privateKey;
+ $("s-pubkey").value = s.publicKey;
+ $("s-pubaddr").value = s.publicAddress;
+ $("s-docker").checked = s.docker;
+ $("s-docker-iface").value = s.dockerIface;
+
+ const lanLabel = $("s-lan-label");
+ if (lanLabel)
+ lanLabel.textContent = s.lanBetweenClients ? "Enabled" : "Disabled";
+ const dockerLabel = $("s-docker-label");
+ if (dockerLabel) dockerLabel.textContent = s.docker ? "Yes" : "No";
+
+ toggleDockerField();
+}
+
+/** Shows or hides the Docker host interface row based on the Docker checkbox. */
+function toggleDockerField() {
+ const dockerRow = $("docker-iface-row");
+ if (dockerRow) {
+ dockerRow.style.display = $("s-docker").checked ? "flex" : "none";
+ }
+}
+
+/*****************************************************************************
+ * Client panel
+ *****************************************************************************/
+
+/**
+ * Re-renders the client tab strip from state.clients.
+ *
+ * Creates one button per client. The active tab gets the .active class.
+ * Each tab includes an x delete button that stops click propagation so it
+ * doesn't also trigger the tab-switch handler.
+ */
+function renderClientTabs() {
+ const tabsEl = $("client-tabs");
+ tabsEl.innerHTML = "";
+
+ state.clients.forEach((client) => {
+ const tab = document.createElement("button");
+ tab.className =
+ "client-tab" + (client.id === activeClientId ? " active" : "");
+ tab.textContent = client.name || "Client";
+ tab.title = client.name;
+ tab.addEventListener("click", () => {
+ saveActiveClient();
+ activeClientId = client.id;
+ renderClientTabs();
+ renderClientForm();
+ updateClientConf();
+ });
+
+ const del = document.createElement("span");
+ del.className = "tab-del";
+ del.textContent = "x";
+ del.title = "Remove client";
+ del.addEventListener("click", (e) => {
+ e.stopPropagation();
+ removeClient(client.id);
+ });
+
+ tab.appendChild(del);
+ tabsEl.appendChild(tab);
+ });
+}
+
+/**
+ * Renders the client form area for the currently active client.
+ *
+ * Injects HTML for all client fields, then wires up live validation listeners
+ * and the name-change handler that keeps the tab label in sync. Shows an
+ * empty-state placeholder when no client is selected.
+ */
+function renderClientForm() {
+ const formEl = $("client-form-area");
+
+ if (!activeClientId || state.clients.length === 0) {
+ formEl.innerHTML = `
+
+
diff --git a/docs/Screenshot01.png b/docs/Screenshot01.png
new file mode 100644
index 0000000..87556ef
Binary files /dev/null and b/docs/Screenshot01.png differ
diff --git a/docs/Screenshot02.png b/docs/Screenshot02.png
new file mode 100644
index 0000000..ec59285
Binary files /dev/null and b/docs/Screenshot02.png differ
diff --git a/src/gui/gui.html b/src/gui/gui.html
index a98a9ab..83aa5fb 100644
--- a/src/gui/gui.html
+++ b/src/gui/gui.html
@@ -1,102 +1,273 @@
-
+
-
-
+
+
- 
+