aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/index.html
blob: 87839a593b641adbdddca5caa586f84d8e7a6c80 (plain) (blame)
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
---
title: Main page
layout: plain
navbar:
  link: Main
  icon: home
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>