NOT WORKING - Implement API key management features: add API key creation and deletion, update API routes, and refactor related components. - NOT WORKING

admin/src/components/APIKeyTable.tsx

@@ -11,17 +11,11 @@ import {
 } from "@chakra-ui/react";
 import { Tooltip } from "@/components/ui/tooltip";
 import MyAlert from "./myChakra/MyAlert";
-import {
-  Trash2,
-  RefreshCcwDot,
-  CirclePlus,
-} from "lucide-react";
+import { Trash2, RefreshCcwDot, CirclePlus } from "lucide-react";
 import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
-import {
-  deleteItem,
-} from "@/utils/userActions";
-import AddItemForm from "./AddItemForm";
+import { deleteAPKey } from "@/utils/userActions";
+import AddAPIKey from "./AddAPIKey";
 import { formatDateTime } from "@/utils/userFuncs";
 
 type Items = {
@@ -57,7 +51,7 @@ const APIKeyTable: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const response = await fetch("http://localhost:8002/api/keys", {
+        const response = await fetch("http://localhost:8002/api/apiKeys", {
           method: "GET",
           headers: {
             Authorization: `Bearer ${Cookies.get("token")}`,
@@ -118,7 +112,7 @@ const APIKeyTable: React.FC = () => {
             }}
           >
             <CirclePlus size={18} style={{ marginRight: 6 }} />
-            Neuen Gegenstand hinzufügen
+            Neuen API Key hinzufügen
           </Button>
         </Tooltip>
       </HStack>
@@ -141,7 +135,7 @@ const APIKeyTable: React.FC = () => {
         </VStack>
       )}
       {addAPIForm && (
-        <AddItemForm
+        <AddAPIKey
           onClose={() => {
             setAddAPIForm(false);
             setReload(!reload);
@@ -175,14 +169,12 @@ const APIKeyTable: React.FC = () => {
             <Table.Row key={apiKey.id}>
               <Table.Cell>{apiKey.id}</Table.Cell>
               <Table.Cell>{apiKey.apiKey}</Table.Cell>
-              <Table.Cell>
-                <Table.Cell>{apiKey.user}</Table.Cell>
-              </Table.Cell>
+              <Table.Cell>{apiKey.user}</Table.Cell>
               <Table.Cell>{formatDateTime(apiKey.entry_created_at)}</Table.Cell>
               <Table.Cell>
                 <Button
                   onClick={() =>
-                    deleteItem(apiKey.id).then((response) => {
+                    deleteAPKey(apiKey.id).then((response) => {
                       if (response.success) {
                         setItems(items.filter((i) => i.id !== apiKey.id));
                         setError(

admin/src/components/AddAPIKey.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
+import { createAPIentry } from "@/utils/userActions";
+
+type AddAPIKeyProps = {
+  onClose: () => void;
+  alert: (
+    status: "success" | "error",
+    message: string,
+    description: string
+  ) => void;
+};
+
+const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <Card.Root maxW="sm">
+        <Card.Header>
+          <Card.Title>Neuen API Key erstellen</Card.Title>
+          <Card.Description>
+            Füllen Sie das folgende Formular aus, um einen API Key zu erstellen.
+          </Card.Description>
+        </Card.Header>
+        <Card.Body>
+          <Stack gap="4" w="full">
+            <Field.Root>
+              <Field.Label>API key</Field.Label>
+              <Input type="number" id="apiKey" />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label>Benutzer</Field.Label>
+              <Input id="user" type="text" />
+            </Field.Root>
+          </Stack>
+        </Card.Body>
+        <Card.Footer justifyContent="flex-end">
+          <Button variant="outline" onClick={onClose}>
+            Abbrechen
+          </Button>
+          <Button
+            variant="solid"
+            onClick={async () => {
+              const apiKey =
+                (
+                  document.getElementById("apiKey") as HTMLInputElement
+                )?.value.trim() || "";
+              const user =
+                (
+                  document.getElementById("user") as HTMLInputElement
+                )?.value.trim() || "";
+
+              if (!apiKey || !user) return;
+
+              const res = await createAPIentry(apiKey, user);
+              if (res.success) {
+                alert(
+                  "success",
+                  "API Key erstellt",
+                  "Der API Key wurde erfolgreich erstellt."
+                );
+                onClose();
+              }
+            }}
+          >
+            Erstellen
+          </Button>
+        </Card.Footer>
+      </Card.Root>
+    </div>
+  );
+};
+
+export default AddAPIKey;

admin/src/utils/userActions.ts

@@ -201,3 +201,44 @@ export const changeSafeState = async (itemId: number) => {
     return { success: false };
   }
 };
+
+export const createAPIentry = async (apiKey: string, user: string) => {
+  try {
+    const response = await fetch(`http://localhost:8002/api/createAPIentry`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token")}`,
+      },
+      body: JSON.stringify({ apiKey, user }),
+    });
+    if (!response.ok) {
+      throw new Error("Failed to create API entry");
+    }
+    return { success: true };
+  } catch (error) {
+    console.error("Error creating API entry:", error);
+    return { success: false };
+  }
+};
+
+export const deleteAPKey = async (apiKeyId: number) => {
+  try {
+    const response = await fetch(
+      `http://localhost:8002/api/deleteAPKey/${apiKeyId}`,
+      {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+      }
+    );
+    if (!response.ok) {
+      throw new Error("Failed to delete API key");
+    }
+    return { success: true };
+  } catch (error) {
+    console.error("Error deleting API key:", error);
+    return { success: false };
+  }
+};