Add markdown support for consent message

package.json

@@ -32,6 +32,7 @@
     "format-check": "prettier --check src/showcase src/frontend tsconfig.json .eslintrc.json vite.config.ts vite.plugins.ts vitest.config.ts demos"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/html-minifier-terser": "^7.0.0",
     "@types/http-proxy": "^1.17.14",
     "@types/selenium-standalone": "^7.0.1",
@@ -63,9 +64,11 @@
     "@dfinity/utils": "^0.0.20",
     "bip39": "^3.0.4",
     "buffer": "^6.0.3",
+    "dompurify": "^3.0.6",
     "idb-keyval": "^6.2.1",
     "jose": "^5.1.3",
     "lit-html": "^2.7.2",
+    "marked": "^11.0.0",
     "process": "^0.11.10",
     "qr-creator": "^1.0.0",
     "stream-browserify": "^3.0.0",

src/frontend/src/flows/verifiableCredentials/allowCredentials.ts

@@ -1,8 +1,14 @@
 import { mkAnchorInput } from "$src/components/anchorInput";
 import { mainWindow } from "$src/components/mainWindow";
 import { I18n } from "$src/i18n";
-import { mount, renderPage } from "$src/utils/lit-html";
-import { TemplateResult, html } from "lit-html";
+import { mount, renderPage, TemplateElement } from "$src/utils/lit-html";
+import { Chan } from "$src/utils/utils";
+import { html, TemplateResult } from "lit-html";
+import { asyncReplace } from "lit-html/directives/async-replace.js";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+
+import DOMPurify from "dompurify";
+import { parse as parseMarked } from "marked";
 
 import copyJson from "./allowCredentials.json";
 
@@ -13,7 +19,7 @@ const allowCredentialsTemplate = ({
   i18n,
   relyingOrigin,
   providerOrigin,
-  consentMessage,
+  consentMessage: consentMessage_,
   userNumber,
   onAllow,
   onCancel,
@@ -35,6 +41,15 @@ const allowCredentialsTemplate = ({
     onSubmit: (userNumber) => onAllow(userNumber),
   });
 
+  const consentMessage = new Chan<TemplateElement>(html`${consentMessage_}`);
+
+  // Kickstart markdown parsing & sanitizing; once done, replace the consent message
+  void (async () => {
+    const parsed = await parseMarked(consentMessage_);
+    const sanitized = await DOMPurify.sanitize(parsed);
+    consentMessage.send(unsafeHTML(sanitized));
+  })();
+
   const slot = html`
     <hgroup
       data-page="vc-allow"
@@ -52,7 +67,7 @@ const allowCredentialsTemplate = ({
     </p>
 
     <div class="l-stack c-input c-input--readonly">
-      <pre class="c-consent-message">${consentMessage}</pre>
+      <pre class="c-consent-message">${asyncReplace(consentMessage)}</pre>
     </div>
 
     <div class="c-button-group">

src/frontend/src/styles/main.css

@@ -2780,6 +2780,13 @@ input[type="checkbox"] {
   font-family: monospace;
 }
 
+.c-consent-message h1 {
+  font-size: 1.2em;
+  margin-bottom: 0.5em;
+}
+
+/* TODO: Aerne plz help */
+
 /*
   Marquee