styles

transmute-industries · Feb 17, 2024 · 5117c0f · 5117c0f
1 parent 1b47e1f
commit 5117c0f
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 66 deletions.
diff --git a/dist/main.js b/dist/main.js
diff --git a/index.js b/index.js
@@ -28,6 +28,10 @@ function addVcJoseStyles() {
     overflow-x: hidden;
     margin: 0 0;
   }
+
+  .vc-jose-cose-tabbed h1 {
+    font-size: 1em;
+  }
   
   .vc-jose-cose-tabbed [type="radio"] {
     display: none;
@@ -84,28 +88,30 @@ function addVcJoseStyles() {
     display: block;
   }
   
-  .sd-jwt-header {
+  .sd-jwt-header, .jwt-header {
     color: red
   }
-  .sd-jwt-payload {
+  .sd-jwt-payload, .jwt-payload {
     color: green
   }
   
-  .sd-jwt-payload-verified{
-    color: purple
-  }
-  
-  .sd-jwt-signature {
+  .sd-jwt-signature, .jwt-signature {
     color: blue
   }
   
   .sd-jwt-disclosure {
     color: purple
   }
   
-  .sd-jwt-compact {
+  .sd-jwt-compact, .jwt-compact {
     background-color: rgba(0,0,0,.03);
-  }`;
+  }
+
+  .cose-text, .jose-text {
+    font-family: monospace;
+  }
+  
+  `;
 
     document.head.appendChild(styles);
 }

diff --git a/src/exampleCose.js b/src/exampleCose.js
@@ -75,17 +75,18 @@ export const getCoseExample = async (privateKey, messageJson) => {
   const messageHex = buf2hex(message)
   const messageDiag = await cose.cbor.diagnose(message)
   return `
-// ${messageType.replace('+cose', '')}
+
+<h1>${messageType.replace('+cose', '')}</h1>
 <pre>
 ${JSON.stringify(messageJson, null, 2)}
 </pre>
-// application/cbor-diagnostic
-<pre>
+<h1>application/cbor-diagnostic</h1>
+<div class="cose-text">
 ${messageDiag.trim()}
-</pre>
-// ${messageType} (detached payload)
-<pre>
+</div>
+<h1>${messageType} (detached payload)</h1>
+<div class="cose-text">
 ${messageHex}
-</pre>
+</div>
   `.trim()
 }
diff --git a/src/exampleJwt.js b/src/exampleJwt.js
@@ -36,6 +36,13 @@ const getPresentation = async (privateKey, byteSigner, messageType, messageJson)
   return message;
 }
 
+
+const getJwtHtml = (token) =>{
+  const [header, payload, signature] = token.split('.');
+  return `
+<div class="jwt-compact"><span class="jwt-header">${header}</span>.<span class="sd-jwt-payload">${payload}</span>.<span class="sd-jwt-signature">${signature}</span></div>`
+}
+
 const getBinaryMessage = async (privateKey, messageType, messageJson) =>{
 
   const byteSigner = {
@@ -70,19 +77,20 @@ export const getJwtExample = async (privateKey, messageJson) => {
   const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+jwt' : 'application/vp+ld+json+jwt'
   const message = await getBinaryMessage(privateKey, messageType, messageJson)
   const messageEncoded = new TextDecoder().decode(message)
-  const decodedHeader = jose.decodeProtectedHeader(messageEncoded)
+  // const decodedHeader = jose.decodeProtectedHeader(messageEncoded)
+  // Not displaying protected header to save space
+  // <h1>Protected</h1>
+  // <pre>
+  // ${JSON.stringify(decodedHeader, null, 2)}
+  // </pre>
   return `
-// ${messageType.replace('+jwt', '')}
+<h1>${messageType.replace('+jwt', '')}</h1>
 <pre>
 ${JSON.stringify(messageJson, null, 2)}
 </pre>
-// Protected Header
-<pre>
-${JSON.stringify(decodedHeader, null, 2)}
-</pre>
-// ${messageType}
-<pre>
-${messageEncoded}
-</pre>
+<h1>${messageType}</h1>
+<div class="jose-text">
+${getJwtHtml(messageEncoded)}
+</div>
   `.trim()
 }
diff --git a/src/exampleSdJwt.js b/src/exampleSdJwt.js
@@ -1,12 +1,10 @@
 
 
 import yaml from 'yaml'
-// import moment from 'moment';
-import { issuer, holder, text, key } from "@transmute/verifiable-credentials"; 
+import { issuer, text, key } from "@transmute/verifiable-credentials"; 
 
 import * as jose from 'jose'
 
-
 export const generateIssuerClaims = (example)=> {
   const generatedClaimsYaml = yaml.stringify(example).replace(/id\: /g, '!sd id: ').replace(/type\:/g, '!sd type:')
   return generatedClaimsYaml
@@ -23,8 +21,6 @@ export const generateHolderDisclosure = (example) => {
   return edited3
 }
 
-
-
 const getSdHtml = (vc) =>{
   const [token, ...disclosure] = vc.split('~');
   const [header, payload, signature] = token.split('.');
@@ -35,28 +31,13 @@ const getSdHtml = (vc) =>{
 <div class="sd-jwt-compact"><span class="sd-jwt-header">${header}</span>.<span class="sd-jwt-payload">${payload}</span>.<span class="sd-jwt-signature">${signature}</span>${disclosures}</div>`
 }
 
-const getVerifiedHtml = (verified)=> {
-return `<div>
-  <pre class="sd-jwt-header">
-// disclosed protected header
-${JSON.stringify(verified.protectedHeader, null, 2).trim()}</pre>
-  <pre class="sd-jwt-payload-verified">
-// disclosed protected claimset
-${JSON.stringify(verified.claimset, null, 2).trim()}</pre>
-</div>
-`
-}
 
 const getDisclosabilityHtml = (claims)=> {
   return `<pre>
 ${claims.trim().replace(/\!sd/g, `<span class="sd-jwt-disclosure">!sd</span>`)}
   </pre>`
   }
 
-const getDisclosuresHtml = (disclosure)=> {
-  return `<pre>${disclosure.trim().replace(/False/g, `<span class="sd-jwt-disclosure">False</span>`)}</pre>`
-  }
-
 const getCredential = async (privateKey, byteSigner, messageType, messageJson) => {
   const message = await issuer({
     alg: privateKey.alg,
@@ -106,21 +87,26 @@ export const getSdJwtExample = async (privateKey, messageJson) => {
   const messageType = type.includes('VerifiableCredential') ? 'application/vc+ld+json+sd-jwt' : 'application/vp+ld+json+sd-jwt'
   const message = await getBinaryMessage(privateKey, messageType, messageJson)
   const messageEncoded = new TextDecoder().decode(message)
-  const decodedHeader = jose.decodeProtectedHeader(messageEncoded.split('~')[0])
+
   const issuerClaims = generateIssuerClaims(messageJson)
   const messageType2 = 'application/ld+yaml'
+
+// const decodedHeader = jose.decodeProtectedHeader(messageEncoded.split('~')[0])
+// Not displaying protected header to save space
+// <h1>Protected</h1>
+// <pre>
+// ${JSON.stringify(decodedHeader, null, 2)}
+// </pre>
   return `
-// ${messageType2}
-<pre>
-${issuerClaims}
-</pre>
-// Protected Header
-<pre>
-${JSON.stringify(decodedHeader, null, 2)}
-</pre>
-// ${messageType}
-<pre>
-${messageEncoded}
-</pre>
+
+<h1>${messageType2}</h1>
+<div>
+${getDisclosabilityHtml(issuerClaims)}
+</div>
+
+<h1>${messageType}</h1>
+<div class="jose-text">
+${getSdHtml(messageEncoded)}
+</div>
   `.trim()
 }
diff --git a/src/getHtml.js b/src/getHtml.js
@@ -6,9 +6,9 @@ export const getHtml = ({ index, coseExample, jwtExample, sdJwtExample })=>{
   const tab3Content  = sdJwtExample;
   return `
 <div class="vc-jose-cose-tabbed">
-    <input type="radio" id="vc-jose-cose-tab-${index}-cose" name="vc-jose-cose-tabs-${index}" >
+    <input type="radio" id="vc-jose-cose-tab-${index}-cose" name="vc-jose-cose-tabs-${index}" checked="checked">
     <input type="radio" id="vc-jose-cose-tab-${index}-jwt" name="vc-jose-cose-tabs-${index}" >
-    <input type="radio" id="vc-jose-cose-tab-${index}-sd-jwt" name="vc-jose-cose-tabs-${index}" checked="checked">
+    <input type="radio" id="vc-jose-cose-tab-${index}-sd-jwt" name="vc-jose-cose-tabs-${index}" >
     <ul class="vc-jose-cose-tabs">
       <li class="vc-jose-cose-tab">
         <label for="vc-jose-cose-tab-${index}-cose">COSE</label>