75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
import { useCallback, useState } from 'react'
|
|
import { Loading, ErrorState } from '../../../components/PageState.jsx'
|
|
import { useAsync } from '../../../lib/useAsync.js'
|
|
import { dateTime } from '../../../lib/format.js'
|
|
import { api } from '../../../api/client.js'
|
|
import UserEditor from './UserEditor.jsx'
|
|
|
|
export default function UsersAdmin() {
|
|
const [tick, setTick] = useState(0)
|
|
const reload = useCallback(() => setTick((t) => t + 1), [])
|
|
const { loading, error, data } = useAsync(() => api.admin.listUsers(), [tick])
|
|
const [editing, setEditing] = useState(null) // null | 'new' | user
|
|
const users = data || []
|
|
|
|
return (
|
|
<section>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
|
|
<p className="sans muted" style={{ margin: 0, fontSize: '0.9rem' }}>
|
|
Manage admin and editor accounts
|
|
</p>
|
|
<button onClick={() => setEditing('new')} className="btn btn-primary btn-sq">
|
|
+ Add user
|
|
</button>
|
|
</div>
|
|
|
|
{loading && <Loading />}
|
|
{error && <ErrorState message="Could not load users." />}
|
|
|
|
{!loading && !error && (
|
|
<div className="panel-flat">
|
|
<table className="adm-table">
|
|
<thead>
|
|
<tr>
|
|
<th className="adm-th">Username</th>
|
|
<th className="adm-th">Role</th>
|
|
<th className="adm-th">Last login</th>
|
|
<th className="adm-th" />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map((u) => (
|
|
<tr key={u.id}>
|
|
<td className="adm-td" style={{ color: 'var(--head)' }}>
|
|
{u.username}
|
|
</td>
|
|
<td className="adm-td">
|
|
<span className={`badge ${u.role === 'admin' ? 'badge-admin' : 'badge-editor'}`}>{u.role}</span>
|
|
</td>
|
|
<td className="adm-td dim">{u.last_login_at ? dateTime(u.last_login_at) : 'never'}</td>
|
|
<td className="adm-td" style={{ textAlign: 'right' }}>
|
|
<span className="link-accent" onClick={() => setEditing(u)}>
|
|
Edit
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{editing && (
|
|
<UserEditor
|
|
user={editing === 'new' ? null : editing}
|
|
onClose={() => setEditing(null)}
|
|
onSaved={() => {
|
|
setEditing(null)
|
|
reload()
|
|
}}
|
|
/>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|