From ad4ca4d9bb344236a2793fee54ec24cf07d6cd8c Mon Sep 17 00:00:00 2001
From: Khanh Ngo <khanh.ngo@taxfix.de>
Date: Sun, 20 Mar 2022 13:53:09 +0100
Subject: [PATCH] UI adjustment (#172)

- Adjust the UI
- Add more docs using tooltips
---
 custom/js/helper.js    | 34 +++++++++++++++++---------------
 templates/base.html    | 44 ++++++++++++++++++++++++++++++------------
 templates/clients.html |  6 +++---
 3 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/custom/js/helper.js b/custom/js/helper.js
index dd4b497..b742472 100644
--- a/custom/js/helper.js
+++ b/custom/js/helper.js
@@ -26,33 +26,35 @@ function renderClientList(data) {
                             </div>
                             <div class="info-box-content">
                                 <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 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-clientname="${obj.Client.name}" ${obj.QRCode != "" ? '' : ' disabled'}>Scan</button>
+                                        data-clientname="${obj.Client.name}" ${obj.QRCode != "" ? '' : ' disabled'}>QR code</button>
                                 </div>
                                 <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-clientname="${obj.Client.name}">Email</button>
                                 </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-clientname="${obj.Client.name}">Edit</button>
-                                </div>
-                                <div class="btn-group">        
-                                    <button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
+                                        data-clientname="${obj.Client.name}">Edit</a>
+                                        <a class="dropdown-item" href="#" data-toggle="modal"
                                         data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
-                                        data-clientname="${obj.Client.name}">Disable</button>
-                                        
-                                </div>
-                                <div class="btn-group">        
-                                    <button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
+                                        data-clientname="${obj.Client.name}">Disable</a>
+                                        <a class="dropdown-item" href="#" data-toggle="modal"
                                         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>
                                 <hr>
                                 <span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
diff --git a/templates/base.html b/templates/base.html
index 5d3fe92..a161891 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -76,9 +76,7 @@
         <aside class="main-sidebar sidebar-dark-primary elevation-4">
             <!-- Brand Logo -->
             <a href="/" class="brand-link">
-                <!-- <img src="static/dist/img/logo.png" alt="Wireguard UI"
-                    class="brand-image img-circle elevation-3" style="opacity: .8"> -->
-                <span class="brand-text font-weight-light">WIREGUARD UI</span>
+                <span class="brand-text">&nbsp; WIREGUARD UI</span>
             </a>
 
             <!-- Sidebar -->
@@ -96,6 +94,7 @@
                 <!-- Sidebar Menu -->
                 <nav class="mt-2">
                     <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">
                             <a href="/" class="nav-link {{if eq .baseData.Active ""}}active{{end}}">
                                 <i class="nav-icon fas fa-user-secret"></i>
@@ -112,6 +111,7 @@
                                 </p>
                             </a>
                         </li>
+                        <li class="nav-header">SETTINGS</li>
                         <li class="nav-item">
                             <a href="/global-settings" class="nav-link {{if eq .baseData.Active "global-settings" }}active{{end}}">
                                 <i class="nav-icon fas fa-cog"></i>
@@ -120,9 +120,10 @@
                                 </p>
                             </a>
                         </li>
+                        <li class="nav-header">UTILITIES</li>
                         <li class="nav-item">
                             <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>
                                     Status
                                 </p>
@@ -131,9 +132,8 @@
                         <li class="nav-item">
                             <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>
-
                                 <p>
-                                    Wake On Lan Hosts
+                                    WoL Hosts
                                 </p>
                             </a>
                         </li>
@@ -168,14 +168,23 @@
                                 <input type="text" data-role="tagsinput" class="form-control" id="client_allocated_ips">
                             </div>
                             <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"
                                     value="0.0.0.0/0">
                             </div>
                             <div class="form-group">
-                                <label for="client_extra_allowed_ips" class="control-label">Extra Allowed IPs</label>
-                                <input type="text" data-role="tagsinput" class="form-control"
-                                     id="client_extra_allowed_ips">
+                                <label for="client_extra_allowed_ips" class="control-label">Extra 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
+                                       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 class="form-group">
                                 <div class="icheck-primary d-inline">
@@ -194,12 +203,18 @@
                                 </div>
                             </div>
                             <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">
                                     <label for="client_public_key" class="control-label">
                                         Public Key
                                     </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 class="form-group">
                                     <label for="client_preshared_key" class="control-label">
@@ -296,6 +311,11 @@
     <!-- Custom js -->
     <script src="static/custom/js/helper.js"></script>
     <script>
+        // initialize all tooltips
+        $(function () {
+            $('[data-toggle="tooltip"]').tooltip()
+        })
+
         // populateClient function for render new client info
         // on the client page.
         function populateClient(client_id) {
diff --git a/templates/clients.html b/templates/clients.html
index 16d2057..295bb77 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -43,7 +43,7 @@ Wireguard Clients
                 <div class="modal-body">
                     <input type="hidden" id="e_client_id" name="e_client_id">
                     <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">
                     </div>
                 </div>
@@ -471,7 +471,7 @@ Wireguard Clients
                 success: function (resp) {
                     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_email").val(client.email);
                 },
@@ -497,7 +497,7 @@ Wireguard Clients
                 success: function (resp) {
                     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();
                 },
                 error: function (jqXHR, exception) {