added public key store feature

ConductionNL · Jan 26, 2024 · ff04096 · ff04096
1 parent 17b56c4
commit ff04096
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 19 deletions.
diff --git a/pwa/src/hooks/useEnvironment.ts b/pwa/src/hooks/useEnvironment.ts
@@ -36,6 +36,7 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("FOOTER_CONTENT", process.env.GATSBY_FOOTER_CONTENT ?? "");
     window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", process.env.GATSBY_FOOTER_CONTENT_HEADER ?? "");
     window.sessionStorage.setItem("OIDN_NUMBER", process.env.GATSBY_OIDN_NUMBER ?? "");
+    window.sessionStorage.setItem("PUBLIC_KEY", process.env.GATSBY_PUBLIC_KEY ?? "");
 
     updateSessionStorage();
   };
@@ -58,6 +59,7 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("FOOTER_CONTENT", config.GATSBY_FOOTER_CONTENT ?? "");
     window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", config.GATSBY_FOOTER_CONTENT_HEADER ?? "");
     window.sessionStorage.setItem("OIDN_NUMBER", config.GATSBY_OIDN_NUMBER ?? "");
+    window.sessionStorage.setItem("PUBLIC_KEY", config.GATSBY_PUBLIC_KEY ?? "");
 
     updateSessionStorage();
   };

diff --git a/pwa/src/templates/resultTemplate/ResultTemplate.module.css b/pwa/src/templates/resultTemplate/ResultTemplate.module.css
@@ -17,16 +17,16 @@
   cursor: default;
 }
 
