Merge pull request #133 from dwelman/upload-credential

Allows for the upload of a credential directly into a wallet

Author: reinkrul

README.md

@@ -34,6 +34,8 @@ During front-end development, you probably want to use the real filesystem and w
 make dev
 ```
 
+You can access the website at `http://localhost:1305/` by default
+
 The API and domain types are generated from the `api/api.yaml`.
 ```shell
 make gen-api

web/src/admin/IdentityDetails.vue

@@ -98,6 +98,14 @@
         <p v-else>
           No credentials in wallet.
         </p>
+        <br>
+        <button
+            id="upload-credential-button"
+            @click="$router.push({name: 'admin.uploadCredential', params: {subjectID: this.$route.params.subjectID}})"
+            class="btn btn-primary"
+        >
+          Upload
+        </button>
       </section>
     </div>
   </div>
@@ -107,9 +115,10 @@
 
 import DiscoveryServiceDefinition from "./DiscoveryServiceDefinition";
 import ErrorMessage from "../components/ErrorMessage.vue";
+import UploadCredential from "./credentials/UploadCredential.vue";
 
 export default {
-  components: {ErrorMessage},
+  components: {ErrorMessage, UploadCredential},
   data() {
     return {
       fetchError: undefined,

web/src/admin/credentials/IssueCredential.vue

@@ -5,6 +5,7 @@
 
     <section v-if="issuedCredential">
       <header>Issued Credential</header>
+      <button class="btn btn-primary" @click="copyToClipboard">Copy to Clipboard</button>
       <pre>{{ JSON.stringify(issuedCredential, null, 2) }}</pre>
     </section>
 
@@ -86,7 +87,12 @@
     </div>
   </div>
 </template>
-
+<style scoped>
+button.btn.btn-primary {
+  display: block;
+  margin-bottom: 1rem;
+}
+</style>
 <script>
 import templates from "./templates";
 import ErrorMessage from "../../components/ErrorMessage.vue";
@@ -187,6 +193,15 @@ export default {
           .catch(response => {
             this.fetchError = response
           })
+    },
+    copyToClipboard() {
+      navigator.clipboard.writeText(JSON.stringify(this.issuedCredential, null, 2))
+          .then(() => {
+            this.$emit('statusUpdate', 'Credential copied to clipboard')
+          })
+          .catch(err => {
+            this.fetchError = 'Failed to copy credential: ' + err
+          })
     }
   }
 }

web/src/admin/credentials/UploadCredential.vue

@@ -0,0 +1,51 @@
+<template>
+  <modal-window :cancelRoute="{name: 'admin.identityDetails', params: {subjectID: this.$route.params.subjectID}}" :confirmFn="confirm" confirmText="Upload Credential"
+                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.
+    </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}"/>
+    </div>
+  </modal-window>
+</template>
+
+<script>
+import ModalWindow from '../../components/ModalWindow.vue'
+import UploadCredentialForm from "./UploadCredentialForm.vue";
+import ErrorMessage from "../../components/ErrorMessage.vue";
+
+export default {
+  components: {
+    ErrorMessage,
+    ModalWindow,
+    UploadCredentialForm
+  },
+  created() {
+    this.subjectID = this.$route.params.subjectID;
+  },
+  data () {
+    return {
+      apiError: '',
+      subjectID: '',
+      credential: {}
+    }
+  },
+  methods: {
+    confirm () {
+      this.$api.post(`api/proxy/internal/vcr/v2/holder/${this.subjectID}/vc`, this.credential)
+          .then(() => {
+            this.$emit('uploadCredential', 'Verifiable Credential issued, and loaded into wallet')
+            this.$router.push({name: 'admin.identityDetails', params: {subjectID: this.subjectID}})
+          })
+          .catch(reason => {
+            this.apiError = reason
+          })
+    }
+  }
+}
+</script>

web/src/admin/credentials/UploadCredentialForm.vue

@@ -0,0 +1,33 @@
+<template>
+  <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>
+    </div>
+  </form>
+</template>
+<script>
+export default {
+  props: {
+    value: Object,
+    mode: String
+  },
+  data () {
+    return {
+      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';
+      }
+    }
+  }
+}
+</script>

web/src/index.js

@@ -14,6 +14,7 @@ import Api from './plugins/api'
 import IdentityDetails from "./admin/IdentityDetails.vue";
 import IssueCredential from "./admin/credentials/IssueCredential.vue";
 import ActivateDiscoveryService from "./admin/ActivateDiscoveryService.vue";
+import UploadCredential from "./admin/credentials/UploadCredential.vue";
 
 const routes = [
   {
@@ -51,6 +52,11 @@ const routes = [
         name: 'admin.identityDetails',
         component: IdentityDetails,
       },
+      {
+        path: 'id/:subjectID/upload',
+        name: 'admin.uploadCredential',
+        component: UploadCredential,
+      },
       {
         path: 'id/:subjectID/discovery/:discoveryServiceID/activate',
         name: 'admin.activateDiscoveryService',