From 033414d3af59d3159c315bf39b0aa19e458f9b64 Mon Sep 17 00:00:00 2001
From: Rein Krul <info@reinkrul.nl>
Date: Tue, 12 Nov 2024 09:38:02 +0100
Subject: [PATCH] Support uploading credentials in JWT format

---
 .../admin/credentials/UploadCredential.vue    |  6 +--
 .../credentials/UploadCredentialForm.vue      | 42 ++++++++++++++-----
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/web/src/admin/credentials/UploadCredential.vue b/web/src/admin/credentials/UploadCredential.vue
index dc739cd..d117937 100644
--- a/web/src/admin/credentials/UploadCredential.vue
+++ b/web/src/admin/credentials/UploadCredential.vue
@@ -3,13 +3,13 @@
                 title="Upload a Credential JSON" type="add">
 
     <p class="mb-3 text-sm">
-      Here you can add a credential issued by another party to be stored in your wallet. Paste the JSON object below.
+      Here you can add a credential issued by another party to be stored in your wallet. Paste the JSON object or JWT below.
     </p>
 
     <ErrorMessage v-if="apiError" :message="apiError" title="Could not upload credential"/>
 
     <div class="mt-4">
-      <upload-credential-form mode="new" :value="credential" @input="(credentialPaste)=> {credential =  credentialPaste}"/>
+      <upload-credential-form mode="new" :value="credential" @input="(credentialPaste)=> {credential = credentialPaste}"/>
     </div>
   </modal-window>
 </template>
@@ -32,7 +32,7 @@ export default {
     return {
       apiError: '',
       subjectID: '',
-      credential: {}
+      credential: undefined,
     }
   },
   methods: {
diff --git a/web/src/admin/credentials/UploadCredentialForm.vue b/web/src/admin/credentials/UploadCredentialForm.vue
index 4c0e58d..1dd9f17 100644
--- a/web/src/admin/credentials/UploadCredentialForm.vue
+++ b/web/src/admin/credentials/UploadCredentialForm.vue
@@ -2,31 +2,51 @@
   <form class="space-y-3">
     <div>
       <div v-if="error" class="text-red-500">{{ error }}</div>
-      <textarea v-model="localValue" rows="10" cols="30"></textarea>
+      <textarea v-model="localValue" rows="10" cols="30" placeholder="Verifiable Credential as JSON or JWT"></textarea>
     </div>
   </form>
 </template>
 <script>
 export default {
   props: {
-    value: Object,
+    value: Object | String,
     mode: String
   },
-  data () {
+  data() {
     return {
+      error: undefined,
       localValue: JSON.stringify(this.value, null, 2)
     }
   },
   emits: ['input'],
   watch: {
-    localValue (newValue) {
-      try {
-        this.error = '';
-        let parsedInput = JSON.parse(newValue)
-        this.$emit('input', parsedInput);
-      } catch (e) {
-        this.error = 'Invalid JSON format';
-      }
+    localValue(newValue) {
+      // if starts with a {, assume JSON. Otherwise, parse as JWT.
+      this.error = '';
+      if (newValue.startsWith('{')) {
+          try {
+            let parsedInput = JSON.parse(newValue)
+            this.$emit('input', parsedInput);
+          } catch (e) {
+            this.error = 'Invalid JSON format';
+          }
+        } else {
+          // simplistic parsing as form of validation
+          let parts = newValue.split('.');
+          try {
+            if (parts.length !== 3) {
+              this.error = 'Invalid JWT format';
+            } else {
+              // first and second part should be base64 encoded JSON
+              JSON.parse(atob(parts[0]));
+              JSON.parse(atob(parts[1]));
+            }
+            this.$emit('input', newValue);
+          } catch (e) {
+            console.log(e);
+            this.error = 'Invalid JWT format';
+          }
+        }
     }
   }
 }