441 lines
14 KiB
TypeScript
441 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Button, Field, Input } from "@/components/ui/form";
|
|
|
|
type AdminBetaRequestDto = {
|
|
id: number;
|
|
uuid: string;
|
|
email: string;
|
|
displayName?: string | null;
|
|
invited: boolean;
|
|
verified: boolean;
|
|
active: boolean;
|
|
createdAt?: string;
|
|
updatedAt?: string;
|
|
};
|
|
|
|
type PageResponse<T> = {
|
|
content: T[];
|
|
number: number;
|
|
size: number;
|
|
totalElements: number;
|
|
totalPages: number;
|
|
};
|
|
|
|
// Expected invite response shape (adjust fields if your DTO differs)
|
|
type AdminInviteResponse = {
|
|
ok?: boolean;
|
|
email?: string;
|
|
|
|
// backend returns this
|
|
inviteUrl?: string;
|
|
|
|
// keep these optional if you ever add them later
|
|
magicUrl?: string;
|
|
token?: string;
|
|
};
|
|
|
|
async function fetchJson(path: string, init: RequestInit = {}) {
|
|
const res = await fetch(path, {
|
|
...init,
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
...(init.headers ?? {}),
|
|
},
|
|
cache: "no-store",
|
|
});
|
|
|
|
const text = await res.text().catch(() => "");
|
|
const data = text
|
|
? (() => {
|
|
try {
|
|
return JSON.parse(text);
|
|
} catch {
|
|
return text;
|
|
}
|
|
})()
|
|
: null;
|
|
|
|
if (!res.ok) {
|
|
const msg =
|
|
typeof data === "string"
|
|
? data
|
|
: data?.message || data?.error || `Request failed (${res.status})`;
|
|
throw new Error(msg);
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
function Badge({
|
|
ok,
|
|
yes = "Yes",
|
|
no = "No",
|
|
}: {
|
|
ok: boolean;
|
|
yes?: string;
|
|
no?: string;
|
|
}) {
|
|
return (
|
|
<span
|
|
className={[
|
|
"inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium",
|
|
ok
|
|
? "border border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
|
|
: "border border-zinc-700 bg-zinc-950/40 text-zinc-400",
|
|
].join(" ")}
|
|
>
|
|
{ok ? yes : no}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default function AdminBetaInvitesPage() {
|
|
// ------------------------------
|
|
// Batch invites
|
|
// ------------------------------
|
|
const [dryRun, setDryRun] = useState(true);
|
|
const [limit, setLimit] = useState("25");
|
|
const [tokenMinutes, setTokenMinutes] = useState("30");
|
|
const [loadingBatch, setLoadingBatch] = useState(false);
|
|
const [batchResult, setBatchResult] = useState<any>(null);
|
|
const [batchError, setBatchError] = useState<string | null>(null);
|
|
|
|
async function runInvites() {
|
|
setLoadingBatch(true);
|
|
setBatchError(null);
|
|
setBatchResult(null);
|
|
|
|
try {
|
|
const qs = new URLSearchParams({
|
|
dryRun: String(dryRun),
|
|
limit: String(limit || "0"),
|
|
tokenMinutes: String(tokenMinutes || "30"),
|
|
});
|
|
|
|
const data = await fetchJson(`/api/admin/beta-invites?${qs.toString()}`, {
|
|
method: "POST",
|
|
});
|
|
|
|
setBatchResult(data);
|
|
await loadRequests();
|
|
} catch (e: any) {
|
|
setBatchError(e?.message ?? "Failed");
|
|
} finally {
|
|
setLoadingBatch(false);
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// Requests table
|
|
// ------------------------------
|
|
const [page, setPage] = useState(0);
|
|
const size = 25;
|
|
|
|
const [loadingList, setLoadingList] = useState(false);
|
|
const [listError, setListError] = useState<string | null>(null);
|
|
const [requests, setRequests] =
|
|
useState<PageResponse<AdminBetaRequestDto> | null>(null);
|
|
|
|
// per-row loading state
|
|
const [rowBusy, setRowBusy] = useState<Record<number, boolean>>({});
|
|
|
|
// last invite response (for visibility / debug)
|
|
const [lastInvite, setLastInvite] = useState<AdminInviteResponse | null>(
|
|
null
|
|
);
|
|
|
|
async function loadRequests() {
|
|
setLoadingList(true);
|
|
setListError(null);
|
|
|
|
try {
|
|
const data = (await fetchJson(
|
|
`/api/admin/beta/requests?page=${page}&size=${size}`,
|
|
{ method: "GET" }
|
|
)) as PageResponse<AdminBetaRequestDto>;
|
|
|
|
setRequests(data);
|
|
} catch (e: any) {
|
|
setListError(e?.message ?? "Failed to load beta requests");
|
|
} finally {
|
|
setLoadingList(false);
|
|
}
|
|
}
|
|
|
|
async function inviteSingle(userId: number): Promise<AdminInviteResponse> {
|
|
// calls backend: POST /api/v1/admin/beta/requests/{userId}/invite
|
|
return (await fetchJson(`/api/admin/beta/requests/${userId}/invite`, {
|
|
method: "POST",
|
|
})) as AdminInviteResponse;
|
|
}
|
|
|
|
async function onSendInviteEmail(userId: number) {
|
|
setListError(null);
|
|
setLastInvite(null);
|
|
setRowBusy((m) => ({ ...m, [userId]: true }));
|
|
|
|
try {
|
|
const resp = await inviteSingle(userId);
|
|
setLastInvite(resp);
|
|
await loadRequests();
|
|
} catch (e: any) {
|
|
setListError(e?.message ?? "Failed to send invite");
|
|
} finally {
|
|
setRowBusy((m) => ({ ...m, [userId]: false }));
|
|
}
|
|
}
|
|
|
|
async function onCopyInviteLink(userId: number) {
|
|
setListError(null);
|
|
setLastInvite(null);
|
|
setRowBusy((m) => ({ ...m, [userId]: true }));
|
|
|
|
try {
|
|
const resp = await inviteSingle(userId);
|
|
setLastInvite(resp);
|
|
await loadRequests();
|
|
|
|
// build URL
|
|
const url =
|
|
resp.inviteUrl || // what your backend returns
|
|
resp.magicUrl ||
|
|
(resp.token
|
|
? `${window.location.origin}/beta/magic?token=${resp.token}`
|
|
: null);
|
|
|
|
if (!url) {
|
|
throw new Error(
|
|
`Invite response missing inviteUrl. Backend should return {"inviteUrl": "..."}`
|
|
);
|
|
}
|
|
|
|
await navigator.clipboard.writeText(url);
|
|
} catch (e: any) {
|
|
setListError(e?.message ?? "Failed to copy invite link");
|
|
} finally {
|
|
setRowBusy((m) => ({ ...m, [userId]: false }));
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadRequests();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [page]);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-xl font-semibold">Beta Access</h1>
|
|
<p className="mt-1 text-sm text-zinc-400">
|
|
Review pending beta requests and send invite links (batch or
|
|
per-user).
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-[280px_minmax(0,1fr)] xl:grid-cols-[320px_minmax(0,1fr)]">
|
|
{/* Left: Batch Invites */}
|
|
<div className="rounded-lg border border-zinc-900 bg-zinc-950 p-4 space-y-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-zinc-500">
|
|
Batch Invites
|
|
</h2>
|
|
<p className="mt-1 text-sm text-zinc-400">
|
|
Runs the backend batch invite sender.
|
|
</p>
|
|
</div>
|
|
|
|
<span className="shrink-0 rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-xs text-amber-200">
|
|
{dryRun ? "Dry run" : "Live send"}
|
|
</span>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2 text-sm text-zinc-200">
|
|
<input
|
|
type="checkbox"
|
|
checked={dryRun}
|
|
onChange={(e) => setDryRun(e.target.checked)}
|
|
/>
|
|
Dry run (do everything except actually send)
|
|
</label>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="Limit" htmlFor="limit">
|
|
<Input
|
|
id="limit"
|
|
value={limit}
|
|
onChange={(e) => setLimit(e.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Token minutes" htmlFor="tokenMinutes">
|
|
<Input
|
|
id="tokenMinutes"
|
|
value={tokenMinutes}
|
|
onChange={(e) => setTokenMinutes(e.target.value)}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<Button onClick={runInvites} disabled={loadingBatch}>
|
|
{loadingBatch ? "Running…" : "Send Beta Invites"}
|
|
</Button>
|
|
|
|
{batchError && (
|
|
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
|
{batchError}
|
|
</div>
|
|
)}
|
|
|
|
{batchResult && (
|
|
<pre className="overflow-auto rounded-md border border-zinc-800 bg-black/40 p-3 text-xs text-zinc-200">
|
|
{JSON.stringify(batchResult, null, 2)}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: Requests List */}
|
|
<div className="rounded-lg border border-zinc-900 bg-zinc-950 p-4 space-y-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-zinc-500">
|
|
Beta Requests
|
|
</h2>
|
|
<p className="mt-1 text-sm text-zinc-400">
|
|
Users with role <span className="text-zinc-200">BETA</span> and{" "}
|
|
<span className="text-zinc-200">is_active=false</span>.
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={loadRequests}
|
|
disabled={loadingList}
|
|
className="w-auto px-6"
|
|
>
|
|
{loadingList ? "Refreshing…" : "Refresh"}
|
|
</Button>
|
|
</div>
|
|
|
|
{listError && (
|
|
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
|
{listError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="overflow-x-auto rounded-md border border-zinc-800">
|
|
{" "}
|
|
<table className="min-w-[680px] w-full text-left text-sm">
|
|
<thead className="bg-black/30 text-xs text-zinc-500">
|
|
<tr className="border-b border-zinc-800">
|
|
<th className="px-3 py-2">Email</th>
|
|
<th className="px-3 py-2">Invited</th>
|
|
<th className="px-3 py-2">Verified</th>
|
|
<th className="px-3 py-2">Active</th>
|
|
<th className="px-3 py-2 text-right w-[190px] whitespace-nowrap">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody className="text-zinc-200">
|
|
{requests?.content?.length ? (
|
|
requests.content.map((u) => {
|
|
const busy = !!rowBusy[u.id];
|
|
|
|
return (
|
|
<tr key={u.id} className="border-b border-zinc-900">
|
|
<td className="px-3 py-2">
|
|
<div className="font-medium">{u.email}</div>
|
|
<div className="text-xs text-zinc-500">
|
|
{u.displayName ?? "—"} • #{u.id}
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-3 py-2">
|
|
<Badge ok={u.invited} yes="Invited" no="—" />
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<Badge ok={u.verified} yes="Verified" no="—" />
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<Badge ok={u.active} yes="Active" no="Inactive" />
|
|
</td>
|
|
|
|
<td className="px-3 py-2 w-[190px]">
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
onClick={() => onCopyInviteLink(u.id)}
|
|
disabled={busy}
|
|
className="rounded-md border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-900 disabled:opacity-60"
|
|
title="Dev helper: generate invite and copy URL (also triggers invite generation server-side)"
|
|
>
|
|
{busy ? "Working…" : "Copy link (dev)"}
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => onSendInviteEmail(u.id)}
|
|
disabled={busy}
|
|
className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-200 hover:bg-amber-500/15 disabled:opacity-60"
|
|
title="Send invite email to this user"
|
|
>
|
|
{busy ? "Working…" : "Send invite email"}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
) : (
|
|
<tr>
|
|
<td className="px-3 py-6 text-sm text-zinc-400" colSpan={5}>
|
|
{loadingList ? "Loading…" : "No pending beta requests."}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* pager */}
|
|
<div className="flex items-center justify-between text-xs text-zinc-500">
|
|
<button
|
|
className="rounded-md border border-zinc-800 bg-black/30 px-2 py-1 disabled:opacity-50"
|
|
disabled={!requests || requests.number <= 0 || loadingList}
|
|
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
|
>
|
|
Prev
|
|
</button>
|
|
|
|
<span>
|
|
Page {requests ? requests.number + 1 : 1} of{" "}
|
|
{requests ? requests.totalPages : 1} •{" "}
|
|
{requests ? requests.totalElements : 0} total
|
|
</span>
|
|
|
|
<button
|
|
className="rounded-md border border-zinc-800 bg-black/30 px-2 py-1 disabled:opacity-50"
|
|
disabled={
|
|
!requests ||
|
|
loadingList ||
|
|
requests.number >= requests.totalPages - 1
|
|
}
|
|
onClick={() => setPage((p) => p + 1)}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
|
|
{/* optional debug panel */}
|
|
{lastInvite && (
|
|
<pre className="overflow-auto rounded-md border border-zinc-800 bg-black/40 p-3 text-xs text-zinc-200">
|
|
{JSON.stringify(lastInvite, null, 2)}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|