--- title: Main page layout: plain navbar: link: Main icon: home custom_css: - pre_overlay.css custom_js: # ipaddr.js is buggy: https://github.com/whitequark/ipaddr.js/issues/160. # TODO: revert back to using ipaddr.js if it's fixed? #- https://cdn.jsdelivr.net/npm/ipaddr.js@2.0.1/ipaddr.min.js # This is the "browserified" replacement, ip-address. This bundling procedure # fucking sucks, but it's the best I've got for now. - bundle.js - https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js - main.js params: - id: server desc: Server items: - id: server_public name: Public key placeholder: "Server's public key" help: | Query using <code>wg show wg0 public-key</code> example: iNqGDQ2tltbSN4s3Fpb/7PRc2OSwR3/bPjOrf8V/SmA= - id: server_endpoint name: Endpoint placeholder: "Server's endpoint in the HOST:PORT format" help: | Server's public IP address or a hostname, accessible from the client. Query the current port using <code>wg show wg0 listen-port</code> example: 123.123.123.123:123 - id: preshared name: Preshared key placeholder: Preshared key (shared between server and client) help: | Generate using <code>wg genpsk</code> example: Moshdr8RNfYUWG/0MVOlglzlze3beATD6YumDwCZf5E= - id: client desc: Client items: - id: client_public name: Public key placeholder: "Client's public key" help: | Generate both the private and the public keys using <code>wg genkey | tee private.key | wg pubkey > public.key</code> example: hvfo/MgizTRbrktfx3k2Q0Ib0mx0P2N6LRZEYWqkpXc= - id: client_private name: Private key placeholder: "Client's private key" help: | Unless generated in one go with the public key, generate one using <code>wg genkey</code> example: qKgmDq8HWaU432qJhEa2Q6pE52P55xBHNOgzB0roP3A= - id: client_ipv4 name: IPv4 placeholder: IPv4 address and netmask, like 192.168.123.123/24 help: | IPv4 address to assign to the client and its netmask in the CIDR format. example: 192.168.123.123/24 - id: client_ipv6 name: IPv6 placeholder: IPv6 address and netmask, like fd01:2345:6789::192.168.123.123/48 help: | IPv6 address to assign to the client and its netmask in the CIDR format. example: fd01:2345:6789::192.168.123.123/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> <div class="row"> <div class="col-md-8"> <p class="text-muted">This page assumes that you have a WireGuard server configured on interface <code>wg0</code>. You can then generate the new client's keys, feed them to this page and it will show the configuration that can be easily consumed by the new client.</p> {% assign example_url = '?' %} {% assign first = true %} {% for grp in page.params %} {% for param in grp.items %} {% unless first %} {% capture example_url %}{{ example_url }}&{% endcapture %} {% endunless %} {% assign first = false %} {% capture example_url %}{{ example_url }}{{ param.id }}={{ param.example | url_encode }}{% endcapture %} {% endfor %} {% endfor %} <p>An example configuration (with bogus key values) can be seen <a href="{{ example_url | escape_uri | baseurl }}">here</a>.</p> </div> </div> <form action="javascript:void(0);" onsubmit="form_on_submit(); return false;"> <div class="row"> {% for grp in page.params %} <div class="col-md-6"> <div class="form-horizontal"> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <h2 class="text-center h3" style="margin-bottom: 0;">{{ grp.desc }}</h2> </div> </div> {% for param in grp.items %} <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"{% if param.default != null %} value="{{ param.default }}"{% endif %}> <span id="param_{{ param.id }}_help" class="help-block" style="margin-bottom: 0;"> <span id="param_{{ param.id }}_error" class="text-danger small" style="display: block; white-space: pre-line; margin-bottom: 5px;"></span> <span>{{ param.help }}</span> </span> </div> </div> {% endfor %} </div> </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> <span class="help-block" style="margin-bottom: 0;"> <span id="params_error" class="text-danger small" style="white-space: pre-line;"></span> </span> </div> </div> </div> </div> </form> <div id="guides"></div>