Skip to content

Commit ad4ca4d

Browse files
author
Khanh Ngo
authored
UI adjustment (#172)
- Adjust the UI - Add more docs using tooltips
1 parent 0224e1f commit ad4ca4d

3 files changed

Lines changed: 53 additions & 31 deletions

File tree

‎custom/js/helper.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,33 +26,35 @@ function renderClientList(data) {
2626
</div>
2727
<div class="info-box-content">
2828
<div class="btn-group">
29-
<a href="/download?clientid=${obj.Client.id}" class="btn btn-outline-success btn-sm">Download</a>
29+
<a href="/download?clientid=${obj.Client.id}" class="btn btn-outline-primary btn-sm">Download</a>
3030
</div>
3131
<div class="btn-group">
32-
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
32+
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
3333
data-target="#modal_qr_client" data-clientid="${obj.Client.id}"
34-
data-clientname="${obj.Client.name}" ${obj.QRCode != "" ? '' : ' disabled'}>Scan</button>
34+
data-clientname="${obj.Client.name}" ${obj.QRCode != "" ? '' : ' disabled'}>QR code</button>
3535
</div>
3636
<div class="btn-group">
37-
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
37+
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
3838
data-target="#modal_email_client" data-clientid="${obj.Client.id}"
3939
data-clientname="${obj.Client.name}">Email</button>
4040
</div>
41-
<div class="btn-group">
42-
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
41+
42+
<div class="btn-group">
43+
<button type="button" class="btn btn-outline-danger btn-sm">More</button>
44+
<button type="button" class="btn btn-outline-danger btn-sm dropdown-toggle dropdown-icon"
45+
data-toggle="dropdown">
46+
</button>
47+
<div class="dropdown-menu" role="menu">
48+
<a class="dropdown-item" href="#" data-toggle="modal"
4349
data-target="#modal_edit_client" data-clientid="${obj.Client.id}"
44-
data-clientname="${obj.Client.name}">Edit</button>
45-
</div>
46-
<div class="btn-group">
47-
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
50+
data-clientname="${obj.Client.name}">Edit</a>
51+
<a class="dropdown-item" href="#" data-toggle="modal"
4852
data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
49-
data-clientname="${obj.Client.name}">Disable</button>
50-
51-
</div>
52-
<div class="btn-group">
53-
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
53+
data-clientname="${obj.Client.name}">Disable</a>
54+
<a class="dropdown-item" href="#" data-toggle="modal"
5455
data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
55-
data-clientname="${obj.Client.name}">Remove</button>
56+
data-clientname="${obj.Client.name}">Delete</a>
57+
</div>
5658
</div>
5759
<hr>
5860
<span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>

‎templates/base.html‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,7 @@
7676
<aside class="main-sidebar sidebar-dark-primary elevation-4">
7777
<!-- Brand Logo -->
7878
<a href="/" class="brand-link">
79-
<!-- <img src="static/dist/img/logo.png" alt="Wireguard UI"
80-
class="brand-image img-circle elevation-3" style="opacity: .8"> -->
81-
<span class="brand-text font-weight-light">WIREGUARD UI</span>
79+
<span class="brand-text">&nbsp; WIREGUARD UI</span>
8280
</a>
8381

8482
<!-- Sidebar -->
@@ -96,6 +94,7 @@
9694
<!-- Sidebar Menu -->
9795
<nav class="mt-2">
9896
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
97+
<li class="nav-header">MAIN</li>
9998
<li class="nav-item">
10099
<a href="/" class="nav-link {{if eq .baseData.Active ""}}active{{end}}">
101100
<i class="nav-icon fas fa-user-secret"></i>
@@ -112,6 +111,7 @@
112111
</p>
113112
</a>
114113
</li>
114+
<li class="nav-header">SETTINGS</li>
115115
<li class="nav-item">
116116
<a href="/global-settings" class="nav-link {{if eq .baseData.Active "global-settings" }}active{{end}}">
117117
<i class="nav-icon fas fa-cog"></i>
@@ -120,9 +120,10 @@
120120
</p>
121121
</a>
122122
</li>
123+
<li class="nav-header">UTILITIES</li>
123124
<li class="nav-item">
124125
<a href="/status" class="nav-link {{if eq .baseData.Active "status" }}active{{end}}">
125-
<i class="nav-icon fas fa-user"></i>
126+
<i class="nav-icon fas fa-signal"></i>
126127
<p>
127128
Status
128129
</p>
@@ -131,9 +132,8 @@
131132
<li class="nav-item">
132133
<a href="/wake_on_lan_hosts" class="nav-link {{if eq .baseData.Active "wake_on_lan_hosts" }}active{{end}}">
133134
<i class="nav-icon fas fa-solid fa-power-off"></i>
134-
135135
<p>
136-
Wake On Lan Hosts
136+
WoL Hosts
137137
</p>
138138
</a>
139139
</li>
@@ -168,14 +168,23 @@ <h4 class="modal-title">New Wireguard Client</h4>
168168
<input type="text" data-role="tagsinput" class="form-control" id="client_allocated_ips">
169169
</div>
170170
<div class="form-group">
171-
<label for="client_allowed_ips" class="control-label">Allowed IPs</label>
171+
<label for="client_allowed_ips" class="control-label">Allowed IPs
172+
<i class="fas fa-info-circle" data-toggle="tooltip"
173+
data-original-title="Specify a list of addresses that will get routed to the
174+
server. These addresses will be included in 'AllowedIPs' of client config">
175+
</i>
176+
</label>
172177
<input type="text" data-role="tagsinput" class="form-control" id="client_allowed_ips"
173178
value="0.0.0.0/0">
174179
</div>
175180
<div class="form-group">
176-
<label for="client_extra_allowed_ips" class="control-label">Extra Allowed IPs</label>
177-
<input type="text" data-role="tagsinput" class="form-control"
178-
id="client_extra_allowed_ips">
181+
<label for="client_extra_allowed_ips" class="control-label">Extra Allowed IPs
182+
<i class="fas fa-info-circle" data-toggle="tooltip"
183+
data-original-title="Specify a list of addresses that will get routed to the
184+
client. These addresses will be included in 'AllowedIPs' of WG server config">
185+
</i>
186+
</label>
187+
<input type="text" data-role="tagsinput" class="form-control" id="client_extra_allowed_ips">
179188
</div>
180189
<div class="form-group">
181190
<div class="icheck-primary d-inline">
@@ -194,12 +203,18 @@ <h4 class="modal-title">New Wireguard Client</h4>
194203
</div>
195204
</div>
196205
<details>
197-
<summary>Public and Preshared Keys</summary>
206+
<summary><strong>Public and Preshared Keys</strong>
207+
<i class="fas fa-info-circle" data-toggle="tooltip"
208+
data-original-title="If you don't want to let the server generate and store the
209+
client's private, you can manually specify its public and preshared key here
210+
. Note: QR code will not be generated">
211+
</i>
212+
</summary>
198213
<div class="form-group" style="margin-top: 1rem">
199214
<label for="client_public_key" class="control-label">
200215
Public Key
201216
</label>
202-
<input type="text" class="form-control" id="client_public_key" name="client_public_key" placeholder="Autogenerated (insecure)" aria-invalid="false">
217+
<input type="text" class="form-control" id="client_public_key" name="client_public_key" placeholder="Autogenerated" aria-invalid="false">
203218
</div>
204219
<div class="form-group">
205220
<label for="client_preshared_key" class="control-label">
@@ -296,6 +311,11 @@ <h1>{{template "page_title" .}}</h1>
296311
<!-- Custom js -->
297312
<script src="static/custom/js/helper.js"></script>
298313
<script>
314+
// initialize all tooltips
315+
$(function () {
316+
$('[data-toggle="tooltip"]').tooltip()
317+
})
318+
299319
// populateClient function for render new client info
300320
// on the client page.
301321
function populateClient(client_id) {

‎templates/clients.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h4 class="modal-title">Email Configuration</h4>
4343
<div class="modal-body">
4444
<input type="hidden" id="e_client_id" name="e_client_id">
4545
<div class="form-group">
46-
<label for="e_client_email" class="control-label">Email</label>
46+
<label for="e_client_email" class="control-label">Email address</label>
4747
<input type="text" class="form-control" id="e_client_email" name="e_client_email">
4848
</div>
4949
</div>
@@ -471,7 +471,7 @@ <h4 class="modal-title">Remove</h4>
471471
success: function (resp) {
472472
const client = resp.Client;
473473

474-
modal.find(".modal-title").text("Email Client " + client.name);
474+
modal.find(".modal-title").text("Send config to client " + client.name);
475475
modal.find("#e_client_id").val(client.id);
476476
modal.find("#e_client_email").val(client.email);
477477
},
@@ -497,7 +497,7 @@ <h4 class="modal-title">Remove</h4>
497497
success: function (resp) {
498498
const client = resp.Client;
499499

500-
modal.find(".modal-title").text("QR Code for " + client.name);
500+
modal.find(".modal-title").text("Scan QR Code for " + client.name + " profile");
501501
QRCodeImg.attr('src', resp.QRCode).show();
502502
},
503503
error: function (jqXHR, exception) {

0 commit comments

Comments
 (0)