Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve style of ribbons and claims on verifier presentation #52

Merged
merged 4 commits into from
Jul 1, 2024
Merged

Improve style of ribbons and claims on verifier presentation #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
042103a
Improve style of ribbons on verifier detailed presentation
gkatrakazas Jun 20, 2024
06273f1
Add dynamic table display for claims
gkatrakazas Jun 28, 2024
905f567
added name attribue in input descriptor field
kkmanos Jun 28, 2024
c4a5c81
Merge remote-tracking branch 'origin/style/verifier-claims' into desc…
kkmanos Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions src/services/OpenidForPresentationReceivingService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ import config from "../../config";
import { DidKeyResolverService } from "./DidKeyResolverService";
import { HasherAlgorithm, HasherAndAlgorithm, SdJwt, SignatureAndEncryptionAlgorithm, Verifier } from "@sd-jwt/core";

// https://identity.foundation/presentation-exchange/
// The fields object MAY contain a name property. If present, its value MUST be a string, and SHOULD be a human-friendly name that describes what the target field represents.
type CustomInputDescriptorConstraintFieldType = {
name?: string;
path: string[];
filter?: any;
};

const hasherAndAlgorithm: HasherAndAlgorithm = {
hasher: (input: string) => createHash('sha256').update(input).digest(),
algorithm: HasherAlgorithm.Sha256
Expand Down Expand Up @@ -392,10 +400,11 @@ export class OpenidForPresentationsReceivingService implements OpenidForPresenta
presentationClaims[desc.id] = []; // initialize
}
const fieldPath = field.path[0]; // get first path
const fieldName = (field as CustomInputDescriptorConstraintFieldType).name;
const value = String(JSONPath({ path: fieldPath, json: prettyClaims.vc as any })[0]);
const splittedPath = fieldPath.split('.');
const claimName = splittedPath[splittedPath.length - 1];
presentationClaims[desc.id].push({ name: claimName, value: value } as ClaimRecord);
const claimName = fieldName ? fieldName : splittedPath[splittedPath.length - 1];
presentationClaims[desc.id].push({ name: claimName, value: typeof value == 'object' ? JSON.stringify(value) : value } as ClaimRecord);
});
console.log("Verification result = ", verificationResult)
if (!verificationResult.isSignatureValid || !verificationResult.areRequiredClaimsIncluded) {
Expand All @@ -416,10 +425,11 @@ export class OpenidForPresentationsReceivingService implements OpenidForPresenta
presentationClaims[desc.id] = []; // initialize
}
const fieldPath = field.path[0]; // get first path
const fieldName = (field as CustomInputDescriptorConstraintFieldType).name;
const value = String(JSONPath({ path: fieldPath, json: jwtPayload.vc })[0]);
const splittedPath = fieldPath.split('.');
const claimName = splittedPath[splittedPath.length - 1];
presentationClaims[desc.id].push({ name: claimName, value: value } as ClaimRecord);
const claimName = fieldName ? fieldName : splittedPath;
presentationClaims[desc.id].push({ name: claimName, value: typeof value == 'object' ? JSON.stringify(value) : value } as ClaimRecord);
});
}
}
Expand Down
20 changes: 15 additions & 5 deletions views/verifier/detailed-presentation.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 14 additions & 2 deletions views/verifier/presentations.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading