Added delete account option

src/App.vue

@@ -27,6 +27,9 @@
 </template>
 
 <style>
+a {
+  cursor: pointer;
+}
 main {
   padding: 1em 0;
 }

src/components/Suggestions.vue

@@ -16,9 +16,26 @@
           </div>
           {{ results[account.id].results.status }}
         </div>
-        <a @click="fetch(account.id)" class="secondary-content"><i class="material-icons">refresh</i></a>
+        <div class="secondary-content material-icons">
+          <a
+            title="Disconnect this account…"
+            @click="accountToDisconnect = account"
+            href="#disconnect-modal"
+            class="modal-trigger red-text text-darken-1"><i class="material-icons">delete_forever</i></a>
+          <a title="Refresh data for this account only" @click="fetch(account.id)" class="teal-text text-darken-1"><i class="material-icons">refresh</i></a><br>
+        </div>
       </li>
     </ul>
+    <div id="disconnect-modal" class="modal">
+      <div v-if="accountToDisconnect" class="modal-content">
+        <h4>Do you want to disconnect the account {{ accountToDisconnect._source.getDisplayName(accountToDisconnect)  }}?</h4>
+        <p>This will remove any associated credential, suggestions and data from your browser cache. You can always reconnect to this account afterwards by doing the "Connect" procedure again.</p>
+      </div>
+      <div class="modal-footer">
+        <a href="#!" @click="accountToDisconnect = null" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
+        <a @click="$store.commit('disconnectAccount', accountToDisconnect)"  href="#!" class="modal-close waves-effect waves-green btn-flat">Confirm</a>
+      </div>
+    </div>
     <h2>
       Suggestions
       <button
@@ -107,6 +124,8 @@ import merge from 'lodash/merge'
 import chunk from 'lodash/chunk'
 import axios from 'axios'
 
+import { mapGetters } from 'vuex'
+
 export default {
   data () {
     let filters = this.$store.state.cache.suggestionFilters || {}
@@ -121,12 +140,19 @@ export default {
       retributeProfiles: this.$store.state.cache.retributeProfiles || {},
       loadingRetributeProfiles: [],
       filters: filters,
-      providers: this.$store.state.cache.providers || []
+      accountToDisconnect: null,
     }
   },
+  mounted () {
+    let elems = document.querySelectorAll('.modal')
+    M.Modal.init(elems, {})
+  },
   computed: {
+    ...mapGetters([
+      'sortedAccounts',
+    ]),
     accounts () {
-      return this.$store.getters.sortedAccounts.map((a) => {
+      return this.sortedAccounts.map((a) => {
         a._source = sources.sources[a.source]
         return a
       })
@@ -342,6 +368,13 @@ export default {
         })
       },
       immediate: true
+    },
+    sortedAccounts: {
+      handler (v) {
+        let elems = document.querySelectorAll('.modal')
+        M.Modal.init(elems, {})
+      },
+      immediate: true
     }
   }
 }

src/store.js

@@ -24,7 +24,10 @@ export const storeConfig = {
     addAccount (state, payload) {
       const id = sources.sources[payload.source].authDataToKey(payload)
       payload.id = id
-      state.accounts[id] = payload
+      Vue.set(state.accounts, id, payload)
+    },
+    disconnectAccount (state, {id}) {
+      Vue.delete(state.accounts, id)
     },
     setRecursiveState (state, {key, suffix, value}) {
       if (suffix) {