Add Helper Functions for SVG Rendering

Dockerfile

@@ -3,8 +3,7 @@ FROM node:16-bullseye-slim AS builder
 WORKDIR /home/node/app
 
 COPY . .
-RUN --mount=type=secret,id=npmrc,required=true,target=./.npmrc,uid=1000 \
-    yarn cache clean && yarn install && yarn build
+RUN yarn cache clean && yarn install && yarn build
 
 # Production stage
 FROM node:16-bullseye-slim AS production
@@ -16,10 +15,9 @@ COPY --from=builder /home/node/app/public ./public
 COPY --from=builder /home/node/app/views ./views
 
 
-RUN --mount=type=secret,id=npmrc,required=true,target=./.npmrc,uid=1000 \
-    yarn cache clean && yarn install --production
+RUN yarn cache clean && yarn install --production
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 EXPOSE 8003
 
 CMD ["node", "./dist/src/app.js"]

development.Dockerfile

@@ -4,8 +4,7 @@ WORKDIR /dependencies
 
 # Install dependencies first so rebuild of these layers is only needed when dependencies change
 COPY package.json yarn.lock ./
-RUN --mount=type=secret,id=npmrc,required=true,target=./.npmrc,uid=1000 \
-    yarn install
+RUN yarn install
 
 
 FROM node:16-bullseye-slim as development
@@ -14,7 +13,7 @@ ENV NODE_PATH=/node_modules
 COPY --from=dependencies /dependencies/node_modules /node_modules
 
 WORKDIR /app
-ENV NODE_ENV development
+ENV NODE_ENV=development
 EXPOSE 8003
 CMD ["yarn", "dev-docker"]
 

src/lib/formatDate.ts

@@ -0,0 +1,11 @@
+export function formatDateDDMMYYYY(value: any): string {
+	const stringValue = value ? String(value) : null;
+	const date = stringValue ? new Date(stringValue) : new Date();
+	const padZero = (num: number) => (num < 10 ? '0' + num : num);
+
+	const day = padZero(date.getDate());
+	const month = padZero(date.getMonth() + 1); // Months are 0-indexed
+	const year = date.getFullYear();
+
+	return `${day}/${month}/${year}`;
+}

src/lib/generateDataUriFromSvg.ts

@@ -0,0 +1,26 @@
+
+
+export function generateDataUriFromSvg(
+	svgText: string,
+	pathsWithValues: { path: string, value: string }[],
+): string {
+	// Regular expression to match the placeholders in the SVG
+	const regex = /{{\/([^}]+)}}/g;
+
+	// Replace placeholders with corresponding values from rows
+	const replacedSvgText = svgText.replace(regex, (_match, content) => {
+		const key = content.trim();
+		const cleanedKey = key.startsWith('/') ? key.slice(1) : key;
+
+		// Find the matching row by name
+		const row = pathsWithValues.find(r => r.path === cleanedKey);
+
+		// Replace placeholder with row value or replace with 'null' if not found
+		return row && row.value ? String(row.value) : '';
+	});
+
+	// Encode the replaced SVG content into a data URI
+	const dataUri = `data:image/svg+xml;utf8,${encodeURIComponent(replacedSvgText)}`;
+
+	return dataUri;
+}

src/verifier/verifierRouter.ts

@@ -17,6 +17,7 @@ import {
 
 import axios from 'axios';
 import base64url from "base64url";
+import { generateDataUriFromSvg } from "../lib/generateDataUriFromSvg";
 
 
 export enum CredentialFormat {
@@ -105,7 +106,14 @@ verifierRouter.get('/success', async (req, res) => {
 			return undefined;
 		}).filter((val) => val)[0];
 
-		if(sdJwtHeader?.vctm && sdJwtHeader?.vctm?.display.length > 0 && sdJwtHeader?.vctm?.display[0][defaultLocale]?.rendering?.simple?.logo?.uri) {
+		if (sdJwtHeader?.vctm && sdJwtHeader?.vctm?.display.length > 0 && sdJwtHeader?.vctm?.display[0][defaultLocale]?.rendering?.svg_templates.length > 0 && sdJwtHeader?.vctm?.display[0][defaultLocale]?.rendering?.svg_templates[0]?.uri) {
+			const response = await axios.get(sdJwtHeader?.vctm?.display[0][defaultLocale].rendering.svg_templates[0].uri);
+			const svgText = response.data;
+			const pathsWithValues: any[] = []; 
+			const dataUri = generateDataUriFromSvg(svgText, pathsWithValues); // replaces all with empty string
+			credentialImages.push(dataUri);
+		}
+		else if(sdJwtHeader?.vctm && sdJwtHeader?.vctm?.display.length > 0 && sdJwtHeader?.vctm?.display[0][defaultLocale]?.rendering?.simple?.logo?.uri) {
 			credentialImages.push(sdJwtHeader?.vctm?.display[0][defaultLocale]?.rendering?.simple?.logo?.uri);
 		}
 		else if (fistImageUri) {

views/issuer/consent.pug

@@ -37,7 +37,7 @@ block layout-content
 						for credential, index in credentialViewList
 							.credential-card
 								input(type="hidden" name="selected_credential_id_list[]" id=`${credential.credential_id}_${index}` value=`${credential.credential_id}` disabled)
-								a.credential.toggle-card(id=`${credential.credential_id}_${index}` style=`position:relative; background-image: url(${credential.credentialImage});`)
+								a.credential.toggle-card(id=`${credential.credential_id}_${index}` style=`position:relative; background-image: url(${credential.credential_image});`)
 									if grant_type == "authorization_code"
 										i.is-selected.fa.fa-check-circle-o(aria-hidden="true" style="display: none;")
 										i.is-not-selected.fa.fa-circle-o(aria-hidden="true")