934 lines
41 KiB
HTML
934 lines
41 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; }
|
|
.btn-create { background: linear-gradient(135deg, #5c7cfa, #339af0); }
|
|
.btn-role { background: rgba(180, 100, 255, 0.15); color: #c084fc; border: 1px solid rgba(180, 100, 255, 0.3); }
|
|
.btn-role:hover { background: rgba(180, 100, 255, 0.25); opacity: 1; }
|
|
|
|
.legacy-filter-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 0 14px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
color: #aaa;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
transition: all 0.2s ease;
|
|
height: 42px;
|
|
box-sizing: border-box;
|
|
}
|
|
.legacy-filter-btn:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
}
|
|
.legacy-filter-btn.active {
|
|
background: rgba(var(--accent-rgb, 0, 150, 255), 0.15);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.legacy-filter-btn input {
|
|
cursor: pointer;
|
|
accent-color: var(--accent);
|
|
width: 15px;
|
|
height: 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
.admin-select-filter {
|
|
padding: 0 14px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
color: #ccc;
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
height: 42px;
|
|
box-sizing: border-box;
|
|
}
|
|
.admin-select-filter:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
}
|
|
.admin-select-filter:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
.admin-select-filter.active {
|
|
background: rgba(var(--accent-rgb, 0, 150, 255), 0.15);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
.admin-select-filter option {
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
}
|
|
.admin-select-filter:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-filter-reset {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: #aaa;
|
|
padding: 0 14px;
|
|
height: 42px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-filter-reset:hover {
|
|
background: rgba(255, 60, 60, 0.15);
|
|
border-color: rgba(255, 60, 60, 0.3);
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
/* Create User Modal */
|
|
#create-user-modal {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0,0,0,0.7);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
#create-user-modal.open { display: flex; }
|
|
.cum-box {
|
|
background: #141414;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
width: 100%;
|
|
max-width: 460px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
|
|
position: relative;
|
|
animation: cum-in 0.2s ease;
|
|
}
|
|
@keyframes cum-in {
|
|
from { transform: translateY(-16px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
.cum-box h3 {
|
|
margin: 0 0 20px;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--white);
|
|
}
|
|
.cum-field {
|
|
margin-bottom: 14px;
|
|
}
|
|
.cum-field label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.cum-field input,
|
|
.cum-field select {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
font-size: 0.9rem;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
.cum-field input:focus,
|
|
.cum-field select:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
.cum-field select option { background: #1a1a1a; }
|
|
.cum-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
justify-content: flex-end;
|
|
}
|
|
.cum-close-btn {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: none;
|
|
border: none;
|
|
color: #666;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
transition: color 0.2s;
|
|
}
|
|
.cum-close-btn:hover { color: #fff; }
|
|
#cum-error {
|
|
font-size: 0.8rem;
|
|
color: #ff6b6b;
|
|
margin-top: 12px;
|
|
display: none;
|
|
}
|
|
|
|
.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>
|
|
|
|
<!-- Create User Modal -->
|
|
<div id="create-user-modal">
|
|
<div class="cum-box">
|
|
<button class="cum-close-btn" onclick="closeCreateUserModal()" title="Close">×</button>
|
|
<h3><i class="fa fa-user-plus" style="margin-right: 8px; color: var(--accent);"></i>Create New User</h3>
|
|
|
|
<div class="cum-field">
|
|
<label for="cum-username">Username <span style="color:#e03131">*</span></label>
|
|
<input type="text" id="cum-username" placeholder="e.g. john_doe" autocomplete="off">
|
|
</div>
|
|
<div class="cum-field">
|
|
<label for="cum-email">Email <span style="color:#666">(optional)</span></label>
|
|
<input type="email" id="cum-email" placeholder="user@example.com" autocomplete="off">
|
|
</div>
|
|
<div class="cum-field">
|
|
<label for="cum-password">Password <span style="color:#e03131">*</span> <span style="color:#666;font-size:0.7rem">(min 20 chars)</span></label>
|
|
<input type="password" id="cum-password" placeholder="Strong password…" autocomplete="new-password">
|
|
</div>
|
|
<div class="cum-field">
|
|
<label for="cum-role">Role</label>
|
|
<select id="cum-role">
|
|
<option value="user">User</option>
|
|
<option value="mod">Moderator</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="cum-error"></div>
|
|
|
|
<div class="cum-actions">
|
|
<button class="btn-modern" style="background:#333;" onclick="closeCreateUserModal()">Cancel</button>
|
|
<button class="btn-modern btn-create" id="cum-submit-btn" onclick="submitCreateUser()">
|
|
<i class="fa fa-plus"></i> Create User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 0 15px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; 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> <span id="total-label">{{ totalLabel }}</span>.</p>
|
|
</div>
|
|
<div>
|
|
<button class="btn-modern btn-create" onclick="openCreateUserModal()" style="padding: 11px 18px; font-size: 0.85rem; white-space: nowrap; height: 42px;" title="Create new user">
|
|
<i class="fa fa-user-plus"></i> Create User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter & Search Toolbar -->
|
|
<div style="display: flex; gap: 10px; align-items: center; margin-bottom: 25px; flex-wrap: wrap;">
|
|
<div style="flex-grow: 1; min-width: 240px; position: relative;">
|
|
<input type="text" id="user-search" placeholder='Search by name or email… use "exact" for exact match'
|
|
style="width: 100%; height: 42px; padding: 0 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; box-sizing: border-box;"
|
|
value="{{ q }}">
|
|
<div id="search-spinner" style="position: absolute; right: 15px; top: 11px; 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>
|
|
|
|
<!-- Status Filter -->
|
|
<select id="status-filter" class="admin-select-filter {{ status ? 'active' : '' }}" {{ onlyLegacy ? 'disabled' : '' }} title="Filter by account status">
|
|
<option value="">All Statuses</option>
|
|
<option value="banned" {{ status === 'banned' ? 'selected' : '' }}>⛔ Banned</option>
|
|
<option value="active" {{ status === 'active' ? 'selected' : '' }}>🟢 Active</option>
|
|
<option value="pending" {{ status === 'pending' ? 'selected' : '' }}>⏳ Pending</option>
|
|
</select>
|
|
|
|
<!-- Role Filter -->
|
|
<select id="role-filter" class="admin-select-filter {{ role ? 'active' : '' }}" {{ onlyLegacy ? 'disabled' : '' }} title="Filter by user role">
|
|
<option value="">All Roles</option>
|
|
<option value="staff" {{ role === 'staff' ? 'selected' : '' }}>🛡️ Staff (All)</option>
|
|
<option value="admin" {{ role === 'admin' ? 'selected' : '' }}>⚡ Admins</option>
|
|
<option value="mod" {{ role === 'mod' ? 'selected' : '' }}>🗡️ Moderators</option>
|
|
<option value="user" {{ role === 'user' ? 'selected' : '' }}>👤 Regular Users</option>
|
|
</select>
|
|
|
|
<!-- Legacy Only Toggle -->
|
|
<label id="legacy-filter-label" class="legacy-filter-btn {{ onlyLegacy ? 'active' : '' }}" title="Toggle to only show legacy ghost users">
|
|
<input type="checkbox" id="legacy-filter" {{ onlyLegacy ? 'checked' : '' }}>
|
|
<span><i class="fa fa-ghost" style="opacity: 0.8; margin-right: 4px;"></i>Only legacy</span>
|
|
</label>
|
|
|
|
<!-- Reset Filters Button -->
|
|
<button id="reset-filters-btn" class="btn-filter-reset" style="display: {{ (q || status || role || onlyLegacy) ? 'inline-flex' : 'none' }};" title="Reset all filters and search">
|
|
<i class="fa fa-rotate-left"></i> Reset
|
|
</button>
|
|
</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;">
|
|
{{ emptyMsg }}
|
|
</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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
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 onlyLegacy = {!! onlyLegacy ? 'true' : 'false' !!};
|
|
var currentStatus = '{{ status }}';
|
|
var currentRole = '{{ role }}';
|
|
|
|
var searchInput = document.getElementById('user-search');
|
|
var statusFilter = document.getElementById('status-filter');
|
|
var roleFilter = document.getElementById('role-filter');
|
|
var legacyFilter = document.getElementById('legacy-filter');
|
|
var legacyFilterLabel = document.getElementById('legacy-filter-label');
|
|
var resetFiltersBtn = document.getElementById('reset-filters-btn');
|
|
var totalLabel = document.getElementById('total-label');
|
|
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');
|
|
|
|
function updateUrlAndControls() {
|
|
var urlParams = new URLSearchParams();
|
|
if (searchQuery) urlParams.set('q', searchQuery);
|
|
if (onlyLegacy) {
|
|
urlParams.set('legacy', '1');
|
|
} else {
|
|
if (currentStatus) urlParams.set('status', currentStatus);
|
|
if (currentRole) urlParams.set('role', currentRole);
|
|
}
|
|
var newUrl = window.location.pathname + (urlParams.toString() ? ('?' + urlParams.toString()) : '');
|
|
window.history.replaceState({}, '', newUrl);
|
|
|
|
// Update reset button
|
|
var hasFilter = !!(searchQuery || onlyLegacy || currentStatus || currentRole);
|
|
if (resetFiltersBtn) resetFiltersBtn.style.display = hasFilter ? 'inline-flex' : 'none';
|
|
|
|
// Update control states
|
|
if (statusFilter) {
|
|
statusFilter.disabled = onlyLegacy;
|
|
statusFilter.classList.toggle('active', !!currentStatus && !onlyLegacy);
|
|
}
|
|
if (roleFilter) {
|
|
roleFilter.disabled = onlyLegacy;
|
|
roleFilter.classList.toggle('active', !!currentRole && !onlyLegacy);
|
|
}
|
|
if (legacyFilterLabel) {
|
|
legacyFilterLabel.classList.toggle('active', onlyLegacy);
|
|
}
|
|
}
|
|
|
|
async function fetchUsers(page, q, append) {
|
|
if (isLoading) return;
|
|
isLoading = true;
|
|
if (!append) spinner.style.display = 'block';
|
|
|
|
try {
|
|
var params = new URLSearchParams();
|
|
params.set('page', page);
|
|
if (q) params.set('q', q);
|
|
if (onlyLegacy) {
|
|
params.set('legacy', '1');
|
|
} else {
|
|
if (currentStatus) params.set('status', currentStatus);
|
|
if (currentRole) params.set('role', currentRole);
|
|
}
|
|
|
|
var url = '/admin/users?' + params.toString();
|
|
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');
|
|
var totalLabelHeader = res.headers.get('X-Total-Label');
|
|
var emptyMsgHeader = res.headers.get('X-Empty-Msg');
|
|
|
|
if (total !== null) countSpan.textContent = total;
|
|
if (totalLabelHeader && totalLabel) totalLabel.textContent = totalLabelHeader;
|
|
if (emptyMsgHeader && noUsersMsg) noUsersMsg.textContent = emptyMsgHeader;
|
|
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.trim();
|
|
currentPage = 1;
|
|
updateUrlAndControls();
|
|
fetchUsers(1, searchQuery, false);
|
|
}, 300);
|
|
});
|
|
|
|
// Status Filter Handling
|
|
if (statusFilter) {
|
|
statusFilter.addEventListener('change', function() {
|
|
currentStatus = this.value;
|
|
if (currentStatus && onlyLegacy) {
|
|
onlyLegacy = false;
|
|
if (legacyFilter) legacyFilter.checked = false;
|
|
}
|
|
updateUrlAndControls();
|
|
currentPage = 1;
|
|
fetchUsers(1, searchQuery, false);
|
|
});
|
|
}
|
|
|
|
// Role Filter Handling
|
|
if (roleFilter) {
|
|
roleFilter.addEventListener('change', function() {
|
|
currentRole = this.value;
|
|
if (currentRole && onlyLegacy) {
|
|
onlyLegacy = false;
|
|
if (legacyFilter) legacyFilter.checked = false;
|
|
}
|
|
updateUrlAndControls();
|
|
currentPage = 1;
|
|
fetchUsers(1, searchQuery, false);
|
|
});
|
|
}
|
|
|
|
// Legacy Only Filter Handling
|
|
if (legacyFilter) {
|
|
legacyFilter.addEventListener('change', function() {
|
|
onlyLegacy = this.checked;
|
|
if (onlyLegacy) {
|
|
currentStatus = '';
|
|
currentRole = '';
|
|
if (statusFilter) statusFilter.value = '';
|
|
if (roleFilter) roleFilter.value = '';
|
|
}
|
|
updateUrlAndControls();
|
|
currentPage = 1;
|
|
fetchUsers(1, searchQuery, false);
|
|
});
|
|
}
|
|
|
|
// Reset All Filters
|
|
if (resetFiltersBtn) {
|
|
resetFiltersBtn.addEventListener('click', function() {
|
|
searchQuery = '';
|
|
searchInput.value = '';
|
|
onlyLegacy = false;
|
|
currentStatus = '';
|
|
currentRole = '';
|
|
if (legacyFilter) legacyFilter.checked = false;
|
|
if (statusFilter) statusFilter.value = '';
|
|
if (roleFilter) roleFilter.value = '';
|
|
updateUrlAndControls();
|
|
currentPage = 1;
|
|
fetchUsers(1, '', false);
|
|
});
|
|
}
|
|
|
|
// 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);
|
|
|
|
// --- Create User Modal ---
|
|
var createUserModal = document.getElementById('create-user-modal');
|
|
|
|
function openCreateUserModal() {
|
|
document.getElementById('cum-username').value = '';
|
|
document.getElementById('cum-email').value = '';
|
|
document.getElementById('cum-password').value = '';
|
|
document.getElementById('cum-role').value = 'user';
|
|
document.getElementById('cum-error').style.display = 'none';
|
|
document.getElementById('cum-error').textContent = '';
|
|
createUserModal.classList.add('open');
|
|
setTimeout(function() { document.getElementById('cum-username').focus(); }, 80);
|
|
}
|
|
|
|
function closeCreateUserModal() {
|
|
createUserModal.classList.remove('open');
|
|
}
|
|
|
|
// Close on backdrop click
|
|
createUserModal.addEventListener('click', function(e) {
|
|
if (e.target === createUserModal) closeCreateUserModal();
|
|
});
|
|
|
|
// Close on Escape
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && createUserModal.classList.contains('open')) closeCreateUserModal();
|
|
});
|
|
|
|
async function submitCreateUser() {
|
|
var btn = document.getElementById('cum-submit-btn');
|
|
var errEl = document.getElementById('cum-error');
|
|
var username = document.getElementById('cum-username').value.trim();
|
|
var email = document.getElementById('cum-email').value.trim();
|
|
var password = document.getElementById('cum-password').value;
|
|
var role = document.getElementById('cum-role').value;
|
|
|
|
errEl.style.display = 'none';
|
|
errEl.textContent = '';
|
|
|
|
if (!username) { errEl.textContent = 'Username is required.'; errEl.style.display = 'block'; return; }
|
|
if (!password) { errEl.textContent = 'Password is required.'; errEl.style.display = 'block'; return; }
|
|
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Creating…';
|
|
|
|
try {
|
|
var res = await fetch('/api/v2/admin/users/create', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
body: JSON.stringify({ username, email: email || null, password, role })
|
|
});
|
|
var data = await res.json();
|
|
|
|
if (data.success) {
|
|
closeCreateUserModal();
|
|
showFlash(data.msg, 'success');
|
|
// If we were filtering by legacy or banned, reset filter so admin can see newly created user
|
|
if (onlyLegacy || currentStatus === 'banned') {
|
|
onlyLegacy = false;
|
|
currentStatus = '';
|
|
if (legacyFilter) legacyFilter.checked = false;
|
|
if (statusFilter) statusFilter.value = '';
|
|
updateUrlAndControls();
|
|
}
|
|
// Refresh the table from page 1
|
|
currentPage = 1;
|
|
fetchUsers(1, searchQuery, false);
|
|
// Update counter
|
|
var cnt = parseInt(countSpan.textContent) || 0;
|
|
countSpan.textContent = cnt + 1;
|
|
} else {
|
|
errEl.textContent = data.msg || 'Failed to create user.';
|
|
errEl.style.display = 'block';
|
|
}
|
|
} catch (e) {
|
|
errEl.textContent = 'Network error: ' + e.message;
|
|
errEl.style.display = 'block';
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="fa fa-plus"></i> Create User';
|
|
}
|
|
}
|
|
async function adminSetRole(btn) {
|
|
var id = btn.dataset.id;
|
|
var userName = btn.dataset.name;
|
|
var currentRole = btn.dataset.role || 'user';
|
|
|
|
var hint = 'Select the new role for <strong>' + escHTML(userName) + '</strong>:<br><br>' +
|
|
'<select id="set-role-select" class="input" style="width: 100%; padding: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; color: #fff;">' +
|
|
'<option value="user"' + (currentRole === 'user' ? ' selected' : '') + '>User (no special permissions)</option>' +
|
|
'<option value="mod"' + (currentRole === 'mod' ? ' selected' : '') + '>Moderator</option>' +
|
|
'<option value="admin"' + (currentRole === 'admin' ? ' selected' : '') + '>Admin (full access)</option>' +
|
|
'</select>';
|
|
|
|
ModAction.confirm('Set Role', hint, async () => {
|
|
// Use querySelector as fallback since Sanitizer may strip the id attribute
|
|
var selectEl = document.getElementById('set-role-select') ||
|
|
document.querySelector('#mod-action-content select');
|
|
if (!selectEl) throw new Error('Role selector not found in modal.');
|
|
var role = selectEl.value;
|
|
var res = await fetch('/api/v2/admin/users/set-role', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
|
|
body: JSON.stringify({ user_id: id, role })
|
|
});
|
|
var data = await res.json();
|
|
if (data.success) {
|
|
showFlash(data.msg, 'success');
|
|
// Update button state in place
|
|
btn.dataset.role = role;
|
|
var labelMap = { user: 'User', mod: 'Mod', admin: 'Admin' };
|
|
var labelEl = document.querySelector('.role-label-' + id);
|
|
if (labelEl) labelEl.textContent = labelMap[role] || role;
|
|
} else {
|
|
throw new Error(data.msg || 'Failed to set role');
|
|
}
|
|
}, { hideReason: true, confirmText: 'Apply Role', unsafeContent: true });
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
@include(snippets/footer)
|