Debug.vue 5.95 KB
Newer Older
Eliot Berriot's avatar
Eliot Berriot committed
1
2
3
<template>
  <section class="text container">
    <h2>Check your Retribute profile</h2>
Eliot Berriot's avatar
Type    
Eliot Berriot committed
4
    <p>If you're a creator and want to see what kind of information Retribute extract from your profile, use the form below.
Eliot Berriot's avatar
Eliot Berriot committed
5
    <p>Retribute will also keep profiles in cache for a few hours, which can be problematic when you want to check that your changes are valid. This from will also refresh any cached data we may have.</p>
Eliot Berriot's avatar
Eliot Berriot committed
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <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">
Eliot Berriot's avatar
Eliot Berriot committed
25
26
27
28
      <h5>
        Results
        <router-link :to="{name: 'debug', query: {source: currentSourceType, id: currentId}}">(permalink)</router-link>
      </h5>
Eliot Berriot's avatar
Eliot Berriot committed
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
      <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,
Eliot Berriot's avatar
Eliot Berriot committed
103
      currentSourceType: this.source || 'webfinger',
Eliot Berriot's avatar
Eliot Berriot committed
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
      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
Eliot Berriot's avatar
Eliot Berriot committed
160
    },
Eliot Berriot's avatar
Eliot Berriot committed
161
162
163
  },
}
</script>
Eliot Berriot's avatar
Eliot Berriot committed
164
165
166
167
168
169
170
<style scoped>
td,
th {
  word-wrap: break-word;
  max-width: 150px;
}
</style>