Fetch the list of frontends and save them in state

src/api/settings.js

@@ -68,4 +68,23 @@ export async function removeSettings(configs, authHost, token) {
   })
 }
 
+export async function fetchFrontends(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/frontends`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function installFrontend(name, ref, file, buildUrl, buildDir, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/frontends/install`,
+    method: 'post',
+    headers: authHeaders(token),
+    data: { name, ref, file, build_url: buildUrl, build_dir: buildDir }
+  })
+}
+
 const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/store/modules/settings.js

@@ -1,6 +1,7 @@
 import {
   deleteInstanceDocument,
   fetchDescription,
+  fetchFrontends,
   fetchSettings,
   getInstanceDocument,
   removeSettings,
@@ -13,6 +14,7 @@ const settings = {
   state: {
     activeTab: 'instance',
     configDisabled: true,
+    frontends: [],
     db: {},
     description: [],
     instancePanel: '',
@@ -41,6 +43,9 @@ const settings = {
     SET_DESCRIPTION: (state, data) => {
       state.description = data
     },
+    SET_FRONTENDS: (state, data) => {
+      state.frontends = data
+    },
     SET_LOADING: (state, status) => {
       state.loading = status
     },
@@ -86,6 +91,10 @@ const settings = {
     }
   },
   actions: {
+    async FetchFrontends({ commit, getters }) {
+      const { data } = await fetchFrontends(getters.authHost, getters.token)
+      commit('SET_FRONTENDS', data)
+    },
     async FetchInstanceDocument({ commit, getters }, name) {
       const { data } = await getInstanceDocument(name, getters.authHost, getters.token)
       if (name === 'instance-panel') {

src/views/settings/components/Frontend.vue

@@ -123,6 +123,9 @@ export default {
       return _.get(this.settings.settings, [':pleroma', ':static_fe']) || {}
     }
   },
+  async mounted() {
+    await this.$store.dispatch('FetchFrontends')
+  },
   methods: {
     async onSubmit() {
       try {