-.cardContainer:hover .cardHeader {
-  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
+.cardHeader:hover {
+  border-bottom-color: var(--conduction-card-header-border-bottom-color);
 }
 
 .success {
   --conduction-card-wrapper-background-color: var(
     --utrecht-alert-ok-background-color
   );
 }
-.succes:hover {
+.success:hover {
   --conduction-card-wrapper-hover-background-color: var(
     --utrecht-alert-ok-background-color
   );

diff --git a/pwa/src/templates/resultTemplate/ResultTemplate.tsx b/pwa/src/templates/resultTemplate/ResultTemplate.tsx
@@ -3,8 +3,8 @@ import * as styles from "./ResultTemplate.module.css";
 import * as jose from "jose";
 import clsx from "clsx";
 import { Page, PageContent } from "@utrecht/component-library-react/dist/css-module";
-import { Code, CodeBlock, Heading1, Heading3, Paragraph } from "@utrecht/component-library-react";
-import { CardHeader, CardHeaderTitle, CardWrapper, HorizontalOverflowWrapper } from "@conduction/components";
+import { Code, Heading1, Paragraph } from "@utrecht/component-library-react";
+import { CardHeader, CardHeaderTitle, CardWrapper } from "@conduction/components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
@@ -19,21 +19,42 @@ export const ResultTemplate: React.FC<ResultTemplateProps> = ({ id }) => {
   const { t } = useTranslation();
   const [token, setToken] = React.useState<any>("");
   const [data, setData] = React.useState<any>("");
-  const [result, setResult] = React.useState<boolean>(false);
+  const [result, setResult] = React.useState<boolean>();
+  const [keyFormat, setKeyFormat] = React.useState<"x509" | "spki">("x509");
+  const [algorithm, setAlgorithm] = React.useState<"RS512" | "ES256">("RS512");
 
-  const alg = "RS512";
-  const x509 = `-----BEGIN CERTIFICATE-----
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-  Officiis optio corporis dolorem quae molestias! At pariatur quaerat natus quod voluptatum dignissimos. 
-  Deserunt officia dolorum, aspernatur magnam consequatur ullam labore fugiat.
-  -----END CERTIFICATE-----`; //Set publickey/certificate
+  const key = window.sessionStorage.getItem("PUBLIC_KEY") ?? "";
+
+  const getKeyFormat = () => {
+    if (!key) return;
+    if (key.includes("-----BEGIN CERTIFICATE-----")) {
+      setKeyFormat("x509");
+      setAlgorithm("RS512");
+    }
+    if (key.includes("-----BEGIN PUBLIC KEY-----")) {
+      setKeyFormat("spki");
+      setAlgorithm("ES256");
+    }
+  };
 
   React.useEffect(() => {
-    async function getToken() {
-      const publicKey = await jose.importX509(x509, alg);
+    getKeyFormat();
+  }, []);
 
-      setToken(publicKey);
+  React.useEffect(() => {
+    async function getToken() {
+      switch (keyFormat) {
+        case "x509":
+          const x509Key = await jose.importX509(key, algorithm);
+          setToken(x509Key);
+          break;
+        case "spki":
+          const spkiKey = await jose.importSPKI(key, algorithm);
+          setToken(spkiKey);
+          break;
+      }
     }
+
     if (!token) {
       getToken().catch((err) => (setResult(false), setData(err.message)));
     }

diff --git a/pwa/src/templates/tableResultTemplate/TableResultsTemplate.module.css b/pwa/src/templates/tableResultTemplate/TableResultsTemplate.module.css
@@ -1,6 +1,7 @@
 .table {
   background-color: var(--utrecht-table-background-color);
   border-collapse: var(--utrecht-table-border-collapse) !important;
+  --utrecht-table-font-size: 12px;
 }
 
 .tableBody {
@@ -60,3 +61,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@media only screen and (min-width: 992px) {
+  /* Desktop */
+  .table {
+    --utrecht-table-font-size: var(--utrecht-document-font-size);
+  }
+}
diff --git a/pwa/src/templates/tableResultTemplate/TableResultsTemplate.tsx b/pwa/src/templates/tableResultTemplate/TableResultsTemplate.tsx
@@ -24,7 +24,7 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ data
       <Table className={styles.table}>
         <TableBody className={styles.tableBody}>
           {Object.keys(data).map((keyName: any, i) => (
-            <>
+            <React.Fragment key={i}>
               {keyName !== "credentialSubject" && (
                 <TableRow
                   className={styles.tableRow}
@@ -61,7 +61,7 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ data
                   ))}
                 </>
               )}
-            </>
+            </React.Fragment>
           ))}
         </TableBody>
       </Table>

diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -6,6 +6,7 @@ USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX="true"
 
 GATSBY_API_BASE_URL=https://api.gateway.commonground.nu/api
 GATSBY_NL_DESIGN_THEME_CLASSNAME=conduction-theme
+GATSBY_PUBLIC_KEY="-----BEGIN CERTIFICATE----- Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis optio corporis dolorem quae molestias! At pariatur quaerat natus quod voluptatum dignissimos. Deserunt officia dolorum, aspernatur magnam consequatur ullam labore fugiat. -----END CERTIFICATE-----"
 
 # Always uses Development Gateway
 GATSBY_DEV_ENVIRONMENT="true"

diff --git a/pwa/static/configFiles/conduction.json b/pwa/static/configFiles/conduction.json
@@ -7,5 +7,6 @@
   "GATSBY_FOOTER_LOGO_HREF": "https://www.conduction.nl/",
   "GATSBY_FOOTER_CONTENT": "https://raw.githubusercontent.com/ConductionNL/woo-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json",
   "GATSBY_FOOTER_CONTENT_HEADER": "",
-  "GATSBY_OIDN_NUMBER": ""
+  "GATSBY_OIDN_NUMBER": "",
+  "GATSBY_PUBLIC_KEY": "-----BEGIN CERTIFICATE----- Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis optio corporis dolorem quae molestias! At pariatur quaerat natus quod voluptatum dignissimos. Deserunt officia dolorum, aspernatur magnam consequatur ullam labore fugiat. -----END CERTIFICATE-----"
 }
diff --git a/pwa/static/configFiles/noordwijk.json b/pwa/static/configFiles/noordwijk.json
@@ -7,5 +7,6 @@
   "GATSBY_FOOTER_LOGO_HREF": "https://www.noordwijk.nl/",
   "GATSBY_FOOTER_CONTENT": "https://raw.githubusercontent.com/ConductionNL/woo-website-noordwijk/main/FooterContent.json",
   "GATSBY_FOOTER_CONTENT_HEADER": "heading-2",
-  "GATSBY_OIDN_NUMBER": "00000001825792150000"
+  "GATSBY_OIDN_NUMBER": "00000001825792150000",
+  "GATSBY_PUBLIC_KEY": "-----BEGIN PUBLIC KEY----- Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis optio corporis dolorem quae molestias! At pariatur quaerat natus quod voluptatum dignissimos. Deserunt officia dolorum, aspernatur magnam consequatur ullam labore fugiat. -----END PUBLIC KEY-----"
 }