From 7549290d151734a268cbebdd02c68575375610ab Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Tue, 4 Jul 2023 23:19:29 +0200
Subject: [PATCH] api key usage

---
 public/locales/de/translation.json            |  6 +-
 src/Components/LogCard/index.js               |  2 +-
 .../Overview/GroupTasksViewModal.js           | 16 +++-
 src/Pages/UserProfile/index.js                | 76 ++++++++++---------
 src/utils.js                                  | 32 ++++++++
 5 files changed, 90 insertions(+), 42 deletions(-)

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index cb93581..2c7e514 100644
--- a/public/locales/de/translation.json
+++ b/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.button.createApiKey": "Neuen API Schlüssel erstellen",
-  "userProfile.button.createApiKey.popconfirm.title": "Name für den neuen API Schlüssel",
+  "userProfile.header.yourApiKeys": "Ihre API-Schlüssel",
+  "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.okText": "Erstellen",
   "userProfile.button.copyToClipboard.notification": "API Token in die Zwischenablage kopiert",
   "scanners.column.name": "Name",
diff --git a/src/Components/LogCard/index.js b/src/Components/LogCard/index.js
index 7fcf966..2a321d3 100644
--- a/src/Components/LogCard/index.js
+++ b/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 ===
diff --git a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js
index c908165..790425b 100644
--- a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js
+++ b/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
-  if (!currentGroupTask) {
+  // invalid group task id in url specified or no permissions
+  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>
     );
   }
diff --git a/src/Pages/UserProfile/index.js b/src/Pages/UserProfile/index.js
index 2b4a036..dcced65 100644
--- a/src/Pages/UserProfile/index.js
+++ b/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
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <h1 style={{ fontWeight: "bold" }}>
-          {t("userProfile.header.yourApiKeys")} (
-          {webSocketContext.User.ApiKeys.length})
-        </h1>
+      {hasPermission(
+        webSocketContext.User.Permissions,
+        Constants.PERMISSIONS.USER_PROFILE.API_KEYS
+      ) && (
+        <>
+          {" "}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <h1 style={{ fontWeight: "bold" }}>
+              {t("userProfile.header.yourApiKeys")} (
+              {webSocketContext.User.ApiKeys.length})
+            </h1>
 
-        <Popconfirm
-          placement="topRight"
-          title={t("userProfile.button.createApiKey.popconfirm.title")}
-          description={
-            <Input
-              placeholder="Name"
-              value={newApiKeyName}
-              onChange={(e) => setNewApikeyName(e.target.value)}
-            />
-          }
-          okText={t("userProfile.button.createApiKey.popconfirm.okText")}
-          cancelText={t("buttonCancel")}
-          onConfirm={() => onCreateNewApiKeyConfirm()}
-        >
-          <Button icon={<KeyOutlined />}>
-            {t("userProfile.button.createApiKey")}
-          </Button>
-        </Popconfirm>
-      </div>
-
-      <Table
-        columns={getApiKeyTableColumns()}
-        dataSource={getApiKeyTableItems()}
-      />
+            <Popconfirm
+              placement="topRight"
+              title={t("userProfile.button.createApiKey.popconfirm.title")}
+              description={
+                <Input
+                  placeholder="Name"
+                  value={newApiKeyName}
+                  onChange={(e) => setNewApikeyName(e.target.value)}
+                />
+              }
+              okText={t("userProfile.button.createApiKey.popconfirm.okText")}
+              cancelText={t("buttonCancel")}
+              onConfirm={() => onCreateNewApiKeyConfirm()}
+            >
+              <Button icon={<KeyOutlined />}>
+                {t("userProfile.button.createApiKey")}
+              </Button>
+            </Popconfirm>
+          </div>
+          <Table
+            columns={getApiKeyTableColumns()}
+            dataSource={getApiKeyTableItems()}
+          />
+        </>
+      )}
     </>
   );
 }
diff --git a/src/utils.js b/src/utils.js
index e30f54e..9e90b4d 100644
--- a/src/utils.js
+++ b/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);