jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-04-19 19:59:13 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI adjustment (#172)

Browse source 
- Adjust the UI
- Add more docs using tooltips
This commit is contained in:
Khanh Ngo 2022-03-20 13:53:09 +01:00 • committed by GitHub
parent 0224e1f137
commit ad4ca4d9bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
custom/js/helper.js
View file

@ -26,33 +26,35 @@ function renderClientList(data) {
</div> </div>
<div class="info-box-content"> <div class="info-box-content">
<div class="btn-group"> <div class="btn-group">
<a href="/download?clientid=${obj.Client.id}" class="btn btn-outline-success btn-sm">Download</a> <a href="/download?clientid=${obj.Client.id}" class="btn btn-outline-primary btn-sm">Download</a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#modal_qr_client" data-clientid="${obj.Client.id}" data-target="#modal_qr_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}" ${obj.QRCode != "" ? '' : ' disabled'}>Scan</button> data-clientname="${obj.Client.name}" ${obj.QRCode != "" ? '' : ' disabled'}>QR code</button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#modal_email_client" data-clientid="${obj.Client.id}" data-target="#modal_email_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Email</button> data-clientname="${obj.Client.name}">Email</button>
</div> </div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" <div class="btn-group">
<button type="button" class="btn btn-outline-danger btn-sm">More</button>
<button type="button" class="btn btn-outline-danger btn-sm dropdown-toggle dropdown-icon"
data-toggle="dropdown">
</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="#" data-toggle="modal"
data-target="#modal_edit_client" data-clientid="${obj.Client.id}" data-target="#modal_edit_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Edit</button> data-clientname="${obj.Client.name}">Edit</a>
</div> <a class="dropdown-item" href="#" data-toggle="modal"
<div class="btn-group">
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
data-target="#modal_pause_client" data-clientid="${obj.Client.id}" data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Disable</button> data-clientname="${obj.Client.name}">Disable</a>
<a class="dropdown-item" href="#" data-toggle="modal"
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
data-target="#modal_remove_client" data-clientid="${obj.Client.id}" data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Remove</button> data-clientname="${obj.Client.name}">Delete</a>
</div>
</div> </div>
<hr> <hr>
<span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span> <span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>

44
templates/base.html
View file

@ -76,9 +76,7 @@
<aside class="main-sidebar sidebar-dark-primary elevation-4"> <aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo --> <!-- Brand Logo -->
<a href="/" class="brand-link"> <a href="/" class="brand-link">
<!-- <img src="static/dist/img/logo.png" alt="Wireguard UI" <span class="brand-text">&nbsp; WIREGUARD UI</span>
class="brand-image img-circle elevation-3" style="opacity: .8"> -->
<span class="brand-text font-weight-light">WIREGUARD UI</span>
</a> </a>
<!-- Sidebar --> <!-- Sidebar -->
@ -96,6 +94,7 @@
<!-- Sidebar Menu --> <!-- Sidebar Menu -->
<nav class="mt-2"> <nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-header">MAIN</li>
<li class="nav-item"> <li class="nav-item">
<a href="/" class="nav-link {{if eq .baseData.Active ""}}active{{end}}"> <a href="/" class="nav-link {{if eq .baseData.Active ""}}active{{end}}">
<i class="nav-icon fas fa-user-secret"></i> <i class="nav-icon fas fa-user-secret"></i>
@ -112,6 +111,7 @@
</p> </p>
</a> </a>
</li> </li>
<li class="nav-header">SETTINGS</li>
<li class="nav-item"> <li class="nav-item">
<a href="/global-settings" class="nav-link {{if eq .baseData.Active "global-settings" }}active{{end}}"> <a href="/global-settings" class="nav-link {{if eq .baseData.Active "global-settings" }}active{{end}}">
<i class="nav-icon fas fa-cog"></i> <i class="nav-icon fas fa-cog"></i>
@ -120,9 +120,10 @@
</p> </p>
</a> </a>
</li> </li>
<li class="nav-header">UTILITIES</li>
<li class="nav-item"> <li class="nav-item">
<a href="/status" class="nav-link {{if eq .baseData.Active "status" }}active{{end}}"> <a href="/status" class="nav-link {{if eq .baseData.Active "status" }}active{{end}}">
<i class="nav-icon fas fa-user"></i> <i class="nav-icon fas fa-signal"></i>
<p> <p>
Status Status
</p> </p>
@ -131,9 +132,8 @@
<li class="nav-item"> <li class="nav-item">
<a href="/wake_on_lan_hosts" class="nav-link {{if eq .baseData.Active "wake_on_lan_hosts" }}active{{end}}"> <a href="/wake_on_lan_hosts" class="nav-link {{if eq .baseData.Active "wake_on_lan_hosts" }}active{{end}}">
<i class="nav-icon fas fa-solid fa-power-off"></i> <i class="nav-icon fas fa-solid fa-power-off"></i>
<p> <p>
Wake On Lan Hosts WoL Hosts
</p> </p>
</a> </a>
</li> </li>
@ -168,14 +168,23 @@
<input type="text" data-role="tagsinput" class="form-control" id="client_allocated_ips"> <input type="text" data-role="tagsinput" class="form-control" id="client_allocated_ips">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="client_allowed_ips" class="control-label">Allowed IPs</label> <label for="client_allowed_ips" class="control-label">Allowed IPs
<i class="fas fa-info-circle" data-toggle="tooltip"
data-original-title="Specify a list of addresses that will get routed to the
server. These addresses will be included in 'AllowedIPs' of client config">
</i>
</label>
<input type="text" data-role="tagsinput" class="form-control" id="client_allowed_ips" <input type="text" data-role="tagsinput" class="form-control" id="client_allowed_ips"
value="0.0.0.0/0"> value="0.0.0.0/0">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="client_extra_allowed_ips" class="control-label">Extra Allowed IPs</label> <label for="client_extra_allowed_ips" class="control-label">Extra Allowed IPs
<input type="text" data-role="tagsinput" class="form-control" <i class="fas fa-info-circle" data-toggle="tooltip"
id="client_extra_allowed_ips"> data-original-title="Specify a list of addresses that will get routed to the
client. These addresses will be included in 'AllowedIPs' of WG server config">
</i>
</label>
<input type="text" data-role="tagsinput" class="form-control" id="client_extra_allowed_ips">
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="icheck-primary d-inline"> <div class="icheck-primary d-inline">
@ -194,12 +203,18 @@
</div> </div>
</div> </div>
<details> <details>
<summary>Public and Preshared Keys</summary> <summary><strong>Public and Preshared Keys</strong>
<i class="fas fa-info-circle" data-toggle="tooltip"
data-original-title="If you don't want to let the server generate and store the
client's private, you can manually specify its public and preshared key here
. Note: QR code will not be generated">
</i>
</summary>
<div class="form-group" style="margin-top: 1rem"> <div class="form-group" style="margin-top: 1rem">
<label for="client_public_key" class="control-label"> <label for="client_public_key" class="control-label">
Public Key Public Key
</label> </label>
<input type="text" class="form-control" id="client_public_key" name="client_public_key" placeholder="Autogenerated (insecure)" aria-invalid="false"> <input type="text" class="form-control" id="client_public_key" name="client_public_key" placeholder="Autogenerated" aria-invalid="false">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="client_preshared_key" class="control-label"> <label for="client_preshared_key" class="control-label">
@ -296,6 +311,11 @@
<!-- Custom js --> <!-- Custom js -->
<script src="static/custom/js/helper.js"></script> <script src="static/custom/js/helper.js"></script>
<script> <script>
// initialize all tooltips
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// populateClient function for render new client info // populateClient function for render new client info
// on the client page. // on the client page.
function populateClient(client_id) { function populateClient(client_id) {

6
templates/clients.html
View file

@ -43,7 +43,7 @@ Wireguard Clients
<div class="modal-body"> <div class="modal-body">
<input type="hidden" id="e_client_id" name="e_client_id"> <input type="hidden" id="e_client_id" name="e_client_id">
<div class="form-group"> <div class="form-group">
<label for="e_client_email" class="control-label">Email</label> <label for="e_client_email" class="control-label">Email address</label>
<input type="text" class="form-control" id="e_client_email" name="e_client_email"> <input type="text" class="form-control" id="e_client_email" name="e_client_email">
</div> </div>
</div> </div>
@ -471,7 +471,7 @@ Wireguard Clients
success: function (resp) { success: function (resp) {
const client = resp.Client; const client = resp.Client;
modal.find(".modal-title").text("Email Client " + client.name); modal.find(".modal-title").text("Send config to client " + client.name);
modal.find("#e_client_id").val(client.id); modal.find("#e_client_id").val(client.id);
modal.find("#e_client_email").val(client.email); modal.find("#e_client_email").val(client.email);
}, },
@ -497,7 +497,7 @@ Wireguard Clients
success: function (resp) { success: function (resp) {
const client = resp.Client; const client = resp.Client;
modal.find(".modal-title").text("QR Code for " + client.name); modal.find(".modal-title").text("Scan QR Code for " + client.name + " profile");
QRCodeImg.attr('src', resp.QRCode).show(); QRCodeImg.attr('src', resp.QRCode).show();
}, },
error: function (jqXHR, exception) { error: function (jqXHR, exception) {