diff --git a/pwa/src/hooks/useEnvironment.ts b/pwa/src/hooks/useEnvironment.ts index 96dd052..8dfdda7 100644 --- 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 index f612d63..b1ad756 100644 --- a/pwa/src/templates/resultTemplate/ResultTemplate.module.css +++ b/pwa/src/templates/resultTemplate/ResultTemplate.module.css @@ -17,8 +17,8 @@ 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 { @@ -26,7 +26,7 @@ --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 index 9ddb44f..64ac1b9 100644 --- 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 = ({ id }) => { const { t } = useTranslation(); const [token, setToken] = React.useState(""); const [data, setData] = React.useState(""); - const [result, setResult] = React.useState(false); + const [result, setResult] = React.useState(); + 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 index 7496305..9e1bdbb 100644 --- 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 index 4f18367..9992b37 100644 --- a/pwa/src/templates/tableResultTemplate/TableResultsTemplate.tsx +++ b/pwa/src/templates/tableResultTemplate/TableResultsTemplate.tsx @@ -24,7 +24,7 @@ export const TableResultsTemplate: React.FC = ({ data {Object.keys(data).map((keyName: any, i) => ( - <> + {keyName !== "credentialSubject" && ( = ({ data ))} )} - + ))}
diff --git a/pwa/static/.env.development b/pwa/static/.env.development index 545b06b..f5669b3 100644 --- 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 index b931e38..19664c7 100644 --- 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 index 0ce16bd..115b70b 100644 --- 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-----" }