From 905051da468e050d68b5556768f5ab65775a944b Mon Sep 17 00:00:00 2001
From: Tim Schauder <temscha@live.com>
Date: Tue, 30 Jul 2024 13:47:17 +0200
Subject: [PATCH 1/2] Add pinia plugin persisted state

---
 nuxt.config.ts    |  2 +-
 package-lock.json | 24 ++++++++++++++++++++++++
 package.json      |  1 +
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index a2ae56b..cf43643 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,7 @@
 
 export default defineNuxtConfig({
   ssr: false,
-  modules: ['@nuxt/eslint', '@pinia/nuxt', '@nuxtjs/tailwindcss'],
+  modules: ['@nuxt/eslint', '@pinia/nuxt', '@nuxtjs/tailwindcss', '@pinia-plugin-persistedstate/nuxt',],
   devtools: { enabled: true },
   runtimeConfig: {
     public: {
diff --git a/package-lock.json b/package-lock.json
index 7bcf68c..783001d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
       "devDependencies": {
         "@nuxt/eslint": "^0.3.13",
         "@nuxtjs/tailwindcss": "^6.12.0",
+        "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
         "daisyui": "^4.12.10",
         "eslint": "^8.57.0"
       }
@@ -3386,6 +3387,20 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia-plugin-persistedstate/nuxt": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@pinia-plugin-persistedstate/nuxt/-/nuxt-1.2.1.tgz",
+      "integrity": "sha512-q8s+4aQW/AjBMyeqLL48/qzBR5lcgnvvf1525ovNuKf6Wl9CsoLjPKh/5X8vNoKGwSow4gP7lVmdYPQRypgjgg==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.12.2",
+        "defu": "^6.1.4",
+        "pinia-plugin-persistedstate": ">=3.2.1"
+      },
+      "peerDependencies": {
+        "@pinia/nuxt": "^0.5.0"
+      }
+    },
     "node_modules/@pinia/nuxt": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.1.tgz",
@@ -11189,6 +11204,15 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
+      "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
+      "dev": true,
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
diff --git a/package.json b/package.json
index d26695a..d5d9336 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "devDependencies": {
     "@nuxt/eslint": "^0.3.13",
     "@nuxtjs/tailwindcss": "^6.12.0",
+    "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "daisyui": "^4.12.10",
     "eslint": "^8.57.0"
   },

From 998daa8796e0d0e60e0f39ca61a74c3f85e75391 Mon Sep 17 00:00:00 2001
From: Tim Schauder <temscha@live.com>
Date: Tue, 30 Jul 2024 13:48:16 +0200
Subject: [PATCH 2/2] 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