peter
922d589b09
The rail was a row of aria-pressed toggles: every tab a Tab stop, no arrows, nothing tying a tab to its content. tablist/tab/aria-selected, one Tab stop, arrows on either axis, Home/End, and useTabPanel for aria-controls/labelledby.
998 lines
39 KiB
TypeScript
998 lines
39 KiB
TypeScript
import { useState } from "react";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Ban,
|
|
Check,
|
|
Clock,
|
|
MailWarning,
|
|
Mails,
|
|
RotateCcw,
|
|
Send,
|
|
Shield,
|
|
Trash2,
|
|
UserPlus,
|
|
X,
|
|
} from "lucide-react";
|
|
import {
|
|
api,
|
|
HttpError,
|
|
type AdminUserRow,
|
|
type Invite,
|
|
type Me,
|
|
type PendingAccessRow,
|
|
} from "../lib/api";
|
|
import { displayName } from "../lib/api/account";
|
|
import { notify } from "../lib/notifications";
|
|
import { formatDateTime, relativeTime } from "../lib/format";
|
|
import { invalidateUserAccess } from "../lib/adminUsers";
|
|
import { ADMIN_USERS_TAB_KEY } from "../lib/adminUsersTab";
|
|
import { Badge } from "./ui/Badge";
|
|
import { Button } from "./ui/Button";
|
|
import { IconButton } from "./ui/IconButton";
|
|
import Tooltip from "./ui/Tooltip";
|
|
import InlineNotice from "./ui/InlineNotice";
|
|
import { Section } from "./ui/form";
|
|
import SegmentedToggle from "./ui/SegmentedToggle";
|
|
import { LANGUAGES, type LangCode } from "../i18n";
|
|
import { LoadingState, StateMessage } from "./ui/QueryState";
|
|
import AccountPanel from "./AccountPanel";
|
|
import { useConfirm } from "./confirmContext";
|
|
import Tabs from "./ui/Tabs";
|
|
import { useTabPanel } from "./ui/tabPanel";
|
|
import { useAccountPersistedState } from "../lib/storage";
|
|
import { PageToolbar } from "./ui/PageShell";
|
|
import { useMe } from "../lib/useMe";
|
|
import { notifyActionError, notifyKnownFailure } from "../lib/actionErrors";
|
|
import { Pressable } from "./ui/Pressable";
|
|
import { Input } from "./ui/Input";
|
|
import { SURFACE } from "./ui/surfaces";
|
|
|
|
// Admin-only user & access management: roles, access requests (the Invite whitelist), and the
|
|
// demo whitelist + reset. Each section is its own tab (persisted across reloads); the Access tab
|
|
// carries a badge with the count of pending requests so it's visible without switching to it.
|
|
// (The tab key + a "focus the Access tab" helper live in lib/adminUsersTab so callers can
|
|
// pre-select the tab without importing this lazy-loaded page — see that file.)
|
|
|
|
// A user row's B3 layer (DESIGN.md "State layers"), painted by the card under its content, and the name
|
|
// button's stretched hit layer over the whole card. Why the row is built so: at the row below.
|
|
const ROW_LAYER =
|
|
"relative isolate before:absolute before:inset-0 before:z-under before:rounded-[inherit] before:transition-colors before:content-[''] hover:before:bg-(--hover) has-[[data-row-open]:active]:before:bg-(--press)";
|
|
const ROW_OPEN =
|
|
"focus-visible:outline-none after:absolute after:inset-0 after:rounded-xl after:content-[''] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-accent";
|
|
|
|
export default function AdminUsers() {
|
|
const me = useMe();
|
|
const { t } = useTranslation();
|
|
const [tab, setTab] = useAccountPersistedState(ADMIN_USERS_TAB_KEY, "roles");
|
|
const panel = useTabPanel();
|
|
const tabs = [
|
|
{ id: "roles", label: t("users.tabs.roles") },
|
|
// Both kinds of "waiting on the admin": a request needing a decision, and a sign-up whose
|
|
// address was approved BEFORE they registered — the second never reaches the invite queue,
|
|
// so the badge used to read zero while somebody sat locked out (roadmap UX-25).
|
|
{
|
|
id: "access",
|
|
label: t("users.tabs.access"),
|
|
badge: me.pending_invites + me.pending_activations,
|
|
},
|
|
{ id: "demo", label: t("users.tabs.demo") },
|
|
];
|
|
const active = tabs.some((x) => x.id === tab) ? tab : "roles";
|
|
return (
|
|
<>
|
|
{/* The tab bar is fixed chrome; the tab content scrolls under it. */}
|
|
<PageToolbar>
|
|
<div className="px-4 pt-2 max-w-3xl w-full mx-auto">
|
|
<Tabs idBase={panel.idBase} tabs={tabs} active={active} onChange={setTab} />
|
|
</div>
|
|
</PageToolbar>
|
|
<div {...panel.panelProps(active)} className="px-4 pb-4 pt-3 max-w-3xl w-full mx-auto">
|
|
{active === "roles" && <UsersRoles me={me} />}
|
|
{active === "access" && (
|
|
<>
|
|
<AdminInvites />
|
|
<PendingAccess />
|
|
</>
|
|
)}
|
|
{active === "demo" && <AdminDemo />}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function UsersRoles({ me }: { me: Me }) {
|
|
const { t } = useTranslation();
|
|
const qc = useQueryClient();
|
|
const confirm = useConfirm();
|
|
const q = useQuery({ queryKey: qk.adminUsers(), queryFn: api.adminUsers });
|
|
// Which rows have an action in flight, so we disable ONLY those rows' buttons (SC1) — a Set, since
|
|
// with per-row disabling the admin can now start actions on several rows concurrently.
|
|
const [pendingIds, setPendingIds] = useState<Set<number>>(new Set());
|
|
// The account panel (E12 S5): which user it is showing, or null. Held here rather than per row so
|
|
// only one is ever mounted.
|
|
const [panelFor, setPanelFor] = useState<AdminUserRow | null>(null);
|
|
const startPending = (id: number) => setPendingIds((s) => new Set(s).add(id));
|
|
const endPending = (id: number) =>
|
|
setPendingIds((s) => {
|
|
const n = new Set(s);
|
|
n.delete(id);
|
|
return n;
|
|
});
|
|
// A failed user action: said once (notifyActionError skips what `req` already put in its dialog),
|
|
// and the list refetched — a user deleted in another tab would otherwise stay listed, every click
|
|
// on the row doing nothing.
|
|
const onGoneOrFailed = (e: unknown, fallback: string) => {
|
|
notifyActionError(e, fallback);
|
|
qc.invalidateQueries({ queryKey: qk.adminUsers() });
|
|
};
|
|
const setRole = useMutation({
|
|
mutationFn: ({ id, role }: { id: number; role: "user" | "admin"; email: string }) =>
|
|
api.setUserRole(id, role),
|
|
onMutate: (vars) => startPending(vars.id),
|
|
onSuccess: (_d, vars) => {
|
|
qc.invalidateQueries({ queryKey: qk.adminUsers() });
|
|
notify({ level: "success", message: t("users.roles.updated", { email: vars.email }) });
|
|
},
|
|
onSettled: (_d, _e, vars) => endPending(vars.id),
|
|
// Guards (last admin / self) surface via the global error dialog with the server's detail; what
|
|
// it does not show (a user deleted meanwhile, a 404) is said here — see onGoneOrFailed.
|
|
onError: (e) => onGoneOrFailed(e, t("users.roles.failed")),
|
|
});
|
|
|
|
const suspend = useMutation({
|
|
mutationFn: ({ id, suspended }: { id: number; suspended: boolean; email: string }) =>
|
|
api.setUserSuspended(id, suspended),
|
|
onMutate: (vars) => startPending(vars.id),
|
|
onSuccess: (_d, vars) => {
|
|
qc.invalidateQueries({ queryKey: qk.adminUsers() });
|
|
notify({
|
|
level: "success",
|
|
message: t(vars.suspended ? "users.suspend.done" : "users.suspend.undone", {
|
|
email: vars.email,
|
|
}),
|
|
});
|
|
},
|
|
onSettled: (_d, _e, vars) => endPending(vars.id),
|
|
// Guards (demo / self / last admin) surface via the global error dialog; the rest, as above.
|
|
onError: (e) => onGoneOrFailed(e, t("users.suspend.failed")),
|
|
});
|
|
const del = useMutation({
|
|
mutationFn: ({ id }: { id: number; email: string }) => api.adminDeleteUser(id),
|
|
onMutate: (vars) => startPending(vars.id),
|
|
onSuccess: (_d, vars) => {
|
|
qc.invalidateQueries({ queryKey: qk.adminUsers() });
|
|
notify({ level: "success", message: t("users.delete.done", { email: vars.email }) });
|
|
},
|
|
onSettled: (_d, _e, vars) => endPending(vars.id),
|
|
onError: (e) => onGoneOrFailed(e, t("users.delete.failed")),
|
|
});
|
|
|
|
const onToggle = async (u: AdminUserRow) => {
|
|
const makeAdmin = u.role !== "admin";
|
|
const ok = await confirm({
|
|
title: makeAdmin ? t("users.roles.promoteTitle") : t("users.roles.demoteTitle"),
|
|
message: t(makeAdmin ? "users.roles.promoteConfirm" : "users.roles.demoteConfirm", {
|
|
email: u.email,
|
|
}),
|
|
confirmLabel: makeAdmin ? t("users.roles.makeAdmin") : t("users.roles.makeUser"),
|
|
danger: !makeAdmin,
|
|
});
|
|
if (ok) setRole.mutate({ id: u.id, role: makeAdmin ? "admin" : "user", email: u.email });
|
|
};
|
|
|
|
const onSuspend = async (u: AdminUserRow) => {
|
|
const willSuspend = !u.is_suspended;
|
|
const ok = await confirm({
|
|
title: t(willSuspend ? "users.suspend.title" : "users.suspend.undoTitle"),
|
|
message: t(willSuspend ? "users.suspend.confirm" : "users.suspend.undoConfirm", {
|
|
email: u.email,
|
|
}),
|
|
confirmLabel: t(willSuspend ? "users.suspend.action" : "users.suspend.undoAction"),
|
|
danger: willSuspend,
|
|
});
|
|
if (ok) suspend.mutate({ id: u.id, suspended: willSuspend, email: u.email });
|
|
};
|
|
|
|
const onDelete = async (u: AdminUserRow) => {
|
|
const ok = await confirm({
|
|
title: t("users.delete.title"),
|
|
message: t("users.delete.confirm", { email: u.email }),
|
|
confirmLabel: t("users.delete.action"),
|
|
danger: true,
|
|
});
|
|
if (ok) del.mutate({ id: u.id, email: u.email });
|
|
};
|
|
|
|
const rows = q.data ?? [];
|
|
|
|
return (
|
|
<Section card title={t("users.roles.title")}>
|
|
{panelFor && <AccountPanel user={panelFor} onClose={() => setPanelFor(null)} />}
|
|
<p className="text-xs text-muted leading-relaxed mb-3">{t("users.roles.intro")}</p>
|
|
{q.isError && !q.data ? (
|
|
<StateMessage tone="error" onRetry={() => q.refetch()}>
|
|
{t("common.loadError")}
|
|
</StateMessage>
|
|
) : q.isLoading && !q.data ? (
|
|
<LoadingState shape="list" />
|
|
) : rows.length === 0 ? (
|
|
<p className="text-sm text-muted">{t("users.roles.empty")}</p>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{rows.map((u) => {
|
|
const self = u.id === me.id;
|
|
return (
|
|
// The whole card is the row, so the whole card answers (owner, E28): the name's button
|
|
// stretches an invisible layer over the card (`after:inset-0`), so a click on a badge or
|
|
// a gap opens the account too, and the B3 hover layer is the card's own `::before`, under
|
|
// the badges and buttons (`isolate` + `z-under`). The actions are `relative`, above the
|
|
// stretched layer. The hover used to be the name button's own and ended at the first badge.
|
|
<div
|
|
key={u.id}
|
|
className={`${SURFACE.card} ${ROW_LAYER} flex items-center gap-2.5 p-2.5`}
|
|
>
|
|
<Pressable
|
|
selectable
|
|
data-row-open=""
|
|
onClick={() => setPanelFor(u)}
|
|
title={t("users.account.open")}
|
|
className={`min-w-0 flex-1 cursor-pointer ${ROW_OPEN}`}
|
|
>
|
|
<div className="text-sm truncate">
|
|
{displayName(u)}
|
|
{self && <span className="text-muted"> · {t("users.roles.you")}</span>}
|
|
</div>
|
|
<div className="text-2xs text-muted truncate">{u.email}</div>
|
|
</Pressable>
|
|
{u.role === "admin" && <Badge tone="accent">{t("users.roles.admin")}</Badge>}
|
|
{u.is_demo && <Badge>{t("users.roles.demo")}</Badge>}
|
|
{u.is_suspended && <Badge tone="warn">{t("users.roles.suspended")}</Badge>}
|
|
{!u.is_active && <Badge tone="warn">{t("users.roles.pending")}</Badge>}
|
|
{/* A Google sign-in proves the email, so "unverified" only applies to a
|
|
password-only account that hasn't clicked its verification link. */}
|
|
{u.is_active && !u.email_verified && !u.has_google && (
|
|
<Badge tone="warn">{t("users.roles.unverified")}</Badge>
|
|
)}
|
|
<Tooltip
|
|
always={u.is_demo || self}
|
|
hint={
|
|
u.is_demo
|
|
? t("users.roles.demoLocked")
|
|
: self
|
|
? t("users.roles.selfLocked")
|
|
: u.role === "admin"
|
|
? t("users.roles.makeUser")
|
|
: t("users.roles.makeAdmin")
|
|
}
|
|
>
|
|
<Button
|
|
variant="glass"
|
|
size="xs"
|
|
className="relative shrink-0"
|
|
onClick={() => onToggle(u)}
|
|
// Locked (demo / self) is unavailable WITH a reason, the tooltip's: aria-disabled keeps it
|
|
// focusable so a keyboard user reaches the reason. A pending write is transient.
|
|
aria-disabled={u.is_demo || self}
|
|
disabled={pendingIds.has(u.id)}
|
|
icon={<Shield className="w-3.5 h-3.5" />}
|
|
>
|
|
{u.role === "admin" ? t("users.roles.makeUser") : t("users.roles.makeAdmin")}
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip
|
|
always={u.is_demo || self}
|
|
hint={
|
|
u.is_demo
|
|
? t("users.suspend.demoLocked")
|
|
: self
|
|
? t("users.suspend.selfLocked")
|
|
: u.is_suspended
|
|
? t("users.suspend.undoAction")
|
|
: t("users.suspend.action")
|
|
}
|
|
>
|
|
<IconButton
|
|
noTitle
|
|
label={
|
|
u.is_suspended ? t("users.suspend.undoAction") : t("users.suspend.action")
|
|
}
|
|
size="sm"
|
|
variant={u.is_suspended ? "outline-warn" : "outline"}
|
|
className="relative"
|
|
onClick={() => onSuspend(u)}
|
|
aria-disabled={u.is_demo || self}
|
|
disabled={pendingIds.has(u.id)}
|
|
>
|
|
{u.is_suspended ? (
|
|
<RotateCcw className="w-4 h-4" />
|
|
) : (
|
|
<Ban className="w-4 h-4" />
|
|
)}
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip
|
|
always={u.is_demo || self}
|
|
hint={u.is_demo || self ? t("users.delete.locked") : t("users.delete.action")}
|
|
>
|
|
<IconButton
|
|
noTitle
|
|
label={t("users.delete.action")}
|
|
size="sm"
|
|
variant="outline-danger"
|
|
className="relative"
|
|
onClick={() => onDelete(u)}
|
|
aria-disabled={u.is_demo || self}
|
|
disabled={pendingIds.has(u.id)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
{/* How long ago this account last signed in. LAST in the row on purpose: the badges and
|
|
the role button before it vary in width row to row, so only the row's own right
|
|
edge lines the values up into one column. The exact moment is the hint here and a
|
|
line in the account panel; below `sm` the row has no room, and the panel still says it. */}
|
|
<Tooltip
|
|
hint={
|
|
u.last_login_at
|
|
? t("users.roles.lastLogin", { time: formatDateTime(u.last_login_at) })
|
|
: u.is_demo
|
|
? t("users.roles.lastLoginDemo")
|
|
: t("users.roles.lastLoginNone")
|
|
}
|
|
>
|
|
<span className="relative hidden sm:inline-block w-20 shrink-0 text-right text-2xs text-muted tabular-nums">
|
|
{u.last_login_at ? relativeTime(u.last_login_at) : "—"}
|
|
</span>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
// --- Sign-ups that are still outside (roadmap UX-25) --------------------------------------------
|
|
//
|
|
// The gap this closes: approve an address BEFORE the person registers and their sign-up produces no
|
|
// queue row at all — `_decide` only takes a pending invite — so the Access-requests screen above was
|
|
// empty while they sat locked out. The only working move was re-typing the address into the
|
|
// whitelist box, which nobody would guess. This section makes the state visible and the fix one
|
|
// click, WITHOUT changing who may cause what: the button is admin-authenticated and explicit. Two
|
|
// earlier attempts moved authority instead (auto-activating on registration, reopening the approved
|
|
// invite) and were reverted after review.
|
|
function PendingAccess() {
|
|
const { t } = useTranslation();
|
|
const qc = useQueryClient();
|
|
const rows = useQuery({
|
|
queryKey: qk.adminPendingAccess(),
|
|
queryFn: () => api.adminPendingAccess(),
|
|
});
|
|
// Activating changes /api/me's badge count too, so refresh all of them or the number lies until
|
|
// reload. Shared with the account panel's copy of this mutation (see lib/adminUsers).
|
|
const refresh = () => invalidateUserAccess(qc);
|
|
|
|
const activate = useMutation({
|
|
mutationFn: (u: PendingAccessRow) => api.activateUser(u.id),
|
|
onSuccess: (_r, u) => {
|
|
refresh();
|
|
notify({ level: "success", message: t("users.pendingAccess.activated", { email: u.email }) });
|
|
},
|
|
onError: (err) => notifyActionError(err, t("users.pendingAccess.activateFailed")),
|
|
});
|
|
|
|
const resend = useMutation({
|
|
mutationFn: (u: PendingAccessRow) => api.resendUserVerification(u.id),
|
|
onSuccess: (_r, u) => {
|
|
refresh();
|
|
notify({ level: "success", message: t("users.pendingAccess.resent", { email: u.email }) });
|
|
},
|
|
// The public resend is deliberately silent; this one is not, and the server's reason says WHY
|
|
// (no working SMTP, a refused send) — a success toast for a mail never sent would be the lie.
|
|
onError: (err) => notifyActionError(err, t("users.pendingAccess.resendFailed")),
|
|
});
|
|
|
|
const list = rows.data ?? [];
|
|
const busy = activate.isPending || resend.isPending;
|
|
if (rows.isSuccess && list.length === 0) return null; // nothing stuck: no empty box to explain
|
|
|
|
return (
|
|
<Section card title={t("users.pendingAccess.title")}>
|
|
<p className="text-xs text-muted leading-relaxed mb-3">{t("users.pendingAccess.body")}</p>
|
|
{rows.isError && !rows.data ? (
|
|
<StateMessage tone="error" onRetry={() => rows.refetch()}>
|
|
{t("common.loadError")}
|
|
</StateMessage>
|
|
) : rows.isLoading && !rows.data ? (
|
|
<LoadingState shape="list" />
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{list.map((u) => (
|
|
<PendingAccessRowView
|
|
key={u.id}
|
|
row={u}
|
|
busy={busy}
|
|
onActivate={() => activate.mutate(u)}
|
|
onResend={() => resend.mutate(u)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
// One stuck sign-up. The row names WHICH gate is shut rather than just offering buttons — the same
|
|
// reasoning as the sign-in card's blocked panel, from the admin's side: an admin about to let someone
|
|
// in should see that the address has not been confirmed yet, because on a no-SMTP instance that is
|
|
// the difference between the owner and whoever registered the address first (roadmap SEC-15).
|
|
function PendingAccessRowView({
|
|
row,
|
|
busy,
|
|
onActivate,
|
|
onResend,
|
|
}: {
|
|
row: PendingAccessRow;
|
|
busy: boolean;
|
|
onActivate: () => void;
|
|
onResend: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className={`${SURFACE.card} flex items-center gap-2 p-2.5`}>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm truncate">{row.email}</div>
|
|
<div className="text-2xs text-muted flex items-center gap-2 mt-0.5 flex-wrap">
|
|
{row.created_at && (
|
|
<span>
|
|
{t("users.pendingAccess.signedUp", {
|
|
time: formatDateTime(row.created_at),
|
|
})}
|
|
</span>
|
|
)}
|
|
{row.email_verified ? (
|
|
<span className="inline-flex items-center gap-1 text-success">
|
|
<Check className="w-3 h-3" />
|
|
{t("users.pendingAccess.emailConfirmed")}
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 text-warn">
|
|
<MailWarning className="w-3 h-3" />
|
|
{t("users.pendingAccess.emailUnconfirmed")}
|
|
</span>
|
|
)}
|
|
{!row.is_active && (
|
|
<span className="inline-flex items-center gap-1">
|
|
<Clock className="w-3 h-3" />
|
|
{t("users.pendingAccess.inactive")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{!row.email_verified && (
|
|
<Tooltip hint={t("users.pendingAccess.resendHint")}>
|
|
<IconButton
|
|
noTitle
|
|
label={t("users.pendingAccess.resend")}
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={onResend}
|
|
disabled={busy}
|
|
>
|
|
<Send className="w-4 h-4" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
{row.can_activate && (
|
|
<Tooltip hint={t("users.pendingAccess.activateHint")}>
|
|
<Button
|
|
variant="outline-accent"
|
|
size="xs"
|
|
className="shrink-0"
|
|
onClick={onActivate}
|
|
disabled={busy}
|
|
>
|
|
{t("users.pendingAccess.activate")}
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** The mail language for one invitation. Owns its own display state and reports every change up
|
|
* through `onPick`, because the dialog that hosts it resolves to a plain boolean — the choice has
|
|
* to live in the caller's closure, not in this component. Endonyms come from the app's own
|
|
* language list, so a third locale would appear here for free. */
|
|
function InviteLangPicker({
|
|
initial,
|
|
onPick,
|
|
}: {
|
|
initial: LangCode;
|
|
onPick: (lang: LangCode) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [lang, setLang] = useState<LangCode>(initial);
|
|
return (
|
|
<SegmentedToggle
|
|
className="mt-3"
|
|
size="md"
|
|
ariaLabel={t("settings.invites.inviteLang")}
|
|
label={t("settings.invites.inviteLang")}
|
|
options={LANGUAGES.map((l) => ({ value: l.code, label: l.label }))}
|
|
value={lang}
|
|
onChange={(v) => {
|
|
setLang(v);
|
|
onPick(v);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// --- Access requests (the Invite whitelist) — moved verbatim from Settings → Account -------
|
|
|
|
function AdminInvites() {
|
|
const { t, i18n } = useTranslation();
|
|
const qc = useQueryClient();
|
|
const confirm = useConfirm();
|
|
const me = useMe();
|
|
const invites = useQuery({ queryKey: qk.adminInvites(), queryFn: () => api.adminInvites() });
|
|
const [newEmail, setNewEmail] = useState("");
|
|
const refresh = () => {
|
|
qc.invalidateQueries({ queryKey: qk.adminInvites() });
|
|
qc.invalidateQueries({ queryKey: qk.me() }); // updates the pending badge
|
|
// The stuck-sign-ups section below describes the same backlog and changes with every decision
|
|
// here: approving an address moves a registrant INTO it (active, still unverified), whitelisting
|
|
// one takes a row out. Leaving it stale hides the resend button this epic added for them.
|
|
qc.invalidateQueries({ queryKey: qk.adminPendingAccess() });
|
|
};
|
|
const approve = useMutation({
|
|
mutationFn: ({ id }: { id: number; email: string }) => api.approveInvite(id),
|
|
onSuccess: (_d, vars) => {
|
|
refresh();
|
|
notify({ level: "success", message: t("settings.invites.approved", { email: vars.email }) });
|
|
},
|
|
onError: (e) => notifyActionError(e, t("settings.invites.approveFailed")),
|
|
});
|
|
const deny = useMutation({
|
|
mutationFn: (id: number) => api.denyInvite(id),
|
|
onSuccess: (_d, _id) => {
|
|
refresh();
|
|
notify({ level: "success", message: t("settings.invites.denied") });
|
|
},
|
|
onError: (e) => notifyActionError(e, t("settings.invites.denyFailed")),
|
|
});
|
|
const onDeny = async (i: { id: number; email: string }) => {
|
|
const ok = await confirm({
|
|
title: t("settings.invites.denyTitle"),
|
|
message: t("settings.invites.denyConfirm", { email: i.email }),
|
|
confirmLabel: t("settings.invites.deny"),
|
|
danger: true,
|
|
});
|
|
if (ok) deny.mutate(i.id);
|
|
};
|
|
const remove = useMutation({
|
|
mutationFn: (id: number) => api.deleteInvite(id),
|
|
onSuccess: (d) => {
|
|
refresh();
|
|
// Removing the row is not always a revoke: is_allowed falls back to the env allow-lists, so
|
|
// for an address on those the person keeps access. Saying "removed" alone would mislead.
|
|
if (d.still_allowed_by_env)
|
|
notify({ level: "warning", message: t("settings.invites.deletedStillAllowed") });
|
|
else notify({ level: "success", message: t("settings.invites.deleted") });
|
|
},
|
|
onError: (e) => {
|
|
// A 409 means the list was stale — someone registered on that address since it loaded. Say
|
|
// what to do instead of a generic failure, and refetch so the row re-renders as read-only.
|
|
const conflict = e instanceof HttpError && e.status === 409;
|
|
if (conflict) notifyKnownFailure(e, t("settings.invites.deleteHasAccount"));
|
|
else notifyActionError(e, t("settings.invites.deleteFailed"));
|
|
if (conflict) refresh();
|
|
},
|
|
});
|
|
const onDelete = async (i: Invite) => {
|
|
const ok = await confirm({
|
|
title: t("settings.invites.deleteTitle"),
|
|
// Removing the row is not a revoke when the address is also in the server's env allow-lists —
|
|
// say so while the admin can still change their mind, not in a toast after the fact.
|
|
message: t(
|
|
i.still_allowed_by_env
|
|
? "settings.invites.deleteConfirmStillAllowed"
|
|
: "settings.invites.deleteConfirm",
|
|
{ email: i.email },
|
|
),
|
|
confirmLabel: t("settings.invites.delete"),
|
|
danger: true,
|
|
});
|
|
if (ok) remove.mutate(i.id);
|
|
};
|
|
// Sending is its OWN act, never a side effect of approving an address: the operator opens a door
|
|
// as a possibility (often already agreed in person), and a mail fired automatically would be
|
|
// nudging someone who never asked. `invited_at` comes back on the row so a second click is a
|
|
// decision rather than an accident.
|
|
const invite = useMutation({
|
|
mutationFn: (v: { inv: Invite; lang: LangCode }) => api.sendInvitation(v.inv.id, v.lang),
|
|
onSuccess: (_r, v) => {
|
|
refresh();
|
|
notify({ level: "success", message: t("settings.invites.invited", { email: v.inv.email }) });
|
|
},
|
|
onError: (err) => notifyActionError(err, t("settings.invites.inviteFailed")),
|
|
});
|
|
// The one recipient the app has no language signal about: the admin typed this address in, so
|
|
// nobody ever told us how to write to its owner. The dialog is where that gets decided — and it
|
|
// is also where the "you already wrote to them" warning belongs, next to the button that would
|
|
// do it a second time, rather than only in a tooltip the admin may never hover.
|
|
const onInvite = async (inv: Invite) => {
|
|
let lang: LangCode = LANGUAGES.some((l) => l.code === inv.lang)
|
|
? (inv.lang as LangCode)
|
|
: ((i18n.language.split("-")[0] === "hu" ? "hu" : "en") as LangCode);
|
|
const ok = await confirm({
|
|
title: t("settings.invites.inviteTitle"),
|
|
message: (
|
|
<>
|
|
<p>
|
|
{t(
|
|
inv.invited_at
|
|
? "settings.invites.inviteConfirmAgain"
|
|
: "settings.invites.inviteConfirm",
|
|
{
|
|
email: inv.email,
|
|
time: formatDateTime(inv.invited_at ?? new Date(0).toISOString()),
|
|
},
|
|
)}
|
|
</p>
|
|
<InviteLangPicker initial={lang} onPick={(v) => (lang = v)} />
|
|
</>
|
|
),
|
|
confirmLabel: t("settings.invites.inviteSend"),
|
|
});
|
|
if (ok) invite.mutate({ inv, lang });
|
|
};
|
|
|
|
const add = useMutation({
|
|
mutationFn: (email: string) => api.addInvite(email),
|
|
onSuccess: (_d, email) => {
|
|
setNewEmail("");
|
|
refresh();
|
|
notify({ level: "success", message: t("settings.invites.addedToWhitelist", { email }) });
|
|
},
|
|
onError: (e) => notifyActionError(e, t("settings.invites.addFailed")),
|
|
});
|
|
|
|
const list = invites.data ?? [];
|
|
const pending = list.filter((i) => i.status === "pending");
|
|
const decided = list.filter((i) => i.status !== "pending");
|
|
|
|
return (
|
|
<Section card title={t("settings.invites.title")}>
|
|
{!me.email_configured && (
|
|
<InlineNotice className="mb-3">{t("settings.invites.emailOff")}</InlineNotice>
|
|
)}
|
|
{invites.isError && !invites.data ? (
|
|
<StateMessage tone="error" onRetry={() => invites.refetch()}>
|
|
{t("common.loadError")}
|
|
</StateMessage>
|
|
) : invites.isLoading && !invites.data ? (
|
|
<LoadingState shape="list" />
|
|
) : pending.length === 0 ? (
|
|
<p className="text-sm text-muted">{t("settings.invites.noPending")}</p>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{pending.map((i) => (
|
|
<InviteRow
|
|
key={i.id}
|
|
inv={i}
|
|
onApprove={() => approve.mutate({ id: i.id, email: i.email })}
|
|
onDeny={() => onDeny(i)}
|
|
onDelete={() => onDelete(i)}
|
|
busy={approve.isPending || deny.isPending || remove.isPending}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
if (newEmail.trim()) add.mutate(newEmail.trim());
|
|
}}
|
|
className="flex items-center gap-2 mt-3"
|
|
>
|
|
<Input
|
|
className="flex-1"
|
|
type="email"
|
|
value={newEmail}
|
|
onChange={(e) => setNewEmail(e.target.value)}
|
|
placeholder={t("settings.invites.addPlaceholder")}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="glass"
|
|
className="shrink-0"
|
|
icon={<UserPlus className="w-4 h-4" />}
|
|
>
|
|
{t("settings.invites.add")}
|
|
</Button>
|
|
</form>
|
|
|
|
{decided.length > 0 && (
|
|
<details className="mt-3">
|
|
<summary className="text-xs text-muted cursor-pointer">
|
|
{t("settings.invites.decided", { count: decided.length })}
|
|
</summary>
|
|
<div className="mt-2 space-y-1 text-xs text-muted">
|
|
{decided.map((i) => (
|
|
<div key={i.id} className="flex items-center gap-2">
|
|
<span className="truncate flex-1">{i.email}</span>
|
|
<span className={i.status === "approved" ? "text-accent" : "text-danger"}>
|
|
{i.status}
|
|
</span>
|
|
{/* Only an approved row with NOBODY behind it yet: this button means "the door is
|
|
open, come in", which is meaningless to someone already inside — and half the
|
|
whitelist is existing users. An account that exists but is still stuck has its
|
|
own surface above, with a re-send. The label carries the answer to "did I already
|
|
write to them?", the question whose wrong answer means mailing a person twice. */}
|
|
{i.status === "approved" && !i.has_account && (
|
|
<Tooltip
|
|
hint={
|
|
i.invited_at
|
|
? t("settings.invites.invitedAt", {
|
|
time: formatDateTime(i.invited_at),
|
|
})
|
|
: t("settings.invites.inviteHint")
|
|
}
|
|
>
|
|
<IconButton
|
|
noTitle
|
|
onClick={() => onInvite(i)}
|
|
disabled={invite.isPending}
|
|
label={t("settings.invites.inviteLabel", { email: i.email })}
|
|
>
|
|
{/* Already invited: the glyph fades, the action stays (a resend). */}
|
|
<Mails className={i.invited_at ? "opacity-50" : ""} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
{/* An entry with an account behind it stays read-only: deleting it would revoke that
|
|
user's access, since is_allowed reads this row. Delete the user instead. */}
|
|
{i.has_account ? (
|
|
// `disabled` would drop it from the tab order AND suppress the title, so the
|
|
// reason reached nobody — same call as the Playlists drag handle.
|
|
<IconButton
|
|
aria-disabled
|
|
onClick={(e) => e.preventDefault()}
|
|
label={t("settings.invites.deleteHasAccount")}
|
|
>
|
|
<Trash2 />
|
|
</IconButton>
|
|
) : (
|
|
<Tooltip hint={t("settings.invites.deleteHint")}>
|
|
<IconButton
|
|
noTitle
|
|
variant="danger"
|
|
onClick={() => onDelete(i)}
|
|
disabled={remove.isPending}
|
|
label={t("settings.invites.deleteLabel", { email: i.email })}
|
|
>
|
|
<Trash2 />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</details>
|
|
)}
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
function AdminDemo() {
|
|
const { t } = useTranslation();
|
|
const qc = useQueryClient();
|
|
const confirm = useConfirm();
|
|
const list = useQuery({ queryKey: qk.demoWhitelist(), queryFn: () => api.adminDemoWhitelist() });
|
|
const [newEmail, setNewEmail] = useState("");
|
|
|
|
const add = useMutation({
|
|
mutationFn: (email: string) => api.addDemoWhitelist(email),
|
|
onSuccess: (_d, email) => {
|
|
setNewEmail("");
|
|
qc.invalidateQueries({ queryKey: qk.demoWhitelist() });
|
|
notify({ level: "success", message: t("settings.demo.added", { email }) });
|
|
},
|
|
onError: (e) => notifyActionError(e, t("settings.demo.addFailed")),
|
|
});
|
|
const remove = useMutation({
|
|
mutationFn: (id: number) => api.removeDemoWhitelist(id),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: qk.demoWhitelist() });
|
|
notify({ level: "success", message: t("settings.demo.removed") });
|
|
},
|
|
onError: (e) => notifyActionError(e, t("settings.demo.removeFailed")),
|
|
});
|
|
const onRemove = async (r: { id: number; email: string }) => {
|
|
const ok = await confirm({
|
|
title: t("settings.demo.removeTitle"),
|
|
message: t("settings.demo.removeConfirm", { email: r.email }),
|
|
confirmLabel: t("settings.demo.remove"),
|
|
danger: true,
|
|
});
|
|
if (ok) remove.mutate(r.id);
|
|
};
|
|
const reset = useMutation({
|
|
mutationFn: () => api.resetDemo(),
|
|
onSuccess: (r: { playlists_seeded: number }) =>
|
|
notify({
|
|
level: "success",
|
|
message: t("settings.demo.resetDone", { count: r.playlists_seeded }),
|
|
}),
|
|
onError: (e) => notifyActionError(e, t("settings.demo.resetFailed")),
|
|
});
|
|
|
|
const rows = list.data ?? [];
|
|
|
|
return (
|
|
<Section card title={t("settings.demo.title")}>
|
|
<p className="text-xs text-muted leading-relaxed mb-2">{t("settings.demo.intro")}</p>
|
|
|
|
{rows.length > 0 && (
|
|
<div className="space-y-1.5 mb-3">
|
|
{rows.map((r) => (
|
|
<div key={r.id} className={`${SURFACE.card} flex items-center gap-2 p-2.5`}>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm truncate">{r.email}</div>
|
|
{r.added_by && (
|
|
<div className="text-2xs text-muted truncate">
|
|
{t("settings.demo.addedBy", { who: r.added_by })}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Tooltip hint={t("settings.demo.removeHint")}>
|
|
<IconButton
|
|
noTitle
|
|
label={t("settings.demo.remove")}
|
|
size="sm"
|
|
variant="outline-danger"
|
|
onClick={() => onRemove(r)}
|
|
disabled={remove.isPending}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
if (newEmail.trim()) add.mutate(newEmail.trim());
|
|
}}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Input
|
|
className="flex-1"
|
|
type="email"
|
|
value={newEmail}
|
|
onChange={(e) => setNewEmail(e.target.value)}
|
|
placeholder={t("settings.demo.addPlaceholder")}
|
|
/>
|
|
<Button variant="glass" size="md" className="shrink-0" type="submit">
|
|
<UserPlus className="w-4 h-4" /> {t("settings.demo.add")}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="mt-4 pt-3 border-t border-border">
|
|
<Tooltip hint={t("settings.demo.resetHint")}>
|
|
<Button
|
|
variant="glass"
|
|
size="sm"
|
|
icon={<RotateCcw />}
|
|
loading={reset.isPending}
|
|
onClick={async () => {
|
|
if (
|
|
await confirm({
|
|
title: t("settings.demo.resetTitle"),
|
|
message: t("settings.demo.resetConfirm"),
|
|
confirmLabel: t("settings.demo.reset"),
|
|
danger: true,
|
|
})
|
|
)
|
|
reset.mutate();
|
|
}}
|
|
>
|
|
{t("settings.demo.reset")}
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
function InviteRow({
|
|
inv,
|
|
onApprove,
|
|
onDeny,
|
|
onDelete,
|
|
busy,
|
|
}: {
|
|
inv: Invite;
|
|
onApprove: () => void;
|
|
onDeny: () => void;
|
|
onDelete: () => void;
|
|
busy: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className={`${SURFACE.card} flex items-center gap-2 p-2.5`}>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm truncate">{inv.email}</div>
|
|
{inv.requested_at && (
|
|
<div className="text-2xs text-muted">
|
|
{t("settings.invites.requested", {
|
|
time: formatDateTime(inv.requested_at),
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Tooltip hint={t("settings.invites.approveHint")}>
|
|
<IconButton
|
|
noTitle
|
|
label={t("settings.invites.approve")}
|
|
size="sm"
|
|
variant="outline-accent"
|
|
onClick={onApprove}
|
|
disabled={busy}
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip hint={t("settings.invites.denyHint")}>
|
|
<IconButton
|
|
noTitle
|
|
label={t("settings.invites.deny")}
|
|
size="sm"
|
|
variant="outline-danger"
|
|
onClick={onDeny}
|
|
disabled={busy}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
{/* Deny records a decision and keeps the row; delete forgets the address. Once an account
|
|
exists for it the row is that account's approval gate, so it is managed from Users & roles
|
|
instead — shown as a disabled control rather than omitted, or the admin sees a row that is
|
|
silently missing a button their other rows have. */}
|
|
{inv.has_account ? (
|
|
// aria-disabled, not `disabled`: the reason has to stay reachable by keyboard.
|
|
<IconButton
|
|
variant="outline"
|
|
aria-disabled
|
|
onClick={(e) => e.preventDefault()}
|
|
label={t("settings.invites.deleteHasAccount")}
|
|
>
|
|
<Trash2 />
|
|
</IconButton>
|
|
) : (
|
|
<Tooltip hint={t("settings.invites.deleteHint")}>
|
|
<IconButton
|
|
noTitle
|
|
label={t("settings.invites.deleteLabel", { email: inv.email })}
|
|
size="sm"
|
|
variant="outline-danger"
|
|
onClick={onDelete}
|
|
disabled={busy}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|