441 lines
20 KiB
HTML
441 lines
20 KiB
HTML
@include(snippets/header)
|
|
|
|
<div class="pagewrapper">
|
|
<div id="main" class="admin-container">
|
|
<style>
|
|
.admin-users-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 8px;
|
|
color: var(--white);
|
|
}
|
|
.admin-users-table th {
|
|
padding: 15px;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 1px;
|
|
color: #888;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
.admin-users-table tr {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.admin-users-table tbody tr {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
.admin-users-table tbody tr:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
.admin-users-table td {
|
|
padding: 15px;
|
|
vertical-align: middle;
|
|
}
|
|
.status-badge {
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
}
|
|
.status-active { background: linear-gradient(135deg, #28a745, #20c997); color: #fff; }
|
|
.status-pending { background: linear-gradient(135deg, #f08c00, #ffc107); color: #000; }
|
|
.status-banned { background: linear-gradient(135deg, #e03131, #f03e3e); color: #fff; }
|
|
|
|
.method-tag {
|
|
font-size: 0.7rem;
|
|
padding: 2px 8px;
|
|
background: rgba(var(--accent-rgb, 0, 150, 255), 0.1);
|
|
border: 1px solid rgba(var(--accent-rgb, 0, 150, 255), 0.2);
|
|
color: var(--accent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.stat-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.85rem;
|
|
color: #ccc;
|
|
transition: color 0.2s, transform 0.1s;
|
|
}
|
|
.stat-box:hover {
|
|
color: var(--accent);
|
|
transform: translateY(-1px);
|
|
}
|
|
.stat-box svg { opacity: 0.6; }
|
|
|
|
.btn-modern {
|
|
border: 0;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-modern:hover { opacity: 0.8; }
|
|
.btn-ban { background: #e03131; }
|
|
.btn-unban { background: #28a745; }
|
|
.btn-files { background: #f08c00; }
|
|
.btn-comms { background: #4dabf7; }
|
|
.btn-verify { background: #5c7cfa; }
|
|
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.avatar-placeholder {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, #333, #111);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
color: var(--accent);
|
|
font-size: 1.2rem;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
</style>
|
|
|
|
<div style="padding: 0 15px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; gap: 20px; flex-wrap: wrap;">
|
|
<div>
|
|
<h2 style="margin: 0; font-weight: 800; letter-spacing: -0.5px;">User Management</h2>
|
|
<p style="color: #888; margin: 5px 0 0 0;">Administration hub for <span id="total-count">{!! total !!}</span> registered members.</p>
|
|
</div>
|
|
<div style="flex-grow: 1; max-width: 400px; position: relative;">
|
|
<input type="text" id="user-search" placeholder='Search by name or email… use "exact" for exact match'
|
|
style="width: 100%; padding: 12px 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; transition: border-color 0.2s;"
|
|
value="{{ q }}">
|
|
<div id="search-spinner" style="position: absolute; right: 15px; top: 12px; display: none;">
|
|
<svg class="spinner" width="20" height="20" viewBox="0 0 50 50" style="animation: rotate 2s linear infinite;">
|
|
<circle cx="25" cy="25" r="20" fill="none" stroke="var(--accent)" stroke-width="5" stroke-dasharray="90,150" stroke-dashoffset="0" style="stroke-linecap: round;"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-form">
|
|
<table class="admin-users-table responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Activity</th>
|
|
<th>Date</th>
|
|
<th>Age</th>
|
|
<th>Status</th>
|
|
<th style="text-align: right;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="user-table-body">
|
|
@include(admin/users_list)
|
|
</tbody>
|
|
</table>
|
|
<div id="loading-trigger" style="height: 20px; margin-top: 10px;"></div>
|
|
<div id="no-users-msg" style="display: {{ users.length === 0 ? 'block' : 'none' }}; padding: 40px; text-align: center; color: #666;">
|
|
No users matched your search.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function updateUI(id, data, action) {
|
|
var rowId = id ? id : ('ghost-' + data.username);
|
|
var statusCell = document.getElementById('status-cell-' + rowId);
|
|
var actionsDiv = document.getElementById('actions-' + rowId);
|
|
if (!statusCell || !actionsDiv) return console.error('UI elements not found for ID', rowId);
|
|
|
|
if (action === 'activate') {
|
|
statusCell.innerHTML = '<span class="status-badge status-active">Active</span>';
|
|
var verifyBtn = actionsDiv.querySelector('.btn-verify');
|
|
if (verifyBtn) verifyBtn.remove();
|
|
} else if (action === 'ban') {
|
|
statusCell.innerHTML = '<span class="status-badge status-banned">Banned</span>';
|
|
var banBtn = actionsDiv.querySelector('.btn-ban');
|
|
if (banBtn) {
|
|
banBtn.textContent = 'Unban';
|
|
banBtn.className = 'btn-modern btn-unban';
|
|
// We re-bind the onclick via HTML because simple assignment doesn't preserve the 'this' context in the same way with these handlers
|
|
}
|
|
var verifyBtn = actionsDiv.querySelector('.btn-verify');
|
|
if (verifyBtn) verifyBtn.remove();
|
|
} else if (action === 'unban') {
|
|
statusCell.innerHTML = '<span class="status-badge status-active">Active</span>';
|
|
var unbanBtn = actionsDiv.querySelector('.btn-unban');
|
|
if (unbanBtn) {
|
|
unbanBtn.textContent = 'Ban';
|
|
unbanBtn.className = 'btn-modern btn-ban';
|
|
}
|
|
}
|
|
}
|
|
|
|
async function activateUser(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
|
|
ModAction.confirm('Verify User', 'Manually verify account for <strong>' + escHTML(userName) + '</strong>?', async () => {
|
|
var res = await fetch('/api/v2/admin/users/activate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash(data.msg, 'success');
|
|
updateUI(id, data, 'activate');
|
|
} else {
|
|
throw new Error(data.msg || 'Failed to verify user');
|
|
}
|
|
}, { hideReason: true });
|
|
}
|
|
|
|
async function banUser(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
|
|
ModAction.confirm('Ban User', 'Reason for banning <strong>' + escHTML(userName) + '</strong>?', async (reason) => {
|
|
var res = await fetch('/api/v2/admin/ban', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id, reason: reason, duration: 'permanent' })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash('User ' + escHTML(userName) + ' banned.', 'success');
|
|
updateUI(id, data, 'ban');
|
|
} else {
|
|
throw new Error(data.msg || 'Failed to ban user');
|
|
}
|
|
}, { hideReason: false, confirmText: 'Ban User' });
|
|
}
|
|
|
|
async function unbanUser(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
|
|
ModAction.confirm('Unban User', 'Unban account for <strong>' + escHTML(userName) + '</strong>?', async () => {
|
|
var res = await fetch('/api/v2/admin/unban', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash('User ' + escHTML(userName) + ' unbanned.', 'success');
|
|
updateUI(id, data, 'unban');
|
|
} else {
|
|
throw new Error(data.msg || 'Failed to unban user');
|
|
}
|
|
}, { hideReason: true });
|
|
}
|
|
|
|
async function deleteUploads(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
|
|
ModAction.confirm('Delete Uploads', 'Are you SURE you want to delete ALL uploads by <strong>' + escHTML(userName) + '</strong>? This cannot be undone.', async () => {
|
|
var res = await fetch('/api/v2/admin/users/bulk-delete-items', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id, username: btn.dataset.username })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash(data.msg, 'success');
|
|
} else {
|
|
throw new Error(data.msg || 'Deletion failed');
|
|
}
|
|
}, { hideReason: true, confirmText: 'Delete Everything' });
|
|
}
|
|
|
|
async function deleteComments(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
|
|
ModAction.confirm('Delete Comments', 'Are you SURE you want to delete ALL comments by <strong>' + escHTML(userName) + '</strong>? This will be permanent.', async () => {
|
|
var res = await fetch('/api/v2/admin/users/bulk-delete-comments', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id, username: btn.dataset.username })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash(data.msg, 'success');
|
|
} else {
|
|
throw new Error(data.msg || 'Deletion failed');
|
|
}
|
|
}, { hideReason: true, confirmText: 'Delete All Comments' });
|
|
}
|
|
|
|
async function adminSetDisplayName(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
var currentDisplay = btn.dataset.display || '';
|
|
|
|
var hint = currentDisplay
|
|
? 'Current nick: <strong style="color: var(--accent);">' + escHTML(currentDisplay) + '</strong><br>Enter a new stylized name, or leave empty to clear it.'
|
|
: 'Enter a stylized display name for <strong>' + escHTML(userName) + '</strong>. Leave empty to clear.';
|
|
|
|
ModAction.confirm('Set Display Name', hint, async (newName) => {
|
|
var res = await fetch('/api/v2/admin/users/set-display-name', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id, display_name: newName || '' })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash(data.msg || 'Display name updated.', 'success');
|
|
// Update button data attribute for next edit
|
|
btn.dataset.display = data.display_name || '';
|
|
// Refresh the row name link in the table
|
|
var rowId = 'user-row-' + id;
|
|
var row = document.getElementById(rowId);
|
|
if (row) {
|
|
var link = row.querySelector('.user-info-cell a');
|
|
if (link && data.display_name) {
|
|
link.innerHTML = '<span style="color: var(--accent);">' + escHTML(data.display_name) + '</span> <span style="font-size: 0.75em; color: #666;">(' + escHTML(userName) + ')</span>';
|
|
} else if (link) {
|
|
link.textContent = userName;
|
|
}
|
|
}
|
|
} else {
|
|
throw new Error(data.msg || 'Failed to set display name');
|
|
}
|
|
}, { hideReason: false, singleLine: true, allowEmpty: true, confirmText: 'Set Nick', placeholder: currentDisplay || 'Set nickname' });
|
|
}
|
|
|
|
async function adminLockLayout(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
var isLocked = btn.dataset.locked === '1';
|
|
var currentMode = btn.dataset.mode || '0';
|
|
|
|
if (isLocked) {
|
|
ModAction.confirm('Unlock Layout', 'Unlock comment layout for <strong>' + escHTML(userName) + '</strong>? They will be able to change it again.', async () => {
|
|
var res = await fetch('/api/v2/admin/users/lock-layout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id, lock: false })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash('Layout unlocked for ' + escHTML(userName), 'success');
|
|
btn.dataset.locked = '0';
|
|
btn.innerHTML = '<i class="fa fa-lock"></i> Lock';
|
|
btn.title = 'Lock Layout';
|
|
} else {
|
|
throw new Error(data.msg || 'Failed to unlock layout');
|
|
}
|
|
}, { hideReason: true });
|
|
} else {
|
|
var hint = 'Select comment display mode to force for <strong>' + escHTML(userName) + '</strong>:<br><br>' +
|
|
'<select id="force-mode-select" class="input" style="width: 100%; padding: 8px;">' +
|
|
'<option value="0" ' + (currentMode == '0' ? 'selected' : '') + '>Tree</option>' +
|
|
'<option value="1" ' + (currentMode == '1' ? 'selected' : '') + '>Linear</option>' +
|
|
'</select>';
|
|
|
|
ModAction.confirm('Lock Layout', hint, async () => {
|
|
var mode = document.getElementById('force-mode-select').value;
|
|
var res = await fetch('/api/v2/admin/users/lock-layout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: id, lock: true, mode: mode })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash('Layout locked to ' + (mode == '0' ? 'Tree' : 'Linear') + ' for ' + escHTML(userName), 'success');
|
|
btn.dataset.locked = '1';
|
|
btn.dataset.mode = mode;
|
|
btn.innerHTML = '<i class="fa fa-lock-open"></i> Unlock';
|
|
btn.title = 'Unlock Layout';
|
|
} else {
|
|
throw new Error(data.msg || 'Failed to lock layout');
|
|
}
|
|
}, { hideReason: true, confirmText: 'Lock & Apply' });
|
|
}
|
|
}
|
|
|
|
var currentPage = {!! page !!};
|
|
var hasMore = {!! hasMore ? 'true' : 'false' !!};
|
|
var isLoading = false;
|
|
var searchQuery = '{{ q }}';
|
|
|
|
var searchInput = document.getElementById('user-search');
|
|
var tableBody = document.getElementById('user-table-body');
|
|
var loadingTrigger = document.getElementById('loading-trigger');
|
|
var noUsersMsg = document.getElementById('no-users-msg');
|
|
var spinner = document.getElementById('search-spinner');
|
|
var countSpan = document.getElementById('total-count');
|
|
|
|
async function fetchUsers(page, q, append) {
|
|
if (isLoading) return;
|
|
isLoading = true;
|
|
if (!append) spinner.style.display = 'block';
|
|
|
|
try {
|
|
var url = '/admin/users?page=' + page + '&q=' + encodeURIComponent(q);
|
|
var res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
|
|
|
|
// Update state from headers
|
|
var total = res.headers.get('X-Total-Count');
|
|
var hasMoreHeader = res.headers.get('X-Has-More');
|
|
|
|
if (total !== null) countSpan.textContent = total;
|
|
if (hasMoreHeader !== null) hasMore = (hasMoreHeader === 'true');
|
|
|
|
var html = await res.text();
|
|
|
|
if (append) {
|
|
tableBody.insertAdjacentHTML('beforeend', html);
|
|
} else {
|
|
tableBody.innerHTML = html;
|
|
}
|
|
|
|
noUsersMsg.style.display = (tableBody.children.length === 0) ? 'block' : 'none';
|
|
} catch (e) {
|
|
console.error('Fetch failed', e);
|
|
} finally {
|
|
isLoading = false;
|
|
spinner.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Search Input Handling (Debounced)
|
|
var searchTimeout;
|
|
searchInput.addEventListener('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(function() {
|
|
searchQuery = searchInput.value;
|
|
currentPage = 1;
|
|
fetchUsers(1, searchQuery, false);
|
|
}, 300);
|
|
});
|
|
|
|
// Infinite Scroll
|
|
var observer = new IntersectionObserver(function(entries) {
|
|
if (entries[0].isIntersecting && hasMore && !isLoading) {
|
|
currentPage++;
|
|
fetchUsers(currentPage, searchQuery, true);
|
|
}
|
|
}, { threshold: 0.1 });
|
|
observer.observe(loadingTrigger);
|
|
|
|
// Styling for spinner
|
|
var style = document.createElement('style');
|
|
style.innerHTML = '@keyframes rotate { 100% { transform: rotate(360deg); } }';
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
@include(snippets/footer)
|