update static and javascript

README.md

@@ -39,6 +39,8 @@ export WGAS_ENDPOINT=127.0.0.1
 export WGAS_SUDO=false  # set to true if deploying on live VPN instance
 export WGAS_DNS=1.1.1.1 # set to dns you control if possible
 export WGAS_ROUTE=0.0.0.0/0
+export WGAS_INTERFACE=wg0
+export WGAS_NETWORK=10.66.66.1/24
 export WGAS_PORT=51820
 export WGAS_PUBKEY=$(wg genkey | wg pubkey)
 ```

static/css/main.css

@@ -2146,4 +2146,15 @@ button:active,
   margin: 0 auto;
 }
 
+#command-result {
+  font-weight: bold;
+  color: #49a865;
+  padding-top: 1em;
+}
+
+.peer-text {
+  margin: 0;
+  padding: 0;
+}
+
 /*# sourceMappingURL=main.css.map */

static/sass/main.scss

@@ -1177,3 +1177,14 @@
 	display: block;
 	margin: 0 auto;
 }
+
+#command-result {
+	font-weight: bold;
+	color: #49a865;
+	padding-top: 1em;
+}
+
+.peer-text {
+	margin: 0;
+	padding: 0;
+}

templates/add_peer.html.tera

@@ -9,24 +9,30 @@
     <header>
       <h2>Add A Peer</h2>
     </header>
-    <p>Use this form to add new peers to the WireGuard VPN. Input an IP address for this peer to use within the server's network CIDR range:</br><strong>{% if state.interface %}{{ state.interface }}{% else %}not defined{% endif %}</strong></p>
+    <p class="peer-text">Use this form to generate a new peer configuration and keys.</p>
+    <p class="peer-text">When you're ready, use the below config to setup a new VPN connection from your device.</p>
+    <p class="peer-text">Input a name and an IP address for this peer to use within the server's network:<br><strong>{% if state.network %}{{ state.network }}{% else %}not defined{% endif %}</strong></p>
+    <br><p>Refresh the page to get new keys generated.</p>
     <form id="peer-form" action="/save-peer-config" method="post">
+      <input type="text" name="name" id="input-name" placeholder="Enter a name for the peer">
       <input type="text" name="ipaddr" id="input-ipaddr" placeholder="Enter an IP address for the peer">
-      <!-- <input type="submit" value="Add Peer"> -->
     </form>
     <br>
     <pre id="peer-config" class="code"></pre>
     <div id="qrcode"></div>
+    <div id="command-result"></div>
+    <button type="submit" id="save-peer">Save Peer</button>
   </div>
 </section>
 
 <script type="text/javascript">
-
+var input_peer_name = document.getElementById('input-name');
 var input_ip_address = document.getElementById('input-ipaddr');
 var peer_config_element = document.getElementById('peer-config');
 var qr_code_element = document.getElementById('qrcode');
+var button_save_peer = document.getElementById('save-peer');
+var text_command_result = document.getElementById('command-result');
 var current_text = input_ip_address.value;
-// var qr_code = new QRCode(qr_code_element, get_templated(current_text));
 var qr_code = new QRCode(qr_code_element, {
     text: get_templated(current_text),
     colorDark : "#7d2220",
@@ -49,6 +55,26 @@ PersistentKeepalive = 21`;
   return peer_config;
 }
 
+function save_peer(){
+  var xmlhttp = new XMLHttpRequest();
+  var data = JSON.stringify({
+    "name": input_peer_name.value,
+    "ipaddr": input_ip_address.value,
+    "pubkey": "{{ pubkey }}",
+  });
+  xmlhttp.open("post", "/save-peer");
+  xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+  xmlhttp.onreadystatechange = function () {
+    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
+      var json = JSON.parse(xmlhttp.responseText);
+      text_command_result.innerHTML = "Peer added successfully! I should check for connections...until that happens, just get redirected to home page.";
+      button_save_peer.style.visibility = "hidden";
+      setTimeout(function(){window.location="/";}, 3000);
+    }
+  };
+  xmlhttp.send(data);
+}
+
 function update_meta(){
   var new_text = input_ip_address.value;
   if (new_text==current_text) return; else current_text=new_text;
@@ -64,7 +90,7 @@ function eventHandler(){
 }
 
 input_ip_address.onkeydown=input_ip_address.onkeyup=input_ip_address.onclick=eventHandler;
-input_ip_address.focus();
+button_save_peer.onclick=save_peer;
 peer_config_element.innerHTML = get_templated(current_text);
 </script>