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
GPG key ID:
ECBCC9082395383F
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>
|
<script src="https://unpkg.com/@jprichardson/wireguard-crypto@0.0.10/dist/wireguard-crypto.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Setup Device</h1>
|
<h1>Setup Device for VPN: {{ vpn.name }}</h1>
|
||||||
<form id="device-form">
|
<form id="device-form">
|
||||||
<label for="device-name">Device Name:</label>
|
<label for="device-name">Device Name:</label>
|
||||||
<input
|
<input
|
||||||
|
|
@ -15,6 +15,22 @@
|
||||||
name="device_name"
|
name="device_name"
|
||||||
required
|
required
|
||||||
/><br /><br />
|
/><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()">
|
<button type="button" onclick="generateConfig()">
|
||||||
Generate Configuration
|
Generate Configuration
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -29,8 +45,10 @@
|
||||||
<script>
|
<script>
|
||||||
function generateConfig() {
|
function generateConfig() {
|
||||||
const deviceName = document.getElementById("device-name").value;
|
const deviceName = document.getElementById("device-name").value;
|
||||||
if (!deviceName) {
|
const ipv4Address = document.getElementById("ipv4-address").value;
|
||||||
alert("Please enter a device name.");
|
const ipv6Address = document.getElementById("ipv6-address").value;
|
||||||
|
if (!deviceName || !ipv4Address || !ipv6Address) {
|
||||||
|
alert("Please fill out all fields.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -39,19 +57,16 @@
|
||||||
const publicKey = window.wireguard.getPublicKey(privateKey);
|
const publicKey = window.wireguard.getPublicKey(privateKey);
|
||||||
const presharedKey = window.wireguard.generatePresharedKey();
|
const presharedKey = window.wireguard.generatePresharedKey();
|
||||||
|
|
||||||
// Use server public key and endpoint from context
|
// Use VPN details from the context
|
||||||
const serverPublicKey = "{{ server_public_key }}";
|
const serverPublicKey = "{{ vpn.public_key }}";
|
||||||
const serverEndpoint = "{{ server_endpoint }}";
|
const serverEndpoint =
|
||||||
|
"{{ vpn.owner.username }}@{{ request.get_host }}:{{ vpn.port }}";
|
||||||
// Use user's subnet details from context
|
|
||||||
const ipv4Address = "{{ ipv4_subnet.split(" / ")[0] }}";
|
|
||||||
const ipv6Address = "{{ ipv6_subnet.split(" / ")[0] }}";
|
|
||||||
|
|
||||||
// Generate Wireguard configuration
|
// Generate Wireguard configuration
|
||||||
const config = `
|
const config = `
|
||||||
[Interface]
|
[Interface]
|
||||||
PrivateKey = ${privateKey}
|
PrivateKey = ${privateKey}
|
||||||
Address = ${ipv4Address}, ${ipv6Address}
|
Address = ${ipv4Address}/24, ${ipv6Address}/64
|
||||||
DNS = 1.1.1.1
|
DNS = 1.1.1.1
|
||||||
|
|
||||||
[Peer]
|
[Peer]
|
||||||
|
|
@ -71,6 +86,36 @@ PersistentKeepalive = 25
|
||||||
width: 128,
|
width: 128,
|
||||||
height: 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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue