@invect/user-auth 0.0.1 → 0.0.3

package/dist/frontend/index.mjs

@@ -2,8 +2,8 @@ import { a as formatAuthRoleLabel, o as isAuthAssignableRole, r as AUTH_DEFAULT_
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, ChevronDown, ChevronsUpDown, LogOut, Mail, Search, Shield, Trash2, User, UserPlus, Users } from "lucide-react";
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, PageLayout, useApiClient } from "@invect/frontend";
+import { ArrowDown, ArrowUp, Check, ChevronDown, ChevronsUpDown, Copy, Key, Loader2, LogOut, Mail, Plus, Search, Shield, Trash2, User, UserPlus, Users } from "lucide-react";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, PageLayout, useApiClient } from "@invect/ui";
 import { Link, useLocation } from "react-router";
 //#region src/frontend/providers/AuthProvider.tsx
 /**
@@ -231,14 +231,14 @@ function SignInForm({ onSuccess, className }) {
 					})]
 				}),
 				displayError && /* @__PURE__ */ jsx("div", {
-					className: "rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400",
+					className: "rounded-md border border-imp-destructive/30 bg-imp-destructive/10 px-3 py-2 text-sm text-imp-destructive",
 					children: displayError
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "submit",
 					disabled: isSigningIn,
-					className: "inline-flex h-9 w-full items-center justify-center gap-2 whitespace-nowrap rounded-md bg-imp-foreground px-4 py-2 text-sm font-medium text-imp-background shadow transition-colors hover:bg-imp-foreground/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-imp-ring disabled:pointer-events-none disabled:opacity-50",
-					children: isSigningIn ? "Signing in…" : "Login"
+					className: "inline-flex h-9 w-full items-center justify-center gap-2 whitespace-nowrap rounded-md bg-imp-primary px-4 py-2 text-sm font-medium text-imp-primary-foreground shadow transition-colors hover:bg-imp-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-imp-ring disabled:pointer-events-none disabled:opacity-50",
+					children: isSigningIn ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }), "Signing in…"] }) : "Sign in"
 				})
 			]
 		})
@@ -255,16 +255,16 @@ function SignInForm({ onSuccess, className }) {
 */
 function SignInPage({ onSuccess, onNavigateToSignUp, title = "Welcome back", subtitle = "Sign in to your account to continue" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex min-h-screen items-center justify-center bg-imp-background p-4 text-imp-foreground",
+		className: "flex items-center justify-center min-h-screen p-4 bg-imp-background text-imp-foreground",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full max-w-sm flex-col gap-6",
+			className: "flex flex-col w-full max-w-sm gap-6",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col items-center gap-2 text-center",
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "flex items-center justify-center",
-							children: /* @__PURE__ */ jsx(ImpLogo, { className: "h-10 w-auto" })
+							children: /* @__PURE__ */ jsx(ImpLogo, { className: "w-auto h-24" })
 						}),
 						/* @__PURE__ */ jsx("h1", {
 							className: "text-xl font-bold",
@@ -278,24 +278,20 @@ function SignInPage({ onSuccess, onNavigateToSignUp, title = "Welcome back", sub
 				}),
 				/* @__PURE__ */ jsx(SignInForm, { onSuccess }),
 				/* @__PURE__ */ jsxs("div", {
-					className: "relative text-center text-sm",
-					children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-1/2 border-t border-imp-border" }), /* @__PURE__ */ jsx("span", {
-						className: "relative bg-imp-background px-2 text-imp-muted-foreground",
+					className: "relative text-sm text-center",
+					children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-t top-1/2 border-imp-border" }), /* @__PURE__ */ jsx("span", {
+						className: "relative px-2 bg-imp-background text-imp-muted-foreground",
 						children: "Admin-managed accounts"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("p", {
-					className: "px-6 text-center text-xs text-imp-muted-foreground",
-					children: [
-						"New accounts are created by your administrator.",
-						onNavigateToSignUp ? " Or " : " Contact your admin if you need access.",
-						onNavigateToSignUp && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: onNavigateToSignUp,
-							className: "font-medium underline underline-offset-4 hover:text-imp-foreground",
-							children: "Sign up"
-						})
-					]
+					className: "px-6 text-xs text-center text-imp-muted-foreground",
+					children: [onNavigateToSignUp ? " Or " : " Contact your admin if you need access.", onNavigateToSignUp && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onNavigateToSignUp,
+						className: "font-medium underline underline-offset-4 hover:text-imp-foreground",
+						children: "Sign up"
+					})]
 				})
 			]
 		})
