Merge remote-tracking branch 'origin/style/verifier-claims' into desc…

…riptor-fieldname
wwWallet · Jun 28, 2024 · c4a5c81 · c4a5c81
2 parents 905f567 + 06273f1
commit c4a5c81
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/views/verifier/detailed-presentation.pug b/views/verifier/detailed-presentation.pug
@@ -10,15 +10,25 @@ block layout-content
 					each credential, index in credentialPayloads
 						- const branding = credential.credentialBranding || { backgroundColor: 'red', textColor: 'black' }
 						- const imageUrl = credential.credentialBranding.image.url // Get the corresponding image URL
-						.credential-box(style=`display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative; padding: 10px;`, id=`credential-box-${index}`)
+						.credential-box(style=`position:relative;overflow:hidden;display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative; margin: 10px;border-radius:10px;`, id=`credential-box-${index}`)
 							img(style="width: 240px; height: 150px; border-radius: 10px;")(src=imageUrl)
 
 				h3 Requested claims extracted from credentials
 
-				// Text area to display claims
-				textarea#json-textarea.wide
-					//- Display the 'credentialPayloads' JSON object
-					| #{JSON.stringify(presentationClaims, null, 2)}
+				.claims-tables
+					each claimType in Object.keys(presentationClaims)
+						h4= claimType
+						.table-container(style="overflow-x: auto;")
+							table
+								thead
+									tr
+										th Name
+										th Value
+								tbody
+									each claim in presentationClaims[claimType]
+										tr
+											td= claim.name
+											td= claim.value
 
 				h3 Credentials
 

diff --git a/views/verifier/presentations.pug b/views/verifier/presentations.pug
@@ -10,8 +10,20 @@ block layout-content
 					p
 						.card-text Date: #{vp.date}
 						.card-text Claims:
-						textarea#json-textarea.wide
-							| #{JSON.stringify(vp.claims, null, 2)}
+
+						.claims-tables(style="align-items: start;")
+							each claimType in Object.keys(vp.claims)
+								.table-container(style="overflow-x: auto;")
+									table
+										thead
+											tr
+												th Name
+												th Value
+										tbody
+											each claim in vp.claims[claimType]
+												tr
+													td= claim.name
+													td= claim.value
 						.card-text Holder Info: #{vp.holderInfo}
 					.card-buttons
 						button.btn.btn-primary(onclick=`window.location.href = "/verifier-panel/presentation/${vp.id}"`) Inspect details