From 0bfde0841e1a5a7710e6b5c01e47e60f7d02fdba Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Fri, 12 Jul 2024 14:11:28 +0200
Subject: [PATCH] feat(vpn): add setup device UI with Wireguard config
 generator

Introduced a new HTML template for setting up VPN devices. This template includes a form to input the device name, generating Wireguard configuration and displaying it both in text and as a QR code. Utilizes Wireguard Crypto library for key generation and QRCode.js for QR code generation.

This enhancement streamlines the VPN setup process for users by providing an automated way to generate necessary configuration and an easy-to-scan QR code for mobile devices.
---
 coldbrew/vpn/templates/vpn/setup_device.html | 77 ++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 coldbrew/vpn/templates/vpn/setup_device.html
diff --git a/coldbrew/vpn/templates/vpn/setup_device.html b/coldbrew/vpn/templates/vpn/setup_device.html
new file mode 100644
index 0000000..c0cb403
--- /dev/null
+++ b/coldbrew/vpn/templates/vpn/setup_device.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Setup Device</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <script src="https://unpkg.com/@jprichardson/wireguard-crypto@0.0.10/dist/wireguard-crypto.min.js"></script>
+  </head>
+  <body>
+    <h1>Setup Device</h1>
+    <form id="device-form">
+      <label for="device-name">Device Name:</label>
+      <input
+        type="text"
+        id="device-name"
+        name="device_name"
+        required
+      /><br /><br />
+      <button type="button" onclick="generateConfig()">
+        Generate Configuration
+      </button>
+    </form>
+
+    <h2>Wireguard Configuration</h2>
+    <pre id="wg-config"></pre>
+
+    <h2>QR Code</h2>
+    <div id="qrcode"></div>
+
+    <script>
+      function generateConfig() {
+        const deviceName = document.getElementById("device-name").value;
+        if (!deviceName) {
+          alert("Please enter a device name.");
+          return;
+        }
+
+        // Generate Wireguard keys
+        const privateKey = window.wireguard.generatePrivateKey();
+        const publicKey = window.wireguard.getPublicKey(privateKey);
+        const presharedKey = window.wireguard.generatePresharedKey();
+
+        // Use server public key and endpoint from context
+        const serverPublicKey = "{{ server_public_key }}";
+        const serverEndpoint = "{{ server_endpoint }}";
+
+        // Use user's subnet details from context
+        const ipv4Address = "{{ ipv4_subnet.split(" / ")[0] }}";
+        const ipv6Address = "{{ ipv6_subnet.split(" / ")[0] }}";
+
+        // Generate Wireguard configuration
+        const config = `
+[Interface]
+PrivateKey = ${privateKey}
+Address = ${ipv4Address}, ${ipv6Address}
+DNS = 1.1.1.1
+
+[Peer]
+PublicKey = ${serverPublicKey}
+PresharedKey = ${presharedKey}
+Endpoint = ${serverEndpoint}
+AllowedIPs = 0.0.0.0/0, ::/0
+PersistentKeepalive = 25
+`;
+
+        // Display the configuration
+        document.getElementById("wg-config").textContent = config;
+
+        // Generate QR code
+        const qrcode = new QRCode(document.getElementById("qrcode"), {
+          text: config,
+          width: 128,
+          height: 128,
+        });
+      }
+    </script>
+  </body>
+</html>
