added PSK autogenerate function

added missing push of PSK to OPNsense
marked client name also as relevant for client config (it is for the server fragment)

Author: Peter Koevesdi

index.html

@@ -83,14 +83,16 @@ <h2>Wireguard</h2>
 					<label for="sp">Port</label>:<input type="number" name="sp" min="1" max="65635" value="51820"><br>
 					<label for="sk">Server Pubkey</label>:<input type="text" name="sk" value="RANDOM-EXAMPLE"><br>
 					<label for="pk">Preshared Key</label>:<input type="text" name="pk" value="">
-					<button type="button" id="pskbtn" onclick="genPsk()">Generate PSK</button><br>
+					<button type="button" id="pskbtn" onclick="genPsk()">Generate PSK</button>
+					<label for="pka">Autogenerate</label>:<input type="checkbox" name="pka"
+						onchange="pskbtn.disabled = this.checked"><br>
 					<label for="ca">Client Address</label>:<input type="text" name="ca" value="10.0.0.2"><br>
 					<label for="dn">DNS</label>:<input type="text" name="dn" value=""><br>
 					<label for="mt">MTU</label>:<input type="number" name="mt" min="0" max="65635" value="1400"><br>
 					<label for="aa">Allowed Subnets</label>:<input type="text" name="aa" value="10.0.0.0"><br>
 					<label for="ka">Keepalive</label>:<input type="number" name="ka" min="0" max="1000" value="25"><br>
+					<label for="cn">Client name</label>:<input type="text" name="cn">
 				</span>
-				<label for="cn">Client name</label>(optional):<input type="text" name="cn">
 				<button type="button" id="gencnbtn" onclick="generateCN()">Generate</button><br>
 				<input type="hidden" id="puk">
 				<h2>OPNsense interface (optional)</h2>
@@ -159,8 +161,8 @@ <h3>Server Fragment</h3>
 			<a href="https://github.com/jcarrano/wg-keygen-notrust">GitHub Repository</a>
 		</p>
 	</div>
-	<script src="ui.js" integrity="sha256-U9/gaT9VCAlsWaIP5louwsKG1P1uq0J8Kj6dF3ATSII="
+	<script src="ui.js" integrity="sha256-Kpd2eUaaYkyJTLg9uD/wnhZcalpPBObdvUH4hIi8gyE="
 		crossorigin="anonymous"></script>
 </body>
 
-</html>
+</html>

opnsensebridge.py

@@ -51,7 +51,7 @@ def getip(opnsenseURL, APIkey, APIsecret, tunnelRealm):
 
     print('{"ip":"'+usableHost.exploded+'/32"}')
 
-def createclient(opnsenseURL, APIkey, APIsecret, PeerName, pubkey, tunnelAddress):
+def createclient(opnsenseURL, APIkey, APIsecret, PeerName, pubkey, pskey, tunnelAddress):
     wireguardsClients = getclients(opnsenseURL, APIkey, APIsecret)
 
     if PeerName in [item["name"] for item in wireguardsClients]:
@@ -75,6 +75,7 @@ def createclient(opnsenseURL, APIkey, APIsecret, PeerName, pubkey, tunnelAddress
             "enabled": '1',
             "name": PeerName,
             "pubkey": pubkey,
+            "psk": pskey,
             "tunneladdress": tunnelAddress,
             "keepalive ": '25'
         }
@@ -125,7 +126,7 @@ def reconfigure(opnsenseURL, APIkey, APIsecret):
     if r.json()["status"] != "ok":
         print('{"error":'+r.text+'}')
         sys.exit()
-    print(r.text)
+    print('{"res":"'+r.text+'/32"}')
 
 print("Content-type: text/html\n\n")
 form = cgi.FieldStorage()
@@ -134,6 +135,6 @@ def reconfigure(opnsenseURL, APIkey, APIsecret):
 if form.getvalue('task') == "getip":
     getip(form.getvalue('opnsenseURL'),form.getvalue('key'),form.getvalue('secret'),form.getvalue('tunnelRealm'))
 if form.getvalue('task') == "createclient":
