refactor: Externalize all template
This commit is contained in:
ReturnFI
@ -23,7 +23,9 @@
|
|||||||
{% block stylesheets %}{% endblock %}
|
{% block stylesheets %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="hold-transition sidebar-mini sidebar-collapse">
|
<body class="hold-transition sidebar-mini sidebar-collapse"
|
||||||
|
data-version-url="{{ url_for('get_version_info') }}"
|
||||||
|
data-check-version-url="{{ url_for('check_version_info') }}">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<!-- Update Notification Bar -->
|
<!-- Update Notification Bar -->
|
||||||
@ -201,147 +203,9 @@
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
|
||||||
<!-- ShowdownJS for Markdown -->
|
<!-- ShowdownJS for Markdown -->
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
||||||
|
<!-- Custom JS -->
|
||||||
|
<script src="{{ url_for('assets', path='js/base.js') }}"></script>
|
||||||
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
const darkModeToggle = $("#darkModeToggle");
|
|
||||||
const darkModeIcon = $("#darkModeIcon");
|
|
||||||
const isDarkMode = localStorage.getItem("darkMode") === "enabled";
|
|
||||||
|
|
||||||
setDarkMode(isDarkMode);
|
|
||||||
updateIcon(isDarkMode);
|
|
||||||
|
|
||||||
darkModeToggle.on("click", function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const enabled = $("body").hasClass("dark-mode");
|
|
||||||
localStorage.setItem("darkMode", enabled ? "disabled" : "enabled");
|
|
||||||
setDarkMode(!enabled);
|
|
||||||
updateIcon(!enabled);
|
|
||||||
});
|
|
||||||
|
|
||||||
function setDarkMode(enabled) {
|
|
||||||
$("body").toggleClass("dark-mode", enabled);
|
|
||||||
|
|
||||||
if (enabled) {
|
|
||||||
$(".main-header").addClass("navbar-dark").removeClass("navbar-light navbar-white");
|
|
||||||
$(".card").addClass("bg-dark");
|
|
||||||
} else {
|
|
||||||
$(".main-header").addClass("navbar-white navbar-light").removeClass("navbar-dark");
|
|
||||||
$(".card").removeClass("bg-dark");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateIcon(enabled) {
|
|
||||||
darkModeIcon.removeClass("fa-moon fa-sun")
|
|
||||||
.addClass(enabled ? "fa-sun" : "fa-moon");
|
|
||||||
}
|
|
||||||
|
|
||||||
const versionUrl = "{{ url_for('get_version_info') }}";
|
|
||||||
$.ajax({
|
|
||||||
url: versionUrl,
|
|
||||||
type: 'GET',
|
|
||||||
success: function (response) {
|
|
||||||
$('#panel-version').text(`Version: ${response.current_version || 'N/A'}`);
|
|
||||||
},
|
|
||||||
error: function (error) {
|
|
||||||
console.error("Error fetching version:", error);
|
|
||||||
$('#panel-version').text('Version: Error');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function shouldCheckForUpdates() {
|
|
||||||
const lastCheck = localStorage.getItem('lastUpdateCheck');
|
|
||||||
const updateDismissed = localStorage.getItem('updateDismissed');
|
|
||||||
const now = Date.now();
|
|
||||||
const checkInterval = 24 * 60 * 60 * 1000;
|
|
||||||
|
|
||||||
if (!lastCheck) return true;
|
|
||||||
if (updateDismissed && now - parseInt(updateDismissed) < 2 * 60 * 60 * 1000) return false;
|
|
||||||
|
|
||||||
return now - parseInt(lastCheck) > checkInterval;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showUpdateBar(version, changelog) {
|
|
||||||
$('#updateMessage').text(`Version ${version} is now available`);
|
|
||||||
|
|
||||||
const converter = new showdown.Converter();
|
|
||||||
const htmlChangelog = changelog ? converter.makeHtml(changelog) : '<p>No changelog available.</p>';
|
|
||||||
$('#changelogText').html(htmlChangelog);
|
|
||||||
|
|
||||||
$('#updateBar').slideDown(300);
|
|
||||||
|
|
||||||
$('#viewRelease').off('click').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
window.open('https://github.com/ReturnFI/Blitz/releases/latest', '_blank');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#showChangelog').off('click').on('click', function() {
|
|
||||||
const $content = $('#changelogContent');
|
|
||||||
const $icon = $(this).find('i');
|
|
||||||
|
|
||||||
if ($content.is(':visible')) {
|
|
||||||
$content.slideUp(250);
|
|
||||||
$icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
|
|
||||||
$(this).css('opacity', '0.8');
|
|
||||||
} else {
|
|
||||||
$content.slideDown(250);
|
|
||||||
$icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
|
|
||||||
$(this).css('opacity', '1');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.dropdown-toggle').dropdown();
|
|
||||||
|
|
||||||
$('#remindLater').off('click').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
$('#updateBar').slideUp(350);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#skipVersion').off('click').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
localStorage.setItem('dismissedVersion', version);
|
|
||||||
localStorage.setItem('updateDismissed', Date.now().toString());
|
|
||||||
$('#updateBar').slideUp(350);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#closeUpdateBar').off('click').on('click', function() {
|
|
||||||
$('#updateBar').slideUp(350);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkForUpdates() {
|
|
||||||
if (!shouldCheckForUpdates()) return;
|
|
||||||
|
|
||||||
const checkVersionUrl = "{{ url_for('check_version_info') }}";
|
|
||||||
$.ajax({
|
|
||||||
url: checkVersionUrl,
|
|
||||||
type: 'GET',
|
|
||||||
timeout: 10000,
|
|
||||||
success: function (response) {
|
|
||||||
localStorage.setItem('lastUpdateCheck', Date.now().toString());
|
|
||||||
|
|
||||||
if (response.is_latest) {
|
|
||||||
localStorage.removeItem('updateDismissed');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const dismissedVersion = localStorage.getItem('dismissedVersion');
|
|
||||||
if (dismissedVersion === response.latest_version) return;
|
|
||||||
|
|
||||||
showUpdateBar(response.latest_version, response.changelog);
|
|
||||||
},
|
|
||||||
error: function (xhr, status, error) {
|
|
||||||
if (status !== 'timeout') {
|
|
||||||
console.warn("Update check failed:", error);
|
|
||||||
}
|
|
||||||
localStorage.setItem('lastUpdateCheck', Date.now().toString());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(checkForUpdates, 2000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% block javascripts %}{% endblock %}
|
{% block javascripts %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@ -4,10 +4,12 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<br>
|
<br>
|
||||||
<div class="" style="margin-left: 20px; margin-right: 20px; margin-bottom: 20px;">
|
<div class="" style="margin-left: 20px; margin-right: 20px; margin-bottom: 20px;"
|
||||||
|
data-get-file-url="{{ url_for('get_file') }}"
|
||||||
|
data-set-file-url="{{ url_for('set_file') }}">
|
||||||
<div class="flex justify mb-4 space-x-2">
|
<div class="flex justify mb-4 space-x-2">
|
||||||
<button id="restore-button" onclick="restoreJson()" class="px-4 py-2 bg-blue text-black rounded-lg">Restore JSON</button>
|
<button id="restore-button" class="px-4 py-2 bg-blue text-black rounded-lg">Restore JSON</button>
|
||||||
<button id="save-button" onclick="saveJson()" class="px-4 py-2 bg-green text-black rounded-lg duration-200">Save JSON</button>
|
<button id="save-button" class="px-4 py-2 bg-green text-black rounded-lg duration-200">Save JSON</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="jsoneditor" class="border rounded-lg shadow-lg" style="height: 750px; width: 100%;"></div>
|
<div id="jsoneditor" class="border rounded-lg shadow-lg" style="height: 750px; width: 100%;"></div>
|
||||||
@ -18,94 +20,5 @@
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.1.0/dist/jsoneditor.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.1.0/dist/jsoneditor.min.js"></script>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.1.0/dist/jsoneditor.min.css" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.1.0/dist/jsoneditor.min.css" />
|
||||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
|
<script src="{{ url_for('assets', path='js/config.js') }}"></script>
|
||||||
<script>
|
|
||||||
const saveButton = document.getElementById("save-button");
|
|
||||||
const container = document.getElementById("jsoneditor");
|
|
||||||
|
|
||||||
const editor = new JSONEditor(container, {
|
|
||||||
mode: "code",
|
|
||||||
onChange: validateJson
|
|
||||||
});
|
|
||||||
|
|
||||||
function validateJson() {
|
|
||||||
try {
|
|
||||||
editor.get();
|
|
||||||
updateSaveButton(true);
|
|
||||||
hideErrorMessage();
|
|
||||||
} catch (error) {
|
|
||||||
updateSaveButton(false);
|
|
||||||
showErrorMessage("Invalid JSON! Please correct the errors.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSaveButton(isValid) {
|
|
||||||
saveButton.disabled = !isValid;
|
|
||||||
saveButton.style.cursor = isValid ? "pointer" : "not-allowed";
|
|
||||||
|
|
||||||
saveButton.style.setProperty('background-color', isValid ? "#28a745" : "#ccc", 'important');
|
|
||||||
saveButton.style.setProperty('color', isValid ? "#fff" : "#666", 'important');
|
|
||||||
//saveButton.style.setProperty('border-color', isValid ? "#28a745" : "#ccc", 'important');
|
|
||||||
}
|
|
||||||
|
|
||||||
function showErrorMessage(message) {
|
|
||||||
Swal.fire({
|
|
||||||
title: "Error",
|
|
||||||
text: message,
|
|
||||||
icon: "error",
|
|
||||||
showConfirmButton: false,
|
|
||||||
timer: 5000,
|
|
||||||
position: 'top-right',
|
|
||||||
toast: true,
|
|
||||||
showClass: { popup: 'animate__animated animate__fadeInDown' },
|
|
||||||
hideClass: { popup: 'animate__animated animate__fadeOutUp' }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideErrorMessage() {
|
|
||||||
Swal.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveJson() {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Are you sure?',
|
|
||||||
text: 'Do you want to save the changes?',
|
|
||||||
icon: 'warning',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Yes, save it!',
|
|
||||||
cancelButtonText: 'Cancel',
|
|
||||||
reverseButtons: true
|
|
||||||
}).then((result) => {
|
|
||||||
if (result.isConfirmed) {
|
|
||||||
fetch("{{ url_for('set_file') }}", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(editor.get())
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
Swal.fire('Saved!', 'Your changes have been saved.', 'success');
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
Swal.fire('Error!', 'There was an error saving your data.', 'error');
|
|
||||||
console.error("Error saving JSON:", error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function restoreJson() {
|
|
||||||
fetch("{{ url_for('get_file') }}")
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(json => {
|
|
||||||
editor.set(json);
|
|
||||||
Swal.fire('Success!', 'Your JSON has been loaded.', 'success');
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
Swal.fire('Error!', 'There was an error loading your JSON.', 'error');
|
|
||||||
console.error("Error loading JSON:", error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
restoreJson();
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@ -13,7 +13,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="content">
|
<section class="content"
|
||||||
|
data-server-status-url="{{ url_for('server_status_api') }}"
|
||||||
|
data-services-status-url="{{ url_for('server_services_status_api') }}">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-3 col-sm-6 col-12">
|
<div class="col-md-3 col-sm-6 col-12">
|
||||||
@ -190,77 +192,5 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block javascripts %}
|
{% block javascripts %}
|
||||||
<script>
|
<script src="{{ url_for('assets', path='js/index.js') }}"></script>
|
||||||
function updateServerInfo() {
|
|
||||||
fetch('{{ url_for("server_status_api") }}')
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
document.getElementById('cpu-usage').textContent = data.cpu_usage;
|
|
||||||
document.getElementById('ram-usage').textContent = `${data.ram_usage} / ${data.total_ram}`;
|
|
||||||
document.getElementById('online-users').textContent = data.online_users;
|
|
||||||
document.getElementById('uptime').textContent = data.uptime;
|
|
||||||
|
|
||||||
document.getElementById('server-ipv4').textContent = `IPv4: ${data.server_ipv4 || 'N/A'}`;
|
|
||||||
document.getElementById('server-ipv6').textContent = `IPv6: ${data.server_ipv6 || 'N/A'}`;
|
|
||||||
|
|
||||||
document.getElementById('download-speed').textContent = `🔽 Download: ${data.download_speed}`;
|
|
||||||
document.getElementById('upload-speed').textContent = `🔼 Upload: ${data.upload_speed}`;
|
|
||||||
document.getElementById('tcp-connections').textContent = `TCP: ${data.tcp_connections}`;
|
|
||||||
document.getElementById('udp-connections').textContent = `UDP: ${data.udp_connections}`;
|
|
||||||
|
|
||||||
document.getElementById('reboot-uploaded-traffic').textContent = data.reboot_uploaded_traffic;
|
|
||||||
document.getElementById('reboot-downloaded-traffic').textContent = data.reboot_downloaded_traffic;
|
|
||||||
document.getElementById('reboot-total-traffic').textContent = data.reboot_total_traffic;
|
|
||||||
|
|
||||||
document.getElementById('user-uploaded-traffic').textContent = data.user_uploaded_traffic;
|
|
||||||
document.getElementById('user-downloaded-traffic').textContent = data.user_downloaded_traffic;
|
|
||||||
document.getElementById('user-total-traffic').textContent = data.user_total_traffic;
|
|
||||||
})
|
|
||||||
.catch(error => console.error('Error fetching server info:', error));
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateServiceStatuses() {
|
|
||||||
fetch('{{ url_for("server_services_status_api") }}')
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
updateServiceBox('hysteria2', data.hysteria_server);
|
|
||||||
updateServiceBox('telegrambot', data.hysteria_telegram_bot);
|
|
||||||
updateServiceBox('iplimit', data.hysteria_iplimit);
|
|
||||||
updateServiceBox('normalsub', data.hysteria_normal_sub);
|
|
||||||
})
|
|
||||||
.catch(error => console.error('Error fetching service statuses:', error));
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateServiceBox(serviceName, status) {
|
|
||||||
const statusElement = document.getElementById(serviceName + '-status');
|
|
||||||
const statusBox = document.getElementById(serviceName + '-status-box');
|
|
||||||
|
|
||||||
if (status === true) {
|
|
||||||
statusElement.textContent = 'Active';
|
|
||||||
statusBox.classList.remove('bg-danger');
|
|
||||||
statusBox.classList.add('bg-success');
|
|
||||||
} else {
|
|
||||||
statusElement.textContent = 'Inactive';
|
|
||||||
statusBox.classList.remove('bg-success');
|
|
||||||
statusBox.classList.add('bg-danger');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
updateServerInfo();
|
|
||||||
updateServiceStatuses();
|
|
||||||
setInterval(updateServerInfo, 2000);
|
|
||||||
setInterval(updateServiceStatuses, 10000);
|
|
||||||
|
|
||||||
const toggleIpBtn = document.getElementById('toggle-ip-visibility');
|
|
||||||
const ipAddressesDiv = document.getElementById('ip-addresses');
|
|
||||||
toggleIpBtn.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const isBlurred = ipAddressesDiv.style.filter === 'blur(5px)';
|
|
||||||
ipAddressesDiv.style.filter = isBlurred ? 'none' : 'blur(5px)';
|
|
||||||
toggleIpBtn.querySelector('i').classList.toggle('fa-eye');
|
|
||||||
toggleIpBtn.querySelector('i').classList.toggle('fa-eye-slash');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -35,7 +35,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="content">
|
<section class="content"
|
||||||
|
data-service-status-url="{{ url_for('server_services_status_api') }}"
|
||||||
|
data-bulk-remove-url="{{ url_for('bulk_remove_users_api') }}"
|
||||||
|
data-remove-user-url-template="{{ url_for('remove_user_api', username='U') }}"
|
||||||
|
data-bulk-add-url="{{ url_for('add_bulk_users_api') }}"
|
||||||
|
data-add-user-url="{{ url_for('add_user_api') }}"
|
||||||
|
data-edit-user-url-template="{{ url_for('edit_user_api', username='U') }}"
|
||||||
|
data-reset-user-url-template="{{ url_for('reset_user_api', username='U') }}"
|
||||||
|
data-user-uri-url-template="{{ url_for('show_user_uri_api', username='U') }}"
|
||||||
|
data-bulk-uri-url="{{ url_for('show_multiple_user_uris_api') }}">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
@ -455,328 +464,5 @@
|
|||||||
{% block javascripts %}
|
{% block javascripts %}
|
||||||
<script src="https://cdn.jsdelivr.net/npm/qr-code-styling/lib/qr-code-styling.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/qr-code-styling/lib/qr-code-styling.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
|
<script src="{{ url_for('assets', path='js/users.js') }}"></script>
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
const usernameRegex = /^[a-zA-Z0-9_]+$/;
|
|
||||||
let cachedUserData = [];
|
|
||||||
|
|
||||||
function checkIpLimitServiceStatus() {
|
|
||||||
$.getJSON('{{ url_for("server_services_status_api") }}')
|
|
||||||
.done(data => {
|
|
||||||
if (data.hysteria_iplimit === true) {
|
|
||||||
$('.requires-iplimit-service').show();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.fail(() => console.error('Error fetching IP limit service status.'));
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateUsername(inputElement, errorElement) {
|
|
||||||
const username = $(inputElement).val();
|
|
||||||
const isValid = usernameRegex.test(username);
|
|
||||||
$(errorElement).text(isValid ? "" : "Usernames can only contain letters, numbers, and underscores.");
|
|
||||||
$(inputElement).closest('form').find('button[type="submit"]').prop('disabled', !isValid);
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#addUsername, #addBulkPrefix, #editUsername').on('input', function() {
|
|
||||||
validateUsername(this, `#${this.id}Error`);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".filter-button").on("click", function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const filter = $(this).data("filter");
|
|
||||||
$("#selectAll").prop("checked", false);
|
|
||||||
$("#userTable tbody tr.user-main-row").each(function () {
|
|
||||||
let showRow;
|
|
||||||
switch (filter) {
|
|
||||||
case "on-hold": showRow = $(this).find("td:eq(3) i").hasClass("text-warning"); break;
|
|
||||||
case "online": showRow = $(this).find("td:eq(3) i").hasClass("text-success"); break;
|
|
||||||
case "enable": showRow = $(this).find("td:eq(8) i").hasClass("text-success"); break;
|
|
||||||
case "disable": showRow = $(this).find("td:eq(8) i").hasClass("text-danger"); break;
|
|
||||||
default: showRow = true;
|
|
||||||
}
|
|
||||||
$(this).toggle(showRow).find(".user-checkbox").prop("checked", false);
|
|
||||||
if (!showRow) {
|
|
||||||
$(this).next('tr.user-details-row').hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#selectAll").on("change", function () {
|
|
||||||
$("#userTable tbody tr.user-main-row:visible .user-checkbox").prop("checked", this.checked);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#deleteSelected").on("click", function () {
|
|
||||||
const selectedUsers = $(".user-checkbox:checked").map((_, el) => $(el).val()).get();
|
|
||||||
if (selectedUsers.length === 0) {
|
|
||||||
return Swal.fire("Warning!", "Please select at least one user to delete.", "warning");
|
|
||||||
}
|
|
||||||
Swal.fire({
|
|
||||||
title: "Are you sure?",
|
|
||||||
html: `This will delete: <b>${selectedUsers.join(", ")}</b>.<br>This action cannot be undone!`,
|
|
||||||
icon: "warning",
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonColor: "#d33",
|
|
||||||
confirmButtonText: "Yes, delete them!",
|
|
||||||
}).then((result) => {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
if (selectedUsers.length > 1) {
|
|
||||||
const bulkUrl = "{{ url_for('bulk_remove_users_api') }}";
|
|
||||||
$.ajax({
|
|
||||||
url: bulkUrl,
|
|
||||||
method: "POST",
|
|
||||||
contentType: "application/json",
|
|
||||||
data: JSON.stringify({ usernames: selectedUsers })
|
|
||||||
})
|
|
||||||
.done(() => Swal.fire("Success!", "Selected users have been deleted.", "success").then(() => location.reload()))
|
|
||||||
.fail((err) => Swal.fire("Error!", err.responseJSON?.detail || "An error occurred while deleting users.", "error"));
|
|
||||||
} else {
|
|
||||||
const singleUrl = "{{ url_for('remove_user_api', username='U') }}".replace('U', selectedUsers[0]);
|
|
||||||
$.ajax({
|
|
||||||
url: singleUrl,
|
|
||||||
method: "DELETE"
|
|
||||||
})
|
|
||||||
.done(() => Swal.fire("Success!", "The user has been deleted.", "success").then(() => location.reload()))
|
|
||||||
.fail((err) => Swal.fire("Error!", err.responseJSON?.detail || "An error occurred while deleting the user.", "error"));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#addUserForm, #addBulkUsersForm").on("submit", function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = $(this);
|
|
||||||
const isBulk = form.attr('id') === 'addBulkUsersForm';
|
|
||||||
const url = isBulk ? "{{ url_for('add_bulk_users_api') }}" : "{{ url_for('add_user_api') }}";
|
|
||||||
const button = form.find('button[type="submit"]').prop('disabled', true);
|
|
||||||
|
|
||||||
const formData = new FormData(this);
|
|
||||||
const jsonData = Object.fromEntries(formData.entries());
|
|
||||||
|
|
||||||
jsonData.unlimited = jsonData.unlimited === 'on';
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: url,
|
|
||||||
method: "POST",
|
|
||||||
contentType: "application/json",
|
|
||||||
data: JSON.stringify(jsonData),
|
|
||||||
})
|
|
||||||
.done(res => Swal.fire("Success!", res.detail, "success").then(() => location.reload()))
|
|
||||||
.fail(err => Swal.fire("Error!", err.responseJSON?.detail || "An error occurred.", "error"))
|
|
||||||
.always(() => button.prop('disabled', false));
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#editUserModal").on("show.bs.modal", function (event) {
|
|
||||||
const user = $(event.relatedTarget).data("user");
|
|
||||||
const clickedRow = $(event.relatedTarget).closest("tr");
|
|
||||||
const dataRow = clickedRow.hasClass('user-main-row') ? clickedRow : clickedRow.prev('.user-main-row');
|
|
||||||
|
|
||||||
const trafficText = dataRow.find("td:eq(4)").text();
|
|
||||||
const expiryText = dataRow.find("td:eq(6)").text();
|
|
||||||
|
|
||||||
$("#originalUsername").val(user);
|
|
||||||
$("#editUsername").val(user);
|
|
||||||
$("#editTrafficLimit").val(parseFloat(trafficText.split('/')[1]) || 0);
|
|
||||||
$("#editExpirationDays").val(parseInt(expiryText) || 0);
|
|
||||||
$("#editBlocked").prop("checked", !dataRow.find("td:eq(8) i").hasClass("text-success"));
|
|
||||||
$("#editUnlimitedIp").prop("checked", dataRow.find(".unlimited-ip-cell i").hasClass("text-primary"));
|
|
||||||
validateUsername('#editUsername', '#editUsernameError');
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#editUserForm").on("submit", function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const button = $("#editSubmitButton").prop("disabled", true);
|
|
||||||
const originalUsername = $("#originalUsername").val();
|
|
||||||
const url = "{{ url_for('edit_user_api', username='U') }}".replace('U', originalUsername);
|
|
||||||
|
|
||||||
const formData = new FormData(this);
|
|
||||||
const jsonData = Object.fromEntries(formData.entries());
|
|
||||||
jsonData.blocked = jsonData.blocked === 'on';
|
|
||||||
jsonData.unlimited_ip = jsonData.unlimited_ip === 'on';
|
|
||||||
if (jsonData.new_username === originalUsername) delete jsonData.new_username;
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: url,
|
|
||||||
method: "PATCH",
|
|
||||||
contentType: "application/json",
|
|
||||||
data: JSON.stringify(jsonData),
|
|
||||||
})
|
|
||||||
.done(res => Swal.fire("Success!", res.detail, "success").then(() => location.reload()))
|
|
||||||
.fail(err => Swal.fire("Error!", err.responseJSON?.detail, "error"))
|
|
||||||
.always(() => button.prop('disabled', false));
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#userTable").on("click", ".reset-user, .delete-user", function () {
|
|
||||||
const button = $(this);
|
|
||||||
const username = button.data("user");
|
|
||||||
const isDelete = button.hasClass("delete-user");
|
|
||||||
const action = isDelete ? "delete" : "reset";
|
|
||||||
const urlTemplate = isDelete ? "{{ url_for('remove_user_api', username='U') }}" : "{{ url_for('reset_user_api', username='U') }}";
|
|
||||||
|
|
||||||
Swal.fire({
|
|
||||||
title: `Are you sure you want to ${action}?`,
|
|
||||||
html: `This will ${action} user <b>${username}</b>.`,
|
|
||||||
icon: "warning",
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonColor: "#d33",
|
|
||||||
confirmButtonText: `Yes, ${action} it!`,
|
|
||||||
}).then((result) => {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
$.ajax({
|
|
||||||
url: urlTemplate.replace("U", encodeURIComponent(username)),
|
|
||||||
method: isDelete ? "DELETE" : "GET",
|
|
||||||
})
|
|
||||||
.done(res => Swal.fire("Success!", res.detail, "success").then(() => location.reload()))
|
|
||||||
.fail(() => Swal.fire("Error!", `Failed to ${action} user.`, "error"));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#qrcodeModal").on("show.bs.modal", function (event) {
|
|
||||||
const username = $(event.relatedTarget).data("username");
|
|
||||||
const qrcodesContainer = $("#qrcodesContainer").empty();
|
|
||||||
const url = "{{ url_for('show_user_uri_api', username='U') }}".replace("U", encodeURIComponent(username));
|
|
||||||
$.getJSON(url, response => {
|
|
||||||
[
|
|
||||||
{ type: "IPv4", link: response.ipv4 },
|
|
||||||
{ type: "IPv6", link: response.ipv6 },
|
|
||||||
{ type: "Normal-SUB", link: response.normal_sub }
|
|
||||||
].forEach(config => {
|
|
||||||
if (!config.link) return;
|
|
||||||
const qrId = `qrcode-${config.type}`;
|
|
||||||
const card = $(`<div class="card d-inline-block m-2"><div class="card-body"><div id="${qrId}" class="mx-auto" style="cursor: pointer;"></div><div class="mt-2 text-center small text-body font-weight-bold">${config.type}</div></div></div>`);
|
|
||||||
qrcodesContainer.append(card);
|
|
||||||
new QRCodeStyling({ width: 200, height: 200, data: config.link, margin: 2 }).append(document.getElementById(qrId));
|
|
||||||
card.on("click", () => navigator.clipboard.writeText(config.link).then(() => Swal.fire({ icon: "success", title: `${config.type} link copied!`, showConfirmButton: false, timer: 1200 })));
|
|
||||||
});
|
|
||||||
}).fail(() => Swal.fire("Error!", "Failed to fetch user configuration.", "error"));
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#showSelectedLinks").on("click", function () {
|
|
||||||
const selectedUsers = $(".user-checkbox:checked").map((_, el) => $(el).val()).get();
|
|
||||||
if (selectedUsers.length === 0) {
|
|
||||||
return Swal.fire("Warning!", "Please select at least one user.", "warning");
|
|
||||||
}
|
|
||||||
|
|
||||||
Swal.fire({ title: 'Fetching links...', text: 'Please wait.', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
|
|
||||||
|
|
||||||
const bulkUriApiUrl = "{{ url_for('show_multiple_user_uris_api') }}";
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: bulkUriApiUrl,
|
|
||||||
method: 'POST',
|
|
||||||
contentType: 'application/json',
|
|
||||||
data: JSON.stringify({ usernames: selectedUsers }),
|
|
||||||
}).done(results => {
|
|
||||||
Swal.close();
|
|
||||||
cachedUserData = results;
|
|
||||||
|
|
||||||
const fetchedCount = results.length;
|
|
||||||
const failedCount = selectedUsers.length - fetchedCount;
|
|
||||||
|
|
||||||
if (failedCount > 0) {
|
|
||||||
Swal.fire('Warning', `Could not fetch info for ${failedCount} user(s), but others were successful.`, 'warning');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fetchedCount > 0) {
|
|
||||||
const hasIPv4 = cachedUserData.some(user => user.ipv4);
|
|
||||||
const hasIPv6 = cachedUserData.some(user => user.ipv6);
|
|
||||||
const hasNormalSub = cachedUserData.some(user => user.normal_sub);
|
|
||||||
const hasNodes = cachedUserData.some(user => user.nodes && user.nodes.length > 0);
|
|
||||||
|
|
||||||
$("#extractIPv4").closest('.form-check-inline').toggle(hasIPv4);
|
|
||||||
$("#extractIPv6").closest('.form-check-inline').toggle(hasIPv6);
|
|
||||||
$("#extractNormalSub").closest('.form-check-inline').toggle(hasNormalSub);
|
|
||||||
$("#extractNodes").closest('.form-check-inline').toggle(hasNodes);
|
|
||||||
|
|
||||||
$("#linksTextarea").val('');
|
|
||||||
$("#showLinksModal").modal("show");
|
|
||||||
} else {
|
|
||||||
Swal.fire('Error', `Could not fetch info for any of the selected users.`, 'error');
|
|
||||||
}
|
|
||||||
}).fail(() => Swal.fire('Error!', 'An error occurred while fetching the links.', 'error'));
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#extractLinksButton").on("click", function () {
|
|
||||||
const allLinks = [];
|
|
||||||
const linkTypes = {
|
|
||||||
ipv4: $("#extractIPv4").is(":checked"),
|
|
||||||
ipv6: $("#extractIPv6").is(":checked"),
|
|
||||||
normal_sub: $("#extractNormalSub").is(":checked"),
|
|
||||||
nodes: $("#extractNodes").is(":checked")
|
|
||||||
};
|
|
||||||
|
|
||||||
cachedUserData.forEach(user => {
|
|
||||||
if (linkTypes.ipv4 && user.ipv4) {
|
|
||||||
allLinks.push(user.ipv4);
|
|
||||||
}
|
|
||||||
if (linkTypes.ipv6 && user.ipv6) {
|
|
||||||
allLinks.push(user.ipv6);
|
|
||||||
}
|
|
||||||
if (linkTypes.normal_sub && user.normal_sub) {
|
|
||||||
allLinks.push(user.normal_sub);
|
|
||||||
}
|
|
||||||
if (linkTypes.nodes && user.nodes && user.nodes.length > 0) {
|
|
||||||
user.nodes.forEach(node => {
|
|
||||||
if (node.uri) {
|
|
||||||
allLinks.push(node.uri);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#linksTextarea").val(allLinks.join('\n'));
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#copyExtractedLinksButton").on("click", () => {
|
|
||||||
const links = $("#linksTextarea").val();
|
|
||||||
if (!links) {
|
|
||||||
return Swal.fire({ icon: "info", title: "Nothing to copy!", text: "Please extract some links first.", showConfirmButton: false, timer: 1500 });
|
|
||||||
}
|
|
||||||
navigator.clipboard.writeText(links)
|
|
||||||
.then(() => Swal.fire({ icon: "success", title: "Links copied!", showConfirmButton: false, timer: 1200 }));
|
|
||||||
});
|
|
||||||
|
|
||||||
function filterUsers() {
|
|
||||||
const searchText = $("#searchInput").val().toLowerCase();
|
|
||||||
$("#userTable tbody tr.user-main-row").each(function () {
|
|
||||||
const username = $(this).find("td:eq(2)").text().toLowerCase();
|
|
||||||
const isVisible = username.includes(searchText);
|
|
||||||
$(this).toggle(isVisible);
|
|
||||||
if (!isVisible) {
|
|
||||||
$(this).next('tr.user-details-row').hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#userTable').on('click', '.toggle-details-btn', function() {
|
|
||||||
const $this = $(this);
|
|
||||||
const icon = $this.find('i');
|
|
||||||
const detailsRow = $this.closest('tr.user-main-row').next('tr.user-details-row');
|
|
||||||
|
|
||||||
detailsRow.toggle();
|
|
||||||
|
|
||||||
if (detailsRow.is(':visible')) {
|
|
||||||
icon.removeClass('fa-plus').addClass('fa-minus');
|
|
||||||
} else {
|
|
||||||
icon.removeClass('fa-minus').addClass('fa-plus');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#addUserModal').on('show.bs.modal', function () {
|
|
||||||
$('#addUserForm, #addBulkUsersForm').trigger('reset');
|
|
||||||
$('#addUsernameError, #addBulkPrefixError').text('');
|
|
||||||
Object.assign(document.getElementById('addTrafficLimit'), {value: 30});
|
|
||||||
Object.assign(document.getElementById('addExpirationDays'), {value: 30});
|
|
||||||
Object.assign(document.getElementById('addBulkTrafficLimit'), {value: 30});
|
|
||||||
Object.assign(document.getElementById('addBulkExpirationDays'), {value: 30});
|
|
||||||
$('#addSubmitButton, #addBulkSubmitButton').prop('disabled', true);
|
|
||||||
$('#addUserModal a[data-toggle="tab"]').first().tab('show');
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#searchButton").on("click", filterUsers);
|
|
||||||
$("#searchInput").on("keyup", filterUsers);
|
|
||||||
|
|
||||||
checkIpLimitServiceStatus();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user