chore: ui adjustment
- Adjust the UI - Add more docs using tooltips
This commit is contained in:
Khanh Ngo
parent
0224e1f137
commit
272bc6e5e6
|
|
@ -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 class="btn-group">
|
|
||||||
<button type="button" class="btn btn-outline-secondary 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>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
|
|
||||||
data-target="#modal_email_client" data-clientid="${obj.Client.id}"
|
|
||||||
data-clientname="${obj.Client.name}">Email</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
|
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
|
||||||
data-target="#modal_edit_client" data-clientid="${obj.Client.id}"
|
data-target="#modal_qr_client" data-clientid="${obj.Client.id}"
|
||||||
data-clientname="${obj.Client.name}">Edit</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-warning btn-sm" data-toggle="modal"
|
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
|
||||||
data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
|
data-target="#modal_email_client" data-clientid="${obj.Client.id}"
|
||||||
data-clientname="${obj.Client.name}">Disable</button>
|
data-clientname="${obj.Client.name}">Email</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
|
<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</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</a>
|
||||||
|
<a class="dropdown-item" href="#" 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>
|
||||||
|
|
|
||||||
|
|
@ -131,7 +131,6 @@
|
||||||
<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
|
Wake On Lan Hosts
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -194,12 +193,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 +301,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) {
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue