add web key directory search

src/App.vue

@@ -6,6 +6,9 @@
         <span class="font-weight-light">Check the details of any PGP key</span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
+      <v-btn text @click.stop="searchDialog = true">
+        <span class="mr-2">Search Key</span>
+      </v-btn>
       <v-btn text v-on:click="changeTheme">
         <span class="mr-2">Swicth to {{darkTheme ? "light theme" : "dark theme"}}</span>
       </v-btn>
@@ -15,7 +18,12 @@
     </v-app-bar>
 
     <v-content>
-      <KeyInspect />
+      <KeyInspect v-bind:initialKey="searchKey" />
+      <DirSearch
+        v-bind:dialog="searchDialog"
+        v-on:dialogClosed="closeDialog"
+        v-on:keyFound="setSearchKey"
+      />
     </v-content>
 
     <v-footer>
@@ -31,14 +39,18 @@
 
 <script>
 import KeyInspect from "./components/KeyInspect";
+import DirSearch from "./components/DirSearch";
 
 export default {
   name: "App",
   components: {
-    KeyInspect
+    KeyInspect,
+    DirSearch
   },
   data: () => ({
-    darkTheme: true
+    darkTheme: true,
+    searchDialog: false,
+    searchKey: ""
   }),
   created: function() {
     this.$vuetify.theme.dark = this.darkTheme;
@@ -47,6 +59,12 @@ export default {
     changeTheme: function() {
       this.darkTheme = !this.darkTheme;
       this.$vuetify.theme.dark = this.darkTheme;
+    },
+    closeDialog: function() {
+      this.searchDialog = false;
+    },
+    setSearchKey: function(armoredKey) {
+      this.searchKey = armoredKey;
     }
   }
 };

src/components/DirSearch.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-dialog v-model="dialog" width="500">
+    <v-card>
+      <v-card-title class="headline" primary-title>Key Search</v-card-title>
+      <v-card-text>
+        <p>
+          Find a public key based on a given email address. Kinspect will do a
+          <a
+            href="https://wiki.gnupg.org/WKD"
+          >
+            Web Key Directory
+            (WKD)
+          </a> lookup to find and select the correct public key.
+        </p>
+        <v-text-field v-model="email" :rules="emailRules" label="Email Address" required></v-text-field>
+        <p v-if="error">{{error}}</p>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text @click="searchKey()">Search</v-btn>
+        <v-btn color="primary" text @click="closeDialog()">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import * as openpgp from "openpgp";
+
+export default {
+  props: ["dialog"],
+  data: () => ({
+    email: "",
+    emailRules: [
+      v => !!v || "E-mail is required",
+      v => /.+@.+\..+/.test(v) || "E-mail must be valid"
+    ],
+    error: ""
+  }),
+  methods: {
+    closeDialog: function() {
+      this.$emit("dialogClosed");
+    },
+    searchKey: async function() {
+      this.error = "";
+      let wkd = new openpgp.WKD();
+      try {
+        let result = await wkd.lookup({ email: this.email });
+        let key = result.keys[0];
+        this.$emit("keyFound", key.armor());
+        this.$emit("dialogClosed");
+      } catch (e) {
+        this.error = "Unable to find the key for the specified email address.";
+      }
+    }
+  }
+};
+</script>

src/components/KeyInspect.vue

@@ -68,13 +68,20 @@ export default {
     SubKey,
     UserId
   },
-  data: () => ({
-    pubkey: "",
-    key: null,
-    error: "",
-    alert: localStorage.getItem("keyAlertDismissed") == "true" ? false : true,
-    previousPubKeys: JSON.parse(localStorage.getItem("previousPubKeys")) || []
-  }),
+  props: {
+    initialKey: {
+      default: ""
+    }
+  },
+  data: function() {
+    return {
+      pubkey: this.initialKey ? this.initialKey : "",
+      key: null,
+      error: "",
+      alert: localStorage.getItem("keyAlertDismissed") == "true" ? false : true,
+      previousPubKeys: JSON.parse(localStorage.getItem("previousPubKeys")) || []
+    };
+  },
   methods: {
     inspect: async function() {
       try {
@@ -121,6 +128,10 @@ export default {
   watch: {
     alert: function() {
       localStorage.setItem("keyAlertDismissed", true);
+    },
+    initialKey: function(newValue) {
+      this.pubkey = newValue;
+      this.inspect();
     }
   }
 };

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  devServer: {
+    https: true,
+  },
+};