Nav bar and page title cleanup
This commit is contained in:
Ubuntu
@@ -51,7 +51,6 @@ import OIDCClientsPage from "@/pages/org/OIDCClientsPage";
|
||||
import CAsPage from "@/pages/org/CAsPage";
|
||||
import DepartmentsPage from "@/pages/org/DepartmentsPage";
|
||||
import PrincipalsPage from "@/pages/org/PrincipalsPage";
|
||||
import ApiKeysPage from "@/pages/org/ApiKeysPage";
|
||||
import MyMembershipsPage from "@/pages/org/MyMembershipsPage";
|
||||
import NetworksPage from "@/pages/org/NetworksPage";
|
||||
import NetworkManagementPage from "@/pages/org/NetworkManagementPage";
|
||||
@@ -203,7 +202,6 @@ function AppRoutes() {
|
||||
<Route path="/org/members/:userId" element={<RequireAdmin><UserManagementPage /></RequireAdmin>} />
|
||||
<Route path="/org/departments" element={<RequireAdmin><DepartmentsPage /></RequireAdmin>} />
|
||||
<Route path="/org/principals" element={<RequireAdmin><PrincipalsPage /></RequireAdmin>} />
|
||||
<Route path="/org/api-keys" element={<RequireAdmin><ApiKeysPage /></RequireAdmin>} />
|
||||
<Route path="/org/policies" element={<RequireAdmin><PoliciesPage /></RequireAdmin>} />
|
||||
<Route path="/org/policies/compliance" element={<RequireAdmin><CompliancePage /></RequireAdmin>} />
|
||||
<Route path="/org/audit" element={<RequireAdmin><OrgAuditPage /></RequireAdmin>} />
|
||||
|
||||
@@ -46,13 +46,14 @@ const userNavItems = [
|
||||
{ title: "Linked Accounts", url: "/linked-accounts", icon: Link2 },
|
||||
{ title: "Activity", url: "/activity", icon: Activity },
|
||||
{ title: "CLI Guide", url: "/cli-guide", icon: BookOpen },
|
||||
{ title: "ZeroTier Devices", url: "/org/zerotier/devices", icon: Monitor },
|
||||
|
||||
];
|
||||
|
||||
// Visible to ALL org members
|
||||
const orgMemberNavItems = [
|
||||
{ title: "Overview", url: "/org", icon: Building2 },
|
||||
{ title: "My Memberships", url: "/org/my-memberships", icon: Layers },
|
||||
{ title: "ZeroTier Devices", url: "/org/zerotier/devices", icon: Monitor },
|
||||
];
|
||||
|
||||
// Visible to org admins/owners only (management)
|
||||
@@ -61,12 +62,10 @@ const orgAdminNavItems = [
|
||||
{ title: "Members", url: "/org/members", icon: Users },
|
||||
{ title: "Departments", url: "/org/departments", icon: Layers },
|
||||
{ title: "Principals", url: "/org/principals", icon: GitBranch },
|
||||
{ title: "API Keys", url: "/org/api-keys", icon: Key },
|
||||
{ title: "Policies", url: "/org/policies", icon: Settings },
|
||||
{ title: "ZeroTier Networks", url: "/org/zerotier/networks", icon: Network },
|
||||
{ title: "ZeroTier Access", url: "/org/zerotier/access", icon: ShieldAlert },
|
||||
{ title: "ZeroTier Config", url: "/org/zerotier/config", icon: Settings },
|
||||
{ title: "ZeroTier Devices", url: "/org/zerotier/devices", icon: Monitor },
|
||||
];
|
||||
|
||||
const adminNavItems = [
|
||||
|
||||
@@ -359,7 +359,7 @@ export default function AccessPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Access Control</h1>
|
||||
<h1 className="page-title">ZeroTier Access</h1>
|
||||
<p className="page-description">Manage network access requests, approvals, and active sessions</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,428 +0,0 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import {
|
||||
Plus, Copy, Trash2, Loader2, AlertCircle, CheckCircle, MoreHorizontal, Edit2, Check
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { api, OrganizationApiKey } from "@/lib/api";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useOrg } from "@/contexts/OrgContext";
|
||||
import { formatDate } from "@/lib/date";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
interface NewApiKeyState {
|
||||
key: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface EditingKey {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
}
|
||||
|
||||
function useCopyButton() {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const copy = (text: string) => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
});
|
||||
};
|
||||
return { copied, copy };
|
||||
}
|
||||
|
||||
export default function ApiKeysPage() {
|
||||
const { toast } = useToast();
|
||||
const { selectedOrgId: orgId } = useOrg();
|
||||
const queryClient = useQueryClient();
|
||||
const { copy, copied } = useCopyButton();
|
||||
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||
const [newSecret, setNewSecret] = useState<NewApiKeyState | null>(null);
|
||||
const [editingKey, setEditingKey] = useState<EditingKey | null>(null);
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
|
||||
const nameRef = useRef<HTMLInputElement>(null);
|
||||
const descriptionRef = useRef<HTMLTextAreaElement>(null);
|
||||
const editNameRef = useRef<HTMLInputElement>(null);
|
||||
const editDescriptionRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Fetch API keys
|
||||
const { data: apiKeysData, isLoading } = useQuery({
|
||||
queryKey: ['api-keys', orgId],
|
||||
queryFn: () => orgId ? api.organizations.getApiKeys(orgId) : null,
|
||||
enabled: !!orgId,
|
||||
});
|
||||
|
||||
// Create API key mutation
|
||||
const { mutate: createKey, isPending: isCreatingKey } = useMutation({
|
||||
mutationFn: () => {
|
||||
if (!orgId) throw new Error('Organization ID not set');
|
||||
const name = nameRef.current?.value;
|
||||
const description = descriptionRef.current?.value;
|
||||
if (!name) throw new Error('Name is required');
|
||||
return api.organizations.createApiKey(orgId, name, description);
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
const apiKey = data.api_key;
|
||||
setNewSecret({
|
||||
key: apiKey.key || '',
|
||||
name: apiKey.name,
|
||||
description: apiKey.description || undefined,
|
||||
createdAt: apiKey.created_at,
|
||||
});
|
||||
setIsCreateDialogOpen(false);
|
||||
if (nameRef.current) nameRef.current.value = '';
|
||||
if (descriptionRef.current) descriptionRef.current.value = '';
|
||||
queryClient.invalidateQueries({ queryKey: ['api-keys', orgId] });
|
||||
toast({
|
||||
title: 'API Key Created',
|
||||
description: 'Store the key value securely - you won\'t be able to see it again.',
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast({
|
||||
title: 'Failed to create API key',
|
||||
description: 'Please try again.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Update API key mutation
|
||||
const { mutate: updateKey, isPending: isUpdatingKey } = useMutation({
|
||||
mutationFn: () => {
|
||||
if (!orgId || !editingKey) throw new Error('Required data missing');
|
||||
return api.organizations.updateApiKey(orgId, editingKey.id, {
|
||||
name: editNameRef.current?.value,
|
||||
description: editDescriptionRef.current?.value,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsEditDialogOpen(false);
|
||||
queryClient.invalidateQueries({ queryKey: ['api-keys', orgId] });
|
||||
toast({
|
||||
title: 'API Key Updated',
|
||||
description: 'Changes saved successfully.',
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast({
|
||||
title: 'Failed to update API key',
|
||||
description: 'Please try again.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Delete API key mutation
|
||||
const { mutate: deleteKey, isPending: isDeletingKey } = useMutation({
|
||||
mutationFn: (keyId: string) => {
|
||||
if (!orgId) throw new Error('Organization ID not set');
|
||||
return api.organizations.deleteApiKey(orgId, keyId);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['api-keys', orgId] });
|
||||
toast({
|
||||
title: 'API Key Deleted',
|
||||
description: 'The API key has been permanently removed.',
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast({
|
||||
title: 'Failed to delete API key',
|
||||
description: 'Please try again.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleCreateKey = () => {
|
||||
setIsCreating(true);
|
||||
createKey();
|
||||
setIsCreating(false);
|
||||
};
|
||||
|
||||
const handleEditKey = (key: OrganizationApiKey) => {
|
||||
setEditingKey({
|
||||
id: key.id,
|
||||
name: key.name,
|
||||
description: key.description,
|
||||
});
|
||||
setIsEditDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleUpdateKey = () => {
|
||||
updateKey();
|
||||
};
|
||||
|
||||
const handleDeleteKey = (keyId: string) => {
|
||||
if (confirm('Are you sure you want to delete this API key? This action cannot be undone.')) {
|
||||
deleteKey(keyId);
|
||||
}
|
||||
};
|
||||
|
||||
const apiKeys = apiKeysData?.api_keys || [];
|
||||
const activeKeys = apiKeys.filter(k => !k.is_revoked);
|
||||
const revokedKeys = apiKeys.filter(k => k.is_revoked);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">API Keys</h1>
|
||||
<p className="page-description">Manage API keys for programmatic access to your organization.</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)} className="gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Create API Key
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* New key reveal banner */}
|
||||
{newSecret && (
|
||||
<div className="mb-4 rounded-lg border border-green-500/40 bg-green-500/5 p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-green-600 dark:text-green-400">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
API key created — copy it now, you won't see it again.
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 text-xs bg-muted px-3 py-2 rounded break-all font-mono">
|
||||
{newSecret.key}
|
||||
</code>
|
||||
<Button variant="outline" size="sm" className="shrink-0 gap-1.5" onClick={() => copy(newSecret.key)}>
|
||||
{copied ? <><Check className="w-3.5 h-3.5" /> Copied</> : <><Copy className="w-3.5 h-3.5" /> Copy</>}
|
||||
</Button>
|
||||
</div>
|
||||
<button onClick={() => setNewSecret(null)} className="text-xs text-muted-foreground hover:text-foreground transition-colors">
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Key list */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
) : apiKeys.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<AlertCircle className="w-8 h-8 text-muted-foreground mx-auto mb-3 opacity-40" />
|
||||
<p className="text-sm font-medium text-foreground mb-1">No API keys yet</p>
|
||||
<p className="text-xs text-muted-foreground mb-4">Create one to enable external integrations.</p>
|
||||
<Button variant="outline" size="sm" onClick={() => setIsCreateDialogOpen(true)} className="gap-2">
|
||||
<Plus className="w-4 h-4" /> Create API Key
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{activeKeys.map((key) => (
|
||||
<div key={key.id} className="flex items-start gap-4 p-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-sm text-foreground">{key.name}</span>
|
||||
{key.last_used_at && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
Last used {formatDate(key.last_used_at)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{key.description && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{key.description}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1">Created {formatDate(key.created_at)}</p>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleEditKey(key)} className="cursor-pointer">
|
||||
<Edit2 className="w-4 h-4 mr-2" /> Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteKey(key.id)}
|
||||
className="text-destructive cursor-pointer"
|
||||
disabled={isDeletingKey}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" /> Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{revokedKeys.length > 0 && (
|
||||
<>
|
||||
<div className="px-4 py-2 bg-muted/30">
|
||||
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Revoked</span>
|
||||
</div>
|
||||
{revokedKeys.map((key) => (
|
||||
<div key={key.id} className="flex items-center gap-4 px-4 py-3 opacity-50">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-muted-foreground line-through">{key.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Revoked {formatDate(key.revoked_at || '')}
|
||||
{key.revoke_reason && ` — ${key.revoke_reason}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Create Dialog */}
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create API Key</DialogTitle>
|
||||
<DialogDescription>
|
||||
Create a new API key for external integrations. The key will be displayed only once.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="key-name">Key Name</Label>
|
||||
<Input
|
||||
id="key-name"
|
||||
ref={nameRef}
|
||||
placeholder="e.g., Production Integration"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="key-description">Description (Optional)</Label>
|
||||
<Textarea
|
||||
id="key-description"
|
||||
ref={descriptionRef}
|
||||
placeholder="What is this key for?"
|
||||
className="mt-1 resize-none h-20"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateDialogOpen(false)}
|
||||
disabled={isCreating || isCreatingKey}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateKey}
|
||||
disabled={isCreating || isCreatingKey}
|
||||
>
|
||||
{isCreatingKey ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
'Create Key'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit Dialog */}
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit API Key</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update the name and description of this API key.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{editingKey && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="edit-key-name">Key Name</Label>
|
||||
<Input
|
||||
id="edit-key-name"
|
||||
ref={editNameRef}
|
||||
defaultValue={editingKey.name}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="edit-key-description">Description (Optional)</Label>
|
||||
<Textarea
|
||||
id="edit-key-description"
|
||||
ref={editDescriptionRef}
|
||||
defaultValue={editingKey.description || ''}
|
||||
className="mt-1 resize-none h-20"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditDialogOpen(false)}
|
||||
disabled={isUpdatingKey}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleUpdateKey}
|
||||
disabled={isUpdatingKey}
|
||||
>
|
||||
{isUpdatingKey ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Updating...
|
||||
</>
|
||||
) : (
|
||||
'Update Key'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -400,7 +400,7 @@ export default function DevicesPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">ZeroTier Access</h1>
|
||||
<h1 className="page-title">ZeroTier Devices</h1>
|
||||
<p className="page-description">Manage your devices, networks, and access requests</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -291,7 +291,7 @@ export default function NetworksPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Networks</h1>
|
||||
<h1 className="page-title">ZeroTier Networks</h1>
|
||||
<p className="page-description">Manage ZeroTier portal networks and monitor access</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user