93 lines
3.7 KiB
JavaScript
93 lines
3.7 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
|
|
export default function AdminUsernameQueue() {
|
|
const [items, setItems] = useState([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState('')
|
|
const [notes, setNotes] = useState({})
|
|
|
|
const loadPending = async () => {
|
|
setLoading(true)
|
|
setError('')
|
|
|
|
try {
|
|
const response = await window.axios.get('/api/admin/usernames/pending')
|
|
setItems(Array.isArray(response?.data?.data) ? response.data.data : [])
|
|
} catch (loadError) {
|
|
setError(loadError?.response?.data?.message || 'Failed to load username moderation queue.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadPending()
|
|
}, [])
|
|
|
|
const moderate = async (id, action) => {
|
|
try {
|
|
const payload = { note: String(notes[id] || '') }
|
|
await window.axios.post(`/api/admin/usernames/${id}/${action}`, payload)
|
|
setItems((prev) => prev.filter((item) => item.id !== id))
|
|
} catch (moderateError) {
|
|
setError(moderateError?.response?.data?.message || `Failed to ${action} username request.`)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section aria-label="Username moderation queue" className="mx-auto w-full max-w-5xl rounded-2xl border border-white/10 bg-slate-900/60 p-4 md:p-6">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold text-white">Pending Username Approvals</h2>
|
|
<button type="button" onClick={loadPending} className="rounded-lg border border-white/20 px-3 py-1 text-xs text-white">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
|
|
{loading ? <p role="status" className="text-sm text-white/70">Loading…</p> : null}
|
|
{error ? <p role="alert" className="mb-3 text-sm text-rose-200">{error}</p> : null}
|
|
{!loading && items.length === 0 ? <p role="status" className="text-sm text-white/60">No pending username requests.</p> : null}
|
|
|
|
<ul className="space-y-3">
|
|
{items.map((item) => (
|
|
<li key={item.id} className="rounded-xl border border-white/10 bg-white/5 p-3">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
|
<div>
|
|
<div className="text-sm font-medium text-white">{item.requested_username}</div>
|
|
<div className="mt-1 text-xs text-white/65">Request #{item.id} · {item.context}</div>
|
|
{item.similar_to ? <div className="mt-1 text-xs text-amber-200">Similar to reserved: {item.similar_to}</div> : null}
|
|
</div>
|
|
|
|
<div className="w-full max-w-sm space-y-2">
|
|
<input
|
|
type="text"
|
|
aria-label={`Moderation note for request ${item.id}`}
|
|
value={notes[item.id] || ''}
|
|
onChange={(event) => setNotes((prev) => ({ ...prev, [item.id]: event.target.value }))}
|
|
placeholder="Review note"
|
|
className="w-full rounded-lg border border-white/15 bg-white/10 px-3 py-2 text-xs text-white"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => moderate(item.id, 'approve')}
|
|
className="rounded-lg bg-emerald-500 px-3 py-2 text-xs font-semibold text-black"
|
|
>
|
|
Approve
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => moderate(item.id, 'reject')}
|
|
className="rounded-lg bg-rose-500 px-3 py-2 text-xs font-semibold text-white"
|
|
>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|