Merge pull request #33 from Cosmian/feat/encrypt_findex_db

feat:update findex

public/actions/javascript/encryptDatabase.ts

@@ -0,0 +1,28 @@
+import { AesGcm } from "cloudproof_js";
+import { findexClearEmployeesDatabase, encryptedEmployeesDatabase } from "../../utils/findexConfig";
+
+export const encryptDatabase = async (
+  clearDatabase: findexClearEmployeesDatabase[],
+  key: Uint8Array,
+  nonce: Uint8Array,
+  authData: Uint8Array
+): Promise<encryptedEmployeesDatabase[]> => {
+  const { Aes256Gcm } = await AesGcm();
+
+  return Promise.all(
+    clearDatabase.map((e) =>
+      Object.keys(e)
+        .filter((k) => k !== "uuid")
+        .reduce(
+          (acc, k) => {
+            const index = k as keyof Omit<typeof e, "uuid">;
+            return {
+              ...acc,
+              [index]: Aes256Gcm.encrypt(e[index].toString(), key, nonce, authData),
+            };
+          },
+          { uuid: e.uuid } as encryptedEmployeesDatabase
+        )
+    )
+  );
+};

public/actions/javascript/sendDocumentContent.ts

@@ -1,4 +1,4 @@
-import { RUNNER_URL } from "./backendConfig"
+import { RUNNER_URL } from "./backendConfig";
 
 export const summarizeDocumentContent = async (textInput: string): Promise<{ summary: string } | Error> => {
   const formData = new FormData();

public/actions/javascript/sendEncryptedDocument.ts

@@ -1,5 +1,5 @@
-import aes from "js-crypto-aes"
-import { RUNNER_URL } from "./backendConfig"
+import aes from "js-crypto-aes";
+import { RUNNER_URL } from "./backendConfig";
 
 export const sendEncryptedDocument = async (
   textInput: Uint8Array,

public/actions/javascript/summarizeDocumentContent.ts

@@ -1,4 +1,4 @@
-import { RUNNER_URL } from "./backendConfig"
+import { RUNNER_URL } from "./backendConfig";
 
 export const summarizeDocumentContent = async (textInput: string, userToken: string): Promise<{ summary: string } | Error> => {
   const formData = new FormData();

src/actions/javascript/encryptDatabase.ts

@@ -0,0 +1,28 @@
+import { AesGcm } from "cloudproof_js";
+import { findexClearEmployeesDatabase, encryptedEmployeesDatabase } from "../../utils/findexConfig";
+
+export const encryptDatabase = async (
+  clearDatabase: findexClearEmployeesDatabase[],
+  key: Uint8Array,
+  nonce: Uint8Array,
+  authData: Uint8Array
+): Promise<encryptedEmployeesDatabase[]> => {
+  const { Aes256Gcm } = await AesGcm();
+
+  return Promise.all(
+    clearDatabase.map((e) =>
+      Object.keys(e)
+        .filter((k) => k !== "uuid")
+        .reduce(
+          (acc, k) => {
+            const index = k as keyof Omit<typeof e, "uuid">;
+            return {
+              ...acc,
+              [index]: Aes256Gcm.encrypt(e[index].toString(), key, nonce, authData),
+            };
+          },
+          { uuid: e.uuid } as encryptedEmployeesDatabase
+        )
+    )
+  );
+};

src/actions/javascript/summarizeDocumentContent.ts

@@ -1,4 +1,4 @@
-import { RUNNER_URL } from "./backendConfig"
+import { RUNNER_URL } from "./backendConfig";
 
 export const summarizeDocumentContent = async (textInput: string, userToken: string): Promise<{ summary: string } | Error> => {
   const formData = new FormData();

src/component/Table.tsx

@@ -4,11 +4,12 @@ import { ColumnsType } from "antd/es/table";
 import { IndexedEntry } from "cloudproof_js";
 import { Employee } from "../utils/covercryptConfig";
 import { EncryptedResult } from "../utils/types";
+import { findexClearEmployeesDatabase } from "../utils/findexConfig";
 
 const { Column, ColumnGroup } = Table;
 
 type EmployeeTablePros = {
-  data: Employee[];
+  data: (Employee | findexClearEmployeesDatabase)[];
   covercrypt?: boolean;
   className?: string;
   style?: React.CSSProperties;
@@ -69,13 +70,22 @@ export const EmployeeTable: React.FC<EmployeeTablePros> = ({ data, covercrypt, .
   );
 
   return (
-    <Table dataSource={data} pagination={false} {...rest} rowKey={"uuid"} scroll={{ x: 550 }}>
+    <Table
+      dataSource={data}
+      pagination={false}
+      {...rest}
+      rowKey={"uuid"}
+      scroll={{ x: 550 }}
+      style={{
+        wordBreak: "break-word",
+      }}
+    >
       {covercrypt ? (
         <>
           <ColumnGroup
             key={"marketing"}
             title={
-              <Tag icon={<LockFilled />} color="cyan" style={{ width: "100%", textAlign: "center" }}>
+              <Tag icon={<LockFilled />} color="cyan" style={{ width: "100%", textAlign: "center", wordBreak: "break-word" }}>
                 Marketing
               </Tag>
             }

src/hooks/useFetchCodeContent.tsx

@@ -2,11 +2,17 @@ import { useEffect, useState } from "react";
 import { getLanguageExtension } from "../utils/languageConfig";
 import { CodeContent, Language } from "../utils/types";
 
+/**
+ * Custom hook to fetch code content for a given filename and active language list.
+ *
+ * @param {string} filename - The name of the file to fetch code content for. Must be placed like following : actions/${language}/${filename}${extension}
+ * @param {Language[]} activeLanguageList - The list of active languages to fetch code content for.
+ */
 export const useFetchCodeContent = (
   filename: string,
   activeLanguageList: Language[]
 ): { loadingCode: boolean; codeContent: CodeContent } => {
-  const [loadingCode, setLoadingcode] = useState(true);
+  const [loadingCode, setLoadingCode] = useState(true);
   const [codeContent, setCodeContent] = useState<CodeContent>({
     java: undefined,
     javascript: undefined,
@@ -27,7 +33,7 @@ export const useFetchCodeContent = (
       tempContent[language] = text;
     }
     setCodeContent(tempContent);
-    setLoadingcode(false);
+    setLoadingCode(false);
   };
   return { loadingCode, codeContent };
 };

src/pages/confidentialVm/AuditSnapshot.tsx

@@ -1,9 +1,9 @@
-import { useEffect } from "react"
-import { useNavigate } from "react-router-dom"
-import { CodeBackground, VmCode } from "../../component/Code"
-import Split from "../../component/Split"
-import { useBoundStore, useConfidentialVmStore } from "../../store/store"
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { CodeBackground, VmCode } from "../../component/Code";
+import Split from "../../component/Split";
+import { useBoundStore, useConfidentialVmStore } from "../../store/store";
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
 
 const AuditSnapshot = (): JSX.Element => {
   const { snapshot } = useConfidentialVmStore((state) => state);

src/pages/confidentialVm/DeployApplication.tsx

@@ -1,14 +1,14 @@
-import { CheckCircleOutlined } from "@ant-design/icons/lib/icons"
-import { Button } from "cosmian_ui"
-import { useNavigate } from "react-router-dom"
-import SyntaxHighlighter from "react-syntax-highlighter"
-import { atelierSulphurpoolDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
-import HelloWorldGithub from "../../assets//helloworld_app.png"
-import { CodeBackground, VmCode } from "../../component/Code"
-import { ImageWrapper } from "../../component/Layout"
-import Split from "../../component/Split"
-import { useBoundStore, useConfidentialVmStore } from "../../store/store"
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+import { CheckCircleOutlined } from "@ant-design/icons/lib/icons";
+import { Button } from "cosmian_ui";
+import { useNavigate } from "react-router-dom";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atelierSulphurpoolDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import HelloWorldGithub from "../../assets//helloworld_app.png";
+import { CodeBackground, VmCode } from "../../component/Code";
+import { ImageWrapper } from "../../component/Layout";
+import Split from "../../component/Split";
+import { useBoundStore, useConfidentialVmStore } from "../../store/store";
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
 
 const DeployApplication = (): JSX.Element => {
   const { helloWorld, setHelloWorld } = useConfidentialVmStore((state) => state);

src/pages/confidentialVm/DetectMalware.tsx

@@ -1,12 +1,12 @@
-import { CloseCircleOutlined } from "@ant-design/icons/lib/icons"
-import { Button } from "cosmian_ui"
-import { useNavigate } from "react-router-dom"
-import SyntaxHighlighter from "react-syntax-highlighter"
-import { atelierSulphurpoolDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
-import { CodeBackground, VmCode } from "../../component/Code"
-import Split from "../../component/Split"
-import { useBoundStore, useConfidentialVmStore } from "../../store/store"
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+import { CloseCircleOutlined } from "@ant-design/icons/lib/icons";
+import { Button } from "cosmian_ui";
+import { useNavigate } from "react-router-dom";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atelierSulphurpoolDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { CodeBackground, VmCode } from "../../component/Code";
+import Split from "../../component/Split";
+import { useBoundStore, useConfidentialVmStore } from "../../store/store";
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
 
 const DetectMalware = (): JSX.Element => {
   const { malware, setMalware } = useConfidentialVmStore((state) => state);

src/pages/confidentialVm/SnapshotVm.tsx

@@ -1,10 +1,10 @@
-import { CheckCircleOutlined } from "@ant-design/icons/lib/icons"
-import { Button } from "cosmian_ui"
-import { useNavigate } from "react-router-dom"
-import { CodeBackground, VmCode } from "../../component/Code"
-import Split from "../../component/Split"
-import { useBoundStore, useConfidentialVmStore } from "../../store/store"
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+import { CheckCircleOutlined } from "@ant-design/icons/lib/icons";
+import { Button } from "cosmian_ui";
+import { useNavigate } from "react-router-dom";
+import { CodeBackground, VmCode } from "../../component/Code";
+import Split from "../../component/Split";
+import { useBoundStore, useConfidentialVmStore } from "../../store/store";
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
 
 const SnapshotVm = (): JSX.Element => {
   const { snapshot, setSnapshot } = useConfidentialVmStore((state) => state);

src/pages/confidentialVm/VerifyIntegrity.tsx

@@ -1,10 +1,10 @@
-import { CheckCircleOutlined } from "@ant-design/icons/lib/icons"
-import { Button } from "cosmian_ui"
-import { useNavigate } from "react-router-dom"
-import { CodeBackground, VmCode } from "../../component/Code"
-import Split from "../../component/Split"
-import { useBoundStore, useConfidentialVmStore } from "../../store/store"
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+import { CheckCircleOutlined } from "@ant-design/icons/lib/icons";
+import { Button } from "cosmian_ui";
+import { useNavigate } from "react-router-dom";
+import { CodeBackground, VmCode } from "../../component/Code";
+import Split from "../../component/Split";
+import { useBoundStore, useConfidentialVmStore } from "../../store/store";
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
 
 const VerifyIntegrity = (): JSX.Element => {
   const { integrity, setIntegrity } = useConfidentialVmStore((state) => state);

src/pages/covercrypt/CreateEncryptionPolicy.tsx

@@ -17,14 +17,14 @@ const CreateEncryptionPolicy = (): JSX.Element => {
   // custom hooks
   const { loadingCode, codeContent } = useFetchCodeContent("createPolicy", activeLanguageList);
   // states
-  const covercryptState = useCovercryptStore((state) => state);
+  const { clearEmployees, policy, setPolicy } = useCovercryptStore((state) => state);
   const { steps, setSteps } = useBoundStore((state) => state);
   const navigate = useNavigate();
   const currentItem = findCurrentNavigationItem(steps);
 
   const handleCreatePolicy = async (): Promise<void> => {
     try {
-      covercryptState.setPolicy(await createPolicy(POLICY_AXIS));
+      setPolicy(await createPolicy(POLICY_AXIS));
       updateNavigationSteps(steps, setSteps);
       navigate("#");
     } catch (error) {
@@ -54,13 +54,13 @@ const CreateEncryptionPolicy = (): JSX.Element => {
         </p>
         <p>An access policy is defined by a set of partitions. It can be written as a boolean expression of axis attributes:</p>
         <pre>(Department::Marketing || Department::HR) && Country::France</pre>
-        <EmployeeTable data={covercryptState.clearEmployees} covercrypt />
+        <EmployeeTable data={clearEmployees} covercrypt />
         <br />
         <p>
           In the following demo, we will create a policy that combines two axes, a security level, and a department. A user will be able to
           decrypt data only if it possesses a key with a sufficient security level and the correct department.
         </p>
-        {covercryptState.policy && <pre>{POLICY_AXIS_TEXT}</pre>}
+        {policy && <pre>{POLICY_AXIS_TEXT}</pre>}
       </Split.Content>
 
       <Split.Code>
@@ -69,11 +69,11 @@ const CreateEncryptionPolicy = (): JSX.Element => {
           codeInputList={codeContent}
           runCode={handleCreatePolicy}
           codeOutputList={
-            covercryptState.policy
+            policy
               ? {
-                  java: JSON.stringify(covercryptState.policy, undefined, 2),
-                  javascript: JSON.stringify(covercryptState.policy, undefined, 2),
-                  python: JSON.stringify(covercryptState.policy, undefined, 2),
+                  java: JSON.stringify(policy, undefined, 2),
+                  javascript: JSON.stringify(policy, undefined, 2),
+                  python: JSON.stringify(policy, undefined, 2),
                 }
               : undefined
           }

src/pages/covercrypt/SetupCovercrypt.tsx

@@ -1,21 +1,21 @@
-import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import Code from "../../component/Code";
 import Split from "../../component/Split";
-import { useBoundStore } from "../../store/store";
+import { useBoundStore, useCovercryptStore } from "../../store/store";
 import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
 import { Language } from "../../utils/types";
 
 const activeLanguageList: Language[] = ["java", "javascript", "python"];
 
 const SetupCovercrypt = (): JSX.Element => {
-  const [serviceSetup, setServiceSetup] = useState(false);
+  const { covercryptService, setCovercryptService } = useCovercryptStore((state) => state);
+
   const { steps, setSteps } = useBoundStore((state) => state);
   const navigate = useNavigate();
   const currentItem = findCurrentNavigationItem(steps);
 
   const handleSetupService = (): void => {
-    setServiceSetup(true);
+    setCovercryptService(true);
     updateNavigationSteps(steps, setSteps);
     navigate("#");
   };
@@ -78,7 +78,7 @@ const SetupCovercrypt = (): JSX.Element => {
             python: PYTHON_CODE,
           }}
           codeOutputList={
-            serviceSetup
+            covercryptService
               ? {
                   java: "# successfully installed",
                   javascript: "# successfully installed",

src/pages/cse/AboutCse.tsx

@@ -1,8 +1,8 @@
-import { Link } from "react-router-dom"
-import CseSchema from "../../assets/cse_schema.drawio.svg"
-import { ImageWrapper, SingleContent } from "../../component/Layout"
-import { useBoundStore } from "../../store/store"
-import { findCurrentNavigationItem } from "../../utils/navigationActions"
+import { Link } from "react-router-dom";
+import CseSchema from "../../assets/cse_schema.drawio.svg";
+import { ImageWrapper, SingleContent } from "../../component/Layout";
+import { useBoundStore } from "../../store/store";
+import { findCurrentNavigationItem } from "../../utils/navigationActions";
 
 const AboutCse = (): JSX.Element => {
   const steps = useBoundStore((state) => state.steps);

src/pages/cse/ConfigureCse.tsx

@@ -1,12 +1,12 @@
-import { message } from "antd"
-import { Link, useNavigate } from "react-router-dom"
-import CseAdmin from "../../assets/admin_cse.png"
-import Code from "../../component/Code"
-import { ImageWrapper } from "../../component/Layout"
-import Split from "../../component/Split"
-import { useBoundStore, useCseStore } from "../../store/store"
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
-import { Language } from "../../utils/types"
+import { message } from "antd";
+import { Link, useNavigate } from "react-router-dom";
+import CseAdmin from "../../assets/admin_cse.png";
+import Code from "../../component/Code";
+import { ImageWrapper } from "../../component/Layout";
+import Split from "../../component/Split";
+import { useBoundStore, useCseStore } from "../../store/store";
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
+import { Language } from "../../utils/types";
 
 
 const activeLanguageList: Language[] = [];

src/pages/cse/ConfigureDke.tsx

@@ -1,13 +1,13 @@
-import { message } from "antd"
-import { Link, useNavigate } from "react-router-dom"
-import DkeAdminScope from "../../assets/label_scope.png"
-import DkeAdminLabel from "../../assets/sensitivity_label.png"
-import Code from "../../component/Code"
-import { ImageWrapper } from "../../component/Layout"
-import Split from "../../component/Split"
-import { useBoundStore, useCseStore } from "../../store/store"
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
-import { Language } from "../../utils/types"
+import { message } from "antd";
+import { Link, useNavigate } from "react-router-dom";
+import DkeAdminScope from "../../assets/label_scope.png";
+import DkeAdminLabel from "../../assets/sensitivity_label.png";
+import Code from "../../component/Code";
+import { ImageWrapper } from "../../component/Layout";
+import Split from "../../component/Split";
+import { useBoundStore, useCseStore } from "../../store/store";
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
+import { Language } from "../../utils/types";
 
 
 const activeLanguageList: Language[] = [];