-    uuid = createclient(form.getvalue('opnsenseURL'),form.getvalue('key'),form.getvalue('secret'),form.getvalue('PeerName'),form.getvalue('pubkey'),form.getvalue('tunnelAddress'))
+    uuid = createclient(form.getvalue('opnsenseURL'),form.getvalue('key'),form.getvalue('secret'),form.getvalue('PeerName'),form.getvalue('pubkey'),form.getvalue('pskey'),form.getvalue('tunnelAddress'))
     enableclient(form.getvalue('opnsenseURL'),form.getvalue('key'),form.getvalue('secret'),form.getvalue('ServerUUID'),uuid)
     reconfigure(form.getvalue('opnsenseURL'),form.getvalue('key'),form.getvalue('secret'))

ui.js

@@ -1,7 +1,13 @@
 (new URL(window.location.href)).searchParams.forEach((x, y) => {
     let el = document.getElementsByName(y)[0];
-    if (el)
-        el.value = x;
+    if (el) {
+        console.log(el.type);
+        if (el.type == "checkbox") {
+            el.checked = (x == "on");
+            el.dispatchEvent(new InputEvent('change'));
+        }
+        else el.value = x;
+    }
 });
 
 // Make the result section disappear when changing relevant input fields
@@ -10,9 +16,11 @@ for (var element of document.getElementById("relevant_for_clientconfig").getElem
 }
 
 function genCfg() {
+    if (document.getElementsByName("pka")[0].checked) genPsk();
     let results = document.getElementById('results');
     results.setAttribute("style", "");
     let kp = wireguard.generateKeypair();
+    document.getElementById("puk").value = kp.publicKey;
     let fd = new FormData(document.getElementById('params'));
     let clientcfg = [
         "[Interface]",
@@ -79,6 +87,15 @@ function genPsk() {
     pkfield.dispatchEvent(new InputEvent('beforeinput'));
 }
 
+function generateCN() {
+    d = new Date();
+    var datestring = d.getFullYear().toString().substring(2) + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) +
+        "_" + ("0" + d.getHours()).slice(-2) + "-" + ("0" + d.getMinutes()).slice(-2) + "-" + ("0" + d.getSeconds()).slice(-2);
+    let cnfield = document.getElementsByName('cn')[0];
+    cnfield.value = 'user_' + datestring;
+    cnfield.dispatchEvent(new InputEvent('beforeinput'));
+}
+
 function copycl(text) {
     navigator.clipboard.writeText(text).then(function () {
         console.log('Async: Copying to clipboard was successful!');
@@ -170,7 +187,9 @@ function getIP() {
                 try {
                     res = JSON.parse(xmlHttp.responseText);
                     if (res.error || !res.ip) throw ""
-                    document.getElementsByName('ca')[0].value = res.ip;
+                    let cafield = document.getElementsByName('ca')[0];
+                    cafield.value = res.ip;
+                    cafield.dispatchEvent(new InputEvent('beforeinput'));
                     document.getElementById('err').innerHTML = "Get unused IP: success";
                     document.getElementById('err').setAttribute("style", "background-color: rgb(100, 255, 100)");
                 }
@@ -200,7 +219,8 @@ function pushconfig() {
             "&key=" + encodeURIComponent(document.getElementsByName('osk')[0].value) +
             "&secret=" + encodeURIComponent(document.getElementsByName('oss')[0].value) +
             "&PeerName=" + encodeURIComponent(document.getElementsByName('cn')[0].value) +
-            "&pubkey=" + encodeURIComponent(document.getElementsByName('puk')[0].value) +
+            "&pubkey=" + encodeURIComponent(document.getElementById('puk').value) +
+            "&pskey=" + encodeURIComponent(document.getElementsByName('pk')[0].value) +
             "&ServerUUID=" + encodeURIComponent(document.getElementsByName('owg')[0].value) +
             "&tunnelAddress=" + encodeURIComponent(document.getElementsByName('ca')[0].value), true);
         xmlHttp.responseType = "JSON";
@@ -225,9 +245,3 @@ function pushconfig() {
 
 }
 
-function generateCN() {
-    d = new Date();
-    var datestring = d.getFullYear().toString().substring(2) + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) +
-        "_" + ("0" + d.getHours()).slice(-2) + "-" + ("0" + d.getMinutes()).slice(-2) + "-" + ("0" + d.getSeconds()).slice(-2);
-    document.getElementsByName('cn')[0].value = 'user_' + datestring;
-}