Initial Commit
This commit is contained in:
288
frontend/src/components/UserManagerModal.jsx
Normal file
288
frontend/src/components/UserManagerModal.jsx
Normal file
@@ -0,0 +1,288 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useAuth } from '../contexts/AuthContext.jsx';
|
||||
import { useToast } from '../contexts/ToastContext.jsx';
|
||||
import { api } from '../utils/api.js';
|
||||
import Avatar from './Avatar.jsx';
|
||||
import Papa from 'papaparse';
|
||||
|
||||
export default function UserManagerModal({ onClose }) {
|
||||
const { user: me } = useAuth();
|
||||
const toast = useToast();
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
const [tab, setTab] = useState('users'); // 'users' | 'create' | 'bulk'
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [form, setForm] = useState({ name: '', email: '', password: '', role: 'member' });
|
||||
const [bulkPreview, setBulkPreview] = useState([]);
|
||||
const [bulkLoading, setBulkLoading] = useState(false);
|
||||
const [resetingId, setResetingId] = useState(null);
|
||||
const [resetPw, setResetPw] = useState('');
|
||||
const fileRef = useRef(null);
|
||||
|
||||
const load = () => {
|
||||
api.getUsers().then(({ users }) => setUsers(users)).catch(() => {}).finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const filtered = users.filter(u =>
|
||||
!search || u.name?.toLowerCase().includes(search.toLowerCase()) || u.email?.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!form.name || !form.email || !form.password) return toast('All fields required', 'error');
|
||||
setCreating(true);
|
||||
try {
|
||||
await api.createUser(form);
|
||||
toast('User created', 'success');
|
||||
setForm({ name: '', email: '', password: '', role: 'member' });
|
||||
setTab('users');
|
||||
load();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCSV = (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
Papa.parse(file, {
|
||||
header: true,
|
||||
complete: ({ data }) => {
|
||||
const rows = data.filter(r => r.email).map(r => ({
|
||||
name: r.name || r.Name || '',
|
||||
email: r.email || r.Email || '',
|
||||
password: r.password || r.Password || 'TempPass@123',
|
||||
role: (r.role || r.Role || 'member').toLowerCase(),
|
||||
}));
|
||||
setBulkPreview(rows);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleBulkImport = async () => {
|
||||
if (!bulkPreview.length) return;
|
||||
setBulkLoading(true);
|
||||
try {
|
||||
const results = await api.bulkUsers(bulkPreview);
|
||||
toast(`Created: ${results.created.length}, Errors: ${results.errors.length}`, results.errors.length ? 'default' : 'success');
|
||||
setBulkPreview([]);
|
||||
setTab('users');
|
||||
load();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
} finally {
|
||||
setBulkLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRole = async (u, role) => {
|
||||
try {
|
||||
await api.updateRole(u.id, role);
|
||||
toast('Role updated', 'success');
|
||||
load();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetPw = async (uid) => {
|
||||
if (!resetPw || resetPw.length < 6) return toast('Enter a password (min 6 chars)', 'error');
|
||||
try {
|
||||
await api.resetPassword(uid, resetPw);
|
||||
toast('Password reset — user must change on next login', 'success');
|
||||
setResetingId(null);
|
||||
setResetPw('');
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSuspend = async (u) => {
|
||||
if (!confirm(`Suspend ${u.name}?`)) return;
|
||||
try { await api.suspendUser(u.id); toast('User suspended', 'success'); load(); }
|
||||
catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
const handleActivate = async (u) => {
|
||||
try { await api.activateUser(u.id); toast('User activated', 'success'); load(); }
|
||||
catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
const handleDelete = async (u) => {
|
||||
if (!confirm(`Delete ${u.name}? Their messages will remain but they cannot log in.`)) return;
|
||||
try { await api.deleteUser(u.id); toast('User deleted', 'success'); load(); }
|
||||
catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
|
||||
<div className="modal" style={{ maxWidth: 700 }}>
|
||||
<div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
|
||||
<h2 className="modal-title" style={{ margin: 0 }}>User Manager</h2>
|
||||
<button className="btn-icon" onClick={onClose}>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2" style={{ marginBottom: 20 }}>
|
||||
<button className={`btn btn-sm ${tab === 'users' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('users')}>
|
||||
All Users ({users.length})
|
||||
</button>
|
||||
<button className={`btn btn-sm ${tab === 'create' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('create')}>
|
||||
+ Create User
|
||||
</button>
|
||||
<button className={`btn btn-sm ${tab === 'bulk' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('bulk')}>
|
||||
Bulk Import CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Users list */}
|
||||
{tab === 'users' && (
|
||||
<>
|
||||
<input className="input" style={{ marginBottom: 12 }} placeholder="Search users..." value={search} onChange={e => setSearch(e.target.value)} />
|
||||
{loading ? (
|
||||
<div className="flex justify-center" style={{ padding: 40 }}><div className="spinner" /></div>
|
||||
) : (
|
||||
<div style={{ maxHeight: 440, overflowY: 'auto' }}>
|
||||
{filtered.map(u => (
|
||||
<div key={u.id} style={{ borderBottom: '1px solid var(--border)', padding: '12px 0' }}>
|
||||
<div className="flex items-center gap-2" style={{ gap: 12 }}>
|
||||
<Avatar user={u} size="sm" />
|
||||
<div className="flex-col flex-1 overflow-hidden">
|
||||
<div className="flex items-center gap-2" style={{ gap: 8 }}>
|
||||
<span className="font-medium text-sm">{u.display_name || u.name}</span>
|
||||
<span className={`role-badge role-${u.role}`}>{u.role}</span>
|
||||
{u.status !== 'active' && <span className="role-badge status-suspended">{u.status}</span>}
|
||||
{u.is_default_admin ? <span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>Default Admin</span> : null}
|
||||
</div>
|
||||
<span className="text-xs" style={{ color: 'var(--text-secondary)' }}>{u.email}</span>
|
||||
{u.must_change_password ? <span className="text-xs" style={{ color: 'var(--warning)' }}>⚠ Must change password</span> : null}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
{!u.is_default_admin && (
|
||||
<div className="flex gap-1" style={{ gap: 4 }}>
|
||||
{resetingId === u.id ? (
|
||||
<div className="flex gap-1" style={{ gap: 4 }}>
|
||||
<input className="input" style={{ width: 130, fontSize: 12, padding: '4px 8px' }} type="password" placeholder="New password" value={resetPw} onChange={e => setResetPw(e.target.value)} />
|
||||
<button className="btn btn-primary btn-sm" onClick={() => handleResetPw(u.id)}>Set</button>
|
||||
<button className="btn btn-secondary btn-sm" onClick={() => { setResetingId(null); setResetPw(''); }}>✕</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button className="btn btn-secondary btn-sm" onClick={() => setResetingId(u.id)} title="Reset password">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||||
Reset PW
|
||||
</button>
|
||||
<select
|
||||
value={u.role}
|
||||
onChange={e => handleRole(u, e.target.value)}
|
||||
className="input"
|
||||
style={{ width: 90, padding: '4px 6px', fontSize: 12 }}
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
{u.status === 'active' ? (
|
||||
<button className="btn btn-secondary btn-sm" onClick={() => handleSuspend(u)}>Suspend</button>
|
||||
) : u.status === 'suspended' ? (
|
||||
<button className="btn btn-secondary btn-sm" onClick={() => handleActivate(u)} style={{ color: 'var(--success)' }}>Activate</button>
|
||||
) : null}
|
||||
<button className="btn btn-danger btn-sm" onClick={() => handleDelete(u)}>Delete</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Create user */}
|
||||
{tab === 'create' && (
|
||||
<div className="flex-col gap-3">
|
||||
<div className="flex gap-3" style={{ gap: 12 }}>
|
||||
<div className="flex-col gap-1 flex-1">
|
||||
<label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Full Name</label>
|
||||
<input className="input" value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value }))} />
|
||||
</div>
|
||||
<div className="flex-col gap-1 flex-1">
|
||||
<label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Email</label>
|
||||
<input className="input" type="email" value={form.email} onChange={e => setForm(p => ({ ...p, email: e.target.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3" style={{ gap: 12 }}>
|
||||
<div className="flex-col gap-1 flex-1">
|
||||
<label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Temp Password</label>
|
||||
<input className="input" type="password" value={form.password} onChange={e => setForm(p => ({ ...p, password: e.target.value }))} />
|
||||
</div>
|
||||
<div className="flex-col gap-1">
|
||||
<label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Role</label>
|
||||
<select className="input" value={form.role} onChange={e => setForm(p => ({ ...p, role: e.target.value }))}>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: 'var(--text-secondary)' }}>User will be required to change their password on first login.</p>
|
||||
<button className="btn btn-primary" onClick={handleCreate} disabled={creating}>{creating ? 'Creating...' : 'Create User'}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bulk import */}
|
||||
{tab === 'bulk' && (
|
||||
<div className="flex-col gap-4">
|
||||
<div className="card" style={{ background: 'var(--background)', border: '1px dashed var(--border)' }}>
|
||||
<p className="text-sm font-medium" style={{ marginBottom: 8 }}>CSV Format</p>
|
||||
<code style={{ fontSize: 12, color: 'var(--text-secondary)', display: 'block', background: 'white', padding: 8, borderRadius: 4, border: '1px solid var(--border)' }}>
|
||||
name,email,password,role{'\n'}
|
||||
John Doe,john@example.com,TempPass123,member
|
||||
</code>
|
||||
<p className="text-xs" style={{ color: 'var(--text-tertiary)', marginTop: 8 }}>
|
||||
role can be "member" or "admin". Password defaults to TempPass@123 if omitted. All users must change password on first login.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label className="btn btn-secondary pointer" style={{ alignSelf: 'flex-start' }}>
|
||||
Select CSV File
|
||||
<input ref={fileRef} type="file" accept=".csv" style={{ display: 'none' }} onChange={handleCSV} />
|
||||
</label>
|
||||
|
||||
{bulkPreview.length > 0 && (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-sm font-medium" style={{ marginBottom: 8 }}>Preview ({bulkPreview.length} users)</p>
|
||||
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', maxHeight: 200, overflowY: 'auto' }}>
|
||||
{bulkPreview.slice(0, 10).map((u, i) => (
|
||||
<div key={i} className="flex items-center gap-2" style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)', fontSize: 13, gap: 12 }}>
|
||||
<span className="flex-1">{u.name}</span>
|
||||
<span style={{ color: 'var(--text-secondary)' }}>{u.email}</span>
|
||||
<span className={`role-badge role-${u.role}`}>{u.role}</span>
|
||||
</div>
|
||||
))}
|
||||
{bulkPreview.length > 10 && (
|
||||
<div style={{ padding: '8px 12px', color: 'var(--text-tertiary)', fontSize: 13 }}>
|
||||
...and {bulkPreview.length - 10} more
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={handleBulkImport} disabled={bulkLoading}>
|
||||
{bulkLoading ? 'Importing...' : `Import ${bulkPreview.length} Users`}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user