admin ui: self-contained reserve-username modal, plain @ text
The reserve modal delegated to a nested ActionButton, whose own flow modal opened over it - the username field ended up behind it and the request preview came through empty on confirm. Replace it with a modal that owns its username and reason fields and posts the reserve/unreserve command directly. Render the @ prefix as text, not an icon.
This commit is contained in:
parent
93a4ed2bca
commit
4e2cf7c5ac
3 changed files with 95 additions and 48 deletions
|
|
@ -1,25 +1,24 @@
|
|||
import { AtSign, Loader2, Plus, RefreshCw, Search, Trash2, X } from "lucide-react";
|
||||
import { Loader2, Plus, RefreshCw, Search, Trash2, X } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { api, errorMessage } from "../api";
|
||||
import { ActionButton } from "../components/ActionButton";
|
||||
import { Alert, EmptyRow, Metric, PageFrame, QueryPanel } from "../components/ui";
|
||||
import { formatUnix } from "../lib/format";
|
||||
import type { ReservedUsernameRow } from "../types";
|
||||
|
||||
// Reserved usernames are a plain operator blocklist: a name listed here cannot be
|
||||
// taken as an editable username by any peer and cannot be minted as a
|
||||
// collectible. No owner, no price, no Fragment badge - that is the collectible
|
||||
// tab's job.
|
||||
// collectible. No owner, no price, no "bought on Fragment" badge - that is the
|
||||
// collectible tab's job.
|
||||
export function ReservedUsernamesPage() {
|
||||
const [q, setQ] = useState("");
|
||||
const [rows, setRows] = useState<ReservedUsernameRow[]>([]);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [reserveOpen, setReserveOpen] = useState(false);
|
||||
const [rows, setRows] = useState<ReservedUsernameRow[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function load() {
|
||||
setBusy(true);
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const params = new URLSearchParams({ limit: "200" });
|
||||
if (q.trim()) params.set("q", q.trim().replace(/^@/, ""));
|
||||
|
|
@ -29,7 +28,7 @@ export function ReservedUsernamesPage() {
|
|||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -46,8 +45,8 @@ export function ReservedUsernamesPage() {
|
|||
<button className="btn primary icon-text" type="button" onClick={() => setReserveOpen(true)}>
|
||||
<Plus size={15} /> {"Reserve username"}
|
||||
</button>
|
||||
<button className="btn icon-text" type="button" onClick={() => load()} disabled={busy}>
|
||||
<RefreshCw size={15} className={busy ? "spin" : ""} /> {"Refresh"}
|
||||
<button className="btn icon-text" type="button" onClick={() => load()} disabled={loading}>
|
||||
<RefreshCw size={15} className={loading ? "spin" : ""} /> {"Refresh"}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
|
|
@ -62,15 +61,15 @@ export function ReservedUsernamesPage() {
|
|||
className="toolbar"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
void load();
|
||||
load();
|
||||
}}
|
||||
>
|
||||
<label className="searchbox">
|
||||
<Search size={15} />
|
||||
<input value={q} onChange={(event) => setQ(event.target.value)} placeholder={"Filter by prefix"} />
|
||||
</label>
|
||||
<button className="btn primary icon-text" type="submit" disabled={busy}>
|
||||
{busy ? <Loader2 size={15} className="spin" /> : <Search size={15} />} {"Search"}
|
||||
<button className="btn primary icon-text" type="submit" disabled={loading}>
|
||||
{loading ? <Loader2 size={15} className="spin" /> : <Search size={15} />} {"Search"}
|
||||
</button>
|
||||
</form>
|
||||
</QueryPanel>
|
||||
|
|
@ -89,26 +88,11 @@ export function ReservedUsernamesPage() {
|
|||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.username}>
|
||||
<td>
|
||||
<strong className="icon-text">
|
||||
<AtSign size={13} />
|
||||
{row.username}
|
||||
</strong>
|
||||
</td>
|
||||
<td><strong>{`@${row.username}`}</strong></td>
|
||||
<td>{row.reason || "-"}</td>
|
||||
<td>{row.actor || "-"}</td>
|
||||
<td>{formatUnix(row.created_at) || "-"}</td>
|
||||
<td>
|
||||
<ActionButton
|
||||
compact
|
||||
label={"Unreserve"}
|
||||
icon={<Trash2 size={13} />}
|
||||
tone="danger"
|
||||
path="/api/actions/unreserve-username"
|
||||
payload={() => ({ username: row.username })}
|
||||
onDone={() => void load()}
|
||||
/>
|
||||
</td>
|
||||
<td><UnreserveButton username={row.username} onDone={() => load()} /></td>
|
||||
</tr>
|
||||
))}
|
||||
{rows.length === 0 && <EmptyRow colSpan={5} />}
|
||||
|
|
@ -121,7 +105,7 @@ export function ReservedUsernamesPage() {
|
|||
onClose={() => setReserveOpen(false)}
|
||||
onDone={() => {
|
||||
setReserveOpen(false);
|
||||
void load();
|
||||
load();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -129,9 +113,63 @@ export function ReservedUsernamesPage() {
|
|||
);
|
||||
}
|
||||
|
||||
function UnreserveButton({ username, onDone }: { username: string; onDone: () => void }) {
|
||||
const [busy, setBusy] = useState(false);
|
||||
return (
|
||||
<button
|
||||
className="btn danger compact-btn icon-text"
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={async () => {
|
||||
if (!window.confirm(`Unreserve @${username}?`)) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.action("/api/actions/unreserve-username", {
|
||||
username,
|
||||
reason: "unreserved from admin panel",
|
||||
confirm: true,
|
||||
});
|
||||
onDone();
|
||||
} catch (err) {
|
||||
window.alert(errorMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{busy ? <Loader2 size={13} className="spin" /> : <Trash2 size={13} />} {"Unreserve"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function ReserveUsernameModal({ onClose, onDone }: { onClose: () => void; onDone: () => void }) {
|
||||
const [username, setUsername] = useState("");
|
||||
const [reason, setReason] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const clean = username.trim().replace(/^@/, "");
|
||||
const canSubmit = clean.length >= 5 && reason.trim().length > 0 && !busy;
|
||||
|
||||
async function submit() {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const result = await api.action("/api/actions/reserve-username", {
|
||||
username: clean,
|
||||
reason: reason.trim(),
|
||||
confirm: true,
|
||||
});
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
onDone();
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div className="modal-backdrop" role="presentation">
|
||||
|
|
@ -146,28 +184,37 @@ function ReserveUsernameModal({ onClose, onDone }: { onClose: () => void; onDone
|
|||
</button>
|
||||
</div>
|
||||
<div className="command-body">
|
||||
<label className="duration-field">
|
||||
<label className="form-field">
|
||||
<span>{"Username"}</span>
|
||||
<input value={username} onChange={(event) => setUsername(event.target.value)} placeholder="support" />
|
||||
<input
|
||||
value={username}
|
||||
onChange={(event) => setUsername(event.target.value)}
|
||||
placeholder="support"
|
||||
autoFocus
|
||||
/>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span>{"Reason"}</span>
|
||||
<textarea
|
||||
value={reason}
|
||||
onChange={(event) => setReason(event.target.value)}
|
||||
rows={2}
|
||||
placeholder={"Why this name is off limits"}
|
||||
/>
|
||||
</label>
|
||||
<p className="bot-create-note">
|
||||
{"No peer will be able to take this name until it is unreserved. Nothing is shown to users."}
|
||||
{"No peer will be able to take @"}{clean || "…"}{" until it is unreserved. Nothing is shown to users."}
|
||||
</p>
|
||||
{error && <Alert>{error}</Alert>}
|
||||
</div>
|
||||
<div className="modal-actions">
|
||||
<button className="btn" type="button" onClick={onClose}>{"Close"}</button>
|
||||
<ActionButton
|
||||
disabled={clean.length < 5}
|
||||
label={"Reserve username"}
|
||||
icon={<Plus size={15} />}
|
||||
tone="neutral"
|
||||
path="/api/actions/reserve-username"
|
||||
payload={() => ({ username: clean })}
|
||||
onDone={onDone}
|
||||
/>
|
||||
<button className="btn primary icon-text" type="button" disabled={!canSubmit} onClick={() => void submit()}>
|
||||
{busy ? <Loader2 size={15} className="spin" /> : <Plus size={15} />} {"Reserve username"}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>,
|
||||
document.body
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue