Add super admin panel and update README
- Admin account bootstrapped from ADMIN_EMAIL/ADMIN_PASSWORD env vars on startup - Admin panel: list users, view content, reset passwords, disable/delete accounts - is_admin and is_disabled columns on users table - Disabled accounts blocked at login - README updated with admin setup instructions and panel docs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -32,8 +32,9 @@ const Auth = (() => {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('sproutly_token', data.access_token);
|
||||
localStorage.setItem('sproutly_user', email);
|
||||
showApp();
|
||||
initApp();
|
||||
const user = await apiFetch('/auth/me');
|
||||
showApp(user);
|
||||
initApp(user);
|
||||
} catch (e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.classList.remove('hidden');
|
||||
@@ -71,8 +72,9 @@ const Auth = (() => {
|
||||
const data = await loginRes.json();
|
||||
localStorage.setItem('sproutly_token', data.access_token);
|
||||
localStorage.setItem('sproutly_user', email);
|
||||
showApp();
|
||||
initApp();
|
||||
const user = await apiFetch('/auth/me');
|
||||
showApp(user);
|
||||
initApp(user);
|
||||
} catch (e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.classList.remove('hidden');
|
||||
@@ -90,10 +92,10 @@ const Auth = (() => {
|
||||
return { showTab, submit, submitRegister, logout };
|
||||
})();
|
||||
|
||||
function showApp() {
|
||||
function showApp(user) {
|
||||
document.getElementById('auth-screen').classList.add('hidden');
|
||||
document.getElementById('app-shell').classList.remove('hidden');
|
||||
const email = localStorage.getItem('sproutly_user') || '';
|
||||
const email = (user?.email) || localStorage.getItem('sproutly_user') || '';
|
||||
document.getElementById('sidebar-user').textContent = email;
|
||||
}
|
||||
|
||||
@@ -197,6 +199,7 @@ function navigate(page) {
|
||||
if (page === 'varieties') loadVarieties();
|
||||
if (page === 'garden') loadGarden();
|
||||
if (page === 'settings') loadSettings();
|
||||
if (page === 'admin') loadAdmin();
|
||||
}
|
||||
|
||||
// ===== Dashboard =====
|
||||
@@ -890,14 +893,183 @@ async function deleteBatch(id) {
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Admin =====
|
||||
async function loadAdmin() {
|
||||
const container = document.getElementById('admin-users-container');
|
||||
try {
|
||||
const users = await api.get('/admin/users');
|
||||
if (!users.length) {
|
||||
container.innerHTML = '<div class="empty-state">No users found.</div>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = `
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th>Joined</th>
|
||||
<th>Varieties</th>
|
||||
<th>Batches</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${users.map(u => `
|
||||
<tr id="admin-row-${u.id}">
|
||||
<td><span class="admin-email">${esc(u.email)}</span>${u.is_admin ? ' <span class="badge-admin">admin</span>' : ''}</td>
|
||||
<td class="admin-date">${fmt(u.created_at)}</td>
|
||||
<td class="admin-num">${u.variety_count}</td>
|
||||
<td class="admin-num">${u.batch_count}</td>
|
||||
<td><span class="status-pill ${u.is_disabled ? 'disabled' : 'active'}">${u.is_disabled ? 'Disabled' : 'Active'}</span></td>
|
||||
<td class="admin-actions">
|
||||
<button class="btn btn-xs btn-secondary" onclick="App.adminViewUser(${u.id}, '${esc(u.email)}')">View</button>
|
||||
<button class="btn btn-xs btn-secondary" onclick="App.adminResetPassword(${u.id}, '${esc(u.email)}')">Reset PW</button>
|
||||
${!u.is_admin ? `<button class="btn btn-xs ${u.is_disabled ? 'btn-secondary' : 'btn-warn'}" onclick="App.adminToggleDisable(${u.id}, ${u.is_disabled})">${u.is_disabled ? 'Enable' : 'Disable'}</button>` : ''}
|
||||
${!u.is_admin ? `<button class="btn btn-xs btn-danger" onclick="App.adminDeleteUser(${u.id}, '${esc(u.email)}')">Delete</button>` : ''}
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
} catch (e) {
|
||||
container.innerHTML = `<div class="empty-state">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function adminViewUser(id, email) {
|
||||
document.getElementById('modal-title').textContent = `User: ${email}`;
|
||||
document.getElementById('modal-body').innerHTML = '<div class="empty-state">Loading...</div>';
|
||||
document.getElementById('modal-overlay').classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const [varieties, batches] = await Promise.all([
|
||||
api.get(`/admin/users/${id}/varieties`),
|
||||
api.get(`/admin/users/${id}/batches`),
|
||||
]);
|
||||
|
||||
document.getElementById('modal-body').innerHTML = `
|
||||
<div class="admin-view-tabs">
|
||||
<button class="admin-view-tab active" onclick="App.adminSwitchTab(this, 'av-varieties')">Varieties (${varieties.length})</button>
|
||||
<button class="admin-view-tab" onclick="App.adminSwitchTab(this, 'av-batches')">Batches (${batches.length})</button>
|
||||
</div>
|
||||
<div id="av-varieties" class="admin-view-panel">
|
||||
${varieties.length ? `
|
||||
<table class="admin-table">
|
||||
<thead><tr><th>Name</th><th>Category</th><th>Start wks</th><th>Garden wks</th></tr></thead>
|
||||
<tbody>${varieties.map(v => `
|
||||
<tr>
|
||||
<td><span class="variety-dot" style="background:${v.color}"></span>${esc(v.name)}${v.variety_name ? ` <em>${esc(v.variety_name)}</em>` : ''}</td>
|
||||
<td>${v.category}</td>
|
||||
<td>${v.weeks_to_start ?? '—'}</td>
|
||||
<td>${v.weeks_to_garden ?? '—'}</td>
|
||||
</tr>`).join('')}
|
||||
</tbody>
|
||||
</table>` : '<div class="empty-state">No varieties.</div>'}
|
||||
</div>
|
||||
<div id="av-batches" class="admin-view-panel hidden">
|
||||
${batches.length ? `
|
||||
<table class="admin-table">
|
||||
<thead><tr><th>Plant</th><th>Label</th><th>Status</th><th>Sown</th></tr></thead>
|
||||
<tbody>${batches.map(b => `
|
||||
<tr>
|
||||
<td>${esc(b.variety?.name || '—')}</td>
|
||||
<td>${esc(b.label || '—')}</td>
|
||||
<td>${statusLabel(b.status)}</td>
|
||||
<td>${fmt(b.sow_date)}</td>
|
||||
</tr>`).join('')}
|
||||
</tbody>
|
||||
</table>` : '<div class="empty-state">No batches.</div>'}
|
||||
</div>
|
||||
`;
|
||||
} catch (e) {
|
||||
document.getElementById('modal-body').innerHTML = `<div class="empty-state">Error: ${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function adminSwitchTab(btn, panelId) {
|
||||
document.querySelectorAll('.admin-view-tab').forEach(b => b.classList.remove('active'));
|
||||
document.querySelectorAll('.admin-view-panel').forEach(p => p.classList.add('hidden'));
|
||||
btn.classList.add('active');
|
||||
document.getElementById(panelId).classList.remove('hidden');
|
||||
}
|
||||
|
||||
function adminResetPassword(id, email) {
|
||||
document.getElementById('modal-title').textContent = `Reset Password: ${email}`;
|
||||
document.getElementById('modal-body').innerHTML = `
|
||||
<div class="form-group">
|
||||
<label class="form-label">New Password</label>
|
||||
<input type="password" id="admin-new-pw" class="form-input" placeholder="At least 8 characters"
|
||||
onkeydown="if(event.key==='Enter') App.adminSubmitReset(${id})" />
|
||||
</div>
|
||||
<div id="admin-pw-error" class="auth-msg error hidden"></div>
|
||||
<div class="btn-row" style="margin-top:1rem">
|
||||
<button class="btn btn-primary" onclick="App.adminSubmitReset(${id})">Reset Password</button>
|
||||
<button class="btn btn-secondary" onclick="App.closeModal()">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('modal-overlay').classList.remove('hidden');
|
||||
setTimeout(() => document.getElementById('admin-new-pw')?.focus(), 50);
|
||||
}
|
||||
|
||||
async function adminSubmitReset(id) {
|
||||
const pw = document.getElementById('admin-new-pw').value;
|
||||
const errEl = document.getElementById('admin-pw-error');
|
||||
if (pw.length < 8) {
|
||||
errEl.textContent = 'Password must be at least 8 characters';
|
||||
errEl.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await api.post(`/admin/users/${id}/reset-password`, { new_password: pw });
|
||||
closeModal();
|
||||
toast('Password reset successfully');
|
||||
} catch (e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async function adminToggleDisable(id, currentlyDisabled) {
|
||||
try {
|
||||
const result = await api.post(`/admin/users/${id}/disable`, {});
|
||||
toast(result.is_disabled ? 'Account disabled' : 'Account enabled');
|
||||
loadAdmin();
|
||||
} catch (e) {
|
||||
toast('Error: ' + e.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
async function adminDeleteUser(id, email) {
|
||||
if (!confirm(`Permanently delete account "${email}" and all their data?\n\nThis cannot be undone.`)) return;
|
||||
try {
|
||||
await api.delete(`/admin/users/${id}`);
|
||||
toast('User deleted');
|
||||
loadAdmin();
|
||||
} catch (e) {
|
||||
toast('Error: ' + e.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Init =====
|
||||
function initApp() {
|
||||
function initApp(user) {
|
||||
document.getElementById('sidebar-date').textContent =
|
||||
new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
|
||||
// Show admin nav if user is admin
|
||||
document.querySelectorAll('.admin-only').forEach(el => {
|
||||
el.classList.toggle('hidden', !user?.is_admin);
|
||||
});
|
||||
|
||||
const validPages = ['dashboard', 'varieties', 'garden', 'settings'];
|
||||
if (user?.is_admin) validPages.push('admin');
|
||||
|
||||
function handleNav() {
|
||||
const page = (location.hash.replace('#','') || 'dashboard');
|
||||
navigate(['dashboard','varieties','garden','settings'].includes(page) ? page : 'dashboard');
|
||||
navigate(validPages.includes(page) ? page : 'dashboard');
|
||||
}
|
||||
window.removeEventListener('hashchange', handleNav);
|
||||
window.addEventListener('hashchange', handleNav);
|
||||
@@ -908,9 +1080,9 @@ async function init() {
|
||||
const token = localStorage.getItem('sproutly_token');
|
||||
if (!token) return; // auth screen is visible by default
|
||||
try {
|
||||
await apiFetch('/auth/me');
|
||||
showApp();
|
||||
initApp();
|
||||
const user = await apiFetch('/auth/me');
|
||||
showApp(user);
|
||||
initApp(user);
|
||||
} catch (e) {
|
||||
// token invalid — auth screen stays visible
|
||||
}
|
||||
@@ -922,6 +1094,7 @@ window.App = {
|
||||
showAddBatchModal, showEditBatchModal, submitAddBatch, submitEditBatch, deleteBatch,
|
||||
filterVarieties, filterBatches,
|
||||
saveSettings, toggleNtfyAuth, sendTestNotification, sendDailySummary,
|
||||
adminViewUser, adminResetPassword, adminSubmitReset, adminToggleDisable, adminDeleteUser, adminSwitchTab,
|
||||
closeModal: (e) => closeModal(e),
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user