1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: Main page
layout: plain
navbar:
link: Main
icon: home
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>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 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>
|
