Add code interactive to CSE

Cosmian · Nov 15, 2024 · 31ee8e5 · 31ee8e5
1 parent 922f56a
commit 31ee8e5
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 37 deletions.
diff --git a/src/pages/cse/ConfigureCse.tsx b/src/pages/cse/ConfigureCse.tsx
@@ -1,18 +1,30 @@
-import { useEffect } from "react"
-import { Link } from "react-router-dom"
+import { message } from "antd"
+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 { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+import { Language } from "../../utils/types"
+
+const activeLanguageList: Language[] = [];
 
 const ConfigureCse = (): JSX.Element => {
   const { steps, setSteps } = useBoundStore((state) => state);
+  const [key, setKey] = useState<string | undefined>();
+
+  const navigate = useNavigate();
   const currentItem = findCurrentNavigationItem(steps);
 
-  useEffect(() => {
-    return () => {
+  const handleSetup = async (): Promise<void> => {
+    try {
+      setKey("google_cse");
       updateNavigationSteps(steps, setSteps);
-    };
-  }, []);
+      navigate("#");
+    } catch (error) {
+      message.error(typeof error === "string" ? error : (error as Error).message);
+    }
+  };
 
   return (
     <Split>
@@ -35,39 +47,55 @@ const ConfigureCse = (): JSX.Element => {
           <li>Choose and configure an <b>Identity Provider</b></li>
           <li>Instantiate and configure a <b>Key Management Server</b> (Cosmian KMS)</li>
           <li>Generate <b><i>google_cse</i> key</b> from the KMS</li>
-          <div className="code-cmd">
-            <code>
-              {GOOGLE_CSE_KEY}
-            </code>
-            <br />
-            <code>
-              {GOOGLE_CSE_GRANT}
-            </code>
-          </div>
           <li>Handle <b>guest Identity Providers</b> for external users <i>(optional)</i></li>
           <li>Generate <b>Gmail S/MIME</b> elements: users key-pairs and identities  <i>(optional)</i></li>
-          <div className="code-cmd">
-            <code>
-              {GOOGLE_CSE_SMIME_KEYPAIR}
-            </code>
-            < br/>
-            <code>
-              {GOOGLE_CSE_SMIME_IDENTITY}
-            </code>
-          </div>
         </ul>
       </Split.Content>
+      <Split.Code>
+      <Code
+          activeLanguageList={activeLanguageList}
+          codeInputList={{
+            java: GOOGLE_CSE_KEY,
+            javascript: GOOGLE_CSE_KEY,
+            python: GOOGLE_CSE_KEY,
+          }}
+          codeOutputList={
+            key
+              ? {
+                  java: GOOGLE_CSE_KEY_OUTPUT,
+                  javascript: GOOGLE_CSE_KEY_OUTPUT,
+                  python: GOOGLE_CSE_KEY_OUTPUT,
+              }
+              : undefined
+          }
+          codeLanguage="bash"
+          runCode={handleSetup}
+        />
+      </Split.Code>
     </Split>
   );
 };
 
 export default ConfigureCse;
 
 
-const GOOGLE_CSE_KEY = "> ckms sym keys create -t google_cse google_cse";
+const GOOGLE_CSE_KEY = `# Generate google_cse symmetric key
+
+ckms sym keys create -t google_cse google_cse
+
+
+# Grant access to the generated key
+
+ckms access-rights grant USER_ID google_cse get encrypt decrypt
+`;
+
+const GOOGLE_CSE_KEY_OUTPUT = `The symmetric key was successfully generated.
+	  Unique identifier: google_cse
 
-const GOOGLE_CSE_GRANT = "> ckms access-rights grant USER_ID google_cse get encrypt decrypt";
+  Tags:
+    - google_cse`;
 
-const GOOGLE_CSE_SMIME_KEYPAIR = "> ckms google key-pairs create --cse-key-id CSE_KEY_ID --subject-name \"C=FR, ST=IdF, L=Paris, O=YOUR_ORGANIZATION, OU=DEPARTMENT, CN=user@your_organization.com, emailAddress=user@your_organization.com\" -i ISSUER_PRIVATE_KEY_ID user@your_organization.com";
+// const GOOGLE_CSE_SMIME = `ckms google key-pairs create --cse-key-id CSE_KEY_ID --subject-name \"C=FR, ST=IdF, L=Paris, O=YOUR_ORGANIZATION, OU=DEPARTMENT, CN=user@your_organization.com, emailAddress=user@your_organization.com\" -i ISSUER_PRIVATE_KEY_ID user@your_organization.com
 
-const GOOGLE_CSE_SMIME_IDENTITY = "> ckms google identities insert --user-id user@your_organization.com CREATED_KEYPAIR_ID";
+// ckms google identities insert --user-id user@your_organization.com CREATED_KEYPAIR_ID
+// `;
diff --git a/src/pages/cse/ConfigureDke.tsx b/src/pages/cse/ConfigureDke.tsx
@@ -1,12 +1,32 @@
-import { Link } from "react-router-dom"
+import { message } from "antd"
+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 { findCurrentNavigationItem } from "../../utils/navigationActions"
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+import { Language } from "../../utils/types"
+
+const activeLanguageList: Language[] = [];
 
 const ConfigureDke = (): JSX.Element => {
-  const { steps } = useBoundStore((state) => state);
+  const { steps, setSteps } = useBoundStore((state) => state);
+  const [key, setKey] = useState<string | undefined>();
+
+  const navigate = useNavigate();
   const currentItem = findCurrentNavigationItem(steps);
 
+  const handleSetup = async (): Promise<void> => {
+    try {
+      setKey("dke_key");
+      updateNavigationSteps(steps, setSteps);
+      navigate("#");
+    } catch (error) {
+      message.error(typeof error === "string" ? error : (error as Error).message);
+    }
+  };
+
+
   return (
     <Split>
       <Split.Content>
@@ -29,17 +49,42 @@ const ConfigureDke = (): JSX.Element => {
           <li>Configure Microsoft DKE in Purview and create a sensitivity label for encryption</li>
           <li>Instantiate and configure Cosmian <b>Key Management Server</b> (Cosmian KMS)</li>
           <li>Generate <b>RSA key</b> with tag <i>dke_key</i></li>
-          <div className="code-cmd">
-            <code>
-              {DKE_KEY}
-            </code>
-          </div>
         </ul>
       </Split.Content>
+      <Split.Code>
+      <Code
+          activeLanguageList={activeLanguageList}
+          codeInputList={{
+            java: DKE_KEY,
+            javascript: DKE_KEY,
+            python: DKE_KEY,
+          }}
+          codeOutputList={
+            key
+              ? {
+                  java: DKE_KEY_OUTPUT,
+                  javascript: DKE_KEY_OUTPUT,
+                  python: DKE_KEY_OUTPUT,
+              }
+              : undefined
+          }
+          codeLanguage="bash"
+          runCode={handleSetup}
+        />
+      </Split.Code>
     </Split>
   );
 };
 
 export default ConfigureDke;
 
-const DKE_KEY = "> ckms rsa keys create --tag dke_key --size_in_bits 2048";
+const DKE_KEY = `# Generate DKE key
+
+ckms rsa keys create --tag dke_key --size_in_bits 2048`;
+
+const DKE_KEY_OUTPUT = `The RSA key pair has been created.
+	  Public key unique identifier: 978cb116-c498-436a-9b9c-e0ed1ddf4cfa
+	  Private key unique identifier: b18f274c-f9a7-4c3d-902d-733b1aa58a15
+
+  Tags:
+    - dke_key`;