@@ -400,6 +396,359 @@ function AuthGate({ children, fallback = null, loading = null }) {
 	return /* @__PURE__ */ jsx(Fragment, { children });
 }
 //#endregion
+//#region src/frontend/components/ApiKeysDialog.tsx
+/**
+* ApiKeysDialog — Admin dialog for managing API keys.
+*
+* Displays a list of API keys with the ability to:
+* - Create new API keys (name, optional expiry)
+* - Copy newly created keys
+* - Delete existing keys
+*
+* Only functional when the auth plugin has API keys enabled.
+*/
+function formatDate$1(iso) {
+	try {
+		return new Intl.DateTimeFormat(void 0, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		}).format(new Date(iso));
+	} catch {
+		return iso;
+	}
+}
+function isExpired(expiresAt) {
+	if (!expiresAt) return false;
+	return new Date(expiresAt) < /* @__PURE__ */ new Date();
+}
+function ApiKeysDialog({ open, onOpenChange, apiBaseUrl }) {
+	const [apiKeys, setApiKeys] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [hasFetched, setHasFetched] = useState(false);
+	const [showCreateForm, setShowCreateForm] = useState(false);
+	const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
+	const [copiedKeyId, setCopiedKeyId] = useState(null);
+	const [pendingDeleteId, setPendingDeleteId] = useState(null);
+	const authApiBase = `${apiBaseUrl}/plugins/auth`;
+	const fetchApiKeys = useCallback(async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(`${authApiBase}/api-keys`, { credentials: "include" });
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({ error: "Failed to fetch API keys" }));
+				throw new Error(data.error || data.message || `HTTP ${res.status}`);
+			}
+			setApiKeys((await res.json()).apiKeys ?? []);
+			setHasFetched(true);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to fetch API keys");
+		} finally {
+			setIsLoading(false);
+		}
+	}, [authApiBase]);
+	const deleteApiKey = useCallback(async (keyId) => {
+		try {
+			const res = await fetch(`${authApiBase}/api-keys/${keyId}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({}));
+				throw new Error(data.error || `HTTP ${res.status}`);
+			}
+			setApiKeys((prev) => prev.filter((k) => k.id !== keyId));
+			setPendingDeleteId(null);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to delete API key");
+			setPendingDeleteId(null);
+		}
+	}, [authApiBase]);
+	const copyToClipboard = useCallback(async (text, id) => {
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopiedKeyId(id);
+			setTimeout(() => setCopiedKeyId(null), 2e3);
+		} catch {
+			const textArea = document.createElement("textarea");
+			textArea.value = text;
+			textArea.style.position = "fixed";
+			textArea.style.opacity = "0";
+			document.body.appendChild(textArea);
+			textArea.select();
+			document.execCommand("copy");
+			document.body.removeChild(textArea);
+			setCopiedKeyId(id);
+			setTimeout(() => setCopiedKeyId(null), 2e3);
+		}
+	}, []);
+	if (open && !hasFetched && !isLoading) fetchApiKeys();
+	const handleOpenChange = (nextOpen) => {
+		if (!nextOpen) {
+			setShowCreateForm(false);
+			setNewlyCreatedKey(null);
+			setError(null);
+			setPendingDeleteId(null);
+			setHasFetched(false);
+		}
+		onOpenChange(nextOpen);
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-w-lg border-imp-border bg-imp-background text-imp-foreground sm:max-w-lg",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, {
+					className: "flex items-center gap-2 text-sm font-semibold",
+					children: [/* @__PURE__ */ jsx(Key, { className: "h-4 w-4" }), "API Keys"]
+				}) }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [
+						newlyCreatedKey && /* @__PURE__ */ jsxs("div", {
+							className: "rounded-md border border-green-500/30 bg-green-50 p-3 dark:bg-green-950/20",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "mb-1.5 text-xs font-medium text-green-700 dark:text-green-400",
+								children: "API key created! Copy it now — it won't be shown again."
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("code", {
+									className: "flex-1 rounded bg-green-100 px-2 py-1 text-xs font-mono text-green-800 dark:bg-green-900/30 dark:text-green-300 break-all",
+									children: newlyCreatedKey
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => copyToClipboard(newlyCreatedKey, "new-key"),
+									className: "shrink-0 rounded-md border border-green-300 p-1.5 text-green-700 hover:bg-green-100 dark:border-green-700 dark:text-green-400 dark:hover:bg-green-900/40",
+									children: copiedKeyId === "new-key" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+								})]
+							})]
+						}),
+						error && /* @__PURE__ */ jsxs("div", {
+							className: "rounded-md bg-red-50 p-2 text-xs text-red-600 dark:bg-red-950/20 dark:text-red-400",
+							children: [error, /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setError(null),
+								className: "ml-2 underline hover:no-underline",
+								children: "Dismiss"
+							})]
+						}),
+						!showCreateForm && /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => setShowCreateForm(true),
+							className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+							children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), " Create API Key"]
+						}),
+						showCreateForm && /* @__PURE__ */ jsx(CreateApiKeyForm, {
+							apiBaseUrl: authApiBase,
+							onCreated: (key, fullKey) => {
+								setApiKeys((prev) => [key, ...prev]);
+								setNewlyCreatedKey(fullKey);
+								setShowCreateForm(false);
+							},
+							onCancel: () => setShowCreateForm(false)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "max-h-[300px] space-y-1.5 overflow-y-auto",
+							children: [
+								isLoading && !hasFetched && /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-center py-8 text-xs text-imp-muted-foreground",
+									children: [/* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Loading…"]
+								}),
+								hasFetched && apiKeys.length === 0 && /* @__PURE__ */ jsx("div", {
+									className: "py-8 text-center text-xs text-imp-muted-foreground",
+									children: "No API keys yet. Create one to get started."
+								}),
+								apiKeys.map((key) => {
+									const expired = isExpired(key.expiresAt);
+									return /* @__PURE__ */ jsxs("div", {
+										className: `flex items-center justify-between rounded-lg border px-3 py-2.5 ${expired ? "border-red-300/50 bg-red-50/50 dark:border-red-800/30 dark:bg-red-950/10" : "border-imp-border bg-imp-muted/10"}`,
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "flex items-center gap-2",
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "text-sm font-medium text-imp-foreground truncate",
+														children: key.name || "Unnamed key"
+													}),
+													expired && /* @__PURE__ */ jsx("span", {
+														className: "shrink-0 rounded-full bg-red-100 px-1.5 py-0.5 text-[10px] font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400",
+														children: "Expired"
+													}),
+													key.enabled === false && /* @__PURE__ */ jsx("span", {
+														className: "shrink-0 rounded-full bg-yellow-100 px-1.5 py-0.5 text-[10px] font-medium text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+														children: "Disabled"
+													})
+												]
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "mt-0.5 flex items-center gap-2 text-[11px] text-imp-muted-foreground",
+												children: [
+													key.start && /* @__PURE__ */ jsxs("span", {
+														className: "font-mono",
+														children: [
+															key.prefix ? `${key.prefix}_` : "",
+															key.start,
+															"…"
+														]
+													}),
+													key.createdAt && /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate$1(key.createdAt)] }),
+													key.expiresAt && !expired && /* @__PURE__ */ jsxs("span", { children: ["Expires ", formatDate$1(key.expiresAt)] })
+												]
+											})]
+										}), pendingDeleteId === key.id ? /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-1.5 shrink-0 ml-2",
+											children: [/* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: () => deleteApiKey(key.id),
+												className: "rounded-md bg-red-600 px-2 py-1 text-[11px] font-medium text-white hover:bg-red-700",
+												children: "Confirm"
+											}), /* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: () => setPendingDeleteId(null),
+												className: "rounded-md border border-imp-border px-2 py-1 text-[11px] hover:bg-imp-muted",
+												children: "Cancel"
+											})]
+										}) : /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => setPendingDeleteId(key.id),
+											className: "shrink-0 ml-2 rounded-md p-1.5 text-imp-muted-foreground transition-colors hover:bg-imp-destructive/10 hover:text-imp-destructive",
+											children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+										})]
+									}, key.id);
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => handleOpenChange(false),
+					className: "rounded-md border border-imp-border px-3 py-1.5 text-sm hover:bg-imp-muted",
+					children: "Close"
+				}) })
+			]
+		})
+	});
+}
+function CreateApiKeyForm({ apiBaseUrl, onCreated, onCancel }) {
+	const [name, setName] = useState("");
+	const [expiresIn, setExpiresIn] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [error, setError] = useState(null);
+	const EXPIRY_OPTIONS = [
+		{
+			value: "",
+			label: "No expiry"
+		},
+		{
+			value: "86400",
+			label: "1 day"
+		},
+		{
+			value: "604800",
+			label: "7 days"
+		},
+		{
+			value: "2592000",
+			label: "30 days"
+		},
+		{
+			value: "7776000",
+			label: "90 days"
+		},
+		{
+			value: "31536000",
+			label: "1 year"
+		}
+	];
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setError(null);
+		setIsSubmitting(true);
+		try {
+			const body = {};
+			if (name.trim()) body.name = name.trim();
+			if (expiresIn) body.expiresIn = parseInt(expiresIn, 10);
+			const res = await fetch(`${apiBaseUrl}/api-keys`, {
+				method: "POST",
+				credentials: "include",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(body)
+			});
+			const data = await res.json();
+			if (!res.ok) throw new Error(data.error || data.message || `HTTP ${res.status}`);
+			const fullKey = data.key ?? data.apiKey?.key ?? "";
+			onCreated({
+				id: data.id ?? data.apiKey?.id ?? "",
+				name: data.name ?? data.apiKey?.name ?? (name.trim() || null),
+				start: data.start ?? data.apiKey?.start ?? null,
+				prefix: data.prefix ?? data.apiKey?.prefix ?? null,
+				enabled: data.enabled ?? data.apiKey?.enabled ?? true,
+				expiresAt: data.expiresAt ?? data.apiKey?.expiresAt ?? null,
+				createdAt: data.createdAt ?? data.apiKey?.createdAt ?? (/* @__PURE__ */ new Date()).toISOString()
+			}, fullKey);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to create API key");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: handleSubmit,
+		className: "space-y-3 rounded-lg border border-imp-border bg-imp-muted/10 p-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-medium text-imp-foreground",
+				children: "Create API Key"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					className: "mb-1 block text-xs font-medium text-imp-foreground",
+					children: "Name"
+				}), /* @__PURE__ */ jsx("input", {
+					type: "text",
+					value: name,
+					onChange: (e) => setName(e.target.value),
+					placeholder: "e.g. Production API",
+					className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:border-imp-primary/50 focus:outline-none"
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					className: "mb-1 block text-xs font-medium text-imp-foreground",
+					children: "Expiry"
+				}), /* @__PURE__ */ jsx("select", {
+					value: expiresIn,
+					onChange: (e) => setExpiresIn(e.target.value),
+					className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm focus:border-imp-primary/50 focus:outline-none",
+					children: EXPIRY_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", {
+						value: option.value,
+						children: option.label
+					}, option.value))
+				})] })]
+			}),
+			error && /* @__PURE__ */ jsx("div", {
+				className: "rounded-md bg-red-50 p-2 text-xs text-red-600 dark:bg-red-950/20 dark:text-red-400",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancel,
+					className: "rounded-md border border-imp-border px-3 py-1.5 text-xs hover:bg-imp-muted",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: isSubmitting,
+					className: "rounded-md bg-imp-primary px-3 py-1.5 text-xs font-semibold text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+					children: isSubmitting ? "Creating…" : "Create"
+				})]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/frontend/components/UserManagement.tsx
 /**
 * UserManagement — Admin panel for managing users.
@@ -518,6 +867,9 @@ function UserManagement({ apiBaseUrl, className }) {
 	const [currentPage, setCurrentPage] = useState(1);
 	const [sortField, setSortField] = useState("name");
 	const [sortDir, setSortDir] = useState("asc");
+	const [apiKeysEnabled, setApiKeysEnabled] = useState(false);
+	const [showApiKeysDialog, setShowApiKeysDialog] = useState(false);
+	const [hasCheckedApiKeys, setHasCheckedApiKeys] = useState(false);
 	const PAGE_SIZE = 10;
 	const handleSort = useCallback((field) => {
 		setSortField((prev) => {
@@ -561,6 +913,14 @@ function UserManagement({ apiBaseUrl, className }) {
 	const totalPages = Math.max(1, Math.ceil(filteredUsers.length / PAGE_SIZE));
 	const paginatedUsers = filteredUsers.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
 	const authApiBase = `${apiBaseUrl}/plugins/auth`;
+	const checkApiKeys = useCallback(async () => {
+		try {
+			const res = await fetch(`${authApiBase}/info`, { credentials: "include" });
+			if (res.ok) setApiKeysEnabled(!!(await res.json()).apiKeysEnabled);
+		} catch {} finally {
+			setHasCheckedApiKeys(true);
+		}
+	}, [authApiBase]);
 	const fetchUsers = useCallback(async () => {
 		setIsLoading(true);
 		setError(null);
@@ -617,29 +977,39 @@ function UserManagement({ apiBaseUrl, className }) {
 	}, [authApiBase]);
 	if (!isAuthenticated || user?.role !== "admin") return null;
 	if (!hasFetched && !isLoading) fetchUsers();
+	if (!hasCheckedApiKeys) checkApiKeys();
 	return /* @__PURE__ */ jsxs("div", {
 		className: `space-y-4 ${className ?? ""}`,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "relative flex-1 max-w-sm",
-					children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 pointer-events-none text-imp-muted-foreground" }), /* @__PURE__ */ jsx("input", {
-						type: "text",
-						value: searchQuery,
-						onChange: (e) => {
-							setSearchQuery(e.target.value);
-							setCurrentPage(1);
-						},
-						placeholder: "Search users…",
-						className: "w-full py-2 pr-3 text-sm border rounded-lg outline-none border-imp-border bg-transparent pl-9 placeholder:text-imp-muted-foreground focus:border-imp-primary/50"
-					})]
-				}), /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => setShowCreateDialog(true),
-					className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-2 text-sm font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
-					children: [/* @__PURE__ */ jsx(UserPlus, { className: "w-4 h-4" }), " Create User"]
-				})]
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative flex-1 max-w-sm",
+						children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 pointer-events-none text-imp-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: searchQuery,
+							onChange: (e) => {
+								setSearchQuery(e.target.value);
+								setCurrentPage(1);
+							},
+							placeholder: "Search users…",
+							className: "w-full py-2 pr-3 text-sm border rounded-lg outline-none border-imp-border bg-transparent pl-9 placeholder:text-imp-muted-foreground focus:border-imp-primary/50"
+						})]
+					}),
+					apiKeysEnabled && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => setShowApiKeysDialog(true),
+						className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-2 text-sm font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+						children: [/* @__PURE__ */ jsx(Key, { className: "w-4 h-4" }), " API Keys"]
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => setShowCreateDialog(true),
+						className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-2 text-sm font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+						children: [/* @__PURE__ */ jsx(UserPlus, { className: "w-4 h-4" }), " Create User"]
+					})
+				]
 			}),
 			error && /* @__PURE__ */ jsxs("div", {
 				className: "p-3 text-sm text-red-600 rounded-md bg-red-50 dark:bg-red-950/20 dark:text-red-400",
@@ -741,7 +1111,7 @@ function UserManagement({ apiBaseUrl, className }) {
 										}) : u.id !== user?.id ? /* @__PURE__ */ jsx("button", {
 											type: "button",
 											onClick: () => setPendingDeleteUser(u),
-											className: "rounded-md p-1.5 text-imp-muted-foreground opacity-0 transition-opacity hover:bg-red-50 hover:text-red-600 group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400",
+											className: "rounded-md p-1.5 text-imp-muted-foreground opacity-0 transition-opacity hover:bg-imp-destructive/10 hover:text-imp-destructive group-hover:opacity-100",
 											children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
 										}) : null
 									})
@@ -789,6 +1159,11 @@ function UserManagement({ apiBaseUrl, className }) {
 					]
 				})]
 			}),
+			apiKeysEnabled && /* @__PURE__ */ jsx(ApiKeysDialog, {
+				open: showApiKeysDialog,
+				onOpenChange: setShowApiKeysDialog,
+				apiBaseUrl
+			}),
 			/* @__PURE__ */ jsx(Dialog, {
 				open: showCreateDialog,
 				onOpenChange: (open) => !open && setShowCreateDialog(false),
@@ -1225,7 +1600,7 @@ function SidebarUserMenu({ collapsed = false, basePath = "" }) {
 * AuthenticatedInvect already wraps the tree with it. This plugin
 * only adds the user management UI.
 */
-const authFrontendPlugin = {
+const authFrontend = {
 	id: "user-auth",
 	name: "User Authentication",
 	sidebar: [{
@@ -1245,6 +1620,6 @@ const authFrontendPlugin = {
 	}]
 };
 //#endregion
-export { AuthGate, AuthProvider, AuthenticatedInvect, ProfilePage, SidebarUserMenu, SignInForm, SignInPage, UserButton, UserManagement, UserManagementPage, authFrontendPlugin, useAuth };
+export { ApiKeysDialog, AuthGate, AuthProvider, AuthenticatedInvect, ProfilePage, SidebarUserMenu, SignInForm, SignInPage, UserButton, UserManagement, UserManagementPage, authFrontend, useAuth };
 
 //# sourceMappingURL=index.mjs.map