From 62b72718d1a3656340098b382638bf90a26a850a Mon Sep 17 00:00:00 2001
From: Tim Schauder <temscha@live.com>
Date: Tue, 30 Jul 2024 13:48:16 +0200
Subject: [PATCH] Add nonce to store and refactor types

---
 components/PresentationForm.vue               | 24 ++++--
 components/QrCode.vue                         |  7 +-
 models/PresentationRequest.ts                 | 81 -------------------
 models/TransactionRequest.ts                  | 34 ++++++++
 ...tionResponse.ts => TransactionResponse.ts} |  2 +-
 models/TransactionStore.ts                    |  5 ++
 pages/provider.vue                            |  7 +-
 stores/SessionStore.ts                        | 21 +++--
 8 files changed, 77 insertions(+), 104 deletions(-)
 delete mode 100644 models/PresentationRequest.ts
 create mode 100644 models/TransactionRequest.ts
 rename models/{PresentationResponse.ts => TransactionResponse.ts} (67%)
 create mode 100644 models/TransactionStore.ts

diff --git a/components/PresentationForm.vue b/components/PresentationForm.vue
index c55ab4c..6f0a4dd 100644
--- a/components/PresentationForm.vue
+++ b/components/PresentationForm.vue
@@ -23,20 +23,27 @@
         Hier ausweisen
       </button>
     </div>
+    <div v-if="errorMessage" class="mx-6 my-4 p-4 border-red-400 border rounded text-red-500">
+      <p>{{ errorMessage }}</p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import axios from 'axios';
-import type {PresentationRequest} from "~/models/PresentationRequest.ts";
+import type {TransactionRequest} from "~/models/TransactionRequest.ts";
 import {presentationInfo} from '~/models/PresentationInfo';
-import type {PresentationResponse} from "~/models/PresentationResponse";
+import type {TransactionResponse} from "~/models/TransactionResponse";
+import {ref} from "vue";
+
+const errorMessage = ref<string | null>(null);
 
 const emit = defineEmits(['data-posted']);
 const sessionStore = useSessionStore();
 
 const runtimeConfig = useRuntimeConfig()
 const baseUrl = runtimeConfig.public.apiUrl
