info about subkeys and user ids is now displayed

src/components/KeyDetails.vue

@@ -1,12 +1,27 @@
 <template>
   <v-card>
     <v-card-title>
+      <v-icon>mdi-account-key</v-icon>
       <span v-if="pgpkey.isPublic()">Public Key</span>
       <span v-if="pgpkey.isPrivate()">Private Key</span>
-      <v-chip class="ma-2" outlined label>{{pgpkey.getKeyId().toHex().toUpperCase()}}</v-chip>
+      <v-chip class="ma-2" outlined label>{{
+        pgpkey
+          .getKeyId()
+          .toHex()
+          .toUpperCase()
+      }}</v-chip>
       <div class="flex-grow-1"></div>
-      <v-chip class="ma-2" color="red" text-color="white" label v-if="revoked">Revoked</v-chip>
-      <v-chip class="ma-2" color="orange" text-color="white" label v-if="expired">Expired</v-chip>
+      <v-chip class="ma-2" color="red" text-color="white" label v-if="revoked"
+        >Revoked</v-chip
+      >
+      <v-chip
+        class="ma-2"
+        color="orange"
+        text-color="white"
+        label
+        v-if="expired"
+        >Expired</v-chip
+      >
     </v-card-title>
     <v-divider />
     <v-card-text>
@@ -15,57 +30,54 @@
         <v-list-item-content>
           <v-list-item-title>
             <strong>Fingerprint:</strong>
-            {{pgpkey.getFingerprint().toUpperCase()}}
+            {{ pgpkey.getFingerprint().toUpperCase() }}
           </v-list-item-title>
         </v-list-item-content>
         <v-divider />
         <v-list-item-content>
           <v-list-item-title>
             <strong>Algorithm:</strong>
-            {{pgpkey.getAlgorithmInfo()["algorithm"]}}
-            <v-chip
-              class="ma-2"
-              color="primary"
-              label
-              text-color="white"
-            >{{pgpkey.getAlgorithmInfo()["bits"]}} bits</v-chip>
+            {{ pgpkey.getAlgorithmInfo()["algorithm"] }}
+            <v-chip class="ma-2" color="primary" label text-color="white"
+              >{{ pgpkey.getAlgorithmInfo()["bits"] }} bits</v-chip
+            >
           </v-list-item-title>
         </v-list-item-content>
         <v-divider />
         <v-list-item-content>
           <v-list-item-title>
             <strong>Created:</strong>
-            {{pgpkey.getCreationTime()}}
+            {{ pgpkey.getCreationTime() }}
           </v-list-item-title>
         </v-list-item-content>
         <v-divider />
         <v-list-item-content>
           <v-list-item-title>
             <strong>Expires:</strong>
-            {{expirationDate}}
+            {{ expirationDate }}
           </v-list-item-title>
         </v-list-item-content>
       </v-list>
-      <v-subheader>User details</v-subheader>
+      <v-subheader>Primary User</v-subheader>
       <v-list>
         <v-list-item-content>
           <v-list-item-title>
             <strong>Name:</strong>
-            {{user.name}}
+            {{ user.name }}
           </v-list-item-title>
         </v-list-item-content>
         <v-divider />
         <v-list-item-content>
           <v-list-item-title>
             <strong>Email:</strong>
-            {{user.email}}
+            {{ user.email }}
           </v-list-item-title>
         </v-list-item-content>
         <v-divider />
         <v-list-item-content>
           <v-list-item-title>
             <strong>Comment:</strong>
-            {{user.comment}}
+            {{ user.comment }}
           </v-list-item-title>
         </v-list-item-content>
       </v-list>

src/components/KeyInspector.vue

@@ -2,26 +2,43 @@
   <v-container fluid>
     <v-row>
       <v-col>
-        <v-alert dismissible type="error">Do not paste any private key that is currently in use.</v-alert>
+        <v-alert dismissible type="error"
+          >Do not paste any private key that is currently in use.</v-alert
+        >
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
         <v-textarea
           outlined
           autofocus
-          auto-grow
-          rows="10"
-          height="100%"
+          rows="15"
           hint="Paste your public key here. Click outside of the textarea to trigger the evaluation."
           label="Public Key"
           v-on:change="inspect"
           v-model="pubkey"
         ></v-textarea>
       </v-col>
+    </v-row>
+
+    <v-row v-if="error">
       <v-col>
