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.
This commit is contained in:
parent
72d23e4c33
commit
0bfde0841e
1 changed files with 77 additions and 0 deletions
77
coldbrew/vpn/templates/vpn/setup_device.html
Normal file
77
coldbrew/vpn/templates/vpn/setup_device.html
Normal 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>
|
Loading…
Reference in a new issue