Verified Commit bb927ae9 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Added view to debug profile

parent 7fd619af
Pipeline #4494 passed with stages
in 2 minutes and 32 seconds
...@@ -22,6 +22,12 @@ export default new Router({ ...@@ -22,6 +22,12 @@ export default new Router({
props: true, props: true,
component: () => import(/* webpackChunkName: "main" */ './views/ConnectForm.vue') component: () => import(/* webpackChunkName: "main" */ './views/ConnectForm.vue')
}, },
path: '/debug',
name: 'debug',
props: (route) => ({ source: route.query.source || null, id: || null }),
component: () => import(/* webpackChunkName: "main" */ './views/Debug.vue')
{ {
path: '/connect/:sourceId/callback', path: '/connect/:sourceId/callback',
name: 'connect.source.callback', name: 'connect.source.callback',
<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="" :value="">{{ sources.label }}</option>
<label>Account Type</label>
<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>
<button type="submit" class="waves-effect waves-light btn">Check</button>
<div v-if="isLoading" class="progress">
<div class="indeterminate"></div>
<div v-else-if="checkResult">
<div v-if="checkResult && checkResult.status === 'ok'" class="card-panel">
The following Retribute data was extracted from the profile:
<table class="responsive-table">
<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 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>
<tr v-for="mean in" :key="JSON.stringify(mean)">
<td>{{ mean.provider }}</td>
<a v-if="mean.url" target="_blank" rel="noopener noreferrer" :href="mean.url">{{ }}</a>
<span v-else>{{ }}</span>
<span v-if="mean.summary">{{ mean.summary }}</span>
{{ mean.weight }}
<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>
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:
<ul class="browser-default">
<li v-for="provider in providers" :key="">{{ provider.label }}</li>
<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.
import sources from "@/sources"
import axios from "axios"
import config from "@/config"
export default {
props: ['source', 'id'],
data () {
return {
isLoading: false,
currentSourceType: this.source,
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 == self.currentSourceType
methods: {
async fetchProviders () {
const client = axios.create()
let url = config.RetributeAPIUrl + `v1/providers`
const response = await axios.get(url)
this.providers =
async fetchSources () {
const client = axios.create()
let url = config.RetributeAPIUrl + `v1/sources`
const response = await axios.get(url)
this.sources =
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',
} catch (e) {
this.checkResult = {
status: 'error',
error: e,
this.isLoading = false
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment