feat(vpn): enhance setup form with IP address fields
- Added IPv4 and IPv6 address fields to the device setup form. - Display VPN name in the header for clarity. - Modified configuration generation to use inputted IP addresses. - Updated server details and endpoints with dynamic data from VPN context. - Implemented CSRF-secured device addition via API call. These changes improve user input flexibility and streamline device configuration setup.
This commit is contained in:
parent
0bfde0841e
commit
eb50798b14
1 changed files with 56 additions and 11 deletions
|
@ -6,7 +6,7 @@
|
|||
<script src="https://unpkg.com/@jprichardson/wireguard-crypto@0.0.10/dist/wireguard-crypto.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Setup Device</h1>
|
||||
<h1>Setup Device for VPN: {{ vpn.name }}</h1>
|
||||
<form id="device-form">
|
||||
<label for="device-name">Device Name:</label>
|
||||
<input
|
||||
|
@ -15,6 +15,22 @@
|
|||
name="device_name"
|
||||
required
|
||||
/><br /><br />
|
||||
<label for="ipv4-address">IPv4 Address:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="ipv4-address"
|
||||
name="ipv4_address"
|
||||
required
|
||||
placeholder="e.g., 10.0.1.2"
|
||||
/><br /><br />
|
||||
<label for="ipv6-address">IPv6 Address:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="ipv6-address"
|
||||
name="ipv6_address"
|
||||
required
|
||||
placeholder="e.g., fd00::2"
|
||||
/><br /><br />
|
||||
<button type="button" onclick="generateConfig()">
|
||||
Generate Configuration
|
||||
</button>
|
||||
|
@ -29,8 +45,10 @@
|
|||
<script>
|
||||
function generateConfig() {
|
||||
const deviceName = document.getElementById("device-name").value;
|
||||
if (!deviceName) {
|
||||
alert("Please enter a device name.");
|
||||
const ipv4Address = document.getElementById("ipv4-address").value;
|
||||
const ipv6Address = document.getElementById("ipv6-address").value;
|
||||
if (!deviceName || !ipv4Address || !ipv6Address) {
|
||||
alert("Please fill out all fields.");
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -39,19 +57,16 @@
|
|||
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] }}";
|
||||
// Use VPN details from the context
|
||||
const serverPublicKey = "{{ vpn.public_key }}";
|
||||
const serverEndpoint =
|
||||
"{{ vpn.owner.username }}@{{ request.get_host }}:{{ vpn.port }}";
|
||||
|
||||
// Generate Wireguard configuration
|
||||
const config = `
|
||||
[Interface]
|
||||
PrivateKey = ${privateKey}
|
||||
Address = ${ipv4Address}, ${ipv6Address}
|
||||
Address = ${ipv4Address}/24, ${ipv6Address}/64
|
||||
DNS = 1.1.1.1
|
||||
|
||||
[Peer]
|
||||
|
@ -71,6 +86,36 @@ PersistentKeepalive = 25
|
|||
width: 128,
|
||||
height: 128,
|
||||
});
|
||||
|
||||
// Optionally, send the public key and preshared key to the server to create the device
|
||||
const csrfToken = document.querySelector(
|
||||
"[name=csrfmiddlewaretoken]"
|
||||
).value;
|
||||
fetch('{% url "add_device" vpn.id %}', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRFToken": csrfToken,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: deviceName,
|
||||
public_key: publicKey,
|
||||
preshared_key: presharedKey,
|
||||
ipv4_address: ipv4Address,
|
||||
ipv6_address: ipv6Address,
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data.success) {
|
||||
alert("Device added successfully!");
|
||||
} else {
|
||||
alert("Error adding device: " + data.error);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
Loading…
Reference in a new issue