implement PersistentKeepalive as a parameter

It's a unique parameter in many ways compared to the others. First, it's
optional, and has a default value. Second, I don't want it to be visible
at all times, which is why I hid it under the "Show advanced parameters"
checkbox. Hence a lot of changes.

2 files changed, 153 insertions, 19 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index d5be55f..79cc4e2 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,10 +1,21 @@
 var iface = 'wg0';
-var persistent_keepalive = 25;
 
 function parse_placeholder(val) {
     return true;
 }
 
+function parse_positive_integer(src) {
+    var val = parseInt(src);
+    if (isNaN(val) || val < 1) {
+        throw new Error('Cannot parse as a positive integer.');
+    }
+    return val;
+}
+
+function parse_keepalive(src) {
+    return parse_positive_integer(src);
+}
+
 function parse_endpoint(val) {
     val = val.trim();
     if (val.length == 0) {
@@ -104,15 +115,32 @@ Input.prototype.error_id = function() {
     return this.input_id() + '_error';
 }
 
+Input.prototype.container_id = function() {
+    return this.input_id() + '_container';
+}
+
 Input.prototype.value = function() {
     return $(this.input_id()).val();
 }
 
+Input.prototype.has_value = function() {
+    return this.value().length > 0;
+}
+
 Input.prototype.set = function(value) {
     $(this.input_id()).val(value);
 }
 
+Input.prototype.show = function() {
+    $(this.container_id()).show();
+}
+
+Input.prototype.hide = function() {
+    $(this.container_id()).hide();
+}
+
 Input.prototype.show_error = function(msg) {
+    this.show();
     $(this.error_id()).text(msg);
     $(this.error_id()).show();
 }
@@ -125,6 +153,8 @@ var Value = function(name, parser) {
     this.name = name;
     this.input = new Input(name);
     this.parser = parser;
+    this.optional = false;
+    this.advanced = false;
 
     this.value = null;
     this.error = null;
@@ -132,20 +162,46 @@ var Value = function(name, parser) {
 
 Value.prototype.parse = function() {
     try {
-        this.value = this.parser(this.input.value());
-        this.input.hide_error();
+        var value = this.input.value();
+        if (!this.optional || value.length > 0) {
+            value = this.parser(value);
+        }
+        this.set_value(value);
         return true;
     } catch (err) {
-        this.error = err.message;
-        this.input.show_error(this.error);
+        this.set_error(err.message);
         return false;
     }
 }
 
+Value.prototype.set_value = function(value) {
+    this.value = value;
+    this.error = null;
+    this.input.hide_error();
+}
+
+Value.prototype.set_error = function(msg) {
+    this.value = null;
+    this.error = msg;
+    this.input.show_error(this.error);
+}
+
+Value.prototype.is_set = function() {
+    return this.input.has_value();
+}
+
 Value.prototype.set = function(value) {
     this.input.set(value);
 }
 
+Value.prototype.show = function() {
+    this.input.show();
+}
+
+Value.prototype.hide = function() {
+    this.input.hide();
+}
+
 var Endpoint = function(name) {
     Value.call(this, name, parse_endpoint);
 }
@@ -174,6 +230,15 @@ var IPv6 = function(name) {
 IPv6.prototype = Object.create(Value.prototype);
 IPv6.prototype.constructor = IPv6;
 
+var Keepalive = function(name) {
+    Value.call(this, name, parse_keepalive);
+    this.optional = true;
+    this.advanced = true;
+}
+
+Keepalive.prototype = Object.create(Value.prototype);
+Keepalive.prototype.constructor = Keepalive;
+
 var Data = function() {
     this.server_public   = new Key('server_public');
     this.server_endpoint = new Endpoint('server_endpoint');
@@ -182,6 +247,7 @@ var Data = function() {
     this.client_private  = new Key('client_private');
     this.client_ipv4     = new IPv4('client_ipv4');
     this.client_ipv6     = new IPv6('client_ipv6');
+    this.keepalive       = new Keepalive('keepalive');
 
     this.values = [
         this.server_public,
@@ -190,7 +256,8 @@ var Data = function() {
         this.client_public,
         this.client_private,
         this.client_ipv4,
-        this.client_ipv6
+        this.client_ipv6,
+        this.keepalive
     ];
 }
 
@@ -231,10 +298,12 @@ Data.prototype.parse = function() {
             success = false;
         }
     });
-    if (!success) {
-        this.show_error();
-    } else {
+    if (success) {
+        if (!$('#advanced_params').prop('checked'))
+            this.hide_advanced();
         this.hide_error();
+    } else {
+        this.show_error();
     }
     return success;
 }
@@ -248,6 +317,22 @@ Data.prototype.hide_error = function() {
     $('#params_error').hide();
 }
 
+Data.prototype.show_advanced = function() {
+    this.values.forEach(function(value) {
+        if (!value.advanced)
+            return;
+        value.show();
+    });
+}
+
+Data.prototype.hide_advanced = function() {
+    this.values.forEach(function(value) {
+        if (!value.advanced)
+            return;
+        value.hide();
+    });
+}
+
 function format_pre_text(text) {
     return $('<pre/>').text(text);
 }
@@ -293,7 +378,7 @@ QRCode.prototype.format = function() {
 
 function wg_quick_client_file(data) {
     var path = `/etc/wireguard/${iface}.conf`;
-    return new ConfigFile(path,
+    var contents =
 `# On the client, put this to
 #     ${path}
 # and either
@@ -309,8 +394,15 @@ Endpoint = ${data.server_endpoint.value}
 PublicKey = ${data.server_public.value}
 PresharedKey = ${data.preshared.value}
 AllowedIPs = ${data.client_ipv4.value.allowed_ips_client()}, ${data.client_ipv6.value.allowed_ips_client()}
-PersistentKeepalive = ${persistent_keepalive}
-`);
+`;
+
+    if (data.keepalive.is_set()) {
+        contents +=
+`PersistentKeepalive = ${data.keepalive.value}
+`;
+    }
+
+    return new ConfigFile(path, contents);
 }
 
 function wg_quick_server_file(data) {
@@ -331,7 +423,7 @@ AllowedIPs = ${data.client_ipv4.value.allowed_ips_server()}, ${data.client_ipv6.
 
 function systemd_client_netdev_file(data) {
     var path = `/etc/systemd/network/${iface}.netdev`;
-    return new ConfigFile(path,
+    var contents =
 `# On the client, you need two files. Put this into
 #     ${path}
 # and after you're done with both files, run
@@ -350,8 +442,15 @@ Endpoint = ${data.server_endpoint.value}
 PublicKey = ${data.server_public.value}
 PresharedKey = ${data.preshared.value}
 AllowedIPs = ${data.client_ipv4.value.allowed_ips_client()}, ${data.client_ipv6.value.allowed_ips_client()}
-PersistentKeepalive = ${persistent_keepalive}
-`);
+`;
+
+    if (data.keepalive.is_set()) {
+        contents +=
+`PersistentKeepalive = ${data.keepalive.value}
+`;
+    }
+
+    return new ConfigFile(path, contents);
 }
 
 function systemd_client_network_file(data) {
@@ -392,7 +491,7 @@ AllowedIPs = ${data.client_ipv4.value.allowed_ips_server()}, ${data.client_ipv6.
 
 function nmcli_client_file(data) {
     var path = `/etc/NetworkManager/system-connections/${iface}.nmconnection`;
-    return new ConfigFile(path,
+    var contents =
 `# On the client, put this to
 #     ${path}
 # and run
@@ -414,8 +513,15 @@ endpoint=${data.server_endpoint.value}
 preshared-key=${data.preshared.value}
 preshared-key-flags=0
 allowed-ips=${data.client_ipv4.value.allowed_ips_client()};${data.client_ipv6.value.allowed_ips_client()};
-persistent-keepalive=${persistent_keepalive}
+`;
+    if (data.keepalive.is_set()) {
+        contents +=
+`persistent-keepalive=${data.keepalive.value}
+`;
+    }
 
+    contents +=
+`
 [ipv4]
 address1=${data.client_ipv4.value.address()}
 method=manual
@@ -423,7 +529,9 @@ method=manual
 [ipv6]
 address1=${data.client_ipv6.value.address()}
 method=manual
-`);
+`;
+
+    return new ConfigFile(path, contents);
 }
 
 function nmcli_server_file(data) {
@@ -631,6 +739,15 @@ function form_on_submit() {
     return false;
 }
 
+function advanced_params_on_click(input) {
+    var data = new Data();
+    if (input.checked) {
+        data.show_advanced();
+    } else {
+        data.hide_advanced();
+    }
+}
+
 function main() {
     var data = new Data();
     if (data.set_from_this_url()) {
diff --git a/index.html b/index.html
index 34499c2..e285ff5 100644
--- a/index.html
+++ b/index.html
@@ -59,6 +59,14 @@ params:
         help: |
           IPv6 address to assign to the client and its netmask in the CIDR format.
         example: fd::/48
+      - id: keepalive
+        name: Keepalive
+        default: 25
+        placeholder: Seconds between keepalive packets, typically 25
+        help: |
+          Time to wait between sending keepalive packets, seconds.
+        example: 25
+        advanced: true
 ---
 <h1>WireGuard configuration</h1>
 
@@ -95,7 +103,7 @@ show the configuration that can be easily consumed by the new client.</p>
           </div>
         </div>
   {% for param in grp.items %}
-        <div class="form-group">
+        <div class="form-group" id="param_{{ param.id }}_container" {% if param.advanced %}style="display: none;"{% endif %}>
           <label for="param_{{ param.id }}" class="col-sm-3 control-label">{{ param.name }}</label>
           <div class="col-sm-9">
             <input type="text" class="form-control" id="param_{{ param.id }}" placeholder="{{ param.placeholder }}" aria-describedby="param_{{ param.id }}_help">
@@ -110,6 +118,15 @@ show the configuration that can be easily consumed by the new client.</p>
     </div>
 {% endfor %}
     <div class="col-md-offset-6 col-md-6">
+      <div class="form-horizontal">
+        <div class="form-group">
+          <div class="col-sm-offset-3 col-sm-9">
+            <div class="checkbox">
+              <label class="text-muted"><input type="checkbox" id="advanced_params" onClick="advanced_params_on_click(this);">Show advanced parameters</label>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="col-sm-offset-3 col-sm-9 text-center">
           <button type="submit" class="btn btn-primary">Generate</button>