Added view to debug profile

src/router.js

@@ -22,6 +22,12 @@ export default new Router({
       props: true,
       component: () => import(/* webpackChunkName: "main" */ './views/ConnectForm.vue')
     },
+    {
+      path: '/debug',
+      name: 'debug',
+      props: (route) => ({ source: route.query.source || null, id: route.query.id || null }),
+      component: () => import(/* webpackChunkName: "main" */ './views/Debug.vue')
+    },
     {
       path: '/connect/:sourceId/callback',
       name: 'connect.source.callback',

src/views/Debug.vue

+<template>
+  <section class="text container">
+    <h2>Check your Retribute profile</h2>
+    <p>If you're a creator and want to see what kind of information Retribute extract your profile, use the form below.
+      This will also refresh any cached data we may have for this profile.</p>
+    <form @submit.prevent="check" class="section">
+      <div class="row">
+        <div class="input-field col s12 l6">
+          <select required v-model="currentSourceType">
+            <option v-for="sources in sources" :key="sources.id" :value="sources.id">{{ sources.label }}</option>
+          </select>
+          <label>Account Type</label>
+        </div>
+        <div class="input-field col s12 l6" v-if="currentSource">
+          <input required v-model="currentId" id="id" type="text" :placeholder="currentSource.example" class="validate">
+          <label class="active" for="username">Account ID</label>
+        </div>
+      </div>
+      <button type="submit" class="waves-effect waves-light btn">Check</button>
+    </form>
+    <div v-if="isLoading" class="progress">
+      <div class="indeterminate"></div>
+    </div>
+    <div v-else-if="checkResult">
+      <h5>Results</h5>
+      <div v-if="checkResult && checkResult.status === 'ok'" class="card-panel">
+        <div>
+          <p>
+            The following Retribute data was extracted from the profile:
+          </p>
+          <table class="responsive-table">
+            <thead>
+              <tr>
+                  <th>Platform</th>
+                  <th>ID</th>
+                  <th>
+                    Label
+                    <span class="tooltipped" v-tooltip data-tooltip="Labels are extracted from the link anchor or profile metadata and can be used to customize how a contribution platform is presented to your supporters.">
+                      <i class="tiny material-icons">help</i>
+                    </span>
+                  </th>
+                  <th>
+                    Weight
+                    <span class="tooltipped" v-tooltip data-tooltip="Links that are found first in your profile get a higher weight and are displayed first by Retribute">
+                      <i class="tiny material-icons">help</i>
+                    </span>
+                  </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="mean in checkResult.data.means" :key="JSON.stringify(mean)">
+                <td>{{ mean.provider }}</td>
+                <td>
+                  <a v-if="mean.url" target="_blank" rel="noopener noreferrer" :href="mean.url">{{ mean.id }}</a>
+                  <span v-else>{{ mean.id }}</span>
+                </td>
+                <td>
+                  <span v-if="mean.summary">{{ mean.summary }}</span>
+                </td>
+                <td>
+                  {{ mean.weight }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div v-else-if="checkResult && checkResult.status === 'error' && checkResult.error.response && checkResult.error.response.status === 400" class="card-panel yellow lighten-3">
+        <h5>No Retribute information found</h5>
+        <p>
+            This profile was successfully checked, but no meaningful Retribute info was found in it. Ensure
+            the profile includes one or more links to the following donation platforms:
+          </p>
+          <ul class="browser-default">
+            <li v-for="provider in providers" :key="provider.id">{{ provider.label }}</li>
+          </ul>
+      </div>
+      <div v-else-if="checkResult && checkResult.status === 'error'" class="card-panel pink lighten-1">
+        <h5 class="white-text">Error: {{ checkResult.error.message }}</h5>
+        <p class="white-text">
+          We cannot fetch info for this profile. Ensure the account type and ID are valid.
+        </p>
+      </div>
+    </div>
+  </section>
+
+</template>
+
+<script>
+import sources from "@/sources"
+import axios from "axios"
+import config from "@/config"
+
+
+export default {
+  props: ['source', 'id'],
+  data () {
+    return {
+      isLoading: false,
+      currentSourceType: this.source,
+      currentId: this.id,
+      sources: [],
+      providers: [],
+      checkResult: null,
+    }
+  },
+  async created () {
+    await this.fetchSources()
+    await this.fetchProviders()
+    if (this.currentSourceType && this.currentId) {
+      await this.check()
+    }
+  },
+  computed: {
+    currentSource () {
+      let self = this
+      return this.sources.filter((s) => {
+        return s.id == self.currentSourceType
+      })[0]
+    }
+  },
+
+  methods: {
+    async fetchProviders () {
+      const client = axios.create()
+      let url = config.RetributeAPIUrl + `v1/providers`
+      const response = await axios.get(url)
+      this.providers = response.data
+    },
+    async fetchSources () {
+      const client = axios.create()
+      let url = config.RetributeAPIUrl + `v1/sources`
+      const response = await axios.get(url)
+      this.sources = response.data
+      this.$nextTick(()=> {
+        let elems = document.querySelectorAll('select')
+        M.FormSelect.init(elems, {})
+      })
+    },
+    async check () {
+      this.isLoading = true
+      this.checkResult = null
+      const client = axios.create()
+      let url = config.RetributeAPIUrl + `v1/search/` + encodeURIComponent(`${this.currentSourceType.trim()}:${this.currentId.trim()}`)
+      try {
+        const response = await axios.get(url, {params: {nocache: 'true'}})
+        this.checkResult = {
+          status: 'ok',
+          data: response.data
+        }
+      } catch (e) {
+        this.checkResult = {
+          status: 'error',
+          error: e,
+        }
+      }
+      this.isLoading = false
+    }
+  },
+}
+</script>