add base implementation of previous key list

src/components/KeyDetails.vue

@@ -4,24 +4,17 @@
       <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>{{
+      <v-chip class="ma-2" outlined label>
+        {{
         pgpkey
-          .getKeyId()
-          .toHex()
-          .toUpperCase()
-      }}</v-chip>
+        .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>
@@ -38,9 +31,12 @@
           <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-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 />
@@ -95,9 +91,10 @@ export default {
     user: {}
   }),
   created: function() {
-    this.getExpirationDate();
-    this.is_revoked();
-    this.getUserDetails();
+    this.refreshData();
+  },
+  updated: function() {
+    this.refreshData();
   },
   methods: {
     getExpirationDate: async function() {
@@ -114,6 +111,11 @@ export default {
     },
     getUserDetails: async function() {
       this.user = (await this.pgpkey.getPrimaryUser()).user.userId;
+    },
+    refreshData: function() {
+      this.getExpirationDate();
+      this.is_revoked();
+      this.getUserDetails();
     }
   }
 };

src/components/KeyInspect.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <v-row>
+    <v-row v-if="alert">
       <v-col>
         <v-alert
           v-model="alert"
@@ -10,40 +10,48 @@
       </v-col>
     </v-row>
     <v-row>
-      <v-col>
-        <v-textarea
-          outlined
-          autofocus
-          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 cols="3" v-if="previousPubKeys.length > 0">
+        <KeyList v-bind:keys="previousPubKeys" v-on:viewKey="setKey" />
       </v-col>
-    </v-row>
+      <v-col>
+        <v-row>
+          <v-col>
+            <v-textarea
+              outlined
+              autofocus
+              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>
-        <h1>{{ error }}</h1>
-      </v-col>
-    </v-row>
+        <v-row v-if="error">
+          <v-col>
+            <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-row v-if="key">
+          <v-col>
+            <KeyDetails v-bind:pgpkey="key" />
+          </v-col>
+          <v-col v-for="subkey in key.subKeys" v-bind:key="subkey.getFingerprint()">
+            <SubKey v-bind:pgpkey="subkey" />
+          </v-col>
+          <v-col v-for="user in key.users" v-bind:key="user.userId.userid">
+            <UserId v-bind:user="user" />
+          </v-col>
+        </v-row>
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script>
+import KeyList from "./KeyList";
 import KeyDetails from "./KeyDetails";
 import SubKey from "./SubKey";
 import UserId from "./UserId";
@@ -51,25 +59,55 @@ import * as openpgp from "openpgp";
 
 export default {
   components: {
+    KeyList,
     KeyDetails,
     SubKey,
     UserId
   },
   data: () => ({
     pubkey: "",
-    keys: [],
+    key: null,
     error: "",
-    alert: localStorage.getItem("keyAlertDismissed") == "true" ? false : true
+    alert: localStorage.getItem("keyAlertDismissed") == "true" ? false : true,
+    previousPubKeys: JSON.parse(localStorage.getItem("previousPubKeys")) || []
   }),
   methods: {
     inspect: async function() {
       try {
-        this.keys = (await openpgp.key.readArmored(this.pubkey)).keys;
+        this.key = (await openpgp.key.readArmored(this.pubkey)).keys[0];
         this.error = "";
       } catch (e) {
-        this.keys = [];
+        this.key = null;
         this.error = "Unable to parse the provided key";
       }
+
+      if (this.key) {
+        this.updateKeyList();
+      }
+    },
+    updateKeyList: async function() {
+      let fingerprint = this.key.getFingerprint().toUpperCase();
+      let user = (await this.key.getPrimaryUser()).user.userId;
+      let found = this.previousPubKeys.find(
+        key => key.fingerprint == fingerprint
+      );
+      if (!found) {
+        this.previousPubKeys.unshift({
+          fingerprint: fingerprint,
+          created: this.key.getCreationTime(),
+          added: new Date().toISOString(),
+          email: user.email,
+          pubkey: this.pubkey
+        });
+        localStorage.setItem(
+          "previousPubKeys",
+          JSON.stringify(this.previousPubKeys)
+        );
+      }
+    },
+    setKey: function(key) {
+      this.pubkey = key;
+      this.inspect();
     }
   },
   watch: {

src/components/KeyList.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-card>
+    <v-toolbar dark>
+      <v-toolbar-title>Previous Keys</v-toolbar-title>
+    </v-toolbar>
+    <v-list two-line>
+      <v-list-item-group>
+        <template v-for="(item, index) in keys">
+          <v-list-item :key="item.fingerprint" @click="selectKey(index)">
+            <template>
+              <v-list-item-content>
+                <v-list-item-title v-text="item.email"></v-list-item-title>
+                <v-list-item-subtitle class="text--primary" v-text="item.fingerprint"></v-list-item-subtitle>
+                <v-list-item-subtitle v-text="item.created"></v-list-item-subtitle>
+              </v-list-item-content>
+
+              <v-list-item-action>
+                <v-list-item-action-text v-text="item.added"></v-list-item-action-text>
+              </v-list-item-action>
+            </template>
+          </v-list-item>
+
+          <v-divider v-if="index + 1 < keys.length" :key="index"></v-divider>
+        </template>
+      </v-list-item-group>
+    </v-list>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: ["keys"],
+  methods: {
+    selectKey: function(index) {
+      this.$emit("viewKey", this.keys[index].pubkey);
+    }
+  }
+};
+</script>