nobalmako 1.0.0

package/src/components/ApiKeysManager.tsx

@@ -0,0 +1,529 @@
+'use client'
+
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
+import { Checkbox } from '@/components/ui/checkbox'
+import { toast } from 'sonner'
+import { Key, Plus, Trash2, Edit, Copy } from 'lucide-react'
+import { useTeams } from '@/hooks/use-teams'
+
+interface ApiKey {
+  id: string
+  name: string
+  permissions: string[]
+  lastUsed: string | null
+  createdAt: string
+  expiresAt: string | null
+  teamId: string | null
+  teamName: string | null
+  allowedIps?: string[] | null
+}
+
+interface CreateApiKeyData {
+  name: string
+  teamId?: string
+  permissions: string[]
+  expiresAt?: string
+  allowedIps?: string[]
+}
+
+interface UpdateApiKeyData {
+  name?: string
+  permissions?: string[]
+  expiresAt?: string
+  allowedIps?: string[]
+}
+
+const PERMISSION_OPTIONS = [
+  { value: 'read', label: 'Read' },
+  { value: 'write', label: 'Write' },
+  { value: 'delete', label: 'Delete' },
+  { value: 'admin', label: 'Admin' },
+]
+
+export default function ApiKeysManager() {
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+  const [selectedApiKey, setSelectedApiKey] = useState<ApiKey | null>(null)
+  const [createForm, setCreateForm] = useState<CreateApiKeyData>({
+    name: '',
+    permissions: ['read'],
+    expiresAt: '',
+    allowedIps: [],
+  })
+  const [editForm, setEditForm] = useState<UpdateApiKeyData>({
+    name: '',
+    permissions: ['read'],
+    expiresAt: '',
+    allowedIps: [],
+  })
+
+  const queryClient = useQueryClient()
+  const { teams } = useTeams()
+
+  // Fetch API keys
+  const { data: apiKeysData, isLoading } = useQuery<{ apiKeys: ApiKey[] }>({
+    queryKey: ['api-keys'],
+    queryFn: async () => {
+      const response = await fetch('/api/api-keys')
+      if (!response.ok) throw new Error('Failed to fetch API keys')
+      return response.json()
+    },
+  })
+
+  const apiKeys = apiKeysData?.apiKeys || []
+
+  // Create API key mutation
+  const createApiKeyMutation = useMutation({
+    mutationFn: async (data: CreateApiKeyData) => {
+      const response = await fetch('/api/api-keys', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      if (!response.ok) throw new Error('Failed to create API key')
+      return response.json()
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['api-keys'] })
+      setIsCreateDialogOpen(false)
+      setCreateForm({ name: '', permissions: ['read'], expiresAt: '' })
+
+      // Show the generated key to the user
+      toast.success('API Key Created', {
+        description: `Your new API key: ${data.apiKey.key}`,
+        duration: 10000,
+      })
+    },
+    onError: (error) => {
+      toast.error('Failed to create API key', {
+        description: error.message,
+      })
+    },
+  })
+
+  // Update API key mutation
+  const updateApiKeyMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: UpdateApiKeyData }) => {
+      const response = await fetch(`/api/api-keys/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      if (!response.ok) throw new Error('Failed to update API key')
+      return response.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['api-keys'] })
+      setIsEditDialogOpen(false)
+      setSelectedApiKey(null)
+      toast.success('API key updated successfully')
+    },
+    onError: (error) => {
+      toast.error('Failed to update API key', {
+        description: error.message,
+      })
+    },
+  })
+
+  // Delete API key mutation
+  const deleteApiKeyMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const response = await fetch(`/api/api-keys/${id}`, {
+        method: 'DELETE',
+      })
+      if (!response.ok) throw new Error('Failed to delete API key')
+      return response.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['api-keys'] })
+      toast.success('API key deleted successfully')
+    },
+    onError: (error) => {
+      toast.error('Failed to delete API key', {
+        description: error.message,
+      })
+    },
+  })
+
+  const handleCreateApiKey = () => {
+    if (!createForm.name.trim()) {
+      toast.error('Please enter a name for the API key')
+      return
+    }
+    createApiKeyMutation.mutate(createForm)
+  }
+
+  const handleEditApiKey = () => {
+    if (!selectedApiKey || !editForm.name?.trim()) {
+      toast.error('Please enter a name for the API key')
+      return
+    }
+    updateApiKeyMutation.mutate({
+      id: selectedApiKey.id,
+      data: editForm,
+    })
+  }
+
+  const handleDeleteApiKey = (apiKey: ApiKey) => {
+    deleteApiKeyMutation.mutate(apiKey.id)
+  }
+
+  const openEditDialog = (apiKey: ApiKey) => {
+    setSelectedApiKey(apiKey)
+    setEditForm({
+      name: apiKey.name,
+      permissions: apiKey.permissions,
+      expiresAt: apiKey.expiresAt || '',
+      allowedIps: apiKey.allowedIps || [],
+    })
+    setIsEditDialogOpen(true)
+  }
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+    toast.success('Copied to clipboard')
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  const isExpired = (expiresAt: string | null) => {
+    if (!expiresAt) return false
+    return new Date(expiresAt) < new Date()
+  }
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center p-8">Loading API keys...</div>
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">API Keys</h2>
+          <p className="text-muted-foreground">
+            Manage API keys for programmatic access to your environment variables.
+          </p>
+        </div>
+        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              Create API Key
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Create API Key</DialogTitle>
+              <DialogDescription>
+                Create a new API key for programmatic access. Make sure to copy the key after creation - it will only be shown once.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  value={createForm.name}
+                  onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
+                  placeholder="e.g., CI/CD Pipeline"
+                />
+              </div>
+              <div>
+                <Label htmlFor="team">Team (Optional)</Label>
+                <Select
+                  value={createForm.teamId || ''}
+                  onValueChange={(value) => setCreateForm({ ...createForm, teamId: value || undefined })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a team" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="">Personal</SelectItem>
+                    {teams?.map((team) => (
+                      <SelectItem key={team.id} value={team.id}>
+                        {team.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label>Permissions</Label>
+                <div className="space-y-2 mt-2">
+                  {PERMISSION_OPTIONS.map((permission) => (
+                    <div key={permission.value} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={`create-${permission.value}`}
+                        checked={createForm.permissions.includes(permission.value)}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            setCreateForm({
+                              ...createForm,
+                              permissions: [...createForm.permissions, permission.value],
+                            })
+                          } else {
+                            setCreateForm({
+                              ...createForm,
+                              permissions: createForm.permissions.filter((p) => p !== permission.value),
+                            })
+                          }
+                        }}
+                      />
+                      <Label htmlFor={`create-${permission.value}`}>{permission.label}</Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <Label htmlFor="expiresAt">Expires At (Optional)</Label>
+                <Input
+                  id="expiresAt"
+                  type="datetime-local"
+                  value={createForm.expiresAt}
+                  onChange={(e) => setCreateForm({ ...createForm, expiresAt: e.target.value })}
+                />
+              </div>
+              <div>
+                <Label htmlFor="allowedIps">Whitelisted IPs (Optional)</Label>
+                <Input
+                  id="allowedIps"
+                  placeholder="e.g. 192.168.1.1, 10.0.0.1"
+                  onChange={(e) => setCreateForm({ ...createForm, allowedIps: e.target.value.split(',').map(ip => ip.trim()).filter(ip => ip) })}
+                />
+                <p className="text-[10px] text-muted-foreground mt-1">Limit this key to specific IP addresses. Multiple IPs should be comma-separated.</p>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button
+                onClick={handleCreateApiKey}
+                disabled={createApiKeyMutation.isPending}
+              >
+                {createApiKeyMutation.isPending ? 'Creating...' : 'Create API Key'}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="grid gap-4">
+        {apiKeys.length === 0 ? (
+          <Card>
+            <CardContent className="flex flex-col items-center justify-center py-12">
+              <Key className="h-12 w-12 text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">No API keys yet</h3>
+              <p className="text-muted-foreground text-center mb-4">
+                Create your first API key to enable programmatic access to your environment variables.
+              </p>
+              <Button onClick={() => setIsCreateDialogOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create API Key
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          apiKeys.map((apiKey) => (
+            <Card key={apiKey.id}>
+              <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-2">
+                    <Key className="h-4 w-4" />
+                    <CardTitle className="text-base">{apiKey.name}</CardTitle>
+                    {apiKey.teamName && (
+                      <Badge variant="secondary">{apiKey.teamName}</Badge>
+                    )}
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => openEditDialog(apiKey)}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button variant="ghost" size="sm">
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>Delete API Key</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            Are you sure you want to delete the API key &quot;{apiKey.name}&quot;? This action cannot be undone.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() => handleDeleteApiKey(apiKey)}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                          >
+                            Delete
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Permissions:</span>
+                    <div className="flex flex-wrap gap-1">
+                      {apiKey.permissions.map((permission) => (
+                        <Badge key={permission} variant="outline">
+                          {permission}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Created:</span>
+                    <span>{formatDate(apiKey.createdAt)}</span>
+                  </div>
+                  {apiKey.lastUsed && (
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Last Used:</span>
+                      <span>{formatDate(apiKey.lastUsed)}</span>
+                    </div>
+                  )}
+                  {apiKey.expiresAt && (
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Expires:</span>
+                      <span className={isExpired(apiKey.expiresAt) ? 'text-destructive' : ''}>
+                        {formatDate(apiKey.expiresAt)}
+                        {isExpired(apiKey.expiresAt) && ' (Expired)'}
+                      </span>
+                    </div>
+                  )}
+                  {apiKey.allowedIps && apiKey.allowedIps.length > 0 && (
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">IP White-list:</span>
+                      <div className="flex flex-wrap gap-1">
+                        {apiKey.allowedIps.map((ip) => (
+                          <Badge key={ip} variant="secondary" className="text-[10px] px-1 h-4">
+                            {ip}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Key ID:</span>
+                    <div className="flex items-center space-x-2">
+                      <code className="text-xs bg-muted px-2 py-1 rounded">
+                        {apiKey.id}
+                      </code>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => copyToClipboard(apiKey.id)}
+                      >
+                        <Copy className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {/* Edit API Key Dialog */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit API Key</DialogTitle>
+            <DialogDescription>
+              Update the settings for this API key.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="edit-name">Name</Label>
+              <Input
+                id="edit-name"
+                value={editForm.name}
+                onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
+              />
+            </div>
+            <div>
+              <Label>Permissions</Label>
+              <div className="space-y-2 mt-2">
+                {PERMISSION_OPTIONS.map((permission) => (
+                  <div key={permission.value} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`edit-${permission.value}`}
+                      checked={editForm.permissions?.includes(permission.value)}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setEditForm({
+                            ...editForm,
+                            permissions: [...(editForm.permissions || []), permission.value],
+                          })
+                        } else {
+                          setEditForm({
+                            ...editForm,
+                            permissions: (editForm.permissions || []).filter((p) => p !== permission.value),
+                          })
+                        }
+                      }}
+                    />
+                    <Label htmlFor={`edit-${permission.value}`}>{permission.label}</Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <Label htmlFor="edit-expiresAt">Expires At (Optional)</Label>
+              <Input
+                id="edit-expiresAt"
+                type="datetime-local"
+                value={editForm.expiresAt}
+                onChange={(e) => setEditForm({ ...editForm, expiresAt: e.target.value })}
+              />
+            </div>
+            <div>
+              <Label htmlFor="edit-allowedIps">Whitelisted IPs (Optional)</Label>
+              <Input
+                id="edit-allowedIps"
+                value={editForm.allowedIps?.join(', ')}
+                placeholder="e.g. 192.168.1.1, 10.0.0.1"
+                onChange={(e) => setEditForm({ ...editForm, allowedIps: e.target.value.split(',').map(ip => ip.trim()).filter(ip => ip) })}
+              />
+              <p className="text-[10px] text-muted-foreground mt-1">Limit this key to specific IP addresses. Multiple IPs should be comma-separated.</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              onClick={handleEditApiKey}
+              disabled={updateApiKeyMutation.isPending}
+            >
+              {updateApiKeyMutation.isPending ? 'Updating...' : 'Update API Key'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}