Merge pull request #98 from ReturnFI/beta
Enhance user management and settings
This commit is contained in:
Whispering Wind
@ -21,24 +21,25 @@
|
||||
<div class='card-header p-0 pt-1 border-bottom-0'>
|
||||
<ul class='nav nav-pills' id='custom-tabs-three-tab' role='tablist' style="margin-left: 20px; margin-top: 10px;">
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link active' id='subs-tab' data-toggle='pill' href='#subs' role='tab' aria-controls='subs' aria-selected='false'>Subscriptions</a>
|
||||
<a class='nav-link active' id='subs-tab' data-toggle='pill' href='#subs' role='tab' aria-controls='subs' aria-selected='false'><i class="fas fa-link"></i> Subscriptions</a>
|
||||
</li>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link' id='telegram-tab' data-toggle='pill' href='#telegram' role='tab' aria-controls='telegram' aria-selected='true'>Telegram
|
||||
<a class='nav-link' id='telegram-tab' data-toggle='pill' href='#telegram' role='tab' aria-controls='telegram' aria-selected='true'><i class="fab fa-telegram"></i> Telegram
|
||||
Bot</a>
|
||||
</li>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link' id='port-tab' data-toggle='pill' href='#port' role='tab' aria-controls='port' aria-selected='false'>Change Port</a>
|
||||
<a class='nav-link' id='port-tab' data-toggle='pill' href='#port' role='tab' aria-controls='port' aria-selected='false'><i class="fas fa-server"></i> Change Port</a>
|
||||
</li>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link' id='sni-tab' data-toggle='pill' href='#sni' role='tab' aria-controls='sni' aria-selected='false'>Change SNI</a>
|
||||
<a class='nav-link' id='sni-tab' data-toggle='pill' href='#sni' role='tab' aria-controls='sni' aria-selected='false'><i class="fas fa-shield-alt"></i> Change SNI</a>
|
||||
</li>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link' id='ip-tab' data-toggle='pill' href='#change_ip' role='tab' aria-controls='change_ip' aria-selected='false'>Change IP</a>
|
||||
<a class='nav-link' id='ip-tab' data-toggle='pill' href='#change_ip' role='tab' aria-controls='change_ip' aria-selected='false'><i class="fas fa-network-wired"></i> Change IP</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='card-body' style="margin-left: 25px;">
|
||||
<!-- Rest of your form content (same as before) -->
|
||||
<div class='tab-content' id='custom-tabs-three-tabContent'>
|
||||
|
||||
<!-- Subscriptions Tab -->
|
||||
@ -61,10 +62,16 @@
|
||||
<div class='form-group'>
|
||||
<label for='singbox_domain'>Domain:</label>
|
||||
<input type='text' class='form-control' id='singbox_domain' placeholder='Enter Domain'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain (without http:// or https://).
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-group'>
|
||||
<label for='singbox_port'>Port:</label>
|
||||
<input type='text' class='form-control' id='singbox_port' placeholder='Enter Port'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid port number.
|
||||
</div>
|
||||
</div>
|
||||
<button id="singbox_start" type='button' class='btn btn-success'>Start</button>
|
||||
<button id="singbox_stop" type='button' class='btn btn-danger' style="display: none;">Stop</button>
|
||||
@ -78,10 +85,16 @@
|
||||
<div class='form-group'>
|
||||
<label for='normal_domain'>Domain:</label>
|
||||
<input type='text' class='form-control' id='normal_domain' placeholder='Enter Domain'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain (without http:// or https://).
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-group'>
|
||||
<label for='normal_port'>Port:</label>
|
||||
<input type='text' class='form-control' id='normal_port' placeholder='Enter Port'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid port number.
|
||||
</div>
|
||||
</div>
|
||||
<button id="normal_start" type='button' class='btn btn-success'>Start</button>
|
||||
<button id="normal_stop" type='button' class='btn btn-danger' style="display: none;">Stop</button>
|
||||
@ -98,10 +111,16 @@
|
||||
<div class='form-group'>
|
||||
<label for='telegram_api_token'>API Token:</label>
|
||||
<input type='text' class='form-control' id='telegram_api_token' placeholder='Enter API Token'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid API Token.
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-group'>
|
||||
<label for='telegram_admin_id'>Admin ID:</label>
|
||||
<input type='text' class='form-control' id='telegram_admin_id' placeholder='Enter Admin ID'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid Admin ID.
|
||||
</div>
|
||||
</div>
|
||||
<button id="telegram_start" type='button' class='btn btn-success'>Start</button>
|
||||
<button id="telegram_stop" type='button' class='btn btn-danger' style="display: none;">Stop</button>
|
||||
@ -116,6 +135,9 @@
|
||||
<div class='form-group'>
|
||||
<label for='hysteria_port'>Port:</label>
|
||||
<input type='text' class='form-control' id='hysteria_port' placeholder='Enter Port'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid port number.
|
||||
</div>
|
||||
</div>
|
||||
<button id="port_change" type='button' class='btn btn-primary'>Save</button>
|
||||
</form>
|
||||
@ -128,6 +150,9 @@
|
||||
<div class='form-group'>
|
||||
<label for='sni_domain'>Domain:</label>
|
||||
<input type='text' class='form-control' id='sni_domain' placeholder='Enter Domain'>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain (without http:// or https://).
|
||||
</div>
|
||||
</div>
|
||||
<button id="sni_change" type='button' class='btn btn-primary'>Save</button>
|
||||
</form>
|
||||
@ -139,10 +164,16 @@
|
||||
<div class='form-group'>
|
||||
<label for='ipv4'>IPv4:</label>
|
||||
<input type='text' class='form-control' id='ipv4' placeholder='Enter IPv4' value="{{ ipv4 or '' }}">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid IPv4 address.
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-group'>
|
||||
<label for='ipv6'>IPv6:</label>
|
||||
<input type='text' class='form-control' id='ipv6' placeholder='Enter IPv6' value="{{ ipv6 or '' }}">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid IPv6 address.
|
||||
</div>
|
||||
</div>
|
||||
<button id="ip_change" type='button' class='btn btn-primary'>Save</button>
|
||||
</form>
|
||||
@ -161,6 +192,9 @@
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<!-- Font Awesome -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js" integrity="sha512-yFjZbTYRCJodnuyGlsKamNE/LlEaEA/3apsIOPr7/l+jCMq9Dn9x5qyuAGqgpr4/NBZ95p8yrl/sLhJvoazg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function initUI() {
|
||||
@ -251,6 +285,28 @@
|
||||
// Init UI
|
||||
initUI();
|
||||
|
||||
// Validation functions
|
||||
function isValidDomain(domain) {
|
||||
if (!domain) return false;
|
||||
return !domain.startsWith("http://") && !domain.startsWith("https://");
|
||||
}
|
||||
|
||||
function isValidPort(port) {
|
||||
if (!port) return false;
|
||||
return /^[0-9]+$/.test(port) && parseInt(port) > 0 && parseInt(port) <= 65535;
|
||||
}
|
||||
function isValidIP(ip, version) {
|
||||
if (!ip) return true; // Allow empty input (optional)
|
||||
|
||||
if (version === 4) {
|
||||
return /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip);
|
||||
} else if (version === 6) {
|
||||
return /^(([0-9a-fA-F]{1,4}:){7,7}([0-9a-fA-F]{1,4}|:)|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:))$/.test(ip);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// Function to show confirmation before executing API calls
|
||||
function confirmAction(actionName, callback) {
|
||||
Swal.fire({
|
||||
@ -288,9 +344,59 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
// Function to validate form fields
|
||||
|
||||
function validateForm(formId) {
|
||||
let isValid = true;
|
||||
$(`#${formId} .form-control`).each(function() {
|
||||
const input = $(this);
|
||||
const id = input.attr('id');
|
||||
|
||||
if (id.includes('domain')) {
|
||||
if (!isValidDomain(input.val())) {
|
||||
input.addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
input.removeClass('is-invalid');
|
||||
}
|
||||
} else if (id.includes('port')) {
|
||||
if (!isValidPort(input.val())) {
|
||||
input.addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
input.removeClass('is-invalid');
|
||||
}
|
||||
} else if (id === 'ipv4') {
|
||||
if (!isValidIP(input.val(), 4)) {
|
||||
input.addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
input.removeClass('is-invalid');
|
||||
}
|
||||
} else if (id === 'ipv6') {
|
||||
if (!isValidIP(input.val(), 6)) {
|
||||
input.addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
input.removeClass('is-invalid');
|
||||
}
|
||||
} else {
|
||||
// For other fields (like token, admin_id), just check if it's empty. You could
|
||||
// add more robust validation for these if needed.
|
||||
if (!input.val().trim()) {
|
||||
input.addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
input.removeClass('is-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
return isValid;
|
||||
}
|
||||
// Telegram Bot Start
|
||||
function startTelegram() {
|
||||
if (!validateForm('telegram')) return;
|
||||
const apiToken = $("#telegram_api_token").val();
|
||||
const adminId = $("#telegram_admin_id").val();
|
||||
confirmAction("start the Telegram bot", function () {
|
||||
@ -317,6 +423,7 @@
|
||||
|
||||
// SingBox Start
|
||||
function startSingbox() {
|
||||
if (!validateForm('singbox')) return;
|
||||
const domain = $("#singbox_domain").val();
|
||||
const port = $("#singbox_port").val();
|
||||
confirmAction("start SingBox", function () {
|
||||
@ -343,6 +450,7 @@
|
||||
|
||||
// Normal Subscription Start
|
||||
function startNormal() {
|
||||
if (!validateForm('normal')) return;
|
||||
const domain = $("#normal_domain").val();
|
||||
const port = $("#normal_port").val();
|
||||
confirmAction("start the normal subscription", function () {
|
||||
@ -368,6 +476,7 @@
|
||||
}
|
||||
|
||||
function changePort() {
|
||||
if (!validateForm('port')) return;
|
||||
const port = $("#hysteria_port").val();
|
||||
const baseUrl = "{{ url_for('set_port_api', port='PORT_PLACEHOLDER') }}";
|
||||
const url = baseUrl.replace("PORT_PLACEHOLDER", port);
|
||||
@ -378,6 +487,7 @@
|
||||
|
||||
// Change SNI
|
||||
function changeSNI() {
|
||||
if (!validateForm('sni')) return;
|
||||
const domain = $("#sni_domain").val();
|
||||
const baseUrl = "{{ url_for('set_sni_api', sni='SNI_PLACEHOLDER') }}";
|
||||
const url = baseUrl.replace("SNI_PLACEHOLDER", domain);
|
||||
@ -388,6 +498,7 @@
|
||||
|
||||
// Save IP
|
||||
function saveIP() {
|
||||
if (!validateForm('change_ip')) return;
|
||||
confirmAction("save the new IP", function () {
|
||||
sendRequest(
|
||||
"{{ url_for('edit_ip_api') }}",
|
||||
@ -412,10 +523,44 @@
|
||||
$("#sni_change").on("click", changeSNI);
|
||||
$("#ip_change").on("click", saveIP);
|
||||
|
||||
// Input event listeners for real-time validation
|
||||
$('#singbox_domain, #normal_domain, #sni_domain').on('input', function() {
|
||||
if (isValidDomain($(this).val())) {
|
||||
$(this).removeClass('is-invalid');
|
||||
} else {
|
||||
$(this).addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#singbox_port, #normal_port, #hysteria_port').on('input', function() {
|
||||
if (isValidPort($(this).val())) {
|
||||
$(this).removeClass('is-invalid');
|
||||
} else {
|
||||
$(this).addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
$('#ipv4').on('input', function() {
|
||||
if (isValidIP($(this).val(),4)) {
|
||||
$(this).removeClass('is-invalid');
|
||||
} else {
|
||||
$(this).addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#ipv6').on('input', function() {
|
||||
if (isValidIP($(this).val(),6)) {
|
||||
$(this).removeClass('is-invalid');
|
||||
} else {
|
||||
$(this).addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
$('#telegram_api_token, #telegram_admin_id').on('input', function() {
|
||||
if ($(this).val().trim() !== "") { // Basic check for non-empty
|
||||
$(this).removeClass('is-invalid');
|
||||
} else {
|
||||
$(this).addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1 class="m-0">Users</h1>
|
||||
<h1 class="m-0">Users <small class="font-weight-light"></small></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,20 +18,47 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">User List</h3>
|
||||
<div class="card-tools d-flex align-items-center">
|
||||
<div class="card-tools d-flex align-items-center flex-wrap">
|
||||
|
||||
<!-- Filter Buttons -->
|
||||
<div class="mr-2 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-default filter-button" data-filter="all">
|
||||
<i class="fas fa-list"></i> All
|
||||
</button>
|
||||
</div>
|
||||
<div class="mr-2 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-default filter-button" data-filter="not-active">
|
||||
<i class="fas fa-exclamation-triangle"></i> NA
|
||||
</button>
|
||||
</div>
|
||||
<div class="mr-2 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-success filter-button" data-filter="enable">
|
||||
<i class="fas fa-check"></i> Enable
|
||||
</button>
|
||||
</div>
|
||||
<div class="mr-2 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-danger filter-button" data-filter="disable">
|
||||
<i class="fas fa-ban"></i> Disable
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Form -->
|
||||
<div class="input-group input-group-sm" style="width: 100px;">
|
||||
<div class="input-group input-group-sm" style="width: 200px;">
|
||||
<input type="text" id="searchInput" class="form-control float-right" placeholder="Search">
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-default" id="searchButton">
|
||||
<button type="button" class="btn btn-default" id="searchButton">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add User Button -->
|
||||
<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#addUserModal">
|
||||
<button type="button" class="btn btn-sm btn-primary ml-2" data-toggle="modal" data-target="#addUserModal">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<!-- Delete Selected Button -->
|
||||
<button type="button" class="btn btn-sm btn-danger ml-2" id="deleteSelected">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body table-responsive p-0">
|
||||
@ -43,6 +70,9 @@
|
||||
<table class="table table-bordered table-hover" id="userTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="checkbox" id="selectAll">
|
||||
</th>
|
||||
<th>Status</th>
|
||||
<th>Username</th>
|
||||
<th>Quota</th>
|
||||
@ -57,6 +87,9 @@
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="user-checkbox" value="{{ user.username }}">
|
||||
</td>
|
||||
<td>
|
||||
{% if user['status'] == "Online" %}
|
||||
<i class="fas fa-circle text-success"></i> Online
|
||||
@ -79,7 +112,8 @@
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
<a href="#" class="config-link" data-toggle="modal" data-target="#qrcodeModal" data-username="{{ user.username }}">
|
||||
<a href="#" class="config-link" data-toggle="modal" data-target="#qrcodeModal"
|
||||
data-username="{{ user.username }}">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
</a>
|
||||
<div id="userConfigs-{{ user.username }}" style="display: none;">
|
||||
@ -96,13 +130,17 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
<button type="button" class="btn btn-sm btn-info edit-user" data-user='{{ user.username }}' data-toggle="modal" data-target="#editUserModal">
|
||||
<button type="button" class="btn btn-sm btn-info edit-user"
|
||||
data-user='{{ user.username }}' data-toggle="modal"
|
||||
data-target="#editUserModal">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-warning reset-user" data-user='{{ user.username }}'>
|
||||
<button type="button" class="btn btn-sm btn-warning reset-user"
|
||||
data-user='{{ user.username }}'>
|
||||
<i class="fas fa-undo"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-danger delete-user" data-user='{{ user.username }}'>
|
||||
<button type="button" class="btn btn-sm btn-danger delete-user"
|
||||
data-user='{{ user.username }}'>
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
@ -125,7 +163,8 @@
|
||||
|
||||
|
||||
<!-- Add User Modal -->
|
||||
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -139,6 +178,7 @@
|
||||
<div class="form-group">
|
||||
<label for="addUsername">Username</label>
|
||||
<input type="text" class="form-control" id="addUsername" name="username" required>
|
||||
<small class="form-text text-danger" id="addUsernameError"></small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addTrafficLimit">Traffic Limit (GB)</label>
|
||||
@ -146,16 +186,18 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addExpirationDays">Expiration Days</label>
|
||||
<input type="number" class="form-control" id="addExpirationDays" name="expiration_days" required>
|
||||
<input type="number" class="form-control" id="addExpirationDays" name="expiration_days"
|
||||
required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Add User</button>
|
||||
<button type="submit" class="btn btn-primary" id="addSubmitButton">Add User</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Edit User Modal -->
|
||||
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -169,6 +211,7 @@
|
||||
<div class="form-group">
|
||||
<label for="editUsername">Username</label>
|
||||
<input type="text" class="form-control" id="editUsername" name="new_username">
|
||||
<small class="form-text text-danger" id="editUsernameError"></small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editTrafficLimit">Traffic Limit (GB)</label>
|
||||
@ -183,14 +226,15 @@
|
||||
<label class="form-check-label" for="editBlocked">Blocked</label>
|
||||
</div>
|
||||
<input type="hidden" id="originalUsername" name="username">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="submit" class="btn btn-primary" id="editSubmitButton">Save Changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- QR Code Modal -->
|
||||
<div class="modal fade" id="qrcodeModal" tabindex="-1" role="dialog" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="qrcodeModal" tabindex="-1" role="dialog" aria-labelledby="qrcodeModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -214,9 +258,160 @@
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
//** Username validation */
|
||||
const usernameRegex = /^[a-zA-Z0-9]+$/;
|
||||
|
||||
function validateUsername(username, errorElementId) {
|
||||
const isValid = usernameRegex.test(username);
|
||||
const errorElement = $("#" + errorElementId);
|
||||
|
||||
if (!isValid) {
|
||||
errorElement.text("Usernames can only contain letters and numbers.");
|
||||
return false;
|
||||
} else {
|
||||
errorElement.text(""); // Clear any previous error
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable submit buttons by default
|
||||
$("#addSubmitButton").prop("disabled", true);
|
||||
$("#editSubmitButton").prop("disabled", true);
|
||||
|
||||
//** Add Username validation on Add User Modal */
|
||||
$("#addUsername").on("input", function () {
|
||||
const username = $(this).val();
|
||||
const isValid = validateUsername(username, "addUsernameError");
|
||||
$("#addUserForm button[type='submit']").prop("disabled", !isValid);
|
||||
$("#addSubmitButton").prop("disabled", !isValid);
|
||||
});
|
||||
|
||||
//** Add Username validation on Edit User Modal */
|
||||
$("#editUsername").on("input", function () {
|
||||
const username = $(this).val();
|
||||
const isValid = validateUsername(username, "editUsernameError");
|
||||
$("#editUserForm button[type='submit']").prop("disabled", !isValid);
|
||||
$("#editSubmitButton").prop("disabled", !isValid);
|
||||
});
|
||||
|
||||
// Filter Buttons Functionality
|
||||
$(".filter-button").on("click", function () {
|
||||
const filter = $(this).data("filter");
|
||||
|
||||
// Deselect "Select All" checkbox when a filter is applied
|
||||
$("#selectAll").prop("checked", false);
|
||||
|
||||
$("#userTable tbody tr").each(function () {
|
||||
let showRow = true;
|
||||
|
||||
switch (filter) {
|
||||
case "all":
|
||||
showRow = true; // Show all users
|
||||
break;
|
||||
case "not-active":
|
||||
showRow = $(this).find("td:eq(1) i").hasClass("text-danger");
|
||||
break;
|
||||
case "enable":
|
||||
showRow = $(this).find("td:eq(7) i").hasClass("text-success");
|
||||
break;
|
||||
case "disable":
|
||||
showRow = $(this).find("td:eq(7) i").hasClass("text-danger");
|
||||
break;
|
||||
}
|
||||
|
||||
if (showRow) {
|
||||
$(this).show();
|
||||
} else {
|
||||
$(this).hide();
|
||||
}
|
||||
//Deselect checkbox when is not visible after sorting
|
||||
$(this).find(".user-checkbox").prop("checked", false);
|
||||
});
|
||||
});
|
||||
|
||||
// Multi Delete Functionality
|
||||
$("#selectAll").on("change", function () {
|
||||
// Only select checkboxes in visible rows
|
||||
$("#userTable tbody tr:visible .user-checkbox").prop("checked", $(this).prop("checked"));
|
||||
});
|
||||
|
||||
$("#deleteSelected").on("click", function () {
|
||||
const selectedUsers = $(".user-checkbox:checked").map(function () {
|
||||
return $(this).val();
|
||||
}).get();
|
||||
|
||||
if (selectedUsers.length === 0) {
|
||||
Swal.fire({
|
||||
title: "Warning!",
|
||||
text: "Please select at least one user to delete.",
|
||||
icon: "warning",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: "Are you sure?",
|
||||
html: `This will delete the selected users: <b>${selectedUsers.join(", ")}</b>.<br>This action cannot be undone!`,
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Yes, delete them!",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
//AJAX request for each user selected
|
||||
Promise.all(selectedUsers.map(username => {
|
||||
const removeUserUrl = "{{ url_for('remove_user_api', username='USERNAME_PLACEHOLDER') }}";
|
||||
const url = removeUserUrl.replace("USERNAME_PLACEHOLDER", encodeURIComponent(username));
|
||||
return $.ajax({
|
||||
url: url,
|
||||
method: "DELETE",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ username: username }),
|
||||
});
|
||||
}))
|
||||
.then(responses => {
|
||||
const allSuccessful = responses.every(response => response.detail);
|
||||
if (allSuccessful) {
|
||||
Swal.fire({
|
||||
title: "Success!",
|
||||
text: "Selected users deleted successfully!",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
}).then(() => {
|
||||
location.reload();
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: "Error!",
|
||||
text: "Failed to delete some users.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error deleting users:", error);
|
||||
Swal.fire({
|
||||
title: "Error!",
|
||||
text: "An error occurred while deleting users.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add User Form Submit
|
||||
$("#addUserForm").on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
// Additional check before submitting (in case JS is disabled briefly)
|
||||
if (!validateUsername($("#addUsername").val(), "addUsernameError")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = $(this).serializeArray();
|
||||
const jsonData = {};
|
||||
@ -263,10 +458,10 @@
|
||||
$(document).on("click", ".edit-user", function () {
|
||||
const username = $(this).data("user");
|
||||
const row = $(this).closest("tr");
|
||||
const quota = row.find("td:eq(2)").text().trim();
|
||||
const expiry = row.find("td:eq(4)").text().trim(); // Get expiry from the table
|
||||
const expiry_days = row.find("td:eq(5)").text().trim();
|
||||
const blocked = row.find("td:eq(6)").text().trim().toLowerCase() === 'disabled'; // Check if 'disabled'
|
||||
const quota = row.find("td:eq(3)").text().trim();
|
||||
const expiry = row.find("td:eq(5)").text().trim(); // Get expiry from the table
|
||||
const expiry_days = row.find("td:eq(6)").text().trim();
|
||||
const blocked = row.find("td:eq(7)").text().trim().toLowerCase() === 'disabled'; // Check if 'disabled'
|
||||
|
||||
// Extract numeric values from quota and expiry strings
|
||||
const quotaValue = parseFloat(quota);
|
||||
@ -282,6 +477,10 @@
|
||||
|
||||
$("#editUserForm").on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
// Additional check before submitting (in case JS is disabled briefly)
|
||||
if (!validateUsername($("#editUsername").val(), "editUsernameError")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = $(this).serializeArray();
|
||||
const jsonData = {};
|
||||
@ -301,10 +500,10 @@
|
||||
if (typeof response === 'string' && response.includes("User updated successfully")) {
|
||||
const username = $("#originalUsername").val();
|
||||
const row = $(`td[data-username='${username}']`).closest("tr");
|
||||
row.find("td:eq(1)").text($("#editUsername").val());
|
||||
row.find("td:eq(2)").text($("#editTrafficLimit").val() + " GB");
|
||||
row.find("td:eq(5)").text($("#editExpirationDays").val());
|
||||
row.find("td:eq(6) i")
|
||||
row.find("td:eq(2)").text($("#editUsername").val());
|
||||
row.find("td:eq(3)").text($("#editTrafficLimit").val() + " GB");
|
||||
row.find("td:eq(6)").text($("#editExpirationDays").val());
|
||||
row.find("td:eq(7) i")
|
||||
.removeClass()
|
||||
.addClass(
|
||||
$("#editBlocked").prop("checked")
|
||||
@ -323,10 +522,10 @@
|
||||
else if (response && response.detail) {
|
||||
const username = $("#originalUsername").val();
|
||||
const row = $(`td[data-username='${username}']`).closest("tr");
|
||||
row.find("td:eq(1)").text($("#editUsername").val());
|
||||
row.find("td:eq(2)").text($("#editTrafficLimit").val() + " GB");
|
||||
row.find("td:eq(5)").text($("#editExpirationDays").val());
|
||||
row.find("td:eq(6) i")
|
||||
row.find("td:eq(2)").text($("#editUsername").val());
|
||||
row.find("td:eq(3)").text($("#editTrafficLimit").val() + " GB");
|
||||
row.find("td:eq(6)").text($("#editExpirationDays").val());
|
||||
row.find("td:eq(7) i")
|
||||
.removeClass()
|
||||
.addClass(
|
||||
$("#editBlocked").prop("checked")
|
||||
@ -565,7 +764,7 @@
|
||||
const searchText = $("#searchInput").val().toLowerCase();
|
||||
|
||||
$("#userTable tbody tr").each(function () {
|
||||
const username = $(this).find("td:eq(1)").text().toLowerCase();
|
||||
const username = $(this).find("td:eq(2)").text().toLowerCase();
|
||||
if (username.includes(searchText)) {
|
||||
$(this).show();
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user