268 lines
13 KiB
React
268 lines
13 KiB
React
import React, { useState, useEffect } from 'react'
|
|
import api from '../api.js'
|
|
import { useAuth } from '../AuthContext.jsx'
|
|
import { Plus, Trash2, Edit2, X, Check, Users, Shield, User, KeyRound } from 'lucide-react'
|
|
|
|
function UserModal({ user, onClose, onSave }) {
|
|
const [form, setForm] = useState({
|
|
username: user?.username || '',
|
|
password: '',
|
|
role: user?.role || 'user',
|
|
})
|
|
const [error, setError] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setError('')
|
|
setLoading(true)
|
|
try {
|
|
if (user) {
|
|
const payload = { role: form.role }
|
|
if (form.username !== user.username) payload.username = form.username
|
|
if (form.password) payload.password = form.password
|
|
const { data } = await api.put(`/users/${user.id}`, payload)
|
|
onSave(data, 'edit')
|
|
} else {
|
|
if (!form.password) return setError('Password is required')
|
|
const { data } = await api.post('/users', form)
|
|
onSave(data, 'add')
|
|
}
|
|
onClose()
|
|
} catch (err) {
|
|
setError(err.response?.data?.error || 'Failed to save user')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 w-full max-w-md shadow-2xl">
|
|
<div className="flex items-center justify-between p-6 border-b border-slate-800">
|
|
<h3 className="text-lg font-bold text-white">{user ? 'Edit User' : 'New User'}</h3>
|
|
<button onClick={onClose} className="text-slate-400 hover:text-white"><X size={20} /></button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
{error && <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm rounded-xl px-4 py-3">{error}</div>}
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
|
|
<input
|
|
type="text"
|
|
value={form.username}
|
|
onChange={e => setForm({ ...form, username: e.target.value })}
|
|
required
|
|
className="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
|
|
placeholder="Username"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-400 mb-1.5">
|
|
{user ? 'New Password (leave blank to keep current)' : 'Password'}
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={form.password}
|
|
onChange={e => setForm({ ...form, password: e.target.value })}
|
|
required={!user}
|
|
className="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
|
|
placeholder={user ? '••••••••' : 'Min. 6 characters'}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-400 mb-1.5">Role</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{['user', 'admin'].map(role => (
|
|
<button
|
|
type="button"
|
|
key={role}
|
|
onClick={() => setForm({ ...form, role })}
|
|
className={`py-3 rounded-xl border text-sm font-semibold flex items-center justify-center gap-2 transition ${
|
|
form.role === role
|
|
? role === 'admin' ? 'border-amber-500 bg-amber-500/10 text-amber-400' : 'border-indigo-500 bg-indigo-500/10 text-indigo-400'
|
|
: 'border-slate-700 text-slate-400 hover:border-slate-600'
|
|
}`}
|
|
>
|
|
{role === 'admin' ? <Shield size={16} /> : <User size={16} />}
|
|
{role.charAt(0).toUpperCase() + role.slice(1)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 pt-2">
|
|
<button type="button" onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm font-medium">Cancel</button>
|
|
<button type="submit" disabled={loading} className="flex-1 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold disabled:opacity-50 transition">
|
|
{loading ? 'Saving...' : 'Save User'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Admin() {
|
|
const { user: currentUser } = useAuth()
|
|
const [users, setUsers] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [modal, setModal] = useState(null)
|
|
const [deleteConfirm, setDeleteConfirm] = useState(null)
|
|
const [toast, setToast] = useState('')
|
|
|
|
useEffect(() => {
|
|
api.get('/users').then(({ data }) => { setUsers(data); setLoading(false) }).catch(() => setLoading(false))
|
|
}, [])
|
|
|
|
const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(''), 3000) }
|
|
|
|
const handleSave = (data, type) => {
|
|
if (type === 'add') setUsers(prev => [data, ...prev])
|
|
else setUsers(prev => prev.map(u => u.id === data.id ? data : u))
|
|
showToast(type === 'add' ? 'User created' : 'User updated')
|
|
}
|
|
|
|
const handleDelete = async (id) => {
|
|
try {
|
|
await api.delete(`/users/${id}`)
|
|
setUsers(prev => prev.filter(u => u.id !== id))
|
|
setDeleteConfirm(null)
|
|
showToast('User deleted')
|
|
} catch (err) {
|
|
showToast(err.response?.data?.error || 'Failed to delete')
|
|
}
|
|
}
|
|
|
|
const adminCount = users.filter(u => u.role === 'admin').length
|
|
const userCount = users.filter(u => u.role === 'user').length
|
|
|
|
return (
|
|
<div>
|
|
{toast && (
|
|
<div className="fixed top-4 right-4 z-50 bg-green-500/20 border border-green-500/40 text-green-300 px-4 py-3 rounded-xl shadow-xl text-sm font-medium flex items-center gap-2">
|
|
<Check size={16} />{toast}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white">Admin Panel</h2>
|
|
<p className="text-slate-400 text-sm mt-1">Manage user accounts and permissions</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setModal('add')}
|
|
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 rounded-xl text-sm font-semibold transition shadow-lg shadow-indigo-900/40"
|
|
>
|
|
<Plus size={16} />Add User
|
|
</button>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-3 gap-4 mb-6">
|
|
{[
|
|
{ label: 'Total Users', value: users.length, icon: Users, color: 'indigo' },
|
|
{ label: 'Admins', value: adminCount, icon: Shield, color: 'amber' },
|
|
{ label: 'Regular Users', value: userCount, icon: User, color: 'blue' },
|
|
].map(({ label, value, icon: Icon, color }) => (
|
|
<div key={label} className="bg-slate-900 rounded-xl border border-slate-800 p-4 flex items-center gap-4">
|
|
<div className={`w-10 h-10 rounded-xl flex items-center justify-center bg-${color}-500/20`}>
|
|
<Icon size={20} className={`text-${color}-400`} />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold text-white">{value}</p>
|
|
<p className="text-xs text-slate-400">{label}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Users table */}
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden">
|
|
{loading ? (
|
|
<div className="p-12 text-center text-slate-500">Loading...</div>
|
|
) : (
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-slate-800">
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Username</th>
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Role</th>
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">MFA</th>
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Created</th>
|
|
<th className="text-right px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map(u => (
|
|
<tr key={u.id} className="border-b border-slate-800/50 hover:bg-slate-800/30 transition">
|
|
<td className="px-4 py-3.5">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${u.role === 'admin' ? 'bg-amber-500/20' : 'bg-indigo-500/20'}`}>
|
|
{u.role === 'admin' ? <Shield size={14} className="text-amber-400" /> : <User size={14} className="text-indigo-400" />}
|
|
</div>
|
|
<span className="text-white font-medium">{u.username}</span>
|
|
{u.id === currentUser.id && <span className="text-xs text-slate-500">(you)</span>}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3.5">
|
|
<span className={`text-xs px-2.5 py-1 rounded-full font-medium ${u.role === 'admin' ? 'bg-amber-500/20 text-amber-400' : 'bg-slate-700 text-slate-300'}`}>
|
|
{u.role}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3.5">
|
|
<span className={`text-xs px-2.5 py-1 rounded-full font-medium ${u.mfa_enabled ? 'bg-green-500/20 text-green-400' : 'bg-slate-700/50 text-slate-500'}`}>
|
|
{u.mfa_enabled ? 'Enabled' : 'Disabled'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3.5">
|
|
{u.must_change_password ? (
|
|
<span className="text-xs px-2.5 py-1 rounded-full font-medium bg-amber-500/20 text-amber-400 flex items-center gap-1 w-fit">
|
|
<KeyRound size={10} />Must change pw
|
|
</span>
|
|
) : (
|
|
<span className="text-xs text-green-400">Active</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3.5 text-slate-400 text-sm">{new Date(u.created_at).toLocaleDateString()}</td>
|
|
<td className="px-4 py-3.5 text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button onClick={() => setModal(u)} className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition">
|
|
<Edit2 size={14} />
|
|
</button>
|
|
{u.id !== currentUser.id && (
|
|
<button onClick={() => setDeleteConfirm(u)} className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition">
|
|
<Trash2 size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
{modal && (
|
|
<UserModal
|
|
user={modal === 'add' ? null : modal}
|
|
onClose={() => setModal(null)}
|
|
onSave={handleSave}
|
|
/>
|
|
)}
|
|
|
|
{deleteConfirm && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 p-6 w-full max-w-sm shadow-2xl">
|
|
<h3 className="text-lg font-bold text-white mb-2">Delete User</h3>
|
|
<p className="text-slate-400 text-sm mb-6">Delete <strong className="text-white">{deleteConfirm.username}</strong>? This cannot be undone.</p>
|
|
<div className="flex gap-3">
|
|
<button onClick={() => setDeleteConfirm(null)} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm">Cancel</button>
|
|
<button onClick={() => handleDelete(deleteConfirm.id)} className="flex-1 py-2.5 rounded-xl bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30 transition text-sm font-semibold">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|