chore: ui adjustment

- Adjust the UI
- Add more docs using tooltips
This commit is contained in:
Khanh Ngo 2022-03-20 13:08:30 +01:00
parent 0224e1f137
commit 272bc6e5e6
No known key found for this signature in database
GPG key ID: 920A7D645DCB23DF
3 changed files with 34 additions and 22 deletions

View file

@ -131,7 +131,6 @@
<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
</p>
@ -194,12 +193,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 +301,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) {

View file

@ -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) {