---
title: Main page
layout: plain
navbar:
  link: Main
  icon: home
custom_css:
  - main.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: a
      - 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: b:123
      - id: preshared
        name: Preshared key
        placeholder: Preshared key (shared between server and client)
        help: |
          Generate using <code>wg genpsk</code>
        example: c
  - 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: d
      - 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: e
      - id: client_ipv4
        name: IPv4
        placeholder: IPv4 address and netmask, like 192.168.123.5/24
        help: |
          IPv4 address to assign to the client and its netmask in the CIDR format.
        example: 192.168.1.1/24
      - id: client_ipv6
        name: IPv6
        placeholder: IPv6 address and netmask, like fd01:2345:6789::5/48
        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>

<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 }}{% 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>