110 lines
7.5 KiB
TypeScript
110 lines
7.5 KiB
TypeScript
import { groupAccessWindows, groups, userGroupMemberships, users } from "@minecraft-account-manager/database";
|
|
import { asc, count, desc } from "drizzle-orm";
|
|
import Link from "next/link";
|
|
import { AdminModalForm } from "@/components/admin-modal-form";
|
|
import { GroupPolicyControl } from "@/components/group-policy-control";
|
|
import { db } from "@/lib/database";
|
|
import { effectiveGroupMemberCount } from "@/lib/group-management";
|
|
import { groupScheduleStatus } from "@/lib/group-schedule";
|
|
import { createGroup, setGroupAccess, setGroupAnonymizedNetworkAccess } from "./actions";
|
|
|
|
const errors: Record<string, string> = {
|
|
"invalid-group": "Enter a group name and an optional description of no more than 500 characters.",
|
|
"duplicate-group": "A group with that name already exists.",
|
|
"create-failed": "The group could not be created.",
|
|
"unknown-group": "That group no longer exists.",
|
|
"invalid-delete": "Confirm the group deletion before continuing.",
|
|
"protected-group": "The protected default group cannot be deleted.",
|
|
};
|
|
|
|
const savedMessages: Record<string, string> = {
|
|
deleted: "Group deleted. Its former members now use the default group.",
|
|
access: "Minecraft access policy updated.",
|
|
"network-access": "VPN, proxy, and Tor policy updated.",
|
|
};
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function GroupsPage({ searchParams }: { searchParams: Promise<{ error?: string; saved?: string }> }) {
|
|
const query = await searchParams;
|
|
const [allGroups, memberships, [registeredUsers], scheduleCounts] = await Promise.all([
|
|
db.select().from(groups).orderBy(desc(groups.isDefault), asc(groups.name)),
|
|
db.select({ groupId: userGroupMemberships.groupId }).from(userGroupMemberships),
|
|
db.select({ count: count() }).from(users),
|
|
db.select({ groupId: groupAccessWindows.groupId, count: count() })
|
|
.from(groupAccessWindows)
|
|
.groupBy(groupAccessWindows.groupId),
|
|
]);
|
|
const scheduleCountByGroup = new Map(scheduleCounts.map((schedule) => [schedule.groupId, Number(schedule.count)]));
|
|
return (
|
|
<main className="mx-auto max-w-6xl px-6 py-14">
|
|
<header className="flex flex-col gap-6 border-b border-line pb-8 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-accent">Admission policy</p>
|
|
<h1 className="mt-4 font-display text-5xl font-black uppercase">Access groups</h1>
|
|
<p className="mt-5 max-w-2xl leading-7 text-muted">One effective group controls Minecraft and VPN access. Every policy change asks for confirmation before it applies.</p>
|
|
</div>
|
|
<AdminModalForm
|
|
action={createGroup}
|
|
description="Create a named access group. Both policies start denied unless you explicitly enable them below."
|
|
submitLabel="Create group"
|
|
title="Add access group"
|
|
triggerClassName="border border-ink bg-ink px-5 py-3 font-mono text-[10px] font-bold uppercase tracking-wider text-canvas"
|
|
triggerLabel="Add group"
|
|
>
|
|
<div className="space-y-5">
|
|
<label className="block text-sm font-bold">Name<input autoComplete="off" className="mt-2 w-full border border-line bg-canvas px-4 py-3 font-normal outline-none focus:border-accent" maxLength={50} name="name" required /></label>
|
|
<label className="block text-sm font-bold">Description<textarea className="mt-2 min-h-28 w-full resize-y border border-line bg-canvas px-4 py-3 font-normal outline-none focus:border-accent" maxLength={500} name="description" /></label>
|
|
<PolicyCheckbox description="Allow members to connect to Minecraft." label="Minecraft access" name="accessEnabled" />
|
|
<PolicyCheckbox description="Allow confirmed VPN, proxy, and Tor connections." label="VPN / proxy / Tor exception" name="anonymizedNetworksAllowed" />
|
|
</div>
|
|
</AdminModalForm>
|
|
</header>
|
|
|
|
{query.error && <p className="mt-7 border-l-2 border-accent bg-panel px-5 py-4 text-sm text-accent" role="alert">{errors[query.error] ?? "The group operation failed."}</p>}
|
|
{query.saved && <p className="mt-7 border-l-2 border-signal bg-panel px-5 py-4 text-sm" role="status">{savedMessages[query.saved] ?? "Group updated."}</p>}
|
|
|
|
<div className="mt-9 overflow-x-auto border border-line bg-panel shadow-[8px_8px_0_var(--color-shadow)]">
|
|
<table className="w-full min-w-[880px] border-collapse text-left">
|
|
<caption className="sr-only">Access groups and their effective policies</caption>
|
|
<thead className="border-b border-line font-mono text-[10px] uppercase tracking-widest text-muted">
|
|
<tr><th className="p-4" scope="col">Name</th><th className="p-4" scope="col">Minecraft access</th><th className="p-4" scope="col">Schedule</th><th className="p-4" scope="col">VPN access</th><th className="p-4 text-right" scope="col">Users</th></tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-line">
|
|
{allGroups.map((group) => {
|
|
const memberCount = effectiveGroupMemberCount(
|
|
Number(registeredUsers?.count ?? 0),
|
|
memberships.map((membership) => membership.groupId),
|
|
group,
|
|
);
|
|
const scheduleStatus = groupScheduleStatus(scheduleCountByGroup.get(group.id) ?? 0);
|
|
return (
|
|
<tr className="transition-colors hover:bg-canvas/60" key={group.id}>
|
|
<th className="p-4 text-left" scope="row">
|
|
<Link className="font-display text-xl font-black uppercase underline decoration-line underline-offset-4 hover:text-accent" href={`/admin/groups/${group.id}`}>{group.name}</Link>
|
|
{group.isDefault && <span className="ml-3 bg-ink px-2 py-1 font-mono text-[8px] font-bold uppercase text-canvas">Default</span>}
|
|
</th>
|
|
<td className="p-4"><GroupPolicyControl action={setGroupAccess} enabled={group.accessEnabled} groupId={group.id} groupName={group.name} memberCount={memberCount} policy="Minecraft access" returnLocation="list" /></td>
|
|
<td className="p-4"><Link aria-label={`${scheduleStatus}. Edit schedule for ${group.name}`} className={`font-mono text-[10px] font-bold uppercase underline underline-offset-4 ${scheduleStatus === "Unrestricted" ? "text-muted" : "text-accent"}`} href={`/admin/groups/${group.id}#group-schedule`}>{scheduleStatus}</Link></td>
|
|
<td className="p-4"><GroupPolicyControl action={setGroupAnonymizedNetworkAccess} enabled={group.anonymizedNetworksAllowed} groupId={group.id} groupName={group.name} memberCount={memberCount} policy="VPN / proxy / Tor" returnLocation="list" /></td>
|
|
<td className="p-4 text-right font-mono text-sm font-bold">{memberCount}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p className="mt-4 text-xs leading-5 text-muted">Users without an explicit assignment count toward <strong className="text-ink">everyone</strong>.</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function PolicyCheckbox({ description, label, name }: { description: string; label: string; name: string }) {
|
|
return (
|
|
<label className="flex cursor-pointer items-start justify-between gap-4 border border-line bg-canvas p-4">
|
|
<span><span className="block font-mono text-xs font-bold uppercase">{label}</span><span className="mt-1 block text-xs leading-5 text-muted">{description}</span></span>
|
|
<input className="mt-1 size-5 accent-[var(--color-accent)]" name={name} type="checkbox" value="yes" />
|
|
</label>
|
|
);
|
|
}
|