@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/ApiKeysManager.tsx

@@ -0,0 +1,563 @@
+import React, { useState, useEffect } from "react";
+import {
+  Key,
+  Plus,
+  Trash2,
+  Copy,
+  CheckCircle2,
+  Clock,
+  Shield,
+  Zap,
+  AlertTriangle,
+  X,
+  Info,
+  Terminal,
+  ExternalLink,
+  Code,
+} from "lucide-react";
+import { ConfirmModal, Modal, ModalContent, ModalActions } from "./ui/Modal";
+
+interface ApiKeyItem {
+  id: string;
+  name: string;
+  key?: string;
+  keyPrefix: string;
+  permissions?: string[];
+  lastUsed?: string;
+  createdAt: string;
+}
+
+export function ApiKeysManager() {
+  const [keys, setKeys] = useState<ApiKeyItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [newKey, setNewKey] = useState<ApiKeyItem | null>(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showHelpModal, setShowHelpModal] = useState(false);
+  const [showAlertModal, setShowAlertModal] = useState(false);
+  const [alertMessage, setAlertMessage] = useState("");
+  const [deleteKeyId, setDeleteKeyId] = useState<string | null>(null);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [createError, setCreateError] = useState("");
+
+  const loadKeys = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/keys");
+      if (res.ok) {
+        const data = await res.json();
+        setKeys(
+          data.map((k: any) => ({
+            ...k,
+            key: k.key,
+            keyPrefix: k.keyPrefix || k.key?.substring(0, 8) || "",
+          })),
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadKeys();
+  }, []);
+
+  const handleCreateKey = async () => {
+    if (!newKeyName.trim()) {
+      setCreateError("Please enter a name for the API key");
+      return;
+    }
+
+    try {
+      const res = await fetch("/api/keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newKeyName }),
+      });
+
+      if (res.ok) {
+        const created = await res.json();
+        setNewKey(created);
+        setShowCreateModal(false);
+        setNewKeyName("");
+        setCreateError("");
+        loadKeys();
+      } else {
+        const error = await res.json();
+        setCreateError(error.error || "Failed to create API key");
+      }
+    } catch (e) {
+      console.error(e);
+      setCreateError("Failed to create API key");
+    }
+  };
+
+  const handleDeleteKey = async (id: string) => {
+    setDeleteKeyId(id);
+    setShowDeleteModal(true);
+  };
+
+  const confirmDeleteKey = async () => {
+    if (!deleteKeyId) return;
+
+    try {
+      const res = await fetch(`/api/keys/${deleteKeyId}`, { method: "DELETE" });
+      if (res.ok) {
+        loadKeys();
+      } else {
+        setAlertMessage("Failed to delete API key");
+        setShowAlertModal(true);
+      }
+    } catch (e) {
+      console.error(e);
+      setAlertMessage("Failed to delete API key");
+      setShowAlertModal(true);
+    }
+    setShowDeleteModal(false);
+    setDeleteKeyId(null);
+  };
+
+  const copyToClipboard = (key: string, id: string) => {
+    navigator.clipboard.writeText(key);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  return (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-32">
+      {/* Header */}
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
+        <div>
+          <div className="flex items-center gap-3">
+            <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+              API <span className="text-[var(--kyro-primary)]">Keys</span>
+            </h1>
+            <button type="button"
+              onClick={() => setShowHelpModal(true)}
+              className="p-2 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
+              title="Learn how API keys work"
+            >
+              <Info className="w-5 h-5" />
+            </button>
+          </div>
+          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-70">
+            Secure tokens for authenticating API requests.
+          </p>
+        </div>
+        <button type="button"
+          onClick={() => {
+            setNewKeyName("");
+            setCreateError("");
+            setShowCreateModal(true);
+          }}
+          className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm shadow-xl hover:opacity-90 active:scale-95 transition-all"
+        >
+          <Plus className="w-4 h-4" />
+          Create API Key
+        </button>
+      </div>
+
+      {/* How to Use Section */}
+      <div className="grid md:grid-cols-2 gap-4">
+        {/* Quick Start */}
+        <div className="surface-tile p-6">
+          <div className="flex items-center gap-2 mb-3">
+            <Terminal className="w-5 h-5 text-[var(--kyro-primary)]" />
+            <h3 className="font-bold">Quick Start</h3>
+          </div>
+          <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70 mb-3">
+            Include your API key in requests:
+          </p>
+          <div className="space-y-2">
+            <div className="bg-[var(--kyro-bg-secondary)] rounded-lg p-3 font-mono text-xs border border-[var(--kyro-border)]">
+              <div className="text-[var(--kyro-text-muted)] mb-2">
+                Example request:
+              </div>
+              <div className="text-[var(--kyro-primary)]">curl -X GET \</div>
+              <div className="text-[var(--kyro-text-secondary)]">
+                {" "}
+                https://yoursite.com/api/posts \
+              </div>
+              <div className="text-[var(--kyro-text-secondary)]">
+                {" "}
+                -H "Authorization: ApiKey kyro_xxx"
+              </div>
+            </div>
+            <button type="button"
+              onClick={() => {
+                navigator.clipboard.writeText(
+                  'curl -X GET https://yoursite.com/api/posts -H "Authorization: ApiKey YOUR_KEY"',
+                );
+              }}
+              className="text-xs text-[var(--kyro-primary)] hover:underline flex items-center gap-1"
+            >
+              <Copy className="w-3 h-3" /> Copy curl example
+            </button>
+          </div>
+        </div>
+
+        {/* JavaScript/Fetch */}
+        <div className="surface-tile p-6">
+          <div className="flex items-center gap-2 mb-3">
+            <Code className="w-5 h-5 text-[var(--kyro-primary)]" />
+            <h3 className="font-bold">JavaScript / Fetch</h3>
+          </div>
+          <div className="bg-[var(--kyro-bg-secondary)] rounded-lg p-3 font-mono text-xs border border-[var(--kyro-border)]">
+            <div className="text-[var(--kyro-text-muted)] mb-2">
+              Example code:
+            </div>
+            <div>
+              <span className="text-[var(--kyro-primary)]">await fetch</span>(
+              <span className="text-green-600">'https://api'</span>, {"{"}
+            </div>
+            <div> headers: {"{"}</div>
+            <div>
+              {" "}
+              <span className="text-green-600">'Authorization'</span>:{" "}
+              <span className="text-yellow-700">'ApiKey kyro_xxx'</span>,
+            </div>
+            <div> {"}"}</div>
+            <div>{"}"})</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Best Practices */}
+      <div className="surface-tile p-4 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)]">
+        <div className="flex items-start gap-3">
+          <Shield className="w-5 h-5 text-amber-600 flex-shrink-0" />
+          <div>
+            <h4 className="font-bold text-[var(--kyro-text-primary)] mb-2">
+              Best Practices for API Keys
+            </h4>
+            <ul className="text-sm text-[var(--kyro-text-secondary)] grid md:grid-cols-2 gap-2">
+              <li className="flex items-center gap-2">
+                <span className="text-amber-600">•</span> Never commit to
+                version control
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="text-amber-600">•</span> Store in environment
+                variables
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="text-amber-600">•</span> Use separate keys per
+                app
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="text-amber-600">•</span> Revoke unused keys
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* New Key Alert */}
+      {newKey && (
+        <div className="surface-tile p-8 bg-green-500/10 border border-green-500/20">
+          <div className="flex items-start gap-4">
+            <div className="p-3 bg-green-500/20 rounded-2xl">
+              <CheckCircle2 className="w-6 h-6 text-green-500" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-xl font-black text-green-600 mb-2">
+                API Key Created Successfully
+              </h3>
+              <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
+                Copy this key now.{" "}
+                <span className="text-red-500 font-bold">
+                  This is the only time it will be shown.
+                </span>
+              </p>
+              <div className="flex items-center gap-3">
+                <code className="flex-1 p-4 bg-[var(--kyro-bg)] border border-green-500/30 rounded-xl font-mono text-sm break-all">
+                  {newKey.key}
+                </code>
+                <button type="button"
+                  onClick={() => copyToClipboard(newKey.key!, newKey.id)}
+                  className="p-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl hover:opacity-90 flex-shrink-0"
+                  title="Copy to clipboard"
+                >
+                  {copiedId === newKey.id ? (
+                    <CheckCircle2 className="w-5 h-5" />
+                  ) : (
+                    <Copy className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+          <button type="button"
+            onClick={() => setNewKey(null)}
+            className="mt-6 text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+          >
+            I've copied my key - dismiss this message
+          </button>
+        </div>
+      )}
+
+      {/* Keys List */}
+      <section className="space-y-6">
+        <div className="flex items-center gap-2 px-2">
+          <Key className="w-4 h-4 text-[var(--kyro-primary)] opacity-40" />
+          <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+            Your API Keys
+          </span>
+        </div>
+
+        {loading ? (
+          <div className="surface-tile p-8 text-center">Loading...</div>
+        ) : keys.length === 0 ? (
+          <div className="surface-tile p-12 text-center border-2 border-dashed border-[var(--kyro-border)]">
+            <div className="w-16 h-16 mx-auto mb-6 bg-[var(--kyro-surface-accent)] rounded-2xl flex items-center justify-center">
+              <Shield className="w-8 h-8 text-[var(--kyro-text-secondary)] opacity-20" />
+            </div>
+            <h3 className="text-lg font-black mb-2">No API Keys Yet</h3>
+            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-6">
+              Create your first API key to authenticate with the API.
+            </p>
+            <button type="button"
+              onClick={() => setShowCreateModal(true)}
+              className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm hover:opacity-90 transition-all"
+            >
+              <Plus className="w-4 h-4 inline mr-2" />
+              Create Your First Key
+            </button>
+          </div>
+        ) : (
+          <div className="grid gap-4">
+            {keys.map((key) => (
+              <div
+                key={key.id}
+                className="surface-tile p-6 group hover:border-[var(--kyro-primary)] transition-all"
+              >
+                <div className="flex items-start justify-between gap-6">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-3">
+                      <h3 className="text-lg font-black">{key.name}</h3>
+                      <span className="px-2 py-0.5 bg-green-500/10 text-green-500 rounded-full text-[8px] font-black uppercase">
+                        Active
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm font-mono text-[var(--kyro-text-secondary)] opacity-50 mb-4">
+                      <Key className="w-3 h-3" />
+                      <span>{key.keyPrefix}••••••••</span>
+                      <span className="text-[10px] opacity-40">
+                        (prefix shown)
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-6 text-[10px] font-black uppercase opacity-40">
+                      <div className="flex items-center gap-2">
+                        <Clock className="w-3 h-3" />
+                        {key.lastUsed
+                          ? `Last used: ${new Date(key.lastUsed).toLocaleDateString()}`
+                          : "Never used"}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Zap className="w-3 h-3" />
+                        Created: {new Date(key.createdAt).toLocaleDateString()}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button type="button"
+                      onClick={() =>
+                        copyToClipboard(
+                          key.key || `${key.keyPrefix}...`,
+                          key.id,
+                        )
+                      }
+                      className="p-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface)] flex items-center gap-2"
+                    >
+                      {copiedId === key.id ? (
+                        <CheckCircle2 className="w-4 h-4 text-green-500" />
+                      ) : (
+                        <Copy className="w-4 h-4" />
+                      )}
+                      <span className="text-xs font-medium">
+                        {copiedId === key.id ? "Copied!" : "Copy"}
+                      </span>
+                    </button>
+                    <button type="button"
+                      onClick={() => handleDeleteKey(key.id)}
+                      className="p-3 text-red-500 bg-red-500/10 rounded-xl hover:bg-red-500/20"
+                      title="Delete API key"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Create Modal */}
+      <Modal
+        open={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        title="Create New API Key"
+      >
+        <ModalContent>
+          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
+            Give your API key a descriptive name to identify its purpose. You
+            can create multiple keys for different use cases.
+          </p>
+          <input
+            type="text"
+            value={newKeyName}
+            onChange={(e) => {
+              setNewKeyName(e.target.value);
+              setCreateError("");
+            }}
+            placeholder="e.g., Production App, Staging, Mobile App"
+            className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+            onKeyDown={(e) => e.key === "Enter" && handleCreateKey()}
+          />
+          {createError && (
+            <p className="mt-2 text-sm text-red-500">{createError}</p>
+          )}
+          <div className="mt-4 p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" />
+            <div>
+              <p className="text-xs font-bold text-amber-600 mb-1">Important</p>
+              <p className="text-xs text-[var(--kyro-text-secondary)]">
+                The API key will be shown only once after creation. Copy it
+                immediately and store it securely.
+              </p>
+            </div>
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowCreateModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button type="button"
+            onClick={handleCreateKey}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
+          >
+            Generate Key
+          </button>
+        </ModalActions>
+      </Modal>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        open={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        title="Delete API Key"
+        variant="danger"
+      >
+        <ModalContent>
+          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
+            Are you sure you want to delete this API key? This action cannot be
+            undone.
+          </p>
+          <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
+            <p className="text-sm font-medium text-red-500">
+              Any applications or integrations using this key will immediately
+              lose access.
+            </p>
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowDeleteModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
+          >
+            Keep Key
+          </button>
+          <button type="button"
+            onClick={confirmDeleteKey}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-red-500 text-white hover:bg-red-600 transition-colors"
+          >
+            Delete Permanently
+          </button>
+        </ModalActions>
+      </Modal>
+
+      {/* Help Modal */}
+      <Modal
+        open={showHelpModal}
+        onClose={() => setShowHelpModal(false)}
+        title="How API Keys Work"
+      >
+        <ModalContent>
+          <div className="space-y-6">
+            <div>
+              <h4 className="font-bold mb-2">What is an API key?</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)]">
+                An API key is a unique token that authenticates your requests to
+                the API. Think of it as a password that's specifically for
+                programmatic access.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-bold mb-2">How to use it</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)] mb-3">
+                Add your API key to the Authorization header of your HTTP
+                requests:
+              </p>
+              <div className="bg-[var(--kyro-bg)] rounded-lg p-4 font-mono text-sm space-y-2">
+                <div>
+                  <span className="text-[var(--kyro-text-secondary)]">
+                    Authorization:
+                  </span>{" "}
+                  <span className="text-[var(--kyro-primary)]">ApiKey </span>
+                  <span className="text-green-500">kyro_xxxxxxxxxxxx</span>
+                </div>
+              </div>
+            </div>
+            <div>
+              <h4 className="font-bold mb-2">Best practices</h4>
+              <ul className="text-sm text-[var(--kyro-text-secondary)] space-y-2 list-disc list-inside">
+                <li>Never share your API key publicly</li>
+                <li>
+                  Store it securely (environment variables, secrets manager)
+                </li>
+                <li>Create separate keys for different applications</li>
+                <li>Revoke keys that are no longer in use</li>
+              </ul>
+            </div>
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowHelpModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
+          >
+            Got it
+          </button>
+        </ModalActions>
+      </Modal>
+
+      {/* Alert Modal */}
+      <Modal
+        open={showAlertModal}
+        onClose={() => setShowAlertModal(false)}
+        title="Error"
+      >
+        <ModalContent>
+          <p className="text-sm text-[var(--kyro-text-secondary)]">
+            {alertMessage}
+          </p>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowAlertModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
+          >
+            OK
+          </button>
+        </ModalActions>
+      </Modal>
+    </div>
+  );
+}