feat: roles/permissions system and Nostr profile display on admin users

Introduce granular role-based permissions with SuperAdmin env override, admin roles UI, and permission-gated API routes. Fix admin user Nostr metadata by batching relay profile fetches, normalizing npub pubkeys to hex, and adding reusable NostrAvatar/useNostrProfile components.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
bbe
2026-06-23 08:46:56 +02:00
co-authored by Cursor
parent 3bdd01dedf
commit 70e3e0633d
38 changed files with 1556 additions and 419 deletions
+8 -4
View File
@@ -6,21 +6,25 @@ import { useAuth } from "@/hooks/useAuth";
import { AdminSidebar } from "@/components/admin/AdminSidebar";
export default function AdminLayout({ children }: { children: React.ReactNode }) {
const { user, loading } = useAuth();
const { user, loading, isSuperAdmin, permissions } = useAuth();
const router = useRouter();
// Access to the dashboard requires at least one elevated permission, or being
// a SuperAdmin. Guests (no permissions) are sent to their own dashboard.
const hasDashboardAccess = isSuperAdmin || permissions.length > 0;
useEffect(() => {
if (loading) return;
if (!user) {
router.push("/login");
return;
}
if (user.role !== "ADMIN" && user.role !== "MODERATOR") {
if (!hasDashboardAccess) {
router.push("/dashboard");
}
}, [user, loading, router]);
}, [user, loading, hasDashboardAccess, router]);
if (loading || !user || (user.role !== "ADMIN" && user.role !== "MODERATOR")) {
if (loading || !user || !hasDashboardAccess) {
return null;
}
+5 -1
View File
@@ -86,7 +86,11 @@ export default function OverviewPage() {
<StatCard icon={Calendar} label="Total Meetups" value={meetups.length} />
<StatCard icon={FileText} label="Blog Posts" value={posts.length} />
<StatCard icon={Tag} label="Categories" value={categories.length} />
<StatCard icon={User} label="Your Role" value={user.role} />
<StatCard
icon={User}
label="Your Role"
value={user.isSuperAdmin ? "SuperAdmin" : user.role}
/>
</div>
{upcomingMeetup && (
+3 -3
View File
@@ -6,7 +6,7 @@ import { useAuth } from "@/hooks/useAuth";
import { LogIn } from "lucide-react";
export default function AdminPage() {
const { user, loading, login } = useAuth();
const { user, loading, login, isSuperAdmin, permissions } = useAuth();
const router = useRouter();
const [error, setError] = useState("");
const [loggingIn, setLoggingIn] = useState(false);
@@ -14,12 +14,12 @@ export default function AdminPage() {
useEffect(() => {
if (loading) return;
if (!user) return;
if (user.role === "ADMIN" || user.role === "MODERATOR") {
if (isSuperAdmin || permissions.length > 0) {
router.push("/admin/overview");
} else {
router.push("/dashboard");
}
}, [user, loading, router]);
}, [user, loading, isSuperAdmin, permissions, router]);
const handleLogin = async () => {
setError("");
+230
View File
@@ -0,0 +1,230 @@
"use client";
import { Fragment, useEffect, useMemo, useState } from "react";
import { api } from "@/lib/api";
import { useAuth } from "@/hooks/useAuth";
import { Check, Lock, Save } from "lucide-react";
interface PermissionDef {
key: string;
label: string;
group: string;
}
type Matrix = Record<string, Record<string, boolean>>;
const ROLE_LABELS: Record<string, string> = {
admin: "Admin",
moderator: "Moderator",
writer: "Writer",
};
function buildMatrix(
roles: string[],
perms: PermissionDef[],
granted: Record<string, string[]>
): Matrix {
const matrix: Matrix = {};
for (const role of roles) {
matrix[role] = {};
const set = new Set(granted[role] ?? []);
for (const perm of perms) {
matrix[role][perm.key] = set.has(perm.key);
}
}
return matrix;
}
export default function RolesPage() {
const { can } = useAuth();
const allowed = can("roles.edit_permissions");
const [permissions, setPermissions] = useState<PermissionDef[]>([]);
const [roles, setRoles] = useState<string[]>([]);
const [matrix, setMatrix] = useState<Matrix>({});
const [original, setOriginal] = useState<Matrix>({});
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [savingRole, setSavingRole] = useState<string | null>(null);
const [notice, setNotice] = useState("");
const load = async () => {
setLoading(true);
try {
const [registry, current] = await Promise.all([
api.getPermissionRegistry(),
api.getRolePermissions(),
]);
const granted: Record<string, string[]> = {};
for (const r of current.roles) granted[r.role] = r.permissions;
const built = buildMatrix(registry.roles, registry.permissions, granted);
setPermissions(registry.permissions);
setRoles(registry.roles);
setMatrix(built);
setOriginal(built);
} catch (err: any) {
setError(err.message);
} finally {
setLoading(false);
}
};
useEffect(() => {
if (allowed) load();
else setLoading(false);
}, [allowed]);
const groups = useMemo(() => {
const order: string[] = [];
const byGroup: Record<string, PermissionDef[]> = {};
for (const perm of permissions) {
if (!byGroup[perm.group]) {
byGroup[perm.group] = [];
order.push(perm.group);
}
byGroup[perm.group].push(perm);
}
return order.map((group) => ({ group, perms: byGroup[group] }));
}, [permissions]);
const dirtyRoles = useMemo(() => {
return roles.filter((role) =>
permissions.some((perm) => matrix[role]?.[perm.key] !== original[role]?.[perm.key])
);
}, [roles, permissions, matrix, original]);
const toggle = (role: string, key: string) => {
setNotice("");
setMatrix((prev) => ({
...prev,
[role]: { ...prev[role], [key]: !prev[role]?.[key] },
}));
};
const saveRole = async (role: string) => {
setSavingRole(role);
setError("");
setNotice("");
try {
const keys = permissions.filter((p) => matrix[role]?.[p.key]).map((p) => p.key);
await api.updateRolePermissions(role, keys);
setOriginal((prev) => ({ ...prev, [role]: { ...matrix[role] } }));
setNotice(`${ROLE_LABELS[role] ?? role} permissions saved.`);
} catch (err: any) {
setError(err.message);
} finally {
setSavingRole(null);
}
};
if (!allowed) {
return (
<div className="flex items-center justify-center min-h-[60vh]">
<div className="text-on-surface/50">
You do not have permission to manage roles.
</div>
</div>
);
}
if (loading) {
return (
<div className="flex items-center justify-center min-h-[60vh]">
<div className="text-on-surface/50">Loading roles...</div>
</div>
);
}
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-on-surface">Roles and Permissions</h1>
<p className="text-on-surface/60 text-sm mt-1">
Toggle what each role can do. SuperAdmin always has every permission and
cannot be changed.
</p>
</div>
{error && <p className="text-error text-sm">{error}</p>}
{notice && <p className="text-primary text-sm">{notice}</p>}
<div className="bg-surface-container-low rounded-xl overflow-x-auto">
<table className="w-full text-sm border-collapse">
<thead>
<tr className="text-left">
<th className="sticky left-0 bg-surface-container-low p-4 font-semibold text-on-surface/70">
Permission
</th>
{roles.map((role) => (
<th key={role} className="p-4 text-center font-semibold text-on-surface/70">
{ROLE_LABELS[role] ?? role}
</th>
))}
<th className="p-4 text-center font-semibold text-on-surface/70">
<span className="inline-flex items-center gap-1">
<Lock size={12} />
SuperAdmin
</span>
</th>
</tr>
</thead>
<tbody>
{groups.map(({ group, perms }) => (
<Fragment key={group}>
<tr>
<td
colSpan={roles.length + 2}
className="bg-surface-container px-4 py-2 text-xs font-bold uppercase tracking-wide text-on-surface/50"
>
{group}
</td>
</tr>
{perms.map((perm) => (
<tr key={perm.key} className="border-b border-surface-container-high/40">
<td className="sticky left-0 bg-surface-container-low p-4">
<div className="text-on-surface">{perm.label}</div>
<div className="text-on-surface/40 text-xs font-mono">{perm.key}</div>
</td>
{roles.map((role) => (
<td key={role} className="p-4 text-center">
<input
type="checkbox"
checked={!!matrix[role]?.[perm.key]}
onChange={() => toggle(role, perm.key)}
className="h-4 w-4 accent-primary cursor-pointer"
aria-label={`${ROLE_LABELS[role] ?? role}: ${perm.label}`}
/>
</td>
))}
<td className="p-4 text-center text-primary/70">
<Check size={16} className="inline" aria-label="Always granted" />
</td>
</tr>
))}
</Fragment>
))}
</tbody>
</table>
</div>
<div className="flex flex-wrap gap-3">
{roles.map((role) => {
const dirty = dirtyRoles.includes(role);
return (
<button
key={role}
onClick={() => saveRole(role)}
disabled={!dirty || savingRole === role}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
>
<Save size={16} />
{savingRole === role
? "Saving..."
: `Save ${ROLE_LABELS[role] ?? role}${dirty ? " *" : ""}`}
</button>
);
})}
</div>
</div>
);
}
+212 -235
View File
@@ -1,16 +1,39 @@
"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { nip19 } from "nostr-tools";
import { api } from "@/lib/api";
import { cn, formatDate } from "@/lib/utils";
import { fetchNostrProfile, type NostrProfile } from "@/lib/nostr";
import { ShieldCheck, ShieldOff, UserPlus } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { useNostrProfile } from "@/hooks/useNostrProfile";
import { NostrAvatar } from "@/components/nostr/NostrAvatar";
import { formatDate } from "@/lib/utils";
import { Lock } from "lucide-react";
function hexToNpub(hex: string): string {
const ROLE_RANK: Record<string, number> = {
superadmin: 4,
admin: 3,
moderator: 2,
writer: 1,
guest: 0,
};
const ROLE_OPTIONS: { value: string; label: string }[] = [
{ value: "admin", label: "Admin" },
{ value: "moderator", label: "Moderator" },
{ value: "writer", label: "Writer" },
{ value: "guest", label: "Guest (no role)" },
];
function normalizeRole(role: string | null | undefined): string {
return role && ROLE_RANK[role] !== undefined ? role : "guest";
}
function hexToNpub(pubkey: string): string {
if (!pubkey) return "";
// Already an npub (some users are stored in npub form).
if (pubkey.startsWith("npub1")) return pubkey;
try {
return nip19.npubEncode(hex);
return nip19.npubEncode(pubkey);
} catch {
return "";
}
@@ -21,24 +44,169 @@ function shortenNpub(npub: string): string {
return `${npub.slice(0, 14)}...${npub.slice(-10)}`;
}
function profileInitials(profile: NostrProfile | undefined, npub: string): string {
const n = profile?.name || profile?.displayName;
if (n?.trim()) return n.trim().slice(0, 2).toUpperCase();
if (npub.length >= 8) return npub.slice(5, 7).toUpperCase();
return "?";
interface UserRowProps {
user: any;
draft: string;
onDraftChange: (pubkey: string, value: string) => void;
savingPubkey: string | null;
onSaveUsername: (pubkey: string, currentUsername: string | null | undefined) => void;
onCancelUsername: (pubkey: string, stored: string | null | undefined) => void;
hostname: string;
copiedPubkey: string | null;
onCopyNpub: (pubkey: string) => void;
callerRank: number;
isSuperAdmin: boolean;
savingRole: string | null;
onRoleChange: (pubkey: string, role: string) => void;
}
function UserRow({
user,
draft,
onDraftChange,
savingPubkey,
onSaveUsername,
onCancelUsername,
hostname,
copiedPubkey,
onCopyNpub,
callerRank,
isSuperAdmin,
savingRole,
onRoleChange,
}: UserRowProps) {
const { profile, loading: profileLoading } = useNostrProfile(user.pubkey);
const stored = user.username ?? "";
const usernameDirty = draft.trim().toLowerCase() !== stored.toLowerCase();
const fullNpub = hexToNpub(user.pubkey);
const nostrDisplay = profile?.name || profile?.displayName;
return (
<div className="bg-surface-container-low rounded-xl p-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="flex-1 min-w-0 flex gap-4 items-start">
<NostrAvatar pubkey={user.pubkey} size={56} fallbackText={fullNpub} />
<div className="flex-1 min-w-0 space-y-3">
<div>
<p className="text-on-surface font-semibold text-base truncate">
{profileLoading ? (
<span className="text-on-surface/40 font-normal"></span>
) : nostrDisplay ? (
nostrDisplay
) : (
<span className="text-on-surface/50 font-normal">No Nostr name</span>
)}
</p>
<button
type="button"
onClick={() => onCopyNpub(user.pubkey)}
className="mt-1 text-left font-mono text-sm text-on-surface/80 hover:text-primary transition-colors cursor-pointer break-all w-full"
title={fullNpub || "Copy npub"}
>
{copiedPubkey === user.pubkey
? "Copied!"
: fullNpub
? shortenNpub(fullNpub)
: `${user.pubkey?.slice(0, 12)}...${user.pubkey?.slice(-8)}`}
</button>
</div>
<div>
<p className="text-xs font-semibold text-on-surface/50 mb-1 uppercase tracking-wide">
NIP-05 username
</p>
<p className="text-on-surface-variant text-xs mb-2">
Reserved names from the site blocklist can be assigned here (users cannot claim them on the dashboard).
</p>
<div className="flex flex-wrap items-center gap-2">
<input
value={draft}
onChange={(e) => onDraftChange(user.pubkey, e.target.value)}
disabled={savingPubkey === user.pubkey}
placeholder="local-part"
className="bg-surface-container-highest text-on-surface rounded-lg px-3 py-2 text-sm font-mono min-w-[8rem] max-w-full flex-1 focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
/>
<span className="text-on-surface/50 text-sm font-mono shrink-0">
@{hostname || "…"}
</span>
<button
type="button"
onClick={() => onSaveUsername(user.pubkey, user.username)}
disabled={savingPubkey === user.pubkey || !draft.trim() || !usernameDirty}
className="px-3 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
>
{savingPubkey === user.pubkey ? "Saving…" : "Save"}
</button>
<button
type="button"
onClick={() => onCancelUsername(user.pubkey, user.username)}
disabled={savingPubkey === user.pubkey || !usernameDirty}
className="px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 text-sm hover:text-on-surface transition-colors disabled:opacity-50 whitespace-nowrap"
>
Cancel
</button>
</div>
{draft.trim() && (
<p className="text-on-surface-variant text-xs font-mono mt-2">
{draft.trim().toLowerCase()}@{hostname || "…"}
</p>
)}
</div>
<div className="flex items-center gap-3 flex-wrap">
{user.isSuperAdmin ? (
<span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold bg-primary-container/20 text-primary">
<Lock size={12} />
SuperAdmin
</span>
) : (
(() => {
const targetRole = normalizeRole(user.role);
const targetRank = ROLE_RANK[targetRole];
const canModify = callerRank > targetRank;
return (
<label className="flex items-center gap-2">
<span className="text-xs font-semibold text-on-surface/50 uppercase tracking-wide">
Role
</span>
<select
value={targetRole}
disabled={!canModify || savingRole === user.pubkey}
onChange={(e) => onRoleChange(user.pubkey, e.target.value)}
className="bg-surface-container-highest text-on-surface rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
>
{ROLE_OPTIONS.map((opt) => (
<option
key={opt.value}
value={opt.value}
disabled={!isSuperAdmin && ROLE_RANK[opt.value] >= callerRank}
>
{opt.label}
</option>
))}
</select>
</label>
);
})()
)}
{user.createdAt && (
<span className="text-on-surface/40 text-xs">
Joined {formatDate(user.createdAt)}
</span>
)}
</div>
</div>
</div>
</div>
);
}
export default function UsersPage() {
const { user: currentUser, isSuperAdmin } = useAuth();
const [users, setUsers] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [promotePubkey, setPromotePubkey] = useState("");
const [promoting, setPromoting] = useState(false);
const [savingRole, setSavingRole] = useState<string | null>(null);
const [hostname, setHostname] = useState("");
const [usernameDrafts, setUsernameDrafts] = useState<Record<string, string>>({});
const [savingPubkey, setSavingPubkey] = useState<string | null>(null);
const [nostrByPubkey, setNostrByPubkey] = useState<Record<string, NostrProfile>>({});
const [nostrLoading, setNostrLoading] = useState(false);
const [copiedPubkey, setCopiedPubkey] = useState<string | null>(null);
const loadUsers = async () => {
@@ -65,32 +233,6 @@ export default function UsersPage() {
setHostname(typeof window !== "undefined" ? window.location.hostname : "");
}, []);
useEffect(() => {
if (users.length === 0) {
setNostrByPubkey({});
setNostrLoading(false);
return;
}
let cancelled = false;
setNostrLoading(true);
setNostrByPubkey({});
(async () => {
const entries = await Promise.all(
users.map(async (u: { pubkey: string }) => {
const profile = await fetchNostrProfile(u.pubkey);
return [u.pubkey, profile] as const;
})
);
if (!cancelled) {
setNostrByPubkey(Object.fromEntries(entries));
setNostrLoading(false);
}
})();
return () => {
cancelled = true;
};
}, [users]);
const handleCopyNpub = async (pubkey: string) => {
const full = hexToNpub(pubkey);
if (!full) return;
@@ -103,39 +245,20 @@ export default function UsersPage() {
}
};
const handlePromote = async () => {
if (!promotePubkey.trim()) return;
setPromoting(true);
const callerRank = isSuperAdmin
? ROLE_RANK.superadmin
: ROLE_RANK[normalizeRole(currentUser?.role)];
const handleRoleChange = async (pubkey: string, role: string) => {
setSavingRole(pubkey);
setError("");
try {
await api.promoteUser(promotePubkey);
setPromotePubkey("");
await api.setUserRole(pubkey, role === "guest" ? null : role);
await loadUsers();
} catch (err: any) {
setError(err.message);
} finally {
setPromoting(false);
}
};
const handleDemote = async (pubkey: string) => {
if (!confirm("Demote this user to regular user?")) return;
setError("");
try {
await api.demoteUser(pubkey);
await loadUsers();
} catch (err: any) {
setError(err.message);
}
};
const handlePromoteUser = async (pubkey: string) => {
setError("");
try {
await api.promoteUser(pubkey);
await loadUsers();
} catch (err: any) {
setError(err.message);
setSavingRole(null);
}
};
@@ -159,6 +282,10 @@ export default function UsersPage() {
setUsernameDrafts((prev) => ({ ...prev, [pubkey]: stored ?? "" }));
};
const handleDraftChange = (pubkey: string, value: string) => {
setUsernameDrafts((prev) => ({ ...prev, [pubkey]: value }));
};
if (loading) {
return (
<div className="flex items-center justify-center min-h-[60vh]">
@@ -173,178 +300,28 @@ export default function UsersPage() {
{error && <p className="text-error text-sm">{error}</p>}
<div className="bg-surface-container-low rounded-xl p-6">
<h2 className="text-sm font-semibold text-on-surface/70 mb-3">Promote User</h2>
<div className="flex gap-3">
<input
placeholder="Pubkey (hex)"
value={promotePubkey}
onChange={(e) => setPromotePubkey(e.target.value)}
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 flex-1"
/>
<button
onClick={handlePromote}
disabled={promoting || !promotePubkey.trim()}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
>
<UserPlus size={16} />
{promoting ? "Promoting..." : "Promote"}
</button>
</div>
</div>
<div className="space-y-3">
{users.length === 0 ? (
<p className="text-on-surface/50 text-sm">No users found.</p>
) : (
users.map((user) => {
const draft = usernameDrafts[user.pubkey] ?? "";
const stored = user.username ?? "";
const usernameDirty = draft.trim().toLowerCase() !== stored.toLowerCase();
const profile = nostrByPubkey[user.pubkey];
const fullNpub = hexToNpub(user.pubkey);
const nostrDisplay = profile?.name || profile?.displayName;
return (
<div
users.map((user) => (
<UserRow
key={user.pubkey || user.id}
className="bg-surface-container-low rounded-xl p-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
>
<div className="flex-1 min-w-0 flex gap-4 items-start">
<div className="shrink-0 w-14 h-14 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden text-on-surface">
{nostrLoading ? (
<span className="text-on-surface/40 text-xs"></span>
) : profile?.picture ? (
<Image
src={profile.picture}
alt={nostrDisplay ? `Avatar: ${nostrDisplay}` : "Nostr profile picture"}
width={56}
height={56}
className="object-cover w-full h-full"
unoptimized
/>
) : (
<span className="font-semibold text-sm" aria-hidden>
{profileInitials(profile, fullNpub)}
</span>
)}
</div>
<div className="flex-1 min-w-0 space-y-3">
<div>
<p className="text-on-surface font-semibold text-base truncate">
{nostrLoading ? (
<span className="text-on-surface/40 font-normal"></span>
) : nostrDisplay ? (
nostrDisplay
) : (
<span className="text-on-surface/50 font-normal">No Nostr name</span>
)}
</p>
<button
type="button"
onClick={() => handleCopyNpub(user.pubkey)}
className="mt-1 text-left font-mono text-sm text-on-surface/80 hover:text-primary transition-colors cursor-pointer break-all w-full"
title={fullNpub || "Copy npub"}
>
{copiedPubkey === user.pubkey
? "Copied!"
: fullNpub
? shortenNpub(fullNpub)
: `${user.pubkey?.slice(0, 12)}...${user.pubkey?.slice(-8)}`}
</button>
</div>
<div>
<p className="text-xs font-semibold text-on-surface/50 mb-1 uppercase tracking-wide">
NIP-05 username
</p>
<p className="text-on-surface-variant text-xs mb-2">
Reserved names from the site blocklist can be assigned here (users cannot claim them on the dashboard).
</p>
<div className="flex flex-wrap items-center gap-2">
<input
value={draft}
onChange={(e) =>
setUsernameDrafts((prev) => ({ ...prev, [user.pubkey]: e.target.value }))
}
disabled={savingPubkey === user.pubkey}
placeholder="local-part"
className="bg-surface-container-highest text-on-surface rounded-lg px-3 py-2 text-sm font-mono min-w-[8rem] max-w-full flex-1 focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
/>
<span className="text-on-surface/50 text-sm font-mono shrink-0">
@{hostname || "…"}
</span>
<button
type="button"
onClick={() => handleSaveUsername(user.pubkey, user.username)}
disabled={
savingPubkey === user.pubkey ||
!draft.trim() ||
!usernameDirty
}
className="px-3 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
>
{savingPubkey === user.pubkey ? "Saving…" : "Save"}
</button>
<button
type="button"
onClick={() => handleCancelUsername(user.pubkey, user.username)}
disabled={savingPubkey === user.pubkey || !usernameDirty}
className="px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 text-sm hover:text-on-surface transition-colors disabled:opacity-50 whitespace-nowrap"
>
Cancel
</button>
</div>
{draft.trim() && (
<p className="text-on-surface-variant text-xs font-mono mt-2">
{draft.trim().toLowerCase()}@{hostname || "…"}
</p>
)}
</div>
<div className="flex items-center gap-3 flex-wrap">
<span
className={cn(
"rounded-full px-3 py-1 text-xs font-bold",
user.role === "ADMIN"
? "bg-primary-container/20 text-primary"
: user.role === "MODERATOR"
? "bg-secondary-container text-on-secondary-container"
: "bg-surface-container-highest text-on-surface/50"
)}
>
{user.role}
</span>
{user.createdAt && (
<span className="text-on-surface/40 text-xs">
Joined {formatDate(user.createdAt)}
</span>
)}
</div>
</div>
</div>
{user.role !== "ADMIN" && (
<div className="flex items-center gap-2">
{user.role !== "MODERATOR" && (
<button
onClick={() => handlePromoteUser(user.pubkey)}
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-primary text-sm transition-colors"
>
<ShieldCheck size={14} />
Promote
</button>
)}
{user.role === "MODERATOR" && (
<button
onClick={() => handleDemote(user.pubkey)}
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-error text-sm transition-colors"
>
<ShieldOff size={14} />
Demote
</button>
)}
</div>
)}
</div>
);
})
user={user}
draft={usernameDrafts[user.pubkey] ?? ""}
onDraftChange={handleDraftChange}
savingPubkey={savingPubkey}
onSaveUsername={handleSaveUsername}
onCancelUsername={handleCancelUsername}
hostname={hostname}
copiedPubkey={copiedPubkey}
onCopyNpub={handleCopyNpub}
callerRank={callerRank}
isSuperAdmin={isSuperAdmin}
savingRole={savingRole}
onRoleChange={handleRoleChange}
/>
))
)}
</div>
</div>
+6 -6
View File
@@ -38,11 +38,11 @@ export default function LoginPage() {
const [bunkerInput, setBunkerInput] = useState("");
useEffect(() => {
if (!loading && user) redirectByRole(user.role);
if (!loading && user) redirectFor(user);
}, [user, loading]);
function redirectByRole(role: string) {
if (role === "ADMIN" || role === "MODERATOR") {
function redirectFor(u: { isSuperAdmin?: boolean; permissions?: string[] }) {
if (u.isSuperAdmin || (u.permissions?.length ?? 0) > 0) {
router.push("/admin/overview");
} else {
router.push("/dashboard");
@@ -78,7 +78,7 @@ export default function LoginPage() {
setLoggingIn(true);
const loggedInUser = await loginWithConnectedSigner(signer);
await signer.close().catch(() => {});
redirectByRole(loggedInUser.role);
redirectFor(loggedInUser);
} catch (err: any) {
if (controller.signal.aborted) return;
setError(err.message || "Connection failed");
@@ -104,7 +104,7 @@ export default function LoginPage() {
setLoggingIn(true);
try {
const loggedInUser = await login();
redirectByRole(loggedInUser.role);
redirectFor(loggedInUser);
} catch (err: any) {
setError(err.message || "Login failed");
} finally {
@@ -118,7 +118,7 @@ export default function LoginPage() {
setLoggingIn(true);
try {
const loggedInUser = await loginWithBunker(bunkerInput.trim());
redirectByRole(loggedInUser.role);
redirectFor(loggedInUser);
} catch (err: any) {
setError(err.message || "Connection failed");
} finally {
+32 -20
View File
@@ -21,28 +21,37 @@ import {
HelpCircle,
MessageSquare,
Building2,
KeyRound,
} from "lucide-react";
const navItems = [
{ href: "/admin/overview", label: "Overview", icon: LayoutDashboard, adminOnly: false },
{ href: "/admin/events", label: "Events", icon: Calendar, adminOnly: false },
{ href: "/admin/organizers", label: "Organizers", icon: Building2, adminOnly: false },
{ href: "/admin/gallery", label: "Gallery", icon: ImageIcon, adminOnly: false },
{ href: "/admin/blog", label: "Blog", icon: FileText, adminOnly: false },
{ href: "/admin/faq", label: "FAQ", icon: HelpCircle, adminOnly: false },
{ href: "/admin/submissions", label: "Submissions", icon: Inbox, adminOnly: false },
{ href: "/admin/messages", label: "Board", icon: MessageSquare, adminOnly: false },
{ href: "/admin/moderation", label: "Moderation", icon: Shield, adminOnly: false },
{ href: "/admin/categories", label: "Categories", icon: Tag, adminOnly: false },
{ href: "/admin/users", label: "Users", icon: Users, adminOnly: true },
{ href: "/admin/relays", label: "Relays", icon: Radio, adminOnly: true },
{ href: "/admin/settings", label: "Settings", icon: Settings, adminOnly: true },
{ href: "/admin/nostr", label: "Nostr Tools", icon: Wrench, adminOnly: true },
// Each item is shown when the user holds any of its permissions. Items with no
// permissions are always visible. SuperAdmin sees everything via can().
const navItems: {
href: string;
label: string;
icon: typeof LayoutDashboard;
permissions?: string[];
}[] = [
{ href: "/admin/overview", label: "Overview", icon: LayoutDashboard },
{ href: "/admin/events", label: "Events", icon: Calendar, permissions: ["events.create", "events.edit", "events.delete"] },
{ href: "/admin/organizers", label: "Organizers", icon: Building2, permissions: ["organizers.manage"] },
{ href: "/admin/gallery", label: "Gallery", icon: ImageIcon, permissions: ["gallery.upload", "gallery.delete"] },
{ href: "/admin/blog", label: "Blog", icon: FileText, permissions: ["blog.draft", "blog.publish", "blog.delete"] },
{ href: "/admin/faq", label: "FAQ", icon: HelpCircle, permissions: ["faq.manage"] },
{ href: "/admin/submissions", label: "Submissions", icon: Inbox, permissions: ["submissions.review"] },
{ href: "/admin/messages", label: "Board", icon: MessageSquare, permissions: ["board.manage"] },
{ href: "/admin/moderation", label: "Moderation", icon: Shield, permissions: ["moderation.act"] },
{ href: "/admin/categories", label: "Categories", icon: Tag, permissions: ["categories.manage"] },
{ href: "/admin/users", label: "Users", icon: Users, permissions: ["users.assign_role", "nip05.assign"] },
{ href: "/admin/roles", label: "Roles", icon: KeyRound, permissions: ["roles.edit_permissions"] },
{ href: "/admin/relays", label: "Relays", icon: Radio, permissions: ["relays.manage"] },
{ href: "/admin/settings", label: "Settings", icon: Settings, permissions: ["settings.edit"] },
{ href: "/admin/nostr", label: "Nostr Tools", icon: Wrench, permissions: ["nostr_tools.use"] },
];
export function AdminSidebar() {
const pathname = usePathname();
const { user, logout, isAdmin } = useAuth();
const { user, logout, can } = useAuth();
const shortPubkey = user?.pubkey
? `${user.pubkey.slice(0, 8)}...${user.pubkey.slice(-8)}`
@@ -68,19 +77,22 @@ export function AdminSidebar() {
<p className="text-on-surface/70 text-sm font-mono truncate">{shortPubkey}</p>
<span
className={cn(
"inline-block mt-1 rounded-full px-3 py-1 text-xs font-bold",
user.role === "ADMIN"
"inline-block mt-1 rounded-full px-3 py-1 text-xs font-bold capitalize",
user.isSuperAdmin || user.role === "admin"
? "bg-primary-container/20 text-primary"
: "bg-secondary-container text-on-secondary-container"
)}
>
{user.role}
{user.isSuperAdmin ? "SuperAdmin" : user.role}
</span>
</div>
<nav className="flex-1 space-y-1">
{navItems
.filter((item) => !item.adminOnly || isAdmin)
.filter(
(item) =>
!item.permissions || item.permissions.some((p) => can(p))
)
.map((item) => {
const Icon = item.icon;
const active = pathname === item.href;
+62
View File
@@ -0,0 +1,62 @@
"use client";
import Image from "next/image";
import { useNostrProfile } from "@/hooks/useNostrProfile";
import type { NostrProfile } from "@/lib/nostr";
function computeInitials(profile: NostrProfile | null, fallback?: string): string {
const name = profile?.name || profile?.displayName;
if (name?.trim()) return name.trim().slice(0, 2).toUpperCase();
const fb = fallback?.trim();
if (fb) {
// For npub-style fallbacks skip the "npub1" prefix for nicer initials.
if (fb.startsWith("npub1") && fb.length >= 8) return fb.slice(5, 7).toUpperCase();
return fb.slice(0, 2).toUpperCase();
}
return "?";
}
export interface NostrAvatarProps {
pubkey: string | null | undefined;
/** Rendered size in pixels (square). */
size?: number;
/** Text used to derive initials when no Nostr name/picture is available. */
fallbackText?: string;
className?: string;
}
// Self-contained avatar: fetches the user's Nostr metadata from relays and
// renders their profile picture, falling back to initials.
export function NostrAvatar({
pubkey,
size = 56,
fallbackText,
className = "",
}: NostrAvatarProps) {
const { profile, loading } = useNostrProfile(pubkey);
const displayName = profile?.name || profile?.displayName;
return (
<div
className={`shrink-0 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden text-on-surface ${className}`}
style={{ width: size, height: size }}
>
{loading ? (
<span className="text-on-surface/40 text-xs"></span>
) : profile?.picture ? (
<Image
src={profile.picture}
alt={displayName ? `Avatar: ${displayName}` : "Nostr profile picture"}
width={size}
height={size}
className="object-cover w-full h-full"
unoptimized
/>
) : (
<span className="font-semibold text-sm" aria-hidden>
{computeInitials(profile, fallbackText)}
</span>
)}
</div>
);
}
+2 -1
View File
@@ -80,7 +80,8 @@ export function Navbar() {
}
const displayName = user?.name || user?.displayName || shortenPubkey(user?.pubkey || "");
const isStaff = user?.role === "ADMIN" || user?.role === "MODERATOR";
const isStaff =
!!user?.isSuperAdmin || (user?.permissions?.length ?? 0) > 0;
function handleLogout() {
setDropdownOpen(false);
+55 -6
View File
@@ -15,6 +15,8 @@ import {
export interface User {
pubkey: string;
role: string;
isSuperAdmin?: boolean;
permissions?: string[];
username?: string;
name?: string;
picture?: string;
@@ -32,17 +34,25 @@ interface AuthContextType {
logout: () => void;
isAdmin: boolean;
isModerator: boolean;
isSuperAdmin: boolean;
permissions: string[];
can: (permission: string) => boolean;
refreshAccess: () => Promise<void>;
}
export const AuthContext = createContext<AuthContextType>({
user: null,
loading: true,
login: async () => ({ pubkey: "", role: "USER" }),
loginWithBunker: async () => ({ pubkey: "", role: "USER" }),
loginWithConnectedSigner: async () => ({ pubkey: "", role: "USER" }),
login: async () => ({ pubkey: "", role: "guest" }),
loginWithBunker: async () => ({ pubkey: "", role: "guest" }),
loginWithConnectedSigner: async () => ({ pubkey: "", role: "guest" }),
logout: () => {},
isAdmin: false,
isModerator: false,
isSuperAdmin: false,
permissions: [],
can: () => false,
refreshAccess: async () => {},
});
export function useAuth() {
@@ -53,6 +63,28 @@ export function useAuthProvider(): AuthContextType {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const refreshAccess = useCallback(async () => {
const token = localStorage.getItem("bbe_token");
if (!token) return;
try {
const me = await api.getMe();
setUser((prev) => {
if (!prev) return prev;
const next: User = {
...prev,
role: me.role,
isSuperAdmin: me.isSuperAdmin,
permissions: me.permissions,
username: me.username ?? prev.username,
};
localStorage.setItem("bbe_user", JSON.stringify(next));
return next;
});
} catch {
// Best-effort refresh. The stored snapshot remains usable.
}
}, []);
useEffect(() => {
const stored = localStorage.getItem("bbe_user");
const token = localStorage.getItem("bbe_token");
@@ -63,9 +95,12 @@ export function useAuthProvider(): AuthContextType {
localStorage.removeItem("bbe_user");
localStorage.removeItem("bbe_token");
}
// Refresh effective role and permissions live so a stale JWT snapshot does
// not drive what the user can see or do.
void refreshAccess();
}
setLoading(false);
}, []);
}, [refreshAccess]);
const completeAuth = useCallback(
async (
@@ -87,6 +122,8 @@ export function useAuthProvider(): AuthContextType {
const fullUser: User = {
...userData,
isSuperAdmin: userData.isSuperAdmin ?? false,
permissions: userData.permissions ?? [],
name: profile.name,
displayName: profile.displayName,
picture: profile.picture,
@@ -138,6 +175,13 @@ export function useAuthProvider(): AuthContextType {
setUser(null);
}, []);
const permissions = user?.permissions ?? [];
const isSuperAdmin = user?.isSuperAdmin ?? false;
const can = useCallback(
(permission: string) => isSuperAdmin || permissions.includes(permission),
[isSuperAdmin, permissions]
);
return {
user,
loading,
@@ -145,7 +189,12 @@ export function useAuthProvider(): AuthContextType {
loginWithBunker,
loginWithConnectedSigner,
logout,
isAdmin: user?.role === "ADMIN",
isModerator: user?.role === "MODERATOR" || user?.role === "ADMIN",
isSuperAdmin,
permissions,
can,
refreshAccess,
// Compatibility shims for any remaining role-name checks.
isAdmin: isSuperAdmin || user?.role === "admin",
isModerator: isSuperAdmin || user?.role === "admin" || user?.role === "moderator",
};
}
+48
View File
@@ -0,0 +1,48 @@
"use client";
import { useEffect, useState } from "react";
import { loadNostrProfile, type NostrProfile } from "@/lib/nostr";
export interface UseNostrProfileResult {
profile: NostrProfile | null;
loading: boolean;
}
// Fetches a single user's Nostr kind:0 metadata from relays. Concurrent calls
// across components are batched into one relay query by the shared loader.
export function useNostrProfile(
pubkey: string | null | undefined
): UseNostrProfileResult {
const [profile, setProfile] = useState<NostrProfile | null>(null);
const [loading, setLoading] = useState<boolean>(!!pubkey);
useEffect(() => {
if (!pubkey) {
setProfile(null);
setLoading(false);
return;
}
let cancelled = false;
setLoading(true);
loadNostrProfile(pubkey)
.then((p) => {
if (!cancelled) {
setProfile(p);
setLoading(false);
}
})
.catch(() => {
if (!cancelled) {
setProfile({});
setLoading(false);
}
});
return () => {
cancelled = true;
};
}, [pubkey]);
return { profile, loading };
}
+36 -5
View File
@@ -24,10 +24,27 @@ export const api = {
body: JSON.stringify({ pubkey }),
}),
verify: (pubkey: string, signedEvent: any) =>
request<{ token: string; user: { pubkey: string; role: string; username?: string } }>("/auth/verify", {
request<{
token: string;
user: {
pubkey: string;
role: string;
isSuperAdmin?: boolean;
permissions?: string[];
username?: string;
};
}>("/auth/verify", {
method: "POST",
body: JSON.stringify({ pubkey, signedEvent }),
}),
getMe: () =>
request<{
pubkey: string;
role: string;
isSuperAdmin: boolean;
permissions: string[];
username?: string;
}>("/auth/me"),
// Posts
getPosts: (params?: { category?: string; page?: number; limit?: number; all?: boolean }) => {
@@ -93,16 +110,30 @@ export const api = {
// Users
getUsers: () => request<any[]>("/users"),
promoteUser: (pubkey: string) =>
request<any>("/users/promote", { method: "POST", body: JSON.stringify({ pubkey }) }),
demoteUser: (pubkey: string) =>
request<any>("/users/demote", { method: "POST", body: JSON.stringify({ pubkey }) }),
setUserRole: (pubkey: string, role: string | null) =>
request<any>(`/users/${encodeURIComponent(pubkey)}/role`, {
method: "PUT",
body: JSON.stringify({ role }),
}),
updateUserUsername: (pubkey: string, username: string) =>
request<any>(`/users/${encodeURIComponent(pubkey)}`, {
method: "PATCH",
body: JSON.stringify({ username }),
}),
// Roles and permissions
getPermissionRegistry: () =>
request<{ permissions: { key: string; label: string; group: string }[]; roles: string[] }>(
"/admin/permissions"
),
getRolePermissions: () =>
request<{ roles: { role: string; permissions: string[] }[] }>("/admin/roles"),
updateRolePermissions: (role: string, permissions: string[]) =>
request<{ role: string; permissions: string[] }>(
`/admin/roles/${encodeURIComponent(role)}/permissions`,
{ method: "PUT", body: JSON.stringify({ permissions }) }
),
// Categories
getCategories: () => request<any[]>("/categories"),
createCategory: (data: { name: string; slug: string }) =>
+188 -11
View File
@@ -1,4 +1,29 @@
import { generateSecretKey, getPublicKey as getPubKeyFromSecret } from "nostr-tools/pure";
import { nip19 } from "nostr-tools";
// Relays return events keyed by hex pubkeys and only accept hex in `authors`
// filters. Pubkeys may be stored/passed as npub (or nprofile), so normalize.
export function toHexPubkey(pubkey: string | null | undefined): string | null {
if (!pubkey) return null;
const trimmed = pubkey.trim();
if (/^[0-9a-f]{64}$/i.test(trimmed)) return trimmed.toLowerCase();
try {
const decoded = nip19.decode(trimmed);
if (decoded.type === "npub") return decoded.data as string;
if (decoded.type === "nprofile") return (decoded.data as { pubkey: string }).pubkey;
} catch {
// fall through
}
return null;
}
// Relays that specialize in (or broadly aggregate) kind:0 profile metadata.
// Included alongside the site relays so profiles are found even when a user's
// metadata was never published to the site's configured relay set.
const PROFILE_METADATA_RELAYS = [
"wss://purplepag.es",
"wss://relay.nostr.band",
];
declare global {
interface Window {
@@ -205,11 +230,15 @@ export async function fetchNostrProfile(
pubkey: string,
relayUrls?: string[]
): Promise<NostrProfile> {
const hex = toHexPubkey(pubkey);
if (!hex) return {};
const { SimplePool } = await import("nostr-tools/pool");
const allRelays = new Set<string>(relayUrls || await getSiteRelays());
PROFILE_METADATA_RELAYS.forEach((url) => allRelays.add(url));
try {
const nip65 = await fetchNip65RelayList(pubkey);
const nip65 = await fetchNip65RelayList(hex);
nip65.write.forEach((url) => allRelays.add(url));
} catch {}
@@ -219,19 +248,11 @@ export async function fetchNostrProfile(
try {
const event = await pool.get(urls, {
kinds: [0],
authors: [pubkey],
authors: [hex],
});
if (!event?.content) return {};
const meta = JSON.parse(event.content);
return {
name: meta.name || meta.display_name,
displayName: meta.display_name,
picture: meta.picture,
about: meta.about,
nip05: meta.nip05,
};
return parseProfileContent(event.content);
} catch {
return {};
} finally {
@@ -239,6 +260,162 @@ export async function fetchNostrProfile(
}
}
function parseProfileContent(content: string): NostrProfile {
const meta = JSON.parse(content);
return {
name: meta.name || meta.display_name,
displayName: meta.display_name,
picture: meta.picture,
about: meta.about,
nip05: meta.nip05,
};
}
const _profileCache = new Map<string, { profile: NostrProfile; fetchedAt: number; empty: boolean }>();
const PROFILE_TTL = 5 * 60 * 1000; // 5 minutes for resolved profiles
const PROFILE_EMPTY_TTL = 30 * 1000; // retry misses sooner
function isProfileEmpty(p: NostrProfile): boolean {
return !p.name && !p.displayName && !p.picture && !p.about && !p.nip05;
}
function readProfileCache(pubkey: string, now: number): NostrProfile | null {
const cached = _profileCache.get(pubkey);
if (!cached) return null;
const ttl = cached.empty ? PROFILE_EMPTY_TTL : PROFILE_TTL;
return now - cached.fetchedAt < ttl ? cached.profile : null;
}
function writeProfileCache(pubkey: string, profile: NostrProfile, now: number): void {
_profileCache.set(pubkey, { profile, fetchedAt: now, empty: isProfileEmpty(profile) });
}
// Batched profile fetch. Resolves kind:0 metadata for many pubkeys using a
// single SimplePool and one query, instead of opening a pool (plus a NIP-65
// lookup pool) per pubkey. Querying many profiles individually opens dozens of
// simultaneous websocket connections to the same relays, which get
// throttled/dropped and return empty results. Pubkeys are normalized to hex
// (relays reject npub/nprofile in `authors`).
export async function fetchNostrProfiles(
pubkeys: string[],
relayUrls?: string[]
): Promise<Record<string, NostrProfile>> {
const result: Record<string, NostrProfile> = {};
const now = Date.now();
// Map each requested key to its hex form. Skip cached and un-decodable keys.
const hexByKey = new Map<string, string>();
for (const pk of pubkeys) {
const cached = readProfileCache(pk, now);
if (cached) {
result[pk] = cached;
continue;
}
const hex = toHexPubkey(pk);
if (!hex) {
result[pk] = {};
continue;
}
hexByKey.set(pk, hex);
}
if (hexByKey.size === 0) return result;
const { SimplePool } = await import("nostr-tools/pool");
const base = relayUrls && relayUrls.length > 0 ? relayUrls : await getSiteRelays();
const urls = [...new Set([...base, ...PROFILE_METADATA_RELAYS])];
const pool = new SimplePool();
try {
const authors = [...new Set(hexByKey.values())];
const events = await pool.querySync(
urls,
{ kinds: [0], authors },
{ maxWait: 6000 }
);
// Keep only the most recent kind:0 event per hex author.
const latest = new Map<string, { created_at: number; content: string }>();
for (const event of events) {
const prev = latest.get(event.pubkey);
if (!prev || event.created_at > prev.created_at) {
latest.set(event.pubkey, { created_at: event.created_at, content: event.content });
}
}
for (const [key, hex] of hexByKey) {
const ev = latest.get(hex);
let profile: NostrProfile = {};
if (ev?.content) {
try {
profile = parseProfileContent(ev.content);
} catch {
profile = {};
}
}
result[key] = profile;
writeProfileCache(key, profile, now);
}
return result;
} catch {
for (const key of hexByKey.keys()) {
if (!(key in result)) result[key] = {};
}
return result;
} finally {
pool.close(urls);
}
}
// DataLoader-style batching for single-pubkey requests. Component instances
// (e.g. <NostrAvatar />) each ask for one pubkey; this coalesces all requests
// made within a short window into a single batched relay query.
let _batchQueue = new Set<string>();
let _batchResolvers = new Map<string, Array<(p: NostrProfile) => void>>();
let _batchTimer: ReturnType<typeof setTimeout> | null = null;
const BATCH_WINDOW_MS = 60;
async function flushProfileBatch(): Promise<void> {
const pubkeys = [..._batchQueue];
const resolvers = _batchResolvers;
_batchQueue = new Set();
_batchResolvers = new Map();
_batchTimer = null;
let profiles: Record<string, NostrProfile> = {};
try {
profiles = await fetchNostrProfiles(pubkeys);
} catch {
profiles = {};
}
for (const pk of pubkeys) {
const profile = profiles[pk] ?? {};
resolvers.get(pk)?.forEach((resolve) => resolve(profile));
}
}
// Resolve a single pubkey's profile, batching concurrent calls and reusing the
// shared profile cache.
export function loadNostrProfile(pubkey: string): Promise<NostrProfile> {
const cached = readProfileCache(pubkey, Date.now());
if (cached) {
return Promise.resolve(cached);
}
return new Promise((resolve) => {
const existing = _batchResolvers.get(pubkey);
if (existing) {
existing.push(resolve);
} else {
_batchResolvers.set(pubkey, [resolve]);
}
_batchQueue.add(pubkey);
if (_batchTimer === null) {
_batchTimer = setTimeout(() => void flushProfileBatch(), BATCH_WINDOW_MS);
}
});
}
export async function fetchEventFromRelays(eventId: string): Promise<any | null> {
const { SimplePool } = await import("nostr-tools/pool");
const siteRelays = await getSiteRelays();