search

digitalcredentials / learner-credential-wallet

Learner Credential Wallet is a cross-platform iOS and Android mobile application for storing and sharing digital learner credentials.
https://lcw.app
MIT License
54 stars 28 forks source link

Export single credential as PDF #518

Closed kayaelle closed 5 months ago

kayaelle commented 10 months ago

On a dedicated single credential share window: Add an "Export as PDF" option below the create public link area (or below unshare/view link buttons if a link has been created. Please use a PDF icon in the button.

Requirements:

Only display the Export as PDF option if renderMethod is included in a credential, a link to an svg template is available in renderMethod and the svg file is readable, apply credential data to variables indicated in the svg template and render pdf to be downloaded using native mobile device dialog for saving/sharing.

Otherwise, the option should not exist. Let's include this in the testing script for LCW -- please let me know if a new issue is needed for that.

Needed for this issue:

Resources & Tools:

Please add this to testing script.

kayaelle commented 10 months ago

@jmcioffi4 @IsaacAirmet1 @lautom36 here are files:

jennacioffi commented 10 months ago

PR: https://github.com/digitalcredentials/learner-credential-wallet/pull/523

kayaelle commented 10 months ago

@dmitrizagidulin & @lautom36 Keeping this in In Progress status because we will continue to test with more complex templates and scenarios.

kayaelle commented 10 months ago

Adding more complex model:

signed credential: https://raw.githubusercontent.com/digitalcredentials/test-files/main/signed-example-credentials/svg-templates/tec-de-monterrey-pdf-sample-2-svg-signed.json

SVG template: https://github.com/digitalcredentials/test-files/blob/main/svg-templates/tec-de-monterrey-pdf-sample-2.svg

certificados.tec.mx_certificate_027aaf97239557958a1d3d38ea794a2d.pdf

dmitrizagidulin commented 7 months ago

Sample HTML template from Atomic Jolt:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0; /* Optional: Set a background color */
        }

        .main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 80%;
            padding: 20px;
            box-sizing: border-box;
        }

        .main-container img {
            /* Add styles for the image if needed */
        }

        h2 {
            margin: 10px 0;
        }

        .signatures-container {
            display: flex;
            justify-content: space-evenly;
            width: 90%;
            margin-top: 20px; /* Adjust as needed */
        }

        .signature {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        p {
            text-align: center;
            margin: 10px 0;
        }
    </style>
</head>
<body>

<div class="main-container">
    <div>image would go here</div>
    <p>concede a</p>
    <h2>{{ credential.subject.name }}</h2>
    <p>el titulo profesional de</p>
    <h2>{{ credential.name }}</h2>
    <p>considerando que ha cumplido con los estudios correspondientes y satisfecho todas los requisitos necesarios.</p>
    <p>Dado en la ciudad de Monterrey, estado de Nuevo León, el dia</p>
    <p>{{ credential.awardedDate }}</p>
    <div class="signatures-container">
        <div class="signature">sig 1 <p>Rector y Presidente Ejecutivo</p></div>
        <div class="signature">sig 2 <p>Rector de Profesional y Posgrado</p></div> 
    </div>
    <p>Titulo Electronico folio control: {{ credential.evidence[0].narrative }}</p>
    <p>Sello Autenticocion:</p>
    <p>{{ credential.evidence[1].narrative }}</p>
    <p>No. Certifico Autoridad:</p>
    <p>{{ credential.evidence[2].narrative }}</p>
</div>

</body>
</html>
kayaelle commented 6 months ago

Example credential: https://raw.githubusercontent.com/digitalcredentials/test-files/main/example-credentials-unsigned/render-method/tec-de-monterrey-unsigned-html-template.json

Wallet isn't showing export as expected.

kayaelle commented 6 months ago

Updating label to priority because we need this for Tec pilot.

kayaelle commented 6 months ago

Dmitri exploring and debugging currently.

dmitrizagidulin commented 6 months ago

Signed credential:


{
  "name": "Título Profesional e21.02",
  "type": [
    "VerifiableCredential",
    "OpenBadgeCredential"
  ],
  "id": "urn:uuid:951b475e-b795-43bc-ba8f-a2d01efd2eb1",
  "issuer": {
    "id": "did:key:z6MkjSdgaUNWTQsH8RbkrNoxk98ZA2FHQsyEFEcHAEGhk3dB",
    "url": "https://tec.mx/es",
    "type": "Profile",
    "name": "Instituto Tecnológico y de Estudios superiores de Monterrey",
    "image": {
      "id": "https://coursereport-production.imgix.net/uploads/school/logo/490/original/logo-tecnolo-cc-81gico-monterrey-boot-camp-20.jpg",
      "type": "Image"
    }
  },
  "@context": [
    "https://www.w3.org/2018/credentials/v1",
    "https://purl.imsglobal.org/spec/ob/v3p0/context-3.0.1.json",
    {
      "renderMethod": "urn:uuid:b2ab3546-228a-47a8-b97a-9a5646007c53",
      "css3MediaQuery": "urn:uuid:c4c53282-e8e2-4914-83d8-566e25d2f899",
      "digestMultibase": "urn:uuid:caef1a4e-67b8-4dfc-9881-2b51da7edc1b"
    },
    "https://w3id.org/security/suites/ed25519-2020/v1"
  ],
  "issuanceDate": "2020-12-16T00:00:00Z",
  "credentialSubject": {
    "type": [
      "AchievementSubject"
    ],
    "name": "Adolfo Daniel Javier Alberto Giese-Caballero Benavides",
    "achievement": {
      "type": [
        "Achievement"
      ],
      "id": "urn:uuid:7d9f1061-81b4-48d5-b6eb-6524c4074146",
      "name": "Título Profesional",
      "criteria": {
        "type": "Criteria",
        "narrative": "Javier Alberto Giese Ruiz has fulfilled the requirements to earn this degree. -- do we want to include other criteria here?"
      },
      "description": "Description content here?",
      "fieldOfStudy": "Ingeniero en Sistemas Electrónicos",
      "achievementType": "BachelorDegree"
    },
    "id": "did:key:z6MkpCSjiYdZe55pvraC8N9SNxthqtMfJQUry3Yhk8XwZ7co"
  },
  "evidence": [
    {
      "type": "Evidence",
      "name": "Título Electrónico Folio Control",
      "narrative": "M-A00500923-5"
    },
    {
      "type": "Evidence",
      "name": "Sello Autenticación",
      "narrative": "RzWvSLK1vpxOltu/71LeuuoxC6lDJ0vEocVHjUjItgSj+GH50KophCABW3ZqPEVhIxEJ1dQAPS3TsNz+UepJu6EK4B2Y36+Z+D3j4bRCmBkdA/IQVd97Sp7itv9XUsgNIZicMEfrufhkrPCVvS7aOJ+nicISpU86lnZwAAU27HSw+5ca2hZ1OQ6an0bvd8/cPgsclldHUWsiSUsPESyoCeurd1nT03LoEwX4WrgQT6xSY+2HixOgGPWiR7mQV5tIlnNZvhT1BsGCMwr7XsL3Pbdgo2QCMYx1cRDatMWydjyMdRvgU/mAaHwdncxv1nAORfxruIFgr9W2Gjvi4OOyAQ=="
    },
    {
      "type": "Evidence",
      "name": "No. Certificado Autoridad",
      "narrative": "00001000000123456789"
    },
    {
      "type": "Evidence",
      "name": "Sello Titulo",
      "narrative": "Hjru5ABq7bOaDK5khME3A163xwNx2uHhX/3gRZ+0MM80i0Eok2v+7SbBhGGZ8ZDxDFrY6kusMXYWvw7rZidv9ZiBjJfp9YIYqixmvSEFtUfBhN/MZOF/tP7zhGRNPELu31GKE2jIyN7jAZB30xf7XOlZoIBuxPsiUljGcqaCStzdofOpJiN+NqvlzMs/LMYwny7OrIE5w65lPHbuocMl1nqlMGwfWioSbnHu8x52DQWa65VMEiknLTfMerZJ06ly7q/mI8tDpKgIAuhVY6WwN9c/8qrbGGZ2qqDCZmyiB75bjWQBIwMBXTV4QnfSnIy1tPbTra43utMkkb+ZhaFbUQ=="
    },
    {
      "type": "Evidence",
      "name": "Fecha Autenticacion",
      "narrative": "1/27/2020 17:22:22"
    },
    {
      "type": "Evidence",
      "name": "Folio Digital",
      "narrative": "701a5cf8-67va-4452-abc8-c18b1bb94be1"
    }
  ],
  "renderMethod": [
    {
      "id": "https://raw.githubusercontent.com/digitalcredentials/docs/main/credential-render-examples/tec-de-monterrey-test-example-template.html",
      "type": "SvgRenderingTemplate2023",
      "name": "PDF Display",
      "css3MediaQuery": "@media (orientation: portrait)"
    }
  ],
  "proof": {
    "type": "Ed25519Signature2020",
    "created": "2024-03-14T00:52:35Z",
    "verificationMethod": "did:key:z6MkjSdgaUNWTQsH8RbkrNoxk98ZA2FHQsyEFEcHAEGhk3dB#z6MkjSdgaUNWTQsH8RbkrNoxk98ZA2FHQsyEFEcHAEGhk3dB",
    "proofPurpose": "assertionMethod",
    "proofValue": "z4SRn6FmbibfTrbj9KUceRcFYS9rEJJ8vAyCvARz2MK5LnSsvuBwtutZbPooR2Ra6iB4a3EzR871m75QDbBLfrMpc"
  }
}
alexfigtree commented 6 months ago

Implemented, last fix for it is in PR https://github.com/digitalcredentials/learner-credential-wallet/pull/599

kayaelle commented 5 months ago

Tried testing on testflight with this credential:

{ "@context": [ "https://www.w3.org/2018/credentials/v1", "https://purl.imsglobal.org/spec/ob/v3p0/context-3.0.1.json", { "renderMethod": "urn:uuid:b2ab3546-228a-47a8-b97a-9a5646007c53", "css3MediaQuery": "urn:uuid:c4c53282-e8e2-4914-83d8-566e25d2f899", "digestMultibase": "urn:uuid:caef1a4e-67b8-4dfc-9881-2b51da7edc1b" }, "https://w3id.org/security/suites/ed25519-2020/v1" ], "type": [ "VerifiableCredential", "OpenBadgeCredential" ], "id": "urn:uuid:951b475e-b795-43bc-ba8f-a2d01efd2eb1", "issuanceDate": "2020-01-01T00:00:00Z", "name": "Sam Smith - Bachelor of Science in Computer Science", "issuer": { "id": "did:key:z6MknNQD1WHLGGraFi6zcbGevuAgkVfdyCdtZnQTGWVVvR5Q", "url": "https://web.mit.edu/", "type": "Profile", "name": "Massachusetts Institute of Technology", "image": { "id": "https://github.com/digitalcredentials/test-files/assets/206059/01eca9f5-a508-40ac-9dd5-c12d11308894", "type": "Image" } }, "credentialSubject": { "type": [ "AchievementSubject" ], "name": "Sam Smith", "achievement": { "type": [ "Achievement" ], "id": "urn:uuid:951b475e-b795-43bc-ba8f-a2d01efd2eb1", "achievementType": "BachelorDegree", "name": "Bachelor of Science in Computer Science", "fieldOfStudy": "Computer Science", "criteria": { "type": "Criteria", "narrative": "IN RECONITION OF PROFICIENCY IN THE GENERAL AND THE SPECIAL STUDIES AND EXERCISES PRESCRIBED BY SAID INSTITUTION FOR SUCH MOCK DEGREE GIVEN THIS DAY UNDER THE SEAL OF THE INSTITUTE AT CAMBRIDGE IN THE COMMONWEALTH OF MASSACHUSETTS" }, "description": "Massachusetts Institute of Technology Bachelor of Science in Computer Science" }, "renderMethod": [ { "id": "https://raw.githubusercontent.com/digitalcredentials/test-files/main/html-templates/mock-MIT-bachelors-template.html", "type": "SvgRenderingTemplate2023", "name": "PDF Display", "css3MediaQuery": "@media (orientation: portrait)" } ], "id": "did:key:z6MkpCSjiYdZe55pvraC8N9SNxthqtMfJQUry3Yhk8XwZ7co" }, "proof": { "type": "Ed25519Signature2020", "created": "2024-03-20T13:56:29Z", "verificationMethod": "did:key:z6MknNQD1WHLGGraFi6zcbGevuAgkVfdyCdtZnQTGWVVvR5Q#z6MknNQD1WHLGGraFi6zcbGevuAgkVfdyCdtZnQTGWVVvR5Q", "proofPurpose": "assertionMethod", "proofValue": "zkAAvu1LN61hzd9igiqu2Pxzq9Hy8vfTYDNMhAgcKoe8e6CsyCpWcoHQWDU4H1wX6fJPPsgH8t2u3CsTC9u1T346" } }

The export as PDF button isn't available in the share screen

dmitrizagidulin commented 5 months ago

@kayaelle In the template, change {{ credential.fieldOfStudy }} to {{ credential.credentialSubject.fieldOfStudy }}

alexfigtree commented 5 months ago

Deployed in 2.0.23, closing this ticket