bivashy/Blitz-Proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add NormalSub subpath configuration to settings UI

Browse Source 
Adds a 'Configure' tab to the Normal Subscriptions section in Settings.
This tab allows users to view and edit the subpath for the NormalSub service.

- Modified settings.html:
  - Added new tab link and pane for NormalSub subpath configuration.
  - Tab is only visible and accessible if NormalSub service is active.
- Extended JavaScript:
  - `sendRequest` function now accepts an optional `postSuccessCallback`.
  - Added `isValidSubPath` for client-side validation.
  - `updateServiceUI` now manages visibility of the 'Configure' tab and fetches current subpath.
  - Implemented `fetchNormalSubPath` to get subpath via API.
  - Implemented `editNormalSubPath` to save subpath via API.
  - Integrated new input into `validateForm` and added real-time validation.
- Updated `updateDecoyStatusUI` and its calls from `setupDecoy`/`stopDecoy` to use the new `postSuccessCallback` pattern for consistency.
- Standardized form IDs (e.g., `telegram_form`, `port_form`) for better targeting in `validateForm` and `updateServiceUI`.
This commit is contained in:
Whispering Wind
2025-05-18 11:25:29 +03:30
committed by GitHub
parent 3cb8022c7c
commit ec6610571d
1 changed files with 188 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
core/scripts/webpanel/templates/settings.html
View File

