add clear previous keys feature and a set of other improvements

package-lock.json

@@ -8671,9 +8671,9 @@
       "dev": true
     },
     "openpgp": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/openpgp/-/openpgp-4.6.2.tgz",
-      "integrity": "sha512-zgQmTZjKxjI2vs++5Ejs8wQbs9+YekOAulfq8YxKV7uUxcNxDE2IIh88I/RmjPOvpxCrV7kNqSBwVQMzZxTtDQ==",
+      "version": "4.10.4",
+      "resolved": "https://registry.npmjs.org/openpgp/-/openpgp-4.10.4.tgz",
+      "integrity": "sha512-JMceIvDDE9Qko2AsMpVgf4YM7h7zPt3sZT0qnOIvwynuDuTs+wL5ht37t894hirgzSHr2d+64nEnKbBtwoYwSQ==",
       "requires": {
         "asn1.js": "^5.0.0",
         "node-fetch": "^2.1.2",
@@ -8681,13 +8681,14 @@
       },
       "dependencies": {
         "asn1.js": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.2.0.tgz",
-          "integrity": "sha512-Q7hnYGGNYbcmGrCPulXfkEw7oW7qjWeM4ZTALmgpuIcZLxyqqKYWxCZg2UBm8bklrnB4m2mGyJPWfoktdORD8A==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.3.0.tgz",
+          "integrity": "sha512-WHnQJFcOrIWT1RLOkFFBQkFVvyt9BPOOrH+Dp152Zk4R993rSzXUGPmkybIcUFhHE2d/iHH+nCaOWVCDbO8fgA==",
           "requires": {
             "bn.js": "^4.0.0",
             "inherits": "^2.0.1",
-            "minimalistic-assert": "^1.0.0"
+            "minimalistic-assert": "^1.0.0",
+            "safer-buffer": "^2.1.0"
           }
         }
       }
@@ -10349,8 +10350,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
       "version": "1.22.12",

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "openpgp": "^4.6.2",
+    "openpgp": "^4.10.4",
     "vue": "^2.6.10",
     "vuetify": "^2.0.0"
   },

src/components/KeyDetails.vue

@@ -90,10 +90,12 @@ export default {
     revoked: false,
     user: {}
   }),
-  created: function() {
-    this.refreshData();
+  watch: {
+    pgpkey: function() {
+      this.refreshData();
+    }
   },
-  updated: function() {
+  created: function() {
     this.refreshData();
   },
   methods: {

src/components/KeyInspect.vue

@@ -11,7 +11,11 @@
     </v-row>
     <v-row>
       <v-col cols="3" v-if="previousPubKeys.length > 0">
-        <KeyList v-bind:keys="previousPubKeys" v-on:viewKey="setKey" />
+        <KeyList
+          v-bind:keys="previousPubKeys"
+          v-on:viewKey="setKey"
+          v-on:clearKeys="clearPrevKeys"
+        />
       </v-col>
       <v-col>
         <v-row>
@@ -94,9 +98,9 @@ export default {
       if (!found) {
         this.previousPubKeys.unshift({
           fingerprint: fingerprint,
-          created: this.key.getCreationTime(),
-          added: new Date().toISOString(),
+          name: user.name,
           email: user.email,
+          added: new Date().toLocaleDateString(),
           pubkey: this.pubkey
         });
         localStorage.setItem(
@@ -108,6 +112,10 @@ export default {
     setKey: function(key) {
       this.pubkey = key;
       this.inspect();
+    },
+    clearPrevKeys: function() {
+      this.previousPubKeys = [];
+      localStorage.setItem("previousPubKeys", "[]");
     }
   },
   watch: {

src/components/KeyList.vue

@@ -2,6 +2,10 @@
   <v-card>
     <v-toolbar dark>
       <v-toolbar-title>Previous Keys</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon @click.native="clearAllKeys">
+        <v-icon>mdi-checkbox-marked-circle</v-icon>
+      </v-btn>
     </v-toolbar>
     <v-list two-line>
       <v-list-item-group>
@@ -9,9 +13,9 @@
           <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-title v-text="item.name"></v-list-item-title>
+                <v-list-item-subtitle class="text--primary" v-text="item.email"></v-list-item-subtitle>
+                <v-list-item-subtitle v-text="item.fingerprint"></v-list-item-subtitle>
               </v-list-item-content>
 
               <v-list-item-action>
@@ -33,6 +37,9 @@ export default {
   methods: {
     selectKey: function(index) {
       this.$emit("viewKey", this.keys[index].pubkey);
+    },
+    clearAllKeys: function() {
+      this.$emit("clearKeys");
     }
   }
 };

src/components/SubKey.vue

@@ -1,26 +1,18 @@
 <template>
   <v-card>
     <v-card-title>
-      <v-icon>mdi-key</v-icon>
-      Subkey
-      <v-chip class="ma-2" outlined label>{{
+      <v-icon>mdi-key</v-icon>Subkey
+      <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>
@@ -36,9 +28,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 />
@@ -68,14 +63,18 @@ export default {
     expired: false,
     revoked: false
   }),
+  watch: {
+    pgpkey: function() {
+      this.refreshData();
+    }
+  },
   created: function() {
-    this.getExpirationDate();
-    this.is_revoked();
+    this.refreshData();
   },
   methods: {
     getExpirationDate: async function() {
       let expirationDate = await this.pgpkey.getExpirationTime();
-      if (expirationDate != Infinity) {
+      if (expirationDate) {
         this.expirationDate = expirationDate;
         this.expired = new Date(this.expirationDate) < new Date();
       } else {
@@ -84,6 +83,10 @@ export default {
     },
     is_revoked: async function() {
       this.revoked = await this.pgpkey.isRevoked();
+    },
+    refreshData: function() {
+      this.getExpirationDate();
+      this.is_revoked();
     }
   }
 };