Compare commits
No commits in common. "66091ede72de94c5ddc49758b822d81bf11a0acc" and "fa95dab29a5647e69b2f9f7ead26fb696fc6d44a" have entirely different histories.
66091ede72
...
fa95dab29a
3 changed files with 74 additions and 30 deletions
File diff suppressed because one or more lines are too long
2
cmd/telesrv-admin/web/dist/index.html
vendored
2
cmd/telesrv-admin/web/dist/index.html
vendored
|
|
@ -23,7 +23,7 @@
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="module" crossorigin src="/assets/index-fn4QJaPB.js"></script>
|
<script type="module" crossorigin src="/assets/index-v1d-K3Z6.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-CQKJMNpu.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-CQKJMNpu.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import { Loader2, Plus, RefreshCw, Search, Trash2, X } from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { api, errorMessage } from "../api";
|
import { api, errorMessage } from "../api";
|
||||||
import { ActionButton } from "../components/ActionButton";
|
|
||||||
import { Alert, EmptyRow, Metric, PageFrame, QueryPanel } from "../components/ui";
|
import { Alert, EmptyRow, Metric, PageFrame, QueryPanel } from "../components/ui";
|
||||||
import { formatUnix } from "../lib/format";
|
import { formatUnix } from "../lib/format";
|
||||||
import type { ReservedUsernameRow } from "../types";
|
import type { ReservedUsernameRow } from "../types";
|
||||||
|
|
@ -62,7 +61,7 @@ export function ReservedUsernamesPage() {
|
||||||
className="toolbar"
|
className="toolbar"
|
||||||
onSubmit={(event) => {
|
onSubmit={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
void load();
|
load();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<label className="searchbox">
|
<label className="searchbox">
|
||||||
|
|
@ -93,17 +92,7 @@ export function ReservedUsernamesPage() {
|
||||||
<td>{row.reason || "-"}</td>
|
<td>{row.reason || "-"}</td>
|
||||||
<td>{row.actor || "-"}</td>
|
<td>{row.actor || "-"}</td>
|
||||||
<td>{formatUnix(row.created_at) || "-"}</td>
|
<td>{formatUnix(row.created_at) || "-"}</td>
|
||||||
<td>
|
<td><UnreserveButton username={row.username} onDone={() => load()} /></td>
|
||||||
<ActionButton
|
|
||||||
compact
|
|
||||||
label={"Unreserve"}
|
|
||||||
icon={<Trash2 size={13} />}
|
|
||||||
tone="danger"
|
|
||||||
path="/api/actions/unreserve-username"
|
|
||||||
payload={() => ({ username: row.username })}
|
|
||||||
onDone={() => void load()}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
{rows.length === 0 && <EmptyRow colSpan={5} />}
|
{rows.length === 0 && <EmptyRow colSpan={5} />}
|
||||||
|
|
@ -116,7 +105,7 @@ export function ReservedUsernamesPage() {
|
||||||
onClose={() => setReserveOpen(false)}
|
onClose={() => setReserveOpen(false)}
|
||||||
onDone={() => {
|
onDone={() => {
|
||||||
setReserveOpen(false);
|
setReserveOpen(false);
|
||||||
void load();
|
load();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
@ -124,12 +113,63 @@ export function ReservedUsernamesPage() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ReserveUsernameModal collects the name, then hands off to ActionButton for the
|
function UnreserveButton({ username, onDone }: { username: string; onDone: () => void }) {
|
||||||
// standard reason / dry-run / confirm flow - the same as every other admin
|
const [busy, setBusy] = useState(false);
|
||||||
// action. The name is read fresh from state on each ActionButton render.
|
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 }) {
|
function ReserveUsernameModal({ onClose, onDone }: { onClose: () => void; onDone: () => void }) {
|
||||||
const [username, setUsername] = useState("");
|
const [username, setUsername] = useState("");
|
||||||
|
const [reason, setReason] = useState("");
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
const clean = username.trim().replace(/^@/, "");
|
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(
|
return createPortal(
|
||||||
<div className="modal-backdrop" role="presentation">
|
<div className="modal-backdrop" role="presentation">
|
||||||
|
|
@ -153,21 +193,25 @@ function ReserveUsernameModal({ onClose, onDone }: { onClose: () => void; onDone
|
||||||
autoFocus
|
autoFocus
|
||||||
/>
|
/>
|
||||||
</label>
|
</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">
|
<p className="bot-create-note">
|
||||||
{`No peer will be able to take @${clean || "…"} 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>
|
</p>
|
||||||
|
{error && <Alert>{error}</Alert>}
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-actions">
|
<div className="modal-actions">
|
||||||
<button className="btn" type="button" onClick={onClose}>{"Close"}</button>
|
<button className="btn" type="button" onClick={onClose}>{"Close"}</button>
|
||||||
<ActionButton
|
<button className="btn primary icon-text" type="button" disabled={!canSubmit} onClick={() => void submit()}>
|
||||||
disabled={clean.length < 5}
|
{busy ? <Loader2 size={15} className="spin" /> : <Plus size={15} />} {"Reserve username"}
|
||||||
label={"Reserve username"}
|
</button>
|
||||||
icon={<Plus size={15} />}
|
|
||||||
tone="neutral"
|
|
||||||
path="/api/actions/reserve-username"
|
|
||||||
payload={() => ({ username: clean })}
|
|
||||||
onDone={onDone}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>,
|
</div>,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue