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
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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("");
|
||||
|
||||
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user