PrivateCoffee/coldbrew
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(vpn): add setup device UI with Wireguard config generator

Browse source 
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.
This commit is contained in:
Kumi 2024-07-12 14:11:28 +02:00
parent 72d23e4c33
commit 0bfde0841e
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 77 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
coldbrew/vpn/templates/vpn/setup_device.html Normal file
View file

@ -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>