M src/app/dashboard/api-keys/new/page.js → src/app/dashboard/api-keys/new/page.js

@@ -23,19 +23,34 @@ "http://localhost:8080/twirp/apikeys.APIKeysService/CreateAPIKey",
         {
           method: "POST",
           headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ name }),
+          body: JSON.stringify({
+            token: localStorage.getItem("token"),
+            name: name,
+            expires_at: "", // Optional, you can add a date picker if needed
+          }),
         },
       );
-
-      if (!response.ok) throw new Error("Failed to create API key");
 
       const data = await response.json();
-      setNewKey(data.key);
+
+      // Check for Twirp error response
+      if (data.code || data.msg) {
+        throw new Error(data.msg || "Failed to create API key");
+      }
+
+      if (!data.key) {
+        throw new Error("No API key received");
+      }
+
+      setNewKey({
+        key: data.key,
+        name: data.api_key.name,
+        created_at: data.api_key.created_at,
+      });
     } catch (error) {
-      setError("Failed to create API key");
+      setError(error.message || "Failed to create API key");
       console.error("Error:", error);
     } finally {
       setIsSubmitting(false);
@@ -48,19 +63,22 @@ {newKey ? (
         <div className="bg-white shadow rounded-lg p-6">
           <div className="space-y-4">
             <h2 className="text-lg font-medium text-gray-900">
-              API Key Created
+              API Key Created: {newKey.name}
             </h2>
             <p className="text-sm text-gray-500">
               Please copy your API key now. You won't be able to see it again!
             </p>
             <div className="bg-gray-50 p-4 rounded-md">
-              <code className="text-sm break-all">{newKey}</code>
+              <code className="text-sm break-all">{newKey.key}</code>
             </div>
+            <p className="text-xs text-gray-500">
+              Created on: {new Date(newKey.created_at).toLocaleString()}
+            </p>
             <div className="flex justify-end space-x-4">
               <Button
                 variant="secondary"
                 onClick={() => {
-                  navigator.clipboard.writeText(newKey);
+                  navigator.clipboard.writeText(newKey.key);
                 }}
               >
                 Copy to Clipboard

M src/app/dashboard/api-keys/page.js → src/app/dashboard/api-keys/page.js

@@ -8,6 +8,7 @@ export default function APIKeysPage() {
   const [apiKeys, setApiKeys] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [deletingKeys, setDeletingKeys] = useState(new Set());
 
   useEffect(() => {
     fetchAPIKeys();
@@ -18,16 +19,20 @@ try {
       const response = await fetch(
         "http://localhost:8080/twirp/apikeys.APIKeysService/ListAPIKeys",
         {
+          method: "POST",
           headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
+            "Content-Type": "application/json",
           },
+          body: JSON.stringify({
+            token: localStorage.getItem("token"),
+          }),
         },
       );
 
       if (!response.ok) throw new Error("Failed to fetch API keys");
 
       const data = await response.json();
-      setApiKeys(data);
+      setApiKeys(data.api_keys || []);
     } catch (error) {
       setError("Failed to load API keys");
       console.error("Error:", error);
@@ -52,34 +57,44 @@ </div>
     );
   }
 
-  async function handleRevokeKey(keyId) {
+  async function handleDeleteKey(keyId) {
     if (
       !confirm(
-        "Are you sure you want to revoke this API key? This action cannot be undone.",
+        "Are you sure you want to delete this API key? This action cannot be undone.",
       )
     ) {
       return;
     }
+
+    setDeletingKeys((prev) => new Set([...prev, keyId]));
 
     try {
       const response = await fetch(
-        `http://localhost:8080/twirp/apikeys.APIKeysService/RevokeAPIKey`,
+        `http://localhost:8080/twirp/apikeys.APIKeysService/DeleteAPIKey`,
         {
           method: "POST",
           headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ keyId }),
+          body: JSON.stringify({
+            token: localStorage.getItem("token"),
+            key_id: keyId,
+          }),
         },
       );
 
-      if (!response.ok) throw new Error("Failed to revoke API key");
+      if (!response.ok) throw new Error("Failed to delete API key: ", response);
 
       await fetchAPIKeys(); // Refresh the list
     } catch (error) {
-      setError("Failed to revoke API key");
+      setError("Failed to delete API key");
       console.error("Error:", error);
+    } finally {
+      setDeletingKeys((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(keyId);
+        return newSet;
+      });
     }
   }
 
@@ -113,7 +128,8 @@ apiKeys.map((key) => (
             <APIKeyItem
               key={key.id}
               apiKey={key}
-              onRevoke={() => handleRevokeKey(key.id)}
+              onDelete={() => handleDeleteKey(key.id)}
+              isDeleting={deletingKeys.has(key.id)}
             />
           ))}
       </div>
@@ -121,7 +137,7 @@ </>
   );
 }
 
-function APIKeyItem({ apiKey, onRevoke }) {
+function APIKeyItem({ apiKey, onDelete, isDeleting }) {
   return (
     <div className="px-6 py-4">
       <div className="flex items-center justify-between">
@@ -139,10 +155,11 @@ </div>
           )}
         </div>
         <button
-          onClick={onRevoke}
-          className="text-sm text-red-600 hover:text-red-900"
+          onClick={onDelete}
+          disabled={isDeleting}
+          className={`text-sm text-red-600 hover:text-red-900 ${isDeleting ? "opacity-50 cursor-not-allowed" : ""}`}
         >
-          Revoke
+          {isDeleting ? "Deleting..." : "Delete"}
         </button>
       </div>
     </div>