Service tokens update on frontend

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -12,6 +12,7 @@ import { envMapping } from "../../../public/data/frequentConstants";
 import {
   decryptAssymmetric,
   encryptAssymmetric,
+  encryptSymmetric,
 } from "../../utilities/cryptography/crypto";
 import Button from "../buttons/Button";
 import InputField from "../InputField";
@@ -25,6 +26,8 @@ const expiryMapping = {
   "12 months": 31104000,
 };
 
+const crypto = require('crypto');
+
 const AddServiceTokenDialog = ({
   isOpen,
   closeModal,
@@ -48,16 +51,14 @@ const AddServiceTokenDialog = ({
       privateKey: localStorage.getItem("PRIVATE_KEY"),
     });
 
-    // generate new public/private key pair
-    const pair = nacl.box.keyPair();
-    const publicKey = nacl.util.encodeBase64(pair.publicKey);
-    const privateKey = nacl.util.encodeBase64(pair.secretKey);
-
-    // encrypt workspace key under newly-generated public key
-    const { ciphertext: encryptedKey, nonce } = encryptAssymmetric({
+    const randomBytes = crypto.randomBytes(16).toString('hex');
+    const {
+      ciphertext,
+      iv,
+      tag,
+    } = encryptSymmetric({
       plaintext: key,
-      publicKey,
-      privateKey,
+      key: randomBytes,
     });
 
     let newServiceToken = await addServiceToken({
@@ -65,13 +66,12 @@ const AddServiceTokenDialog = ({
       workspaceId,
       environment: envMapping[serviceTokenEnv],
       expiresIn: expiryMapping[serviceTokenExpiresIn],
-      publicKey,
-      encryptedKey,
-      nonce,
+      encryptedKey: ciphertext,
+      iv, 
+      tag
     });
 
-    const serviceToken = newServiceToken + "," + privateKey;
-    setServiceToken(serviceToken);
+    setServiceToken(newServiceToken);
   };
 
   function copyToClipboard() {
@@ -161,7 +161,7 @@ const AddServiceTokenDialog = ({
                           "Production",
                           "Testing",
                         ]}
-                        width="full"
+                        isFull={true}
                         text={`${t("common:environment")}: `}
                       />
                     </div>
@@ -176,7 +176,7 @@ const AddServiceTokenDialog = ({
                           "6 months",
                           "12 months",
                         ]}
-                        width="full"
+                        isFull={true}
                         text={`${t("common:expired-in")}: `}
                       />
                     </div>
@@ -211,7 +211,7 @@ const AddServiceTokenDialog = ({
                       </div>
                     </div>
                     <div className="w-full">
-                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-44">
+                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-14">
                         <input
                           type="text"
                           value={serviceToken}
@@ -236,7 +236,7 @@ const AddServiceTokenDialog = ({
                             )}
                           </button>
                           <span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
-                            {t("common.click-to-copy")}
+                            {t("common:click-to-copy")}
                           </span>
                         </div>
                       </div>

frontend/components/basic/table/ServiceTokenTable.tsx

@@ -1,19 +1,37 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
+import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider';
+
+import deleteServiceToken from "../../../pages/api/serviceToken/deleteServiceToken";
 import { reverseEnvMapping } from '../../../public/data/frequentConstants';
 import guidGenerator from '../../utilities/randomId';
 import Button from '../buttons/Button';
 
+interface TokenProps {
+  _id: string;
+  name: string;
+  environment: string;
+  expiresAt: string;
+}
+
+interface ServiceTokensProps {
+  data: TokenProps[];
+  workspaceName: string;
+  setServiceTokens: (value: TokenProps[]) => void;
+}
+
 /**
- * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
+ * This is the component that we utilize for the service token table
  * #TODO: add the possibility of choosing and doing operations on multiple users.
- * @param {*} props
+ * @param {object} obj
+ * @param {any[]} obj.data - current state of the service token table
+ * @param {string} obj.workspaceName - name of the current project
+ * @param {function} obj.setServiceTokens - updating the state of the service token table
  * @returns
  */
-const ServiceTokenTable = ({ data, workspaceName }) => {
-  const router = useRouter();
+const ServiceTokenTable = ({ data, workspaceName, setServiceTokens }: ServiceTokensProps) => {
+  console.log(data)
+  const { createNotification } = useNotificationContext();
 
   return (
     <div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
@@ -30,7 +48,7 @@ const ServiceTokenTable = ({ data, workspaceName }) => {
         </thead>
         <tbody>
           {data?.length > 0 ? (
-            data.map((row, index) => {
+            data.map((row) => {
               return (
                 <tr
                   key={guidGenerator()}
@@ -51,7 +69,14 @@ const ServiceTokenTable = ({ data, workspaceName }) => {
                   <td className="py-2 border-mineshaft-700 border-t">
                     <div className="opacity-50 hover:opacity-100 duration-200 flex items-center">
                       <Button
-                        onButtonPressed={() => {}}
+                        onButtonPressed={() => {
+                          deleteServiceToken({ serviceTokenId: row._id} );
+                          setServiceTokens(data.filter(token => token._id != row._id));
+                          createNotification({
+                            text: `'${row.name}' token has been revoked.`,
+                            type: 'error'
+                          });
+                        }}
                         color="red"
                         size="icon-sm"
                         icon={faX}
@@ -63,7 +88,7 @@ const ServiceTokenTable = ({ data, workspaceName }) => {
             })
           ) : (
             <tr>
-              <td colSpan="4" className="text-center pt-7 pb-4 text-bunker-400">
+              <td className="text-center pt-7 pb-4 text-bunker-400 col-span-4">
                 No service tokens yet
               </td>
             </tr>