-        <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>
+        <h1>{{ error }}</h1>
+      </v-col>
+    </v-row>
+
+    <v-row v-for="pgpkey in keys" v-bind:key="pgpkey.getFingerprint()">
+      <v-col>
+        <KeyDetails v-bind:pgpkey="pgpkey" />
+      </v-col>
+      <v-col
+        v-for="subkey in pgpkey.subKeys"
+        v-bind:key="subkey.getFingerprint()"
+      >
+        <SubKey v-bind:pgpkey="subkey" />
+      </v-col>
+      <v-col v-for="user in pgpkey.users" v-bind:key="user.userId.userid">
+        <UserId v-bind:user="user" />
       </v-col>
     </v-row>
   </v-container>
@@ -29,11 +46,15 @@
 
 <script>
 import KeyDetails from "./KeyDetails";
+import SubKey from "./SubKey";
+import UserId from "./UserId";
 import * as openpgp from "openpgp";
 
 export default {
   components: {
-    KeyDetails
+    KeyDetails,
+    SubKey,
+    UserId
   },
   data: () => ({
     pubkey: "",

src/components/SubKey.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-card>
+    <v-card-title>
+      <v-icon>mdi-key</v-icon>
+      Subkey
+      <v-chip class="ma-2" outlined label>{{
+        pgpkey
+          .getKeyId()
+          .toHex()
+          .toUpperCase()
+      }}</v-chip>
+      <div class="flex-grow-1"></div>
+      <v-chip class="ma-2" color="red" text-color="white" label v-if="revoked"
+        >Revoked</v-chip
+      >
+      <v-chip
+        class="ma-2"
+        color="orange"
+        text-color="white"
+        label
+        v-if="expired"
+        >Expired</v-chip
+      >
+    </v-card-title>
+    <v-divider />
+    <v-card-text>
+      <v-list>
+        <v-list-item-content>
+          <v-list-item-title>
+            <strong>Fingerprint:</strong>
+            {{ pgpkey.getFingerprint().toUpperCase() }}
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-divider />
+        <v-list-item-content>
+          <v-list-item-title>
+            <strong>Algorithm:</strong>
+            {{ pgpkey.getAlgorithmInfo()["algorithm"] }}
+            <v-chip class="ma-2" color="primary" label text-color="white"
+              >{{ pgpkey.getAlgorithmInfo()["bits"] }} bits</v-chip
+            >
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-divider />
+        <v-list-item-content>
+          <v-list-item-title>
+            <strong>Created:</strong>
+            {{ pgpkey.getCreationTime() }}
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-divider />
+        <v-list-item-content>
+          <v-list-item-title>
+            <strong>Expires:</strong>
+            {{ expirationDate }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: ["pgpkey"],
+  data: () => ({
+    expirationDate: "",
+    expired: false,
+    revoked: false
+  }),
+  created: function() {
+    this.getExpirationDate();
+    this.is_revoked();
+  },
+  methods: {
+    getExpirationDate: async function() {
+      let expirationDate = await this.pgpkey.getExpirationTime();
+      if (expirationDate != Infinity) {
+        this.expirationDate = expirationDate;
+        this.expired = new Date(this.expirationDate) < new Date();
+      } else {
+        this.expirationDate = "Never";
+      }
+    },
+    is_revoked: async function() {
+      this.revoked = await this.pgpkey.isRevoked();
+    }
+  }
+};
+</script>

src/components/UserId.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-card>
+    <v-card-title>
+      <v-icon>mdi-account</v-icon>
+    </v-card-title>
+    <v-divider />
+    <v-card-text>
+      <v-list>
+        <v-list-item-content>
+          <v-list-item-title>
+            <strong>Name:</strong>
+            {{ user.userId.name }}
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-divider />
+        <v-list-item-content>
+          <v-list-item-title>
+            <strong>Email:</strong>
+            {{ user.userId.email }}
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-divider />
+        <v-list-item-content>
+          <v-list-item-title>
+            <strong>Comment:</strong>
+            {{ user.userId.comment }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: ["user"]
+};
+</script>

src/plugins/vuetify.js

@@ -1,10 +1,11 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
+import "@mdi/font/css/materialdesignicons.css";
+import Vue from "vue";
+import Vuetify from "vuetify/lib";
 
 Vue.use(Vuetify);
 
 export default new Vuetify({
   icons: {
-    iconfont: 'mdi',
-  },
+    iconfont: "mdiSvg"
+  }
 });