deblan/wireguard-ui
deblan/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui synced 2024-06-13 11:22:37 +02:00
Code Issues Projects Releases Wiki Activity

Reformat HTML code

Browse source
This commit is contained in:
Khanh Ngo 2020-05-29 11:27:23 +07:00
parent 680e73c990
commit 6589b41cc1
No known key found for this signature in database
GPG key ID: D5FAA6A16150E49E
5 changed files with 39 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
templates/base.html
View file

@ -67,7 +67,6 @@
<button onclick="location.href='/logout';" style="margin-left: 0.5em;" type="button" <button onclick="location.href='/logout';" style="margin-left: 0.5em;" type="button"
class="btn btn-outline-danger btn-sm"><i class="nav-icon fas fa-sign-out-alt"></i> Logout</button> class="btn btn-outline-danger btn-sm"><i class="nav-icon fas fa-sign-out-alt"></i> Logout</button>
</nav> </nav>
</nav>
<!-- /.navbar --> <!-- /.navbar -->
<!-- Main Sidebar Container --> <!-- Main Sidebar Container -->
@ -271,7 +270,7 @@
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(data), data: JSON.stringify(data),
success: function(data) { success: function(data) {
$('#modal_new_client').modal('hide'); $("#modal_new_client").modal('hide');
toastr.success('Created new client successfully'); toastr.success('Created new client successfully');
// TODO: trigger reloading the dashboard // TODO: trigger reloading the dashboard
}, },
@ -305,10 +304,10 @@
</script> </script>
<script> <script>
//Initialize Select2 Elements //Initialize Select2 Elements
$('.select2').select2() $(".select2").select2()
// IP Allocation tag input // IP Allocation tag input
$('#client_allocated_ips').tagsInput({ $("#client_allocated_ips").tagsInput({
'width': '100%', 'width': '100%',
'height': '75%', 'height': '75%',
'interactive': true, 'interactive': true,
@ -320,7 +319,7 @@
}); });
// AllowedIPs tag input // AllowedIPs tag input
$('#client_allowed_ips').tagsInput({ $("#client_allowed_ips").tagsInput({
'width': '100%', 'width': '100%',
'height': '75%', 'height': '75%',
'interactive': true, 'interactive': true,
@ -338,7 +337,7 @@
submitNewClient(); submitNewClient();
} }
}); });
$('#frm_new_client').validate({ $("#frm_new_client").validate({
rules: { rules: {
client_name: { client_name: {
required: true, required: true,
@ -373,15 +372,15 @@
// New Client modal event // New Client modal event
$(document).ready(function () { $(document).ready(function () {
$('#modal_new_client').on('shown.bs.modal', function (e) { $("#modal_new_client").on('shown.bs.modal', function (e) {
$('#client_allocated_ips').importTags(''); $("#client_allocated_ips").importTags('');
updateIPAllocationSuggestion(); updateIPAllocationSuggestion();
}); });
}); });
// apply_config_confirm button event // apply_config_confirm button event
$(document).ready(function () { $(document).ready(function () {
$('#apply_config_confirm').click(function () { $("#apply_config_confirm").click(function () {
$.ajax({ $.ajax({
cache: false, cache: false,
method: 'GET', method: 'GET',
@ -389,7 +388,7 @@
dataType: 'json', dataType: 'json',
contentType: "application/json", contentType: "application/json",
success: function(data) { success: function(data) {
$('#modal_apply_config').modal('hide'); $("#modal_apply_config").modal('hide');
toastr.success('Applied config successfully'); toastr.success('Applied config successfully');
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {

16
templates/clients.html
View file

@ -55,11 +55,11 @@ Wireguard Clients
{{ .Client.UpdatedAt.Format "2 Jan 2006 15:04" }}</span> {{ .Client.UpdatedAt.Format "2 Jan 2006 15:04" }}</span>
<span class="info-box-text"><strong>IP Allocation</strong></span> <span class="info-box-text"><strong>IP Allocation</strong></span>
{{range .Client.AllocatedIPs}} {{range .Client.AllocatedIPs}}
<small class="badge badge-secondary"></i>{{.}}</small> <small class="badge badge-secondary">{{.}}</small>
{{end}} {{end}}
<span class="info-box-text"><strong>Allowed IPs</strong></span> <span class="info-box-text"><strong>Allowed IPs</strong></span>
{{range .Client.AllowedIPs}} {{range .Client.AllowedIPs}}
<small class="badge badge-secondary"></i>{{.}}</small> <small class="badge badge-secondary">{{.}}</small>
{{end}} {{end}}
</div> </div>
<!-- /.info-box-content --> <!-- /.info-box-content -->
@ -153,7 +153,7 @@ Wireguard Clients
</script> </script>
<script> <script>
// modal_pause_client modal event // modal_pause_client modal event
$('#modal_pause_client').on('show.bs.modal', function (event) { $("#modal_pause_client").on('show.bs.modal', function (event) {
const button = $(event.relatedTarget); const button = $(event.relatedTarget);
const client_id = button.data('clientid'); const client_id = button.data('clientid');
const client_name = button.data('clientname'); const client_name = button.data('clientname');
@ -164,15 +164,15 @@ Wireguard Clients
// pause_client_confirm button event // pause_client_confirm button event
$(document).ready(function () { $(document).ready(function () {
$('#pause_client_confirm').click(function () { $("#pause_client_confirm").click(function () {
const client_id = $(this).val(); const client_id = $(this).val();
pauseClient(client_id); pauseClient(client_id);
$('#modal_pause_client').modal('hide'); $("#modal_pause_client").modal('hide');
}); });
}); });
// modal_remove_client modal event // modal_remove_client modal event
$('#modal_remove_client').on('show.bs.modal', function (event) { $("#modal_remove_client").on('show.bs.modal', function (event) {
const button = $(event.relatedTarget); const button = $(event.relatedTarget);
const client_id = button.data('clientid'); const client_id = button.data('clientid');
const client_name = button.data('clientname'); const client_name = button.data('clientname');
@ -183,7 +183,7 @@ Wireguard Clients
// remove_client_confirm button event // remove_client_confirm button event
$(document).ready(function () { $(document).ready(function () {
$('#remove_client_confirm').click(function () { $("#remove_client_confirm").click(function () {
const client_id = $(this).val(); const client_id = $(this).val();
const data = {"id": client_id}; const data = {"id": client_id};
$.ajax({ $.ajax({
@ -194,7 +194,7 @@ Wireguard Clients
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(data), data: JSON.stringify(data),
success: function(data) { success: function(data) {
$('#modal_remove_client').modal('hide'); $("#modal_remove_client").modal('hide');
toastr.success('Removed client successfully'); toastr.success('Removed client successfully');
const divElement = document.getElementById('client_' + client_id); const divElement = document.getElementById('client_' + client_id);
divElement.style.display = "none"; divElement.style.display = "none";

18
templates/global_settings.html
View file

@ -121,7 +121,7 @@ Global Settings
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(data), data: JSON.stringify(data),
success: function(data) { success: function(data) {
$('#modal_new_client').modal('hide'); $("#modal_new_client").modal('hide');
toastr.success('Update global settings successfully'); toastr.success('Update global settings successfully');
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
@ -147,7 +147,7 @@ Global Settings
</script> </script>
<script> <script>
// Wireguard Interface DNS server tag input // Wireguard Interface DNS server tag input
$('#dns_servers').tagsInput({ $("#dns_servers").tagsInput({
'width': '100%', 'width': '100%',
'height': '75%', 'height': '75%',
'interactive': true, 'interactive': true,
@ -160,7 +160,7 @@ Global Settings
// Load DNS server to the form // Load DNS server to the form
{{range .globalSettings.DNSServers}} {{range .globalSettings.DNSServers}}
$('#dns_servers').addTag('{{.}}'); $("#dns_servers").addTag('{{.}}');
{{end}} {{end}}
// Global setting form validation // Global setting form validation
@ -170,7 +170,7 @@ Global Settings
submitGlobalSettings(); submitGlobalSettings();
} }
}); });
$('#frm_global_settings').validate({ $("#frm_global_settings").validate({
rules: { rules: {
mtu: { mtu: {
required: true, required: true,
@ -215,17 +215,17 @@ Global Settings
// Endpoint IP suggestion modal event // Endpoint IP suggestion modal event
$(document).ready(function () { $(document).ready(function () {
$('#modal_endpoint_address_suggestion').on('shown.bs.modal', function (e) { $("#modal_endpoint_address_suggestion").on('shown.bs.modal', function (e) {
updateEndpointSuggestionIP(); updateEndpointSuggestionIP();
}); });
}); });
// Use selected IP address from suggestion form // Use selected IP address from suggestion form
$(document).ready(function () { $(document).ready(function () {
$('#btn_use_ip').click(function () { $("#btn_use_ip").click(function () {
const ip = $('#ip_suggestion').select2('val'); const ip = $("#ip_suggestion").select2('val');
$('#endpoint_address').val(ip); $("#endpoint_address").val(ip);
$('#modal_endpoint_address_suggestion').modal('hide'); $("#modal_endpoint_address_suggestion").modal('hide');
}); });
}); });
</script> </script>

8
templates/login.html
View file

@ -31,7 +31,7 @@
<p class="login-box-msg">Sign in to start your session</p> <p class="login-box-msg">Sign in to start your session</p>
<form action="" method="post"> <form action="" method="post">
<div class="input-group mb-3"> <div class="input-group mb-3">
<input id="username" type="username" class="form-control" placeholder="Username"> <input id="username" type="text" class="form-control" placeholder="Username">
<div class="input-group-append"> <div class="input-group-append">
<div class="input-group-text"> <div class="input-group-text">
<span class="fas fa-envelope"></span> <span class="fas fa-envelope"></span>
@ -91,7 +91,7 @@
</script> </script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$('#btn_login').click(function () { $("#btn_login").click(function () {
const username = $("#username").val(); const username = $("#username").val();
const password = $("#password").val(); const password = $("#password").val();
const data = {"username": username, "password": password} const data = {"username": username, "password": password}
@ -105,13 +105,13 @@
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(data), data: JSON.stringify(data),
success: function(data) { success: function(data) {
document.getElementById("message").innerHTML = '<p style="color:green">' + data['message'] + '</p>'; document.getElementById("message").innerHTML = `<p style="color:green">${data['message']}</p>`;
// redirect after logging in successfully // redirect after logging in successfully
redirectNext(); redirectNext();
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText); const responseJson = jQuery.parseJSON(jqXHR.responseText);
document.getElementById("message").innerHTML = '<p style="color:red">' + responseJson['message'] + '</p>'; document.getElementById("message").innerHTML = `<p style="color:#ff0000">${responseJson['message']}</p>`;
} }
}); });
}); });

18
templates/server.html
View file

@ -129,7 +129,7 @@ Wireguard Server Settings
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(data), data: JSON.stringify(data),
success: function(data) { success: function(data) {
$('#modal_new_client').modal('hide'); $("#modal_new_client").modal('hide');
toastr.success('Updated Wireguard server interface addresses successfully'); toastr.success('Updated Wireguard server interface addresses successfully');
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
@ -141,7 +141,7 @@ Wireguard Server Settings
</script> </script>
<script> <script>
// Wireguard Interface Addresses tag input // Wireguard Interface Addresses tag input
$('#addresses').tagsInput({ $("#addresses").tagsInput({
'width': '100%', 'width': '100%',
// 'height': '75%', // 'height': '75%',
'interactive': true, 'interactive': true,
@ -154,7 +154,7 @@ Wireguard Server Settings
// Load server addresses to the form // Load server addresses to the form
{{range .serverInterface.Addresses}} {{range .serverInterface.Addresses}}
$('#addresses').addTag('{{.}}'); $("#addresses").addTag('{{.}}');
{{end}} {{end}}
// Wireguard Interface Addresses form validation // Wireguard Interface Addresses form validation
@ -164,7 +164,7 @@ Wireguard Server Settings
submitServerInterfaceSetting(); submitServerInterfaceSetting();
} }
}); });
$('#frm_server_interface').validate({ $("#frm_server_interface").validate({
rules: { rules: {
listen_port: { listen_port: {
required: true, required: true,
@ -195,7 +195,7 @@ Wireguard Server Settings
// Wireguard Key Pair generation confirmation button // Wireguard Key Pair generation confirmation button
$(document).ready(function () { $(document).ready(function () {
$('#btn_generate_confirm').click(function () { $("#btn_generate_confirm").click(function () {
$.ajax({ $.ajax({
cache: false, cache: false,
method: 'POST', method: 'POST',
@ -203,11 +203,11 @@ Wireguard Server Settings
dataType: 'json', dataType: 'json',
contentType: "application/json", contentType: "application/json",
success: function(data) { success: function(data) {
$('#modal_keypair_confirmation').modal('hide'); $("#modal_keypair_confirmation").modal('hide');
toastr.success('Generate new key pair successfully'); toastr.success('Generate new key pair successfully');
// update the UI // update the UI
$('#private_key').val(data['private_key']); $("#private_key").val(data['private_key']);
$('#public_key').val(data['public_key']); $("#public_key").val(data['public_key']);
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText); const responseJson = jQuery.parseJSON(jqXHR.responseText);
@ -219,7 +219,7 @@ Wireguard Server Settings
// Show private key button event // Show private key button event
$(document).ready(function () { $(document).ready(function () {
$('#btn_show_private_key').click(function () { $("#btn_show_private_key").click(function () {
const privateElement = document.getElementById("private_key"); const privateElement = document.getElementById("private_key");
const btnElement = document.getElementById("btn_show_private_key"); const btnElement = document.getElementById("btn_show_private_key");
if (privateElement.type === 'password') { if (privateElement.type === 'password') {