Approve information Sharing CSS

src/frontend/src/flows/dappsExplorer/dapps.ts

@@ -43,6 +43,10 @@ export class KnownDapp {
     return this.descr.oneLiner;
   }
 
+  public set oneLiner(oneLiner: string | undefined) {
+    this.descr.oneLiner = oneLiner;
+  }
+
   public get website(): string | undefined {
     return this.descr.website;
   }

src/frontend/src/flows/dappsExplorer/index.ts

@@ -36,7 +36,9 @@ const dappsExplorerTemplate = ({
     >
       ${closeIcon}
     </button>
-    <div class="c-action-list">${dapps.map((dapp) => dappTemplate(dapp))}</div>
+    <div class="c-action-list">
+      ${dapps.map((dapp) => dappTemplateLink(dapp))}
+    </div>
     <p class="t-paragraph t-centered">
       ${copy.add_your_dapp}
       <a
@@ -60,8 +62,29 @@ const dappsExplorerTemplate = ({
 
 export const dappsExplorerPage = renderPage(dappsExplorerTemplate);
 
+export const dappTemplate = (
+  { logoSrc, name, oneLiner }: KnownDapp,
+  oneLinerAboveTitle = false
+): TemplateResult => {
+  return html`
+    <div class="c-action-list__icon" aria-hidden="true">
+      <img src=${logoSrc} alt=${name} loading="lazy" />
+    </div>
+    <div
+      class="c-action-list__label c-action-list__label--stacked${oneLinerAboveTitle
+        ? " c-action-list__label--inverted"
+        : ""}"
+    >
+      <h3 class="t-title t-title--list">${name}</h3>
+      ${nonNullish(oneLiner)
+        ? html`<p class="t-weak">${oneLiner}</p>`
+        : undefined}
+    </div>
+  `;
+};
+
 /* Template for a single dapp */
-const dappTemplate = ({
+const dappTemplateLink = ({
   website,
   logoSrc,
   name,
@@ -74,15 +97,7 @@ const dappTemplate = ({
       class="c-action-list__item"
       rel="noopener noreferrer"
     >
-      <div class="c-action-list__icon" aria-hidden="true">
-        <img src=${logoSrc} alt=${name} loading="lazy" />
-      </div>
-      <div class="c-action-list__label c-action-list__label--stacked">
-        <h3 class="t-title t-title--list">${name}</h3>
-        ${nonNullish(oneLiner)
-          ? html`<p class="t-weak">${oneLiner}</p>`
-          : undefined}
-      </div>
+      ${dappTemplate({ logoSrc, name, oneLiner } as KnownDapp)}
       <span class="c-action-list__action"
         ><i class="c-icon c-icon--circle">${externalLinkIcon}</i></span
       >

src/frontend/src/flows/verifiableCredentials/allowCredentials.json

@@ -1,9 +1,12 @@
 {
   "en": {
-    "title": "Credential Access Request",
+    "title": "Approve information sharing",
     "allow_start": "Allow verifying credential",
+    "label_ii_input": "Your Internet Identity",
     "allow_sep_with": "with",
     "cancel": "Cancel",
-    "allow": "Allow"
+    "allow": "Allow",
+    "issued_by": "Issued by",
+    "relying_party": "Relying party"
   }
 }

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

@@ -8,12 +8,33 @@ 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 { getDapps, KnownDapp } from "../dappsExplorer/dapps";
+import { dappTemplate } from "../dappsExplorer/index";
+
 import DOMPurify from "dompurify";
 
 import copyJson from "./allowCredentials.json";
 
 /* A screen prompting the user to allow (or cancel) issuing verified
  * credentials */
+const getOrigin = (
+  origin: string,
+  dapplist: KnownDapp[],
+  oneLiner: string
+): KnownDapp => {
+  let foundDapp = dapplist.find((dapp) => dapp.hasOrigin(origin));
+
+  if (!foundDapp) {
+    foundDapp = new KnownDapp({
+      name: "Unknown Dapp",
+      website: origin,
+      logo: "unwnowndapp.png",
+      oneLiner: oneLiner,
+    });
+  }
+  foundDapp.oneLiner = oneLiner;
+  return foundDapp;
+};
 
 const allowCredentialsTemplate = ({
   i18n,
@@ -41,6 +62,7 @@ const allowCredentialsTemplate = ({
     onSubmit: (userNumber) => onAllow(userNumber),
   });
 
+  const knownDapps = getDapps();
   const consentMessage = new Chan<TemplateElement>(html`${consentMessage_}`);
 
   // Kickstart markdown parsing & sanitizing; once done, replace the consent message
@@ -50,25 +72,36 @@ const allowCredentialsTemplate = ({
     consentMessage.send(unsafeHTML(sanitized));
   })();
 
+  const originDapp = getOrigin(
+    providerOrigin,
+    knownDapps,
+    copy.issued_by as string
+  );
+
+  const relyingDapp = getOrigin(
+    relyingOrigin,
+    knownDapps,
+    copy.relying_party as string
+  );
+
   const slot = html`
     <hgroup
       data-page="vc-allow"
       ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}
     >
       <h1 class="t-title t-title--main">${copy.title}</h1>
     </hgroup>
-
+    <article class="l-stack c-card c-card--consent">
+      <div class="t-formatted t-formatted--monospace">
+        ${asyncReplace(consentMessage)}
+      </div>
+    </article>
     ${anchorInput.template}
-
-    <p class="t-paragraph">
-      ${copy.allow_start}
-      <strong class="t-strong">${providerOrigin}</strong> ${copy.allow_sep_with}
-      <strong class="t-strong">${relyingOrigin}</strong>?
-    </p>
-
-    <div class="l-stack c-input c-input--readonly">
-      <pre class="c-consent-message">${asyncReplace(consentMessage)}</pre>
-    </div>
+    <h2 class="c-card__label l-stack">${copy.allow_start}</h2>
+    <ul class="c-action-list">
+      <li class="c-action-list__item">${dappTemplate(originDapp, true)}</li>
+      <li class="c-action-list__item">${dappTemplate(relyingDapp, true)}</li>
+    </ul>
 
     <div class="c-button-group">
       <button

src/frontend/src/styles/main.css

@@ -186,6 +186,9 @@
   --rc-card-backdrop: transparent;
   --rc-background-card--background: transparent;
 
+  --rc-card--inverted: var(--vc-snow);
+  --rc-card--inverted-background: var(--vc-raven);
+
   --rc-line: var(--vc-light-grey);
   --rc-line-interaction: var(--vc-brand-purple);
   --rc-line-inverted: var(--rc-dark);
@@ -308,6 +311,7 @@
 
   /* generic Lines uses on cards and other separation elements */
   --rs-line: var(--vs-line);
+  --rs-line--thick: calc(var(--rs-line) * 4);
 
   --rs-footer-height: 4rem;
 }
@@ -624,6 +628,116 @@ a:hover,
   width: 100%;
 }
 
+/* 
+  generic typography
+  .t-formatted us used as a wrapper around formatted text
+  typically used for text that comes from an outside source like a markdown parser 
+*/
+.t-formatted {
+  font-size: 1.3rem;
+  line-height: 1.4;
+}
+
+.t-formatted--monospace {
+  font-family: monospace;
+  font-size: 1.1rem;
+}
+
+.t-formatted hr {
+  border: none;
+  border-top: var(--rs-line) solid var(--rc-line);
+  margin: 1em 0;
+}
+
+.t-formatted a {
+  color: lightblue;
+  text-decoration: underline;
+}
+.t-formatted p,
+.t-formatted h1,
+.t-formatted h2,
+.t-formatted h3,
+.t-formatted h4,
+.t-formatted h5,
+.t-formatted h6 .t-formatted blockquote,
+.t-formatted pre,
+.t-formatted table {
+  margin-top: 1em;
+}
+
+.t-formatted ul,
+.t-formatted ol {
+  margin-left: 1.5em;
+  list-style: disc;
+  margin-top: 1.5em;
+}
+
+.t-formatted ol {
+  list-style: decimal;
+  margin-left: 1.7em;
+}
+
+.t-formatted li + li {
+  margin-top: 0.5em;
+}
+
+.t-formatted *:first-child {
+  margin-top: 0;
+}
+
+.t-formatted h1,
+.t-formatted h2,
+.t-formatted h3,
+.t-formatted h4,
+.t-formatted h5,
+.t-formatted h6,
+.t-formatted strong,
+.t-formatted b {
+  font-weight: bolder;
+}
+
+.t-formatted h1 {
+  font-size: 1.5rem;
+}
+.t-formatted h2 {
+  font-size: 1.4rem;
+}
+.t-formatted h3,
+.t-formatted h4,
+.t-formatted h5,
+.t-formatted h6 {
+  font-size: 1.2rem;
+}
+
+.t-formatted blockquote {
+  padding: 0.5em 1em;
+  font-style: italic;
+  margin-top: 1em;
+  border-left: 0.2em solid var(--rc-line);
+}
+
+.t-formatted em,
+.t-formatted i {
+  font-style: italic;
+}
+
+.t-formatted del {
+  text-decoration: line-through;
+}
+
+.t-formatted table {
+  border-collapse: collapse;
+  width: 100%;
+  margin-top: 1em;
+  border: 1px solid var(--rc-line);
+}
+
+.t-formatted table th,
+.t-formatted table td {
+  padding: 0.5em;
+  border: 1px solid var(--rc-line);
+}
+
 .l-wrap {
   position: relative;
   display: flex;
@@ -916,6 +1030,53 @@ a:hover,
   }
 }
 
+/* Concent Cards */
+
+.c-card--consent {
+  --bezel-x: var(--rs-card-bezel-narrow);
+  --bezel-y: var(--rs-card-bezel-narrow);
+
+  background-color: var(--rc-card--inverted-background);
+  color: var(--rc-card--inverted);
+
+  max-height: 60vh;
+
+  overflow-y: auto;
+
+  /* if the context is scrollable it will show with some fancy shadow in the direction of the scroll */
+  background:
+      /* Shadow Cover TOP */ linear-gradient(
+        var(--rc-card--inverted-background) 30%,
+        rgba(0, 0, 0, 0)
+      )
+      center top,
+    /* Shadow Cover BOTTOM */
+      linear-gradient(rgba(0, 0, 0, 0), var(--rc-card--inverted-background) 70%)
+      center bottom,
+    /* Shadow TOP */
+      radial-gradient(
+        farthest-side at 50% 0,
+        rgba(255, 255, 255, 0.6),
+        rgba(255, 255, 255, 0)
+      )
+      center top,
+    /* Shadow BOTTOM */
+      radial-gradient(
+        farthest-side at 50% 100%,
+        rgba(255, 255, 255, 0.6),
+        rgba(255, 255, 255, 0)
+      )
+      center bottom;
+
+  background-color: var(--rc-card--inverted-background);
+
+  background-repeat: no-repeat;
+  background-size: 100% 2em, 100% 2em, 100% 1em, 100% 1em;
+  background-attachment: local, local, scroll, scroll;
+
+  border: var(--rs-line--thick) solid var(--rc-interaction-text);
+}
+
 /* Card label/titles */
 .c-card__label {
   /* some labels have icons, so we center everything vertically */
@@ -2380,6 +2541,12 @@ a.c-action-list__item {
   justify-content: center;
 }
 
+.c-action-list__label--inverted {
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  justify-content: center;
+}
+
 .c-action-list__action {
   cursor: pointer;
   color: var(--rc-text);
@@ -2774,19 +2941,6 @@ input[type="checkbox"] {
   image-rendering: pixelated;
 }
 
-/* A consent message for verifiable credentials */
-.c-consent-message {
-  font-size: 0.7em;
-  font-family: monospace;
-}
-
-/* The styling for the markdown-rendered elements of the message
- * (very minimalistic styling) */
-.c-consent-message h1 {
-  font-size: 1.2em;
-  margin-bottom: 0.5em;
-}
-
 /*
   Marquee