add initial key data to the key details component

src/components/KeyDetails.vue

@@ -1,16 +1,54 @@
 <template>
   <v-card>
-    <v-card-title>Key Details</v-card-title>
-    <v-card-text>{{fingerprint}}</v-card-text>
+    <v-card-title>
+      <span v-if="pgpkey.isPublic()">Public</span>
+      <span v-if="pgpkey.isPrivate()">Private</span>
+      Key: {{pgpkey.getKeyId().toHex().toUpperCase()}}
+    </v-card-title>
+    <v-card-text>
+      <div>
+        <strong>Fingerprint:</strong>
+        {{pgpkey.getFingerprint().toUpperCase()}}
+      </div>
+      <div>
+        <strong>Algorithm:</strong>
+        {{pgpkey.getAlgorithmInfo()["algorithm"]}} (Size: {{pgpkey.getAlgorithmInfo()["bits"]}})
+      </div>
+      <div>
+        <strong>Created:</strong>
+        {{pgpkey.getCreationTime()}}
+      </div>
+      <div>
+        <strong>Expires:</strong>
+        {{expirationDate}}
+      </div>
+      <div>
+        <strong>Revoked:</strong>
+        <span v-if="revoked">Yes</span>
+        <span v-if="!revoked">No</span>
+      </div>
+    </v-card-text>
   </v-card>
 </template>
 
 <script>
 export default {
-  props: ["fingerprint"]
+  props: ["pgpkey"],
+  data: () => ({
+    expirationDate: "",
+    revoked: false
+  }),
+  created: function() {
+    this.getExpirationDate();
+    this.is_revoked();
+  },
+  methods: {
+    getExpirationDate: async function() {
+      this.expirationDate = await this.pgpkey.getExpirationTime();
+    },
+    is_revoked: async function() {
+      this.revoked = await this.pgpkey.isRevoked();
+    }
+  }
 };
 </script>
-
-
-<style>
-</style>

src/components/KeyInspector.vue

@@ -15,7 +15,13 @@
         ></v-textarea>
       </v-col>
       <v-col>
-        <KeyDetails v-bind:fingerprint="fingerprint" />
+        <h1 class="font-weight-light">Key Details</h1>
+        <div v-if="error">
+          <h1>{{error}}</h1>
+        </div>
+        <div v-for="pgpkey in keys" v-bind:key="pgpkey.getFingerprint()">
+          <KeyDetails v-bind:pgpkey="pgpkey" />
+        </div>
       </v-col>
     </v-row>
   </v-container>
@@ -31,15 +37,19 @@ export default {
   },
   data: () => ({
     pubkey: "",
-    fingerprint: ""
+    keys: [],
+    error: ""
   }),
   methods: {
     inspect: async function() {
-      let keys = (await openpgp.key.readArmored(this.pubkey)).keys;
-      this.fingerprint = keys[0].getFingerprint();
+      try {
+        this.keys = (await openpgp.key.readArmored(this.pubkey)).keys;
+        this.error = "";
+      } catch (e) {
+        this.keys = [];
+        this.error = "Unable to parse the provided key";
+      }
     }
   }
 };
 </script>
-
-<style lang="stylus"></style>

src/main.js

@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import App from './App.vue'
-import vuetify from './plugins/vuetify';
+import Vue from "vue";
+import App from "./App.vue";
+import vuetify from "./plugins/vuetify";
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   vuetify,
   render: h => h(App)
-}).$mount('#app')
+}).$mount("#app");