+const nonce = crypto.randomUUID()
 
 const dataList = ref<{ kind: string, selected: boolean }[]>(Object.keys(presentationInfo).map(kind => ({
   kind,
@@ -45,8 +52,8 @@ const dataList = ref<{ kind: string, selected: boolean }[]>(Object.keys(presenta
 const postData = async () => {
   const selectedItems = dataList.value.filter(item => item.selected);
 
-  const presentationRequest: PresentationRequest = {
-    nonce: crypto.randomUUID(),
+  const presentationRequest: TransactionRequest = {
+    nonce: nonce,
     response_mode: 'direct_post',
     type: 'vp_token',
     presentation_definition: {
@@ -78,14 +85,15 @@ const postData = async () => {
 
   try {
     const response = await axios.post(`${baseUrl}/ui/presentations`, presentationRequest);
-    const presentationResponse: PresentationResponse = response.data;
+    const {client_id, presentation_id, request_uri}: TransactionResponse = response.data;
 
-    sessionStore.setPresentationResponse(presentationResponse);
-    emit('data-posted', presentationResponse);
+    sessionStore.setPresentationStore({client_id, presentation_id, request_uri, nonce});
+    emit('data-posted', {client_id, request_uri});
+    console.log('client_id: ', client_id);
 
-  emit('data-posted', presentationResponse);
   } catch (error) {
     console.error('Error posting data:', error);
+    errorMessage.value = 'Fehler beim Senden der Daten';
   }
 }
 </script>
\ No newline at end of file
diff --git a/components/QrCode.vue b/components/QrCode.vue
index 319482f..cc3bcff 100644
--- a/components/QrCode.vue
+++ b/components/QrCode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="data" class="flex flex-col justify-center items-center gap-6">
+  <div v-if="props.data" class="flex flex-col justify-center items-center gap-6">
     <qrcode-vue :value="link" :level="level" :render-as="renderAs" :size="200" class="my-10"/>
     <NuxtLink :to="link">
       <button class="btn btn-primary">
@@ -12,16 +12,15 @@
 <script setup lang="ts">
 import QrcodeVue from 'qrcode.vue'
 import type {Level, RenderAs} from 'qrcode.vue'
-import type {PresentationResponse} from "~/models/PresentationResponse";
 
 const runtimeConfig = useRuntimeConfig()
 const baseUrl = runtimeConfig.public.apiUrl
 
 const props = defineProps<{
-  data: PresentationResponse;
+  data: { client_id: string, request_uri: string }
 }>();
+const {client_id, request_uri} = props.data;
 
-const {request_uri, client_id} = props.data
 const authenticationUrl = `eudi-openid4vp://${baseUrl}?client_id=${client_id}&request_uri=${request_uri}`
 
 const link = ref(authenticationUrl)
diff --git a/models/PresentationRequest.ts b/models/PresentationRequest.ts
deleted file mode 100644
index a42814d..0000000
--- a/models/PresentationRequest.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-export type PresentationRequest = {
-    nonce: string;
-    presentation_definition: PresentationDefinition;
-    type: string;
-    response_mode: string; // maybe optional?
-}
-
-type PresentationDefinition = {
-    id: string;
-    input_descriptors: InputDescriptor[];
-}
-
-type InputDescriptor = {
-    id: string;
-    name: string;
-    purpose: string;
-    format: Format;
-    constraints: Constraint;
-}
-
-type Format = {
-    mso_mdoc: {
-        alg: string[];
-    };
-}
-
-type Constraint = {
-    fields: Field[];
-}
-
-type Field = {
-    path: string[];
-    intent_to_retain: boolean;
-}
-
-
-// {
-//     "type": "vp_token",
-//     "presentation_definition": {
-//     "id": "32f54163-7166-48f1-93d8-ff217bdb0653",
-//         "input_descriptors": [
-//         {
-//             "id": "eu.europa.ec.eudiw.pid.1",
-//             "name": "EUDI PID",
-//             "purpose": "We need to verify your identity",
-//             "format": {
-//                 "mso_mdoc": {
-//                     "alg": [
-//                         "ES256",
-//                         "ES384",
-//                         "ES512",
-//                         "EdDSA",
-//                         "ESB256",
-//                         "ESB320",
-//                         "ESB384",
-//                         "ESB512"
-//                     ]
-//                 }
-//             },
-//             "constraints": {
-//                 "fields": [
-//                     {
-//                         "path": [
-//                             "$['eu.europa.ec.eudiw.pid.1']['family_name']"
-//                         ],
-//                         "intent_to_retain": false
-//                     },
-//                     {
-//                         "path": [
-//                             "$['eu.europa.ec.eudiw.pid.1']['issuing_jurisdiction']"
-//                         ],
-//                         "intent_to_retain": false
-//                     }
-//                 ]
-//             }
-//         }
-//     ]
-// },
-//     "nonce": "55410e05-b4da-42f3-a42a-2994124e0aa6",
-//     "response_mode": "direct_post"
-// }
\ No newline at end of file
diff --git a/models/TransactionRequest.ts b/models/TransactionRequest.ts
new file mode 100644
index 0000000..e88c1cf
--- /dev/null
+++ b/models/TransactionRequest.ts
@@ -0,0 +1,34 @@
+export type TransactionRequest = {
+    nonce: string;
+    presentation_definition: PresentationDefinition;
+    type: string;
+    response_mode: string;
+}
+
+type PresentationDefinition = {
+    id: string;
+    input_descriptors: InputDescriptor[];
+}
+
+type InputDescriptor = {
+    id: string;
+    name: string;
+    purpose: string;
+    format: Format;
+    constraints: Constraint;
+}
+
+type Format = {
+    mso_mdoc: {
+        alg: string[];
+    };
+}
+
+type Constraint = {
+    fields: Field[];
+}
+
+type Field = {
+    path: string[];
+    intent_to_retain: boolean;
+}
\ No newline at end of file
diff --git a/models/PresentationResponse.ts b/models/TransactionResponse.ts
similarity index 67%
rename from models/PresentationResponse.ts
rename to models/TransactionResponse.ts
index e8ff82b..982afa7 100644
--- a/models/PresentationResponse.ts
+++ b/models/TransactionResponse.ts
@@ -1,4 +1,4 @@
-export type PresentationResponse = {
+export type TransactionResponse = {
     client_id: string;
     presentation_id:string;
     request_uri: string;
diff --git a/models/TransactionStore.ts b/models/TransactionStore.ts
new file mode 100644
index 0000000..0925396
--- /dev/null
+++ b/models/TransactionStore.ts
@@ -0,0 +1,5 @@
+import type { TransactionResponse } from "~/models/TransactionResponse";
+
+export interface TransactionStore extends TransactionResponse {
+    nonce: string;
+}
\ No newline at end of file
diff --git a/pages/provider.vue b/pages/provider.vue
index ae3ea04..76799bd 100644
--- a/pages/provider.vue
+++ b/pages/provider.vue
@@ -8,11 +8,10 @@
 <script setup lang="ts">
 import QrCode from "~/components/QrCode.vue";
 import PresentationForm from "~/components/PresentationForm.vue";
-import type {PresentationResponse} from "~/models/PresentationResponse";
 
-const qrCodeData = ref<PresentationResponse | null>(null);
+const qrCodeData = ref<{client_id: string, request_uri: string} | null>(null);
 
-const handleDataPosted = (data: PresentationResponse) => {
-  qrCodeData.value = data;
+const handleDataPosted = (client_id: string, request_uri: string) => {
+  qrCodeData.value = {client_id, request_uri};
 };
 </script>
\ No newline at end of file
diff --git a/stores/SessionStore.ts b/stores/SessionStore.ts
index d1c610c..cf57f64 100644
--- a/stores/SessionStore.ts
+++ b/stores/SessionStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type {PresentationResponse} from "~/models/PresentationResponse";
+import type {TransactionStore} from "~/models/TransactionStore";
 
 
 export const useSessionStore = defineStore('session', {
@@ -7,12 +7,21 @@ export const useSessionStore = defineStore('session', {
         clientId: null as string | null,
         presentationId: null as string | null,
         requestUri: null as string | null,
+        nonce: null as string | null,
     }),
     actions: {
-        setPresentationResponse(response: PresentationResponse) {
-            this.clientId = response.client_id
-            this.presentationId = response.presentation_id
-            this.requestUri = response.request_uri
+        setPresentationStore(data: TransactionStore) {
+            this.clientId = data.client_id
+            this.presentationId = data.presentation_id
+            this.requestUri = data.request_uri
+            this.nonce = data.nonce
+        },
+        $reset() {
+            this.clientId = null
+            this.presentationId = null
+            this.requestUri = null
+            this.nonce = null
         }
-    }
+    },
+    persist: true,
 })
\ No newline at end of file