@ -56,7 +56,7 @@
aria-controls='ip-limit' aria-selected='false'><i class="fas fa-user-slash"></i> aria-controls='ip-limit' aria-selected='false'><i class="fas fa-user-slash"></i>
IP Limit</a> IP Limit</a>
</li> </li>
<li class='nav-item'> <li class='nav-item'>
<a class='nav-link' id='decoy-tab' data-toggle='pill' href='#decoy' role='tab' <a class='nav-link' id='decoy-tab' data-toggle='pill' href='#decoy' role='tab'
aria-controls='decoy' aria-selected='false'><i class="fas fa-mask"></i> aria-controls='decoy' aria-selected='false'><i class="fas fa-mask"></i>
Decoy Site</a> Decoy Site</a>
@ -71,14 +71,18 @@
<ul class='nav nav-tabs' id='subs-tabs' role='tablist'> <ul class='nav nav-tabs' id='subs-tabs' role='tablist'>
<li class='nav-item'> <li class='nav-item'>
<a class='nav-link active' id='normal-tab' data-toggle='tab' href='#normal' role='tab' <a class='nav-link active' id='normal-tab' data-toggle='tab' href='#normal' role='tab'
aria-controls='normal' aria-selected='false'><strong>Normal</strong></a> aria-controls='normal' aria-selected='true'><strong>Normal</strong></a>
</li>
<li class='nav-item normal-sub-config-tab-li' style="display: none;"> <!-- Initially hidden -->
<a class='nav-link' id='normal-sub-config-link-tab' data-toggle='tab' href='#normal-sub-config-content' role='tab'
aria-controls='normal-sub-config-content' aria-selected='false'><strong>Configure</strong></a>
</li> </li>
</ul> </ul>
<div class='tab-content' id='subs-tabs-content'> <div class='tab-content' id='subs-tabs-content'>
<br> <br>
<!-- Normal Sub Tab --> <!-- Normal Sub Service Control Tab -->
<div class='tab-pane fade show active' id='normal' role='tabpanel' aria-labelledby='normal-tab'> <div class='tab-pane fade show active' id='normal' role='tabpanel' aria-labelledby='normal-tab'>
<form id="normal"> <form id="normal_sub_service_form">
<div class='form-group'> <div class='form-group'>
<label for='normal_domain'>Domain:</label> <label for='normal_domain'>Domain:</label>
<input type='text' class='form-control' id='normal_domain' <input type='text' class='form-control' id='normal_domain'
@ -101,7 +105,23 @@
</button> </button>
<button id="normal_stop" type='button' class='btn btn-danger' <button id="normal_stop" type='button' class='btn btn-danger'
style="display: none;">Stop</button> style="display: none;">Stop</button>
</form>
</div>
<!-- Normal Sub Configuration Tab -->
<div class='tab-pane fade' id='normal-sub-config-content' role='tabpanel' aria-labelledby='normal-sub-config-link-tab'>
<form id="normal_sub_config_form">
<div class='form-group'>
<label for='normal_subpath_input'>Subpath:</label>
<input type='text' class='form-control' id='normal_subpath_input'
placeholder='Enter subpath (e.g., mysub)'>
<div class="invalid-feedback">
Please enter a valid subpath (alphanumeric characters only, e.g., mysub).
</div>
</div>
<button id="normal_subpath_save_btn" type='button' class='btn btn-primary'>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
Save Subpath
</button>
</form> </form>
</div> </div>
</div> </div>
@ -109,7 +129,7 @@
<!-- Telegram Bot Tab --> <!-- Telegram Bot Tab -->
<div class='tab-pane fade' id='telegram' role='tabpanel' aria-labelledby='telegram-tab'> <div class='tab-pane fade' id='telegram' role='tabpanel' aria-labelledby='telegram-tab'>
<form id="telegram"> <form id="telegram_form">
<div class='form-group'> <div class='form-group'>
<label for='telegram_api_token'>API Token:</label> <label for='telegram_api_token'>API Token:</label>
<input type='text' class='form-control' id='telegram_api_token' <input type='text' class='form-control' id='telegram_api_token'
@ -135,7 +155,7 @@
<!-- Port Tab --> <!-- Port Tab -->
<div class='tab-pane fade' id='port' role='tabpanel' aria-labelledby='port-tab'> <div class='tab-pane fade' id='port' role='tabpanel' aria-labelledby='port-tab'>
<form id="port"> <form id="port_form">
<div class='form-group'> <div class='form-group'>
<label for='hysteria_port'>Port:</label> <label for='hysteria_port'>Port:</label>
<input type='text' class='form-control' id='hysteria_port' <input type='text' class='form-control' id='hysteria_port'
@ -150,7 +170,7 @@
<!-- SNI Tab --> <!-- SNI Tab -->
<div class='tab-pane fade' id='sni' role='tabpanel' aria-labelledby='sni-tab'> <div class='tab-pane fade' id='sni' role='tabpanel' aria-labelledby='sni-tab'>
<form id="sni"> <form id="sni_form">
<div class='form-group'> <div class='form-group'>
<label for='sni_domain'>Domain:</label> <label for='sni_domain'>Domain:</label>
<input type='text' class='form-control' id='sni_domain' <input type='text' class='form-control' id='sni_domain'
@ -165,7 +185,7 @@
<!-- Change IP Tab --> <!-- Change IP Tab -->
<div class='tab-pane fade' id='change_ip' role='tabpanel' aria-labelledby='ip-tab'> <div class='tab-pane fade' id='change_ip' role='tabpanel' aria-labelledby='ip-tab'>
<form id="change_ip"> <form id="change_ip_form">
<div class='form-group'> <div class='form-group'>
<label for='ipv4'>IPv4:</label> <label for='ipv4'>IPv4:</label>
<input type='text' class='form-control' id='ipv4' placeholder='Enter IPv4 or Domain' <input type='text' class='form-control' id='ipv4' placeholder='Enter IPv4 or Domain'
@ -231,7 +251,7 @@
<!-- IP Limit Configuration Sub Tab --> <!-- IP Limit Configuration Sub Tab -->
<div class='tab-pane fade' id='ip-limit-config-content' role='tabpanel' aria-labelledby='ip-limit-config-tab'> <div class='tab-pane fade' id='ip-limit-config-content' role='tabpanel' aria-labelledby='ip-limit-config-tab'>
<form id="ip_limit_config"> <form id="ip_limit_config_form">
<div class='form-group'> <div class='form-group'>
<label for='block_duration'>Block Duration (seconds):</label> <label for='block_duration'>Block Duration (seconds):</label>
<input type='text' class='form-control' id='block_duration' <input type='text' class='form-control' id='block_duration'
@ -253,8 +273,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Decoy Site Tab -->
<!-- Decoy Site Tab -->
<div class='tab-pane fade' id='decoy' role='tabpanel' aria-labelledby='decoy-tab'> <div class='tab-pane fade' id='decoy' role='tabpanel' aria-labelledby='decoy-tab'>
<form id="decoy_form"> <form id="decoy_form">
<div class='form-group'> <div class='form-group'>
@ -328,6 +347,12 @@
return /^[0-9]+$/.test(port) && parseInt(port) > 0 && parseInt(port) <= 65535; return /^[0-9]+$/.test(port) && parseInt(port) > 0 && parseInt(port) <= 65535;
} }
function isValidSubPath(subpath) {
if (!subpath) return false;
return /^[a-zA-Z0-9]+$/.test(subpath);
}
function isValidIPorDomain(input) { function isValidIPorDomain(input) {
if (!input) return true; if (!input) return true;
@ -365,7 +390,7 @@
}); });
} }
function sendRequest(url, type, data, successMessage, buttonSelector, showReload = true) { function sendRequest(url, type, data, successMessage, buttonSelector, showReload = true, postSuccessCallback = null) {
$.ajax({ $.ajax({
url: url, url: url,
type: type, type: type,
@ -378,13 +403,15 @@
} }
}, },
success: function (response) { success: function (response) {
if (showReload) { Swal.fire("Success!", successMessage, "success").then(() => {
Swal.fire("Success!", successMessage, "success").then(() => { if (showReload) {
location.reload(); location.reload();
}); } else {
} else { if (postSuccessCallback) {
Swal.fire("Success!", successMessage, "success"); postSuccessCallback(response);
} }
}
});
console.log("Success Response:", response); console.log("Success Response:", response);
}, },
error: function (xhr, status, error) { error: function (xhr, status, error) {
@ -411,10 +438,12 @@
const id = input.attr('id'); const id = input.attr('id');
let fieldValid = true; let fieldValid = true;
if (id.includes('domain')) { if (id === 'normal_domain' || id === 'sni_domain' || id === 'decoy_domain') {
fieldValid = isValidDomain(input.val()); fieldValid = isValidDomain(input.val());
} else if (id.includes('port')) { } else if (id === 'normal_port' || id === 'hysteria_port') {
fieldValid = isValidPort(input.val()); fieldValid = isValidPort(input.val());
} else if (id === 'normal_subpath_input') {
fieldValid = isValidSubPath(input.val());
} else if (id === 'ipv4' || id === 'ipv6') { } else if (id === 'ipv4' || id === 'ipv6') {
fieldValid = (input.val().trim() === '') ? true : isValidIPorDomain(input.val()); fieldValid = (input.val().trim() === '') ? true : isValidIPorDomain(input.val());
} else if (id === 'block_duration' || id === 'max_ips') { } else if (id === 'block_duration' || id === 'max_ips') {
@ -435,6 +464,7 @@
return isValid; return isValid;
} }
function initUI() { function initUI() {
$.ajax({ $.ajax({
url: "{{ url_for('server_services_status_api') }}", url: "{{ url_for('server_services_status_api') }}",
@ -481,50 +511,113 @@
console.error("Failed to fetch SNI domain:", error, xhr.responseText); console.error("Failed to fetch SNI domain:", error, xhr.responseText);
} }
}); });
}
}
function updateServiceUI(data) { function updateServiceUI(data) {
const servicesMap = { const servicesMap = {
"hysteria_telegram_bot": "#telegram", "hysteria_telegram_bot": "#telegram_form",
"hysteria_normal_sub": "#normal", "hysteria_normal_sub": "#normal_sub_service_form",
"hysteria_iplimit": "#ip-limit-service" "hysteria_iplimit": "#ip-limit-service"
}; };
Object.keys(servicesMap).forEach(service => { Object.keys(servicesMap).forEach(service => {
let selector = servicesMap[service]; let formSelector = servicesMap[service];
let isRunning = data[service]; let isRunning = data[service];
if (isRunning) { if (service === "hysteria_normal_sub") {
$(selector + " .form-group").hide(); const $normalFormGroups = $("#normal_sub_service_form .form-group");
$(selector + " .btn-success").hide(); const $normalStartBtn = $("#normal_start");
$(selector + " .btn-danger").show(); const $normalStopBtn = $("#normal_stop");
if ($(selector + " .alert-info").length === 0) { const $normalAlert = $("#normal_sub_service_form .alert-info");
$(selector).prepend(`<div class='alert alert-info'>Service is running. You can stop it if needed.</div>`); const $normalSubConfigTabLi = $(".normal-sub-config-tab-li");
}
if(service === "hysteria_iplimit"){ if (isRunning) {
$normalFormGroups.hide();
$normalStartBtn.hide();
$normalStopBtn.show();
if ($normalAlert.length === 0) {
$("#normal_sub_service_form").prepend(`<div class='alert alert-info'>NormalSub service is running. You can stop it or configure its subpath.</div>`);
}
$normalSubConfigTabLi.show();
fetchNormalSubPath();
} else {
$normalFormGroups.show();
$normalStartBtn.show();
$normalStopBtn.hide();
$("#normal_sub_service_form .alert-info").remove();
$normalSubConfigTabLi.hide();
if ($('#normal-sub-config-link-tab').hasClass('active')) {
$('#normal-tab').tab('show');
}
$("#normal_subpath_input").val("");
$("#normal_subpath_input").removeClass('is-invalid');
}
} else if (service === "hysteria_iplimit") {
if (isRunning) {
$("#ip_limit_start").hide(); $("#ip_limit_start").hide();
$("#ip_limit_stop").show(); $("#ip_limit_stop").show();
$(".ip-limit-config-tab-li").show(); $(".ip-limit-config-tab-li").show();
} // TODO: Fetch IP Limit Config and populate fields
} else {
} else {
$(selector + " .form-group").show();
$(selector + " .btn-success").show();
$(selector + " .btn-danger").hide();
$(selector + " .alert-info").remove();
if(service === "hysteria_iplimit"){
$("#ip_limit_start").show(); $("#ip_limit_start").show();
$("#ip_limit_stop").hide(); $("#ip_limit_stop").hide();
$(".ip-limit-config-tab-li").hide(); $(".ip-limit-config-tab-li").hide();
$('#ip-limit-service-tab').tab('show'); $('#ip-limit-service-tab').tab('show');
// TODO: Clear IP Limit Config fields
}
} else {
if (isRunning) {
$(formSelector + " .form-group").hide();
$(formSelector + " .btn-success").hide();
$(formSelector + " .btn-danger").show();
if ($(formSelector + " .alert-info").length === 0) {
$(formSelector).prepend(`<div class='alert alert-info'>Service is running. You can stop it if needed.</div>`);
}
} else {
$(formSelector + " .form-group").show();
$(formSelector + " .btn-success").show();
$(formSelector + " .btn-danger").hide();
$(formSelector + " .alert-info").remove();
} }
} }
}); });
} }
function fetchNormalSubPath() {
$.ajax({
url: "{{ url_for('normal_sub_get_subpath_api') }}",
type: "GET",
success: function (data) {
$("#normal_subpath_input").val(data.subpath || "");
if (data.subpath) {
$("#normal_subpath_input").removeClass('is-invalid');
}
},
error: function (xhr, status, error) {
console.error("Failed to fetch NormalSub subpath:", error, xhr.responseText);
$("#normal_subpath_input").val("");
// Swal.fire("Error!", "Could not fetch NormalSub subpath.", "error"); // Avoid too many popups during init
}
});
}
function editNormalSubPath() {
if (!validateForm('normal_sub_config_form')) return;
const subpath = $("#normal_subpath_input").val();
confirmAction("change the NormalSub subpath to '" + subpath + "'", function () {
sendRequest(
"{{ url_for('normal_sub_edit_subpath_api') }}",
"PUT",
{ subpath: subpath },
"NormalSub subpath updated successfully!",
"#normal_subpath_save_btn",
false,
fetchNormalSubPath
);
});
}
function setupDecoy() { function setupDecoy() {
if (!validateForm('decoy_form')) return; if (!validateForm('decoy_form')) return;
@ -537,9 +630,9 @@
{ domain: domain, decoy_path: path }, { domain: domain, decoy_path: path },
"Decoy site setup initiated successfully!", "Decoy site setup initiated successfully!",
"#decoy_setup", "#decoy_setup",
false false,
function() { setTimeout(fetchDecoyStatus, 1000); }
); );
setTimeout(fetchDecoyStatus, 2000);
}); });
} }
@ -551,9 +644,9 @@
null, null,
"Decoy site stop initiated successfully!", "Decoy site stop initiated successfully!",
"#decoy_stop", "#decoy_stop",
false false,
function() { setTimeout(fetchDecoyStatus, 1000); }
); );
setTimeout(fetchDecoyStatus, 2000);
}); });
} }
@ -572,30 +665,37 @@
} }
function updateDecoyStatusUI(data) { function updateDecoyStatusUI(data) {
const $form = $("#decoy_form");
const $formGroups = $form.find(".form-group");
const $setupBtn = $("#decoy_setup");
const $stopBtn = $("#decoy_stop");
const $alertInfo = $form.find(".alert-info");
if (data.active) { if (data.active) {
$("#decoy_form .form-group").hide(); $formGroups.hide();
$("#decoy_setup").hide(); $setupBtn.hide();
$("#decoy_stop").show(); $stopBtn.show();
$("#decoy_form .alert-info").remove(); if ($alertInfo.length === 0) {
if ($("#decoy_form .alert-info").length === 0) { $form.prepend(`<div class='alert alert-info'>Decoy site is running. You can stop it if needed.</div>`);
$("#decoy_form").prepend(`<div class='alert alert-info'>Decoy site is running. You can stop it if needed.</div>`); } else {
} $alertInfo.text('Decoy site is running. You can stop it if needed.');
}
$("#decoy_status_message").html(` $("#decoy_status_message").html(`
<strong>Status:</strong> <span class="text-success">Active</span><br> <strong>Status:</strong> <span class="text-success">Active</span><br>
<strong>Path:</strong> ${data.path || 'N/A'} <strong>Path:</strong> ${data.path || 'N/A'}
`); `);
} else { } else {
$("#decoy_form .form-group").show(); $formGroups.show();
$("#decoy_setup").show(); $setupBtn.show();
$("#decoy_stop").hide(); $stopBtn.hide();
$("#decoy_form .alert-info").remove(); $alertInfo.remove();
$("#decoy_status_message").html('<strong>Status:</strong> <span class="text-danger">Not Active</span>'); $("#decoy_status_message").html('<strong>Status:</strong> <span class="text-danger">Not Active</span>');
} }
} }
function startTelegram() { function startTelegram() {
if (!validateForm('telegram')) return; if (!validateForm('telegram_form')) return;
const apiToken = $("#telegram_api_token").val(); const apiToken = $("#telegram_api_token").val();
const adminId = $("#telegram_admin_id").val(); const adminId = $("#telegram_admin_id").val();
confirmAction("start the Telegram bot", function () { confirmAction("start the Telegram bot", function () {
@ -622,7 +722,7 @@
} }
function startNormal() { function startNormal() {
if (!validateForm('normal')) return; if (!validateForm('normal_sub_service_form')) return;
const domain = $("#normal_domain").val(); const domain = $("#normal_domain").val();
const port = $("#normal_port").val(); const port = $("#normal_port").val();
confirmAction("start the normal subscription", function () { confirmAction("start the normal subscription", function () {
@ -649,7 +749,7 @@
} }
function changePort() { function changePort() {
if (!validateForm('port')) return; if (!validateForm('port_form')) return;
const port = $("#hysteria_port").val(); const port = $("#hysteria_port").val();
const baseUrl = "{{ url_for('set_port_api', port='PORT_PLACEHOLDER') }}"; const baseUrl = "{{ url_for('set_port_api', port='PORT_PLACEHOLDER') }}";
const url = baseUrl.replace("PORT_PLACEHOLDER", port); const url = baseUrl.replace("PORT_PLACEHOLDER", port);
@ -659,7 +759,7 @@
} }
function changeSNI() { function changeSNI() {
if (!validateForm('sni')) return; if (!validateForm('sni_form')) return;
const domain = $("#sni_domain").val(); const domain = $("#sni_domain").val();
const baseUrl = "{{ url_for('set_sni_api', sni='SNI_PLACEHOLDER') }}"; const baseUrl = "{{ url_for('set_sni_api', sni='SNI_PLACEHOLDER') }}";
const url = baseUrl.replace("SNI_PLACEHOLDER", domain); const url = baseUrl.replace("SNI_PLACEHOLDER", domain);
@ -669,7 +769,7 @@
} }
function saveIP() { function saveIP() {
if (!validateForm('change_ip')) return; if (!validateForm('change_ip_form')) return;
const ipv4 = $("#ipv4").val().trim() || null; const ipv4 = $("#ipv4").val().trim() || null;
const ipv6 = $("#ipv6").val().trim() || null; const ipv6 = $("#ipv6").val().trim() || null;
confirmAction("save the new IP settings", function () { confirmAction("save the new IP settings", function () {
@ -783,7 +883,7 @@
} }
function configIPLimit() { function configIPLimit() {
if (!validateForm('ip_limit_config')) return; if (!validateForm('ip_limit_config_form')) return; // Ensure correct form ID
const blockDuration = $("#block_duration").val(); const blockDuration = $("#block_duration").val();
const maxIps = $("#max_ips").val(); const maxIps = $("#max_ips").val();
confirmAction("save the IP Limit configuration", function () { confirmAction("save the IP Limit configuration", function () {
@ -804,6 +904,7 @@
$("#telegram_stop").on("click", stopTelegram); $("#telegram_stop").on("click", stopTelegram);
$("#normal_start").on("click", startNormal); $("#normal_start").on("click", startNormal);
$("#normal_stop").on("click", stopNormal); $("#normal_stop").on("click", stopNormal);
$("#normal_subpath_save_btn").on("click", editNormalSubPath);
$("#port_change").on("click", changePort); $("#port_change").on("click", changePort);
$("#sni_change").on("click", changeSNI); $("#sni_change").on("click", changeSNI);
$("#ip_change").on("click", saveIP); $("#ip_change").on("click", saveIP);
@ -816,7 +917,6 @@
$("#decoy_stop").on("click", stopDecoy); $("#decoy_stop").on("click", stopDecoy);
$('#normal_domain, #sni_domain, #decoy_domain').on('input', function () { $('#normal_domain, #sni_domain, #decoy_domain').on('input', function () {
if (isValidDomain($(this).val())) { if (isValidDomain($(this).val())) {
$(this).removeClass('is-invalid'); $(this).removeClass('is-invalid');
@ -837,6 +937,16 @@
} }
}); });
$('#normal_subpath_input').on('input', function () {
if (isValidSubPath($(this).val())) {
$(this).removeClass('is-invalid');
} else if ($(this).val().trim() !== "") {
$(this).addClass('is-invalid');
} else {
$(this).removeClass('is-invalid');
}
});
$('#ipv4, #ipv6').on('input', function () { $('#ipv4, #ipv6').on('input', function () {
if (isValidIPorDomain($(this).val()) || $(this).val().trim() === '') { if (isValidIPorDomain($(this).val()) || $(this).val().trim() === '') {
$(this).removeClass('is-invalid'); $(this).removeClass('is-invalid');
@ -852,8 +962,7 @@
$(this).addClass('is-invalid'); $(this).addClass('is-invalid');
} }
}); });
$('#block_duration, #max_ips').on('input', function () {
$('#block_duration, #max_ips').on('input', function () {
if (isValidPositiveNumber($(this).val())) { if (isValidPositiveNumber($(this).val())) {
$(this).removeClass('is-invalid'); $(this).removeClass('is-invalid');
} else if ($(this).val().trim() !== "") { } else if ($(this).val().trim() !== "") {
@ -869,11 +978,10 @@
} else if ($(this).val().trim() !== "") { } else if ($(this).val().trim() !== "") {
$(this).addClass('is-invalid'); $(this).addClass('is-invalid');
} else { } else {
$(this).removeClass('is-invalid'); $(this).removeClass('is-invalid');
} }
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}