api key usage

public/locales/de/translation.json

@@ -157,9 +157,9 @@
   "userProfile.form.repeatNewPassword": "Neues Passwort wiederholen",
   "userProfile.form.language": "Sprache",
   "userProfile.header.yourSessions": "Ihre Sitzungen",
-  "userProfile.header.yourApiKeys": "Ihre API Schlüssel",
+  "userProfile.header.yourApiKeys": "Ihre API-Schlüssel",
-  "userProfile.button.createApiKey": "Neuen API Schlüssel erstellen",
+  "userProfile.button.createApiKey": "Neuen API-Schlüssel erstellen",
-  "userProfile.button.createApiKey.popconfirm.title": "Name für den neuen API Schlüssel",
+  "userProfile.button.createApiKey.popconfirm.title": "Name für den neuen API-Schlüssel",
   "userProfile.button.createApiKey.popconfirm.okText": "Erstellen",
   "userProfile.button.copyToClipboard.notification": "API Token in die Zwischenablage kopiert",
   "scanners.column.name": "Name",

src/Components/LogCard/index.js

@@ -66,7 +66,7 @@ export default function LogCard({ type }) {
         categoryGroup.category ===
         webSocketContext.GroupTasks.find(
           (groupTask) => groupTask.Id === groupTaskStep.GroupTasksId
-        ).Category
+        )?.Category
     )?.groups.find(
       (groups) =>
         groups.id ===

src/Pages/GroupTasks/Overview/GroupTasksViewModal.js

@@ -26,6 +26,7 @@ import {
   MyAvatar,
   getUserId,
   GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
+  hasXYPermission,
 } from "../../../utils";
 import {
   CheckOutlined,
@@ -56,20 +57,27 @@ export default function GroupTasksViewModal({ isOpen }) {
     }
   });
 
-  // invalid group task id in url specified
+  // invalid group task id in url specified or no permissions
-  if (!currentGroupTask) {
+  if (
+    !currentGroupTask ||
+    !hasXYPermission(
+      webSocketContext.User.Permissions,
+      Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView,
+      currentGroupTask.Category
+    )
+  ) {
     return (
       <Modal
         open={isOpen}
         width="70%"
         maskClosable={true}
         onCancel={handleCancel}
-        footer={<Button onClick={handleCancel}>Close</Button>}
+        footer={<Button onClick={handleCancel}>{t("buttonClose")}</Button>}
       >
         <Result
           status="500"
           title={t("groupTasks.groupTasksViewModal.groupTaskNotFound")}
-        />{" "}
+        />
       </Modal>
     );
   }

src/Pages/UserProfile/index.js

@@ -23,6 +23,7 @@ import {
   getConnectionStatusItem,
   getUserSessionFromLocalStorage,
   handleUnauthorizedStatus,
+  hasPermission,
   isEmailValid,
 } from "../../utils";
 import { Link } from "react-router-dom";
@@ -448,41 +449,48 @@ export default function UserProfile() {
         dataSource={getSessionTableItems()}
       />
 
-      <div
+      {hasPermission(
-        style={{
+        webSocketContext.User.Permissions,
-          display: "flex",
+        Constants.PERMISSIONS.USER_PROFILE.API_KEYS
-          justifyContent: "space-between",
+      ) && (
-        }}
+        <>
-      >
+          {" "}
-        <h1 style={{ fontWeight: "bold" }}>
+          <div
-          {t("userProfile.header.yourApiKeys")} (
+            style={{
-          {webSocketContext.User.ApiKeys.length})
+              display: "flex",
-        </h1>
+              justifyContent: "space-between",
+            }}
+          >
+            <h1 style={{ fontWeight: "bold" }}>
+              {t("userProfile.header.yourApiKeys")} (
+              {webSocketContext.User.ApiKeys.length})
+            </h1>
 
-        <Popconfirm
+            <Popconfirm
-          placement="topRight"
+              placement="topRight"
-          title={t("userProfile.button.createApiKey.popconfirm.title")}
+              title={t("userProfile.button.createApiKey.popconfirm.title")}
-          description={
+              description={
-            <Input
+                <Input
-              placeholder="Name"
+                  placeholder="Name"
-              value={newApiKeyName}
+                  value={newApiKeyName}
-              onChange={(e) => setNewApikeyName(e.target.value)}
+                  onChange={(e) => setNewApikeyName(e.target.value)}
-            />
+                />
-          }
+              }
-          okText={t("userProfile.button.createApiKey.popconfirm.okText")}
+              okText={t("userProfile.button.createApiKey.popconfirm.okText")}
-          cancelText={t("buttonCancel")}
+              cancelText={t("buttonCancel")}
-          onConfirm={() => onCreateNewApiKeyConfirm()}
+              onConfirm={() => onCreateNewApiKeyConfirm()}
-        >
+            >
-          <Button icon={<KeyOutlined />}>
+              <Button icon={<KeyOutlined />}>
-            {t("userProfile.button.createApiKey")}
+                {t("userProfile.button.createApiKey")}
-          </Button>
+              </Button>
-        </Popconfirm>
+            </Popconfirm>
-      </div>
+          </div>
-
+          <Table
-      <Table
+            columns={getApiKeyTableColumns()}
-        columns={getApiKeyTableColumns()}
+            dataSource={getApiKeyTableItems()}
-        dataSource={getApiKeyTableItems()}
+          />
-      />
+        </>
+      )}
     </>
   );
 }

src/utils.js

@@ -73,6 +73,9 @@ export const Constants = {
       },
       LOGS: "admin_area.logs",
     },
+    USER_PROFILE: {
+      API_KEYS: "user_profile.api_keys",
+    },
   },
   SYSTEM_LOG_TYPE: {
     INFO: 0,
@@ -193,6 +196,8 @@ const ReceivedMessagesCommands = {
   AllUsersUserDeactivation: 28,
   GroupTasksCategoryGroupChanges: 29,
   NewUserApiKeyCreated: 30,
+  DeletedUserApiKey: 31,
+  NewApiKeyUsageCount: 32,
 };
 
 // commands sent to the backend server
@@ -965,6 +970,33 @@ export function WebSocketProvider({
             return updatedUser;
           });
           break;
+        case ReceivedMessagesCommands.DeletedUserApiKey:
+          setUser((user) => {
+            const updatedUser = { ...user };
+
+            updatedUser.ApiKeys = updatedUser.ApiKeys.filter(
+              (apiKey) => apiKey.Id !== body
+            );
+
+            return updatedUser;
+          });
+          break;
+        case ReceivedMessagesCommands.NewApiKeyUsageCount:
+          setUser((user) => {
+            const updatedUser = { ...user };
+
+            const foundIndex = updatedUser.ApiKeys.findIndex(
+              (apiKey) => apiKey.Id === body.Id
+            );
+
+            if (foundIndex !== -1) {
+              updatedUser.ApiKeys[foundIndex].UsageCount = body.UsageCount;
+              updatedUser.ApiKeys[foundIndex].LastUsed = body.LastUsed;
+            }
+
+            return updatedUser;
+          });
+          break;
 
         default:
           console.error("unknown command", cmd);