diff options
| author | Egor Tensin <egor@tensin.name> | 2026-06-06 22:18:37 +0200 |
|---|---|---|
| committer | Egor Tensin <egor@tensin.name> | 2026-06-06 22:25:32 +0200 |
| commit | 07a784f0d654fcd552069e85b314ea7c29cb5dd6 (patch) | |
| tree | 9c12dec00b68aaa33dbf8429f34f9812493c965a /src/index.html | |
| parent | bump dependencies (diff) | |
| download | wireguard-config-07a784f0d654fcd552069e85b314ea7c29cb5dd6.tar.gz wireguard-config-07a784f0d654fcd552069e85b314ea7c29cb5dd6.zip | |
move Jekyll source files to src/
Diffstat (limited to 'src/index.html')
| -rw-r--r-- | src/index.html | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..8ad2cfd --- /dev/null +++ b/src/index.html @@ -0,0 +1,187 @@ +--- +title: Main page +layout: plain +navbar: + link: Project +links: + - {rel: stylesheet, href: assets/css/pre_overlay.css} +scripts: + # ipaddr.js is buggy: https://github.com/whitequark/ipaddr.js/issues/160. + # TODO: revert back to using ipaddr.js if it's fixed? + #- {src: '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. + - {src: assets/js/bundle.js} + + - {src: 'https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js'} + - {src: assets/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 <em>public</em> IP address or a hostname. + Query the 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 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: 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: Address and netmask, like fd::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 + - id: tunnel_everything + name: Tunnel all traffic + type: checkbox + default: false + advanced: true + - id: dns_ipv4 + name: DNS (IPv4) + default: 1.1.1.1,1.0.0.1 + placeholder: IPv4 addresses of DNS servers + help: | + Comma-separated list of IPv4 addresses to use as DNS servers. + example: 1.1.1.1,1.0.0.1 + advanced: true + - id: dns_ipv6 + name: DNS (IPv6) + default: 2606:4700:4700::1111,2606:4700:4700::1001 + placeholder: IPv6 addresses of DNS servers + help: | + Comma-separated list of IPv6 addresses to use as DNS servers. + example: 2606:4700:4700::1111,2606:4700:4700::1001 + advanced: true +--- +<h1>{{ site.settings.project.name }}</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 configuration files that can be used by the 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 %} +{% assign example_url = example_url | escape_uri | baseurl %} + <p>Take a look at an <a href="{{ example_url }}">example configuration</a> to learn more.</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 %} + {% assign type = param.type | default: "text" %} + {% if type == "text" %} + <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> + {% endif %} + {% if type == "checkbox" %} + <div class="form-group" id="param_{{ param.id }}_container"{% if param.advanced %} style="display: none;"{% endif %}> + <div class="col-sm-offset-3 col-sm-9"> + <div class="checkbox"> + <label><input type="checkbox" id="param_{{ param.id }}" value="{{ param.default }}"{% if param.default %} checked{% endif %}>{{ param.name }}</label> + </div> + <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> + </div> + </div> + {% endif %} + {% 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> + <a href="{{ example_url }}"><button type="button" class="btn btn-info" title="Fill in the form with examples values">Example</button></a> + <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> |
