CEC-3301, CEC-3317 Magna security dll and remote commands (#249)

* CEC-3301, CEC-3317 Magna security dll and remote commands

* Fix test

src/components/Magna/SecurityDLL/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Magna Security DLL page Security DLL Result page 1`] = `
+<div>
+  <form>
+    <p>
+      Click to download your certificates and security.dll.
+      <br />
+      <strong>
+        DLL will not work unless certificate.pem and key.pem are placed next to the DLL
+      </strong>
+    </p>
+    <ul>
+      <li>
+        <a
+          download="certificate.pem"
+        >
+          certificate.pem
+        </a>
+      </li>
+      <li>
+        <a
+          download="key.pem"
+        >
+          key.pem
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll"
+        >
+          security.dll 32-bit
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll"
+        >
+          security.dll 64-bit
+        </a>
+      </li>
+    </ul>
+  </form>
+</div>
+`;

src/components/Magna/SecurityDLL/index.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+
+import { KeygenProvider, useKeygenContext } from "../../Contexts/KeygenContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import Result from "./result";
+
+const MainForm = () => {
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const { generateSecurityCerts, securityCerts } = useKeygenContext();
+  const { setTitle, setSitePath, setMessage } = useStatusContext();
+  const getCert = async () => {
+    try {
+      await generateSecurityCerts(token);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  useEffect(() => {
+    setTitle("Security.dll Download");
+    setSitePath([
+      {
+        label: `Tools`,
+      },
+      {
+        label: "Security.dll Download",
+      },
+    ])
+    getCert();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  if (securityCerts) {
+    return <Result {...securityCerts} />
+  }
+
+  return <h3>Generating certificates...</h3>
+};
+
+const SecurityDLL = () => (
+  <KeygenProvider>
+    <MainForm/>
+  </KeygenProvider>
+);
+
+export default SecurityDLL;

src/components/Magna/SecurityDLL/index.test.jsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import addSnapshotSerializer from "../../../utils/snapshot";
+import Result from "./result";
+
+describe("Magna Security DLL page", () => {
+  beforeAll(() => {
+    global.URL.createObjectURL = jest.fn();
+    global.URL.revokeObjectURL = jest.fn();
+    addSnapshotSerializer(expect);
+  });
+
+  it("Security DLL Result page", () => {
+    const result = {public_key:"-----BEGIN CERTIFICATE-----\nPUBLIC_KEY\n-----END CERTIFICATE-----",private_key:"-----BEGIN RSA PRIVATE KEY-----\nPRIVATE_KEY\n-----END RSA PRIVATE KEY-----",serial_number:"77:49:34:9d:be:f6:59:03:b4:1c:63:84:07:5b:2a:8a:21:0a:c5:9e",type:"rsa"}
+    const { container } = render(<Result {...result} />);
+
+    expect(container).toMatchSnapshot();
+
+  })
+})

src/components/Magna/SecurityDLL/result.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import { SECURITY_DLL_64_URL, SECURITY_DLL_URL } from "../../../services/securityDLL";
+import DownloadFileLink from "../../Controls/DownloadFileLink";
+
+const CertMimeType = "application/x-pem-file";
+
+const Result = ({ public_key, private_key }) => (
+  <>
+    <form>
+      <p>Click to download your certificates and security.dll.<br /><strong>DLL will not work unless certificate.pem and key.pem are placed next to the DLL</strong></p>
+      <ul>
+        <li>
+          <DownloadFileLink
+            data={public_key}
+            filename="certificate.pem"
+            mimetype={CertMimeType} />
+        </li>
+        <li>
+          <DownloadFileLink
+            data={private_key}
+            filename="key.pem"
+            mimetype={CertMimeType} />
+        </li>
+        <li>
+          <a href={SECURITY_DLL_URL}>security.dll 32-bit</a>
+        </li>
+        <li>
+          <a href={SECURITY_DLL_64_URL}>security.dll 64-bit</a>
+        </li>
+      </ul>
+    </form>
+  </>
+);
+
+export default Result;