passing multiple cred defs working

european-epc-competence-center · Sep 3, 2024 · 759471e · 759471e
1 parent ad577f0
commit 759471e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,6 +6,7 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit"
   },

diff --git a/frontend/src/components/PresentationRequest.vue b/frontend/src/components/PresentationRequest.vue
@@ -3,12 +3,13 @@
         <div class="col-12 px-0 my-3 text-center">
             <div v-if="generating" class="my-3" style="min-height: 300px;">
                 <p class="p-5 m-0 text-muted">Registering presentation request</p>
-                <div class="spinner-border text-primary m-5" role="status" style="width: 5rem; height: 5rem; top: 150px;">
+                <div class="spinner-border text-primary m-5" role="status"
+                    style="width: 5rem; height: 5rem; top: 150px;">
                     <span class="visually-hidden">Generating...</span>
                 </div>
             </div>
-            <qrcode-vue v-else-if="presentationRequestId" :value="presentationRequestURI" :margin="1" :size="300" level="M"
-                class="my-3" id="presentation-request-canvas" />
+            <qrcode-vue v-else-if="presentationRequestId" :value="presentationRequestURI" :margin="1" :size="300"
+                level="M" class="my-3" id="presentation-request-canvas" />
             <div v-else class="my-3" style="min-height: 300px;">
                 <p class="p-5 text-muted">Please configure your presentation request</p>
             </div>
@@ -28,7 +29,7 @@ import QrcodeVue from 'qrcode.vue';
 export default {
     name: 'PresentationRequest',
     props: {
-        credentialType: String,
+        credentialTypes: Array,
         mode: {
             type: String,
             default: 'verify'
@@ -56,8 +57,11 @@ export default {
         if (this.intervalId) clearInterval(this.intervalId)
     },
     watch: {
-        credentialType() {
-            this.registerPresentationRequest();
+        credentialTypes: {
+            handler() {
+                this.registerPresentationRequest();
+            },
+            deep: true
         }
     },
     computed: {
@@ -70,11 +74,15 @@ export default {
             }
         },
         presentationDefinition() {
-            return {
+            const definition = {
                 "id": "eecc_verifier_request",
                 "input_descriptors": [
+                ]
+            }
+            for (const credentialType of this.credentialTypes) {
+                definition.input_descriptors.push(
                     {
-                        "id": "eecc_verifier_request_" + this.credentialType || "VerifiableCredential",
+                        "id": "eecc_verifier_request_" + credentialType || "VerifiableCredential",
                         "format": {
                             "ldp_vc": {
                                 "proof_type": [
@@ -93,15 +101,18 @@ export default {
                                         "type": "array",
                                         "contains": {
                                             "type": "string",
-                                            "const": this.credentialType || "VerifiableCredential"
+                                            "pattern": credentialType || "VerifiableCredential"
                                         }
                                     }
                                 }
                             ]
                         }
                     }
-                ]
+                );
+
             }
+            return definition;
+
         },
         presentationRequest() {
             return {

diff --git a/frontend/src/views/PresentationRequest.vue b/frontend/src/views/PresentationRequest.vue
@@ -10,7 +10,7 @@
                     aria-label="API Docs"></i></a>
             <a href="https://id.eecc.de"><img id="logo" src="@/assets/img/logo.png" /></a>
         </div>
-        <div class="card-body" >
+        <div class="card-body">
             <div class="row mx-md-3">
                 <div class="col-12">
                     <p>Define which credentials you want to have presented</p>
@@ -32,22 +32,22 @@
             <div v-if="selectedCredential === 'custom'">
                 <div class="row mx-md-3" v-for="(l, i) in customCredentialTypes" :key="i">
                     <div class="col-6">
-                        <input v-model="customCredentialTypes[i]" type="text" class="form-control"
-                            placeholder="CustomCredentialType" aria-label="credentialType">
+                        <input v-model="customCredentialTypes[i]" type="text" class="form-control ms-1 mt-1"
+                            placeholder="CustomCredentialType">
                     </div>
                     <div class="col-1" v-if="i === customCredentialTypes.length - 1">
-                        <button class="btn btn-outline-success" @click="customCredentialTypes.push('')">
+                        <button class="btn btn-outline-success ms-1 mt-1" @click="customCredentialTypes.push('')">
                             <i class="bi bi-plus-circle"></i>
                         </button>
                     </div>
                     <div class="col-1">
-                        <button class="btn btn-outline-danger" @click="customCredentialTypes.splice(i, 1)">
+                        <button class="btn btn-outline-danger ms-1 mt-1" @click="customCredentialTypes.splice(i, 1)">
                             <i class="bi bi-dash-circle"></i>
                         </button>
                     </div>
                 </div>
             </div>
-            <PresentationRequest :credentialType="credentialType" />
+            <PresentationRequest :credentialTypes="customCredentialTypes" />
         </div>
     </div>
 </template>