working api key settings

src/background.js

@@ -1,6 +1,6 @@
 chrome.runtime.onInstalled.addListener(function() {
     var data = {
-        apiKey: "the key",
+        apiKey: null,
         groupings: []
     };
 

src/page/App.vue

@@ -1,6 +1,27 @@
 <template>
-  <div class="fluid-container p-2">
-    <h1>Pinboard Groupings</h1>
+  <div class="app">
+    <div class="fluid-container">
+      <h1>Pinboard Groupings</h1>
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">API key</h5>          
+          <form @submit.prevent="save" class="form">
+            <div class="input-group mb-2" v-if="!apiKey">
+              <label class="sr-only" for="apiKey">Pinboard API Key</label>
+              <input type="text" class="form-control" id="apiKey"
+                      v-model="form.apiKey"
+                      placeholder="Enter Pinboard API key">
+            </div>        
+            <p class="card-text" v-else>
+              {{ apiKey }}
+            </p>
+            <button type="submit" class="btn btn-primary btn-sm" v-if="!apiKey">save</button>
+            <button type="button" class="btn btn-secondary btn-sm" @click.prevent="edit" v-else>edit</button>
+          </form>
+
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,8 +29,27 @@
 export default {
   data () {
     return {
-      apiKey: "bob",
-      groupings: []
+      apiKey: null,
+      groupings: [],
+      form: {
+        apiKey: null
+      }
+    }
+  },
+  methods: {
+    save(event) {
+      var data = {
+        apiKey: this.form.apiKey,
+        groupings: this.groupings
+      };
+      chrome.storage.sync.set(data, () => {
+        this.apiKey = data.apiKey;
+        this.groupings = data.groupings;
+      });
+    },
+    edit(event) {
+      this.form.apiKey = this.apiKey;
+      this.apiKey = null;
     }
   },
   created() {
@@ -22,5 +62,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'node_modules/bootstrap/scss/bootstrap';
+
+.app {
+  font-size: 1rem;
+}
 
 </style>

src/page/groupings.js

@@ -4,6 +4,5 @@ import App from './App'
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
-
   render: h => h(App)
 })