Add ability to manage relays

src/api/relays.js

+import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import { baseName } from './utils'
+
+export async function fetchRelays(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/relay',
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function addRelay(relay, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/relay',
+    method: 'post',
+    headers: authHeaders(token),
+    data: { relay_url: relay }
+  })
+}
+
+export async function deleteRelay(relay, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/relay',
+    method: 'delete',
+    headers: authHeaders(token),
+    data: { relay_url: `https://${relay}/actor` }
+  })
+}
+
+const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/lang/en.js

@@ -312,6 +312,7 @@ export default {
     rateLimiters: 'Rate limiters',
     database: 'Database',
     other: 'Other',
+    relays: 'Relays',
     success: 'Settings changed successfully!'
   },
   invites: {

src/store/index.js

@@ -5,6 +5,7 @@ import errorLog from './modules/errorLog'
 import moderationLog from './modules/moderationLog'
 import invites from './modules/invites'
 import permission from './modules/permission'
+import relays from './modules/relays'
 import reports from './modules/reports'
 import settings from './modules/settings'
 import tagsView from './modules/tagsView'
@@ -23,6 +24,7 @@ const store = new Vuex.Store({
     moderationLog,
     invites,
     permission,
+    relays,
     reports,
     settings,
     tagsView,

src/store/modules/relays.js

+import { fetchRelays, addRelay, deleteRelay } from '@/api/relays'
+
+const relays = {
+  state: {
+    fetchedRelays: [],
+    loading: true
+  },
+  mutations: {
+    SET_LOADING: (state, loading) => {
+      state.loading = loading
+    },
+    SET_RELAYS: (state, relays) => {
+      state.fetchedRelays = relays
+    },
+    ADD_RELAY: (state, relay) => {
+      state.fetchedRelays = [...state.fetchedRelays, relay]
+    },
+    DELETE_RELAY: (state, relay) => {
+      state.fetchedRelays = state.fetchedRelays.filter(fetchedRelay => fetchedRelay !== relay)
+    }
+  },
+  actions: {
+    async FetchRelays({ commit, getters }) {
+      commit('SET_LOADING', true)
+
+      const response = await fetchRelays(getters.authHost, getters.token)
+
+      commit('SET_RELAYS', response.data.relays)
+      commit('SET_LOADING', false)
+    },
+    async AddRelay({ commit, getters }, relay) {
+      commit('ADD_RELAY', relay)
+
+      await addRelay(relay, getters.authHost, getters.token)
+    },
+    async DeleteRelay({ commit, getters }, relay) {
+      commit('DELETE_RELAY', relay)
+
+      await deleteRelay(relay, getters.authHost, getters.token)
+    }
+  }
+}
+
+export default relays

src/views/settings/components/Relays.vue

+<template>
+  <div v-if="!loading">
+    <el-row :gutter="5">
+      <el-col :span="8">
+        <el-input v-model="newRelay" placeholder="Follow new relay" @keyup.enter.native="followRelay"/>
+      </el-col>
+      <el-col :span="8">
+        <el-button @click.native="followRelay">Follow</el-button>
+      </el-col>
+    </el-row>
+    <el-table :data="relaysTable">
+      <el-table-column
+        prop="instance"
+        label="Instance URL"/>
+      <el-table-column fixed="right" width="120">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native="deleteRelay(scope.row.instance)"
+          >Delete</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Relays',
+  data() {
+    return {
+      newRelay: ''
+    }
+  },
+  computed: {
+    relays() {
+      return this.$store.state.relays.fetchedRelays
+    },
+    relaysTable() {
+      return this.relays.map(relay => {
+        return { instance: relay }
+      })
+    },
+    loading() {
+      return this.$store.state.relays.loading
+    }
+  },
+  mounted() {
+    this.$store.dispatch('FetchRelays')
+  },
+  methods: {
+    followRelay() {
+      this.$store.dispatch('AddRelay', this.newRelay)
+    },
+    deleteRelay(relay) {
+      this.$store.dispatch('DeleteRelay', relay)
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../styles/main';
+@include settings
+</style>

src/views/settings/components/index.js

@@ -17,5 +17,6 @@ export { default as Metadata } from './Metadata'
 export { default as Mrf } from './MRF'
 export { default as Other } from './Other'
 export { default as RateLimiters } from './RateLimiters'
+export { default as Relays } from './Relays'
 export { default as Upload } from './Upload'
 export { default as WebPush } from './WebPush'

src/views/settings/index.vue

@@ -56,6 +56,9 @@
       <el-tab-pane :label="$t('settings.rateLimiters')">
         <rate-limiters/>
       </el-tab-pane>
+      <el-tab-pane :label="$t('settings.relays')">
+        <relays/>
+      </el-tab-pane>
       <el-tab-pane :label="$t('settings.upload')">
         <upload/>
       </el-tab-pane>
@@ -70,10 +73,10 @@
 </template>
 
 <script>
-import { ActivityPub, Authentication, AutoLinker, Captcha, Database, Endpoint, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Upload, WebPush } from './components'
+import { ActivityPub, Authentication, AutoLinker, Captcha, Database, Endpoint, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Relays, Upload, WebPush } from './components'
 
 export default {
-  components: { ActivityPub, Authentication, AutoLinker, Captcha, Database, Endpoint, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Upload, WebPush },
+  components: { ActivityPub, Authentication, AutoLinker, Captcha, Database, Endpoint, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Relays, Upload, WebPush },
   computed: {
     isMobile() {
       return this.$store.state.app.device === 'mobile'