From 04d2f4bcca406ddc485a185cbb077c4333256b97 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 21 Feb 2021 18:04:41 +0300
Subject: [PATCH 01/10] Fetch the list of frontends and save them in state

---
 src/api/settings.js                        | 19 +++++++++++++++++++
 src/store/modules/settings.js              |  9 +++++++++
 src/views/settings/components/Frontend.vue |  3 +++
 3 files changed, 31 insertions(+)

diff --git a/src/api/settings.js b/src/api/settings.js
index 8c543a7e..8596d18a 100644
--- a/src/api/settings.js
+++ b/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()}` } : {}
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 6e30a21f..df664689 100644
--- a/src/store/modules/settings.js
+++ b/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') {
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 894f8f51..ea341498 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/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 {

From 21976f38285743bb60c30dc8ffdb939eac9df19d Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 23 Feb 2021 22:23:19 +0300
Subject: [PATCH 02/10] Add table with available frontends on Frontend settings
 tab

---
 src/lang/en.js                             |  9 +++--
 src/views/settings/components/Frontend.vue | 42 ++++++++++++++++++++++
 src/views/settings/styles/main.scss        |  4 +++
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index e21a156d..227eb2db 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -455,7 +455,13 @@ export default {
     uploadImage: 'Upload image',
     remove: 'Remove',
     instancePanel: 'Instance Panel Document',
-    termsOfServices: 'Terms of Service'
+    termsOfServices: 'Terms of Service',
+    availableFrontends: 'Available Frontends',
+    installFrontends: 'This is the list of available frontends. You can switch to one of the listed frontends or specify all the required options and install another frontend',
+    install: 'Install',
+    installed: 'Installed',
+    name: 'Name',
+    git: 'Git'
   },
   invites: {
     inviteTokens: 'Invite tokens',
@@ -540,6 +546,5 @@ export default {
     emptyPack: 'This emoji pack is empty',
     emojiWarning: 'Pack names cannot include any of the following characters: # / < > & +',
     image: 'Image'
-
   }
 }
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index ea341498..ee01e3cd 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -1,5 +1,44 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
+    <el-form :label-position="labelPosition" :label-width="labelWidth">
+      <el-form-item class="description-container">
+        <span class="setting-label">{{ $t('settings.availableFrontends') }}</span>
+        <span class="expl no-top-margin"><p>{{ $t('settings.installFrontends') }}</p></span>
+      </el-form-item>
+      <el-form-item>
+        <el-table
+          :data="availableFrontends"
+          class="frontends-table">
+          <el-table-column
+            :label="$t('settings.name')"
+            prop="name"
+            width="120"/>
+          <el-table-column
+            :label="$t('settings.git')"
+            prop="git"/>
+          <el-table-column
+            :label="$t('settings.installed')"
+            prop="installed">
+            <template slot-scope="scope">
+              <el-button
+                v-if="!scope.row.installed"
+                disabled
+                type="text"
+                size="small">
+                {{ $t('settings.installed') }}
+              </el-button>
+              <el-button
+                v-else
+                type="text"
+                size="small"
+                @click="installFrontend(scope.row)">
+                {{ $t('settings.install') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
     <el-form :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
@@ -56,6 +95,9 @@ export default {
     assetsData() {
       return _.get(this.settings.settings, [':pleroma', ':assets']) || {}
     },
+    availableFrontends() {
+      return this.settings.frontends
+    },
     chat() {
       return this.settings.description.find(setting => setting.key === ':chat')
     },
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index c55208ad..48c7973a 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -75,6 +75,10 @@
   .form-container {
     margin-bottom: 80px;
   }
+  .frontends-table {
+    width: 100%;
+    margin-right: 30px;
+  }
   .grouped-settings-header {
     margin: 0 0 14px 0;
   }

From 8d52a897bb8f248716d6913bce8d4b66a5b19956 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 23 Feb 2021 23:04:31 +0300
Subject: [PATCH 03/10] Add ability to install one of the available frontends

---
 src/api/settings.js                        | 4 ++--
 src/store/modules/settings.js              | 7 +++++++
 src/views/settings/components/Frontend.vue | 5 ++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/api/settings.js b/src/api/settings.js
index 8596d18a..61c9523e 100644
--- a/src/api/settings.js
+++ b/src/api/settings.js
@@ -77,13 +77,13 @@ export async function fetchFrontends(authHost, token) {
   })
 }
 
-export async function installFrontend(name, ref, file, buildUrl, buildDir, authHost, token) {
+export async function installFrontend(data, 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 }
+    data
   })
 }
 
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index df664689..05b3084e 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -4,6 +4,7 @@ import {
   fetchFrontends,
   fetchSettings,
   getInstanceDocument,
+  installFrontend,
   removeSettings,
   updateInstanceDocument,
   updateSettings } from '@/api/settings'
@@ -121,6 +122,12 @@ const settings = {
       commit('TOGGLE_TABS', false)
       commit('SET_LOADING', false)
     },
+    async InstallFrontend({ commit, getters }, { name, _ref, _file, _buildUrl, _buildDir }) {
+      const { data } = _ref
+        ? await installFrontend({ name, ref: _ref, file: _file, build_url: _buildUrl, build_dir: _buildDir }, getters.authHost, getters.token)
+        : await installFrontend({ name }, getters.authHost, getters.token)
+      commit('SET_FRONTENDS', data)
+    },
     async RemoveInstanceDocument({ dispatch, getters }, name) {
       await deleteInstanceDocument(name, getters.authHost, getters.token)
       await dispatch('FetchInstanceDocument', name)
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index ee01e3cd..50cc4719 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -21,7 +21,7 @@
             prop="installed">
             <template slot-scope="scope">
               <el-button
-                v-if="!scope.row.installed"
+                v-if="scope.row.installed"
                 disabled
                 type="text"
                 size="small">
@@ -169,6 +169,9 @@ export default {
     await this.$store.dispatch('FetchFrontends')
   },
   methods: {
+    installFrontend({ name }) {
+      this.$store.dispatch('InstallFrontend', { name })
+    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')

From 4880e55552320477cd3977bb6a8324dac0823a85 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 23 Feb 2021 23:42:47 +0300
Subject: [PATCH 04/10] Add i18n translations o settings tabs

---
 src/lang/en.js                                        | 11 ++++++++++-
 src/views/settings/components/ActivityPub.vue         |  2 +-
 src/views/settings/components/Authentication.vue      |  2 +-
 src/views/settings/components/Captcha.vue             |  2 +-
 src/views/settings/components/Esshd.vue               |  2 +-
 src/views/settings/components/Gopher.vue              |  2 +-
 src/views/settings/components/Http.vue                |  2 +-
 src/views/settings/components/Instance.vue            |  2 +-
 src/views/settings/components/JobQueue.vue            |  2 +-
 src/views/settings/components/LinkFormatter.vue       |  2 +-
 src/views/settings/components/Logger.vue              |  2 +-
 src/views/settings/components/MRF.vue                 |  2 +-
 src/views/settings/components/Mailer.vue              |  2 +-
 src/views/settings/components/MediaProxy.vue          |  2 +-
 src/views/settings/components/Metadata.vue            |  2 +-
 src/views/settings/components/Other.vue               |  2 +-
 src/views/settings/components/RateLimiters.vue        |  2 +-
 src/views/settings/components/Upload.vue              |  2 +-
 src/views/settings/components/WebPush.vue             |  2 +-
 .../components/inputComponents/IconsInput.vue         |  4 ++--
 .../components/inputComponents/RateLimitInput.vue     |  8 ++++----
 21 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 227eb2db..60d48a83 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -411,6 +411,7 @@ export default {
     moderationLog: 'Moderation Log'
   },
   settings: {
+    submit: 'Submit',
     settings: 'Settings',
     instance: 'Instance',
     upload: 'Upload',
@@ -461,7 +462,15 @@ export default {
     install: 'Install',
     installed: 'Installed',
     name: 'Name',
-    git: 'Git'
+    git: 'Git',
+    installAnotherFrontend: 'Install another frontend',
+    addKeyValuePair: 'Add another `key - value` pair to this icon',
+    addIconConfig: 'Add another icon configuration',
+    setLimits: 'Set different limits for unauthenticated and authenticated users',
+    unauthenticatedUsers: 'Unauthenticated users',
+    authenticatedUsers: 'Authenticated users',
+    setLimitsForAll: 'Set limit for all users'
+
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index e18a2267..38c1a739 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -8,7 +8,7 @@
       <setting :setting-group="user" :data="userData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue
index 03c3e0c5..006fdf0c 100644
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@@ -16,7 +16,7 @@
       <setting :setting-group="oauth2" :data="oauth2Data"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index 819e2b40..f39c076f 100644
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@@ -8,7 +8,7 @@
       <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Esshd.vue b/src/views/settings/components/Esshd.vue
index a46f012d..a3141563 100644
--- a/src/views/settings/components/Esshd.vue
+++ b/src/views/settings/components/Esshd.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="esshd" :data="esshdData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Gopher.vue b/src/views/settings/components/Gopher.vue
index ffc2fa19..2382b987 100644
--- a/src/views/settings/components/Gopher.vue
+++ b/src/views/settings/components/Gopher.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="gopher" :data="gopherData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index 8aa8a23b..87a6d94b 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -16,7 +16,7 @@
       <setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index e3dacea2..f751e8dc 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -45,7 +45,7 @@
       <setting :setting-group="streamer" :data="streamerData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/JobQueue.vue b/src/views/settings/components/JobQueue.vue
index d2691af8..1a07356d 100644
--- a/src/views/settings/components/JobQueue.vue
+++ b/src/views/settings/components/JobQueue.vue
@@ -24,7 +24,7 @@
       <setting :setting-group="hackneyPools" :data="hackneyPoolsData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/LinkFormatter.vue b/src/views/settings/components/LinkFormatter.vue
index cb44a457..c92f1a4f 100644
--- a/src/views/settings/components/LinkFormatter.vue
+++ b/src/views/settings/components/LinkFormatter.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="linkFormatter" :data="linkFormatterData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index 3a3abdba..b350c07d 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -16,7 +16,7 @@
       <setting :setting-group="quack" :data="quackData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index dd92b3cb..36e548c2 100644
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@@ -7,7 +7,7 @@
       </el-form>
     </div>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue
index 65ec18e0..ee0e8475 100644
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@@ -20,7 +20,7 @@
       <setting :setting-group="newUsersDigestEmail" :data="newUsersDigestEmailData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/MediaProxy.vue b/src/views/settings/components/MediaProxy.vue
index 701a28ff..3c9ebc47 100644
--- a/src/views/settings/components/MediaProxy.vue
+++ b/src/views/settings/components/MediaProxy.vue
@@ -16,7 +16,7 @@
       <setting :setting-group="scriptInvalidation" :data="scriptInvalidationData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index d22be109..3326bb6f 100644
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@@ -8,7 +8,7 @@
       <setting :setting-group="richMedia" :data="richMediaData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index 91a9fe2a..86a5507e 100644
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@@ -26,7 +26,7 @@
       <setting :setting-group="castAndValidate" :data="castAndValidateData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue
index f7f0c976..42b84782 100644
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="rateLimiters" :data="rateLimitersData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index 124de255..2251df24 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -24,7 +24,7 @@
       <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index 0a09c17d..c84cae18 100644
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/inputComponents/IconsInput.vue b/src/views/settings/components/inputComponents/IconsInput.vue
index e2f09165..1b4f1e9d 100644
--- a/src/views/settings/components/inputComponents/IconsInput.vue
+++ b/src/views/settings/components/inputComponents/IconsInput.vue
@@ -12,13 +12,13 @@
       </div>
       <div class="icons-button-container">
         <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
-        <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
+        <span class="icons-button-desc">{{ $t('settings.addKeyValuePair') }}</span>
       </div>
       <el-divider class="divider"/>
     </div>
     <div class="icons-button-container">
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addIconToIcons"/>
-      <span class="icons-button-desc">Add another icon configuration</span>
+      <span class="icons-button-desc">{{ $t('settings.addIconConfig') }}</span>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index 60668369..18deaf0d 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -16,14 +16,14 @@
         @input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
       <div class="limit-button-container">
         <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
-        <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
+        <p class="expl limit-expl">{{ $t('settings.setLimits') }}</p>
       </div>
     </div>
     <div v-if="rateLimitAuthUsers">
       <el-form-item class="rate-limit">
         <div class="rate-limit-label-container">
           <span class="rate-limit-label">
-            Unauthenticated users:
+            {{ $t('settings.unauthenticatedUsers') }}:
           </span>
         </div>
         <div class="rate-limit-content">
@@ -49,7 +49,7 @@
       <el-form-item class="rate-limit">
         <div class="rate-limit-label-container">
           <span class="rate-limit-label">
-            Authenticated users:
+            {{ $t('settings.authenticatedUsers') }}:
           </span>
         </div>
         <div class="rate-limit-content">
@@ -70,7 +70,7 @@
       </el-form-item>
       <div class="limit-button-container">
         <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
-        <p class="expl limit-expl">Set limit for all users</p>
+        <p class="expl limit-expl">{{ $t('settings.setLimitsForAll') }}</p>
       </div>
     </div>
   </div>

From d7ef98e68ba689490d4338a07f476e8c5effe534 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 24 Feb 2021 00:35:31 +0300
Subject: [PATCH 05/10] Add form for installing new frontend

---
 src/lang/en.js                             |  6 ++-
 src/views/settings/components/Frontend.vue | 54 +++++++++++++++++++++-
 src/views/settings/styles/main.scss        | 14 ++++++
 3 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 60d48a83..f193abaf 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -469,7 +469,11 @@ export default {
     setLimits: 'Set different limits for unauthenticated and authenticated users',
     unauthenticatedUsers: 'Unauthenticated users',
     authenticatedUsers: 'Authenticated users',
-    setLimitsForAll: 'Set limit for all users'
+    setLimitsForAll: 'Set limit for all users',
+    ref: 'Ref',
+    file: 'File',
+    buildUrl: 'Build URL',
+    buildDir: 'Build Directory'
 
   },
   invites: {
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 50cc4719..26f1e2f0 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :label-position="labelPosition" :label-width="labelWidth" class="frontend-container">
       <el-form-item class="description-container">
         <span class="setting-label">{{ $t('settings.availableFrontends') }}</span>
         <span class="expl no-top-margin"><p>{{ $t('settings.installFrontends') }}</p></span>
@@ -37,8 +37,37 @@
             </template>
           </el-table-column>
         </el-table>
+        <div class="frontends-button-container">
+          <el-button
+            :size="isDesktop ? 'medium' : 'mini'"
+            :icon="frontendInputOpen ? 'el-icon-minus' : 'el-icon-plus'"
+            circle
+            @click="toggleFrontendInput"/>
+          <span class="icons-button-desc">{{ $t('settings.installAnotherFrontend') }}</span>
+        </div>
+        <el-form v-if="frontendInputOpen" :model="frontendFormData" label-width="120px">
+          <el-form-item :label="$t('settings.name')" class="frontend-form-input">
+            <el-input v-model="frontendFormData.name"/>
+          </el-form-item>
+          <el-form-item :label="$t('settings.ref')" class="frontend-form-input">
+            <el-input v-model="frontendFormData.ref"/>
+          </el-form-item>
+          <el-form-item :label="$t('settings.file')" class="frontend-form-input">
+            <el-input v-model="frontendFormData.file"/>
+          </el-form-item>
+          <el-form-item :label="$t('settings.buildUrl')" class="frontend-form-input">
+            <el-input v-model="frontendFormData.buildUrl"/>
+          </el-form-item>
+          <el-form-item :label="$t('settings.buildDir')" class="frontend-form-input">
+            <el-input v-model="frontendFormData.buildDir"/>
+          </el-form-item>
+          <el-form-item class="install-frontend-button">
+            <el-button type="primary" @click="installNewFrontend">{{ $t('settings.install') }}</el-button>
+          </el-form-item>
+        </el-form>
       </el-form-item>
     </el-form>
+    <el-divider v-if="frontend" class="divider thick-line"/>
     <el-form :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
@@ -71,7 +100,7 @@
       <setting :setting-group="preload" :data="preloadData"/>
     </el-form>
     <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+      <el-button class="submit-button" type="primary" @click="onSubmit">{{ $t('settings.submit') }}</el-button>
     </div>
   </div>
 </template>
@@ -85,6 +114,18 @@ import _ from 'lodash'
 export default {
   name: 'Frontend',
   components: { Setting },
+  data() {
+    return {
+      frontendInputOpen: false,
+      frontendFormData: {
+        name: '',
+        ref: '',
+        file: '',
+        buildUrl: '',
+        buildDir: ''
+      }
+    }
+  },
   computed: {
     ...mapGetters([
       'settings'
@@ -122,6 +163,9 @@ export default {
     frontendsData() {
       return _.get(this.settings.settings, [':pleroma', ':frontends']) || {}
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -171,6 +215,9 @@ export default {
   methods: {
     installFrontend({ name }) {
       this.$store.dispatch('InstallFrontend', { name })
+    },
+    installNewFrontend() {
+
     },
     async onSubmit() {
       try {
@@ -182,6 +229,9 @@ export default {
         type: 'success',
         message: i18n.t('settings.success')
       })
+    },
+    toggleFrontendInput() {
+      this.frontendInputOpen = !this.frontendInputOpen
     }
   }
 }
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 48c7973a..e85113be 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -75,6 +75,16 @@
   .form-container {
     margin-bottom: 80px;
   }
+  .frontend-container {
+    margin-right: 30px;
+  }
+  .frontend-form-input {
+    margin-top: 15px;
+  }
+  .frontends-button-container {
+    width: 100%;
+    margin-top: 15px;
+  }
   .frontends-table {
     width: 100%;
     margin-right: 30px;
@@ -130,6 +140,10 @@
       width: 100%;
     }
   }
+  .install-frontend-button {
+    margin-top: 15px;
+    float: right;
+  }
   .keyword-container {
     width: 100%
   }

From 56c20277a405317138e62ec60776e6d5cd85238c Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 26 Feb 2021 19:28:39 +0300
Subject: [PATCH 06/10] Add validation and installation of an unknown frontend

---
 src/api/settings.js                        |  4 ++-
 src/lang/en.js                             |  5 +--
 src/store/modules/settings.js              | 19 +++++++---
 src/views/settings/components/Frontend.vue | 40 +++++++++++++++++++---
 src/views/settings/styles/main.scss        |  2 +-
 5 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/api/settings.js b/src/api/settings.js
index 61c9523e..f07ece4d 100644
--- a/src/api/settings.js
+++ b/src/api/settings.js
@@ -1,6 +1,7 @@
 import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
 import { baseName } from './utils'
+import _ from 'lodash'
 
 export async function deleteInstanceDocument(name, authHost, token) {
   return await request({
@@ -78,12 +79,13 @@ export async function fetchFrontends(authHost, token) {
 }
 
 export async function installFrontend(data, authHost, token) {
+  const filteredData = _.pickBy(data)
   return await request({
     baseURL: baseName(authHost),
     url: `/api/pleroma/admin/frontends/install`,
     method: 'post',
     headers: authHeaders(token),
-    data
+    data: filteredData
   })
 }
 
diff --git a/src/lang/en.js b/src/lang/en.js
index f193abaf..61a66eda 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -473,8 +473,9 @@ export default {
     ref: 'Ref',
     file: 'File',
     buildUrl: 'Build URL',
-    buildDir: 'Build Directory'
-
+    buildDir: 'Build Directory',
+    frontendSuccess: 'Frontend installed successfully!',
+    frontendStartedInstallation: 'Installation started'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 05b3084e..a36f6eda 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -10,6 +10,8 @@ import {
   updateSettings } from '@/api/settings'
 import { formSearchObject, parseNonTuples, parseTuples, valueHasTuples, wrapUpdatedSettings } from './normalizers'
 import _ from 'lodash'
+import { Message } from 'element-ui'
+import i18n from '@/lang'
 
 const settings = {
   state: {
@@ -122,11 +124,18 @@ const settings = {
       commit('TOGGLE_TABS', false)
       commit('SET_LOADING', false)
     },
-    async InstallFrontend({ commit, getters }, { name, _ref, _file, _buildUrl, _buildDir }) {
-      const { data } = _ref
-        ? await installFrontend({ name, ref: _ref, file: _file, build_url: _buildUrl, build_dir: _buildDir }, getters.authHost, getters.token)
-        : await installFrontend({ name }, getters.authHost, getters.token)
-      commit('SET_FRONTENDS', data)
+    async InstallFrontend({ commit, getters }, { name, ref, file, buildUrl, buildDir }) {
+      try {
+        const { data } = await installFrontend({ name, ref, file, build_url: buildUrl, build_dir: buildDir }, getters.authHost, getters.token)
+        commit('SET_FRONTENDS', data)
+      } catch (_e) {
+        return
+      }
+      Message({
+        message: i18n.t('settings.frontendSuccess'),
+        type: 'success',
+        duration: 5 * 1000
+      })
     },
     async RemoveInstanceDocument({ dispatch, getters }, name) {
       await deleteInstanceDocument(name, getters.authHost, getters.token)
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 26f1e2f0..f74b1e5b 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -45,8 +45,8 @@
             @click="toggleFrontendInput"/>
           <span class="icons-button-desc">{{ $t('settings.installAnotherFrontend') }}</span>
         </div>
-        <el-form v-if="frontendInputOpen" :model="frontendFormData" label-width="120px">
-          <el-form-item :label="$t('settings.name')" class="frontend-form-input">
+        <el-form v-if="frontendInputOpen" ref="frontendFormData" :rules="rules" :model="frontendFormData" label-width="130px">
+          <el-form-item :label="$t('settings.name')" class="frontend-form-input" prop="name">
             <el-input v-model="frontendFormData.name"/>
           </el-form-item>
           <el-form-item :label="$t('settings.ref')" class="frontend-form-input">
@@ -123,6 +123,9 @@ export default {
         file: '',
         buildUrl: '',
         buildDir: ''
+      },
+      rules: {
+        name: { required: true, message: 'Please input Name', trigger: 'blur' }
       }
     }
   },
@@ -214,10 +217,39 @@ export default {
   },
   methods: {
     installFrontend({ name }) {
-      this.$store.dispatch('InstallFrontend', { name })
+      try {
+        this.$store.dispatch('InstallFrontend', { name })
+        this.$message({
+          type: 'success',
+          message: i18n.t('settings.frontendStartedInstallation')
+        })
+      } catch (e) {
+        return
+      }
     },
     installNewFrontend() {
-
+      try {
+        this.$refs['frontendFormData'].validate((valid) => {
+          if (valid) {
+            this.$store.dispatch('InstallFrontend', this.frontendFormData)
+            this.frontendFormData = {
+              name: '',
+              ref: '',
+              file: '',
+              buildUrl: '',
+              buildDir: ''
+            }
+            this.$message({
+              type: 'success',
+              message: i18n.t('settings.frontendStartedInstallation')
+            })
+          } else {
+            return false
+          }
+        })
+      } catch (e) {
+        return
+      }
     },
     async onSubmit() {
       try {
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index e85113be..2ab89f69 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -79,7 +79,7 @@
     margin-right: 30px;
   }
   .frontend-form-input {
-    margin-top: 15px;
+    margin-top: 20px;
   }
   .frontends-button-container {
     width: 100%;

From 170079e06eded6155e8e4cea573bfd4f254ff222 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 8 Feb 2021 01:42:31 +0300
Subject: [PATCH 07/10] Replace router push with the one that catches errors

---
 src/router/index.js             | 13 +++++++++++++
 test/views/layout/index.test.js |  1 +
 2 files changed, 14 insertions(+)

diff --git a/src/router/index.js b/src/router/index.js
index 661fb7f2..d151daeb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,19 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject) { return originalPush.call(this, location, onResolve, onReject) }
+  return originalPush.call(this, location).catch((err) => {
+    if (Router.isNavigationFailure(err)) {
+      // resolve err
+      return err
+    }
+    // rethrow error
+    return Promise.reject(err)
+  })
+}
+
 /* Layout */
 import Layout from '@/views/layout/Layout'
 
diff --git a/test/views/layout/index.test.js b/test/views/layout/index.test.js
index 686a4226..af71ee17 100644
--- a/test/views/layout/index.test.js
+++ b/test/views/layout/index.test.js
@@ -16,6 +16,7 @@ localVue.use(VueRouter)
 localVue.use(Element)
 
 jest.mock('@/api/reports')
+jest.mock('@/api/settings')
 
 describe('Log out', () => {
   let store

From e9bd9444b35f92a02438618c0a689ed77c34c42a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 14 Mar 2021 14:08:59 +0300
Subject: [PATCH 08/10] Create component for frontends table, add button
 loading while frontend is installing

---
 src/lang/en.js                                |   3 +-
 src/store/modules/settings.js                 |  15 +-
 src/views/settings/components/Frontend.vue    | 130 +--------------
 .../inputComponents/FrontendStatusButton.vue  |  64 ++++++++
 .../inputComponents/FrontendsTable.vue        | 148 ++++++++++++++++++
 5 files changed, 219 insertions(+), 141 deletions(-)
 create mode 100644 src/views/settings/components/inputComponents/FrontendStatusButton.vue
 create mode 100644 src/views/settings/components/inputComponents/FrontendsTable.vue

diff --git a/src/lang/en.js b/src/lang/en.js
index 61a66eda..641c972c 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -475,7 +475,8 @@ export default {
     buildUrl: 'Build URL',
     buildDir: 'Build Directory',
     frontendSuccess: 'Frontend installed successfully!',
-    frontendStartedInstallation: 'Installation started'
+    frontendStartedInstallation: 'Installation started',
+    inProcess: 'In process'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index a36f6eda..61738507 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -10,8 +10,6 @@ import {
   updateSettings } from '@/api/settings'
 import { formSearchObject, parseNonTuples, parseTuples, valueHasTuples, wrapUpdatedSettings } from './normalizers'
 import _ from 'lodash'
-import { Message } from 'element-ui'
-import i18n from '@/lang'
 
 const settings = {
   state: {
@@ -125,17 +123,8 @@ const settings = {
       commit('SET_LOADING', false)
     },
     async InstallFrontend({ commit, getters }, { name, ref, file, buildUrl, buildDir }) {
-      try {
-        const { data } = await installFrontend({ name, ref, file, build_url: buildUrl, build_dir: buildDir }, getters.authHost, getters.token)
-        commit('SET_FRONTENDS', data)
-      } catch (_e) {
-        return
-      }
-      Message({
-        message: i18n.t('settings.frontendSuccess'),
-        type: 'success',
-        duration: 5 * 1000
-      })
+      const { data } = await installFrontend({ name, ref, file, build_url: buildUrl, build_dir: buildDir }, getters.authHost, getters.token)
+      commit('SET_FRONTENDS', data)
     },
     async RemoveInstanceDocument({ dispatch, getters }, name) {
       await deleteInstanceDocument(name, getters.authHost, getters.token)
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index f74b1e5b..574051be 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -1,72 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form :label-position="labelPosition" :label-width="labelWidth" class="frontend-container">
-      <el-form-item class="description-container">
-        <span class="setting-label">{{ $t('settings.availableFrontends') }}</span>
-        <span class="expl no-top-margin"><p>{{ $t('settings.installFrontends') }}</p></span>
-      </el-form-item>
-      <el-form-item>
-        <el-table
-          :data="availableFrontends"
-          class="frontends-table">
-          <el-table-column
-            :label="$t('settings.name')"
-            prop="name"
-            width="120"/>
-          <el-table-column
-            :label="$t('settings.git')"
-            prop="git"/>
-          <el-table-column
-            :label="$t('settings.installed')"
-            prop="installed">
-            <template slot-scope="scope">
-              <el-button
-                v-if="scope.row.installed"
-                disabled
-                type="text"
-                size="small">
-                {{ $t('settings.installed') }}
-              </el-button>
-              <el-button
-                v-else
-                type="text"
-                size="small"
-                @click="installFrontend(scope.row)">
-                {{ $t('settings.install') }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="frontends-button-container">
-          <el-button
-            :size="isDesktop ? 'medium' : 'mini'"
-            :icon="frontendInputOpen ? 'el-icon-minus' : 'el-icon-plus'"
-            circle
-            @click="toggleFrontendInput"/>
-          <span class="icons-button-desc">{{ $t('settings.installAnotherFrontend') }}</span>
-        </div>
-        <el-form v-if="frontendInputOpen" ref="frontendFormData" :rules="rules" :model="frontendFormData" label-width="130px">
-          <el-form-item :label="$t('settings.name')" class="frontend-form-input" prop="name">
-            <el-input v-model="frontendFormData.name"/>
-          </el-form-item>
-          <el-form-item :label="$t('settings.ref')" class="frontend-form-input">
-            <el-input v-model="frontendFormData.ref"/>
-          </el-form-item>
-          <el-form-item :label="$t('settings.file')" class="frontend-form-input">
-            <el-input v-model="frontendFormData.file"/>
-          </el-form-item>
-          <el-form-item :label="$t('settings.buildUrl')" class="frontend-form-input">
-            <el-input v-model="frontendFormData.buildUrl"/>
-          </el-form-item>
-          <el-form-item :label="$t('settings.buildDir')" class="frontend-form-input">
-            <el-input v-model="frontendFormData.buildDir"/>
-          </el-form-item>
-          <el-form-item class="install-frontend-button">
-            <el-button type="primary" @click="installNewFrontend">{{ $t('settings.install') }}</el-button>
-          </el-form-item>
-        </el-form>
-      </el-form-item>
-    </el-form>
+    <frontends-table />
     <el-divider v-if="frontend" class="divider thick-line"/>
     <el-form :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="frontend" :data="frontendData"/>
@@ -109,26 +43,12 @@
 import { mapGetters } from 'vuex'
 import i18n from '@/lang'
 import Setting from './Setting'
+import FrontendsTable from './inputComponents/FrontendsTable'
 import _ from 'lodash'
 
 export default {
   name: 'Frontend',
-  components: { Setting },
-  data() {
-    return {
-      frontendInputOpen: false,
-      frontendFormData: {
-        name: '',
-        ref: '',
-        file: '',
-        buildUrl: '',
-        buildDir: ''
-      },
-      rules: {
-        name: { required: true, message: 'Please input Name', trigger: 'blur' }
-      }
-    }
-  },
+  components: { FrontendsTable, Setting },
   computed: {
     ...mapGetters([
       'settings'
@@ -139,9 +59,6 @@ export default {
     assetsData() {
       return _.get(this.settings.settings, [':pleroma', ':assets']) || {}
     },
-    availableFrontends() {
-      return this.settings.frontends
-    },
     chat() {
       return this.settings.description.find(setting => setting.key === ':chat')
     },
@@ -212,45 +129,7 @@ export default {
       return _.get(this.settings.settings, [':pleroma', ':static_fe']) || {}
     }
   },
-  async mounted() {
-    await this.$store.dispatch('FetchFrontends')
-  },
   methods: {
-    installFrontend({ name }) {
-      try {
-        this.$store.dispatch('InstallFrontend', { name })
-        this.$message({
-          type: 'success',
-          message: i18n.t('settings.frontendStartedInstallation')
-        })
-      } catch (e) {
-        return
-      }
-    },
-    installNewFrontend() {
-      try {
-        this.$refs['frontendFormData'].validate((valid) => {
-          if (valid) {
-            this.$store.dispatch('InstallFrontend', this.frontendFormData)
-            this.frontendFormData = {
-              name: '',
-              ref: '',
-              file: '',
-              buildUrl: '',
-              buildDir: ''
-            }
-            this.$message({
-              type: 'success',
-              message: i18n.t('settings.frontendStartedInstallation')
-            })
-          } else {
-            return false
-          }
-        })
-      } catch (e) {
-        return
-      }
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')
@@ -261,9 +140,6 @@ export default {
         type: 'success',
         message: i18n.t('settings.success')
       })
-    },
-    toggleFrontendInput() {
-      this.frontendInputOpen = !this.frontendInputOpen
     }
   }
 }
diff --git a/src/views/settings/components/inputComponents/FrontendStatusButton.vue b/src/views/settings/components/inputComponents/FrontendStatusButton.vue
new file mode 100644
index 00000000..939f4f4b
--- /dev/null
+++ b/src/views/settings/components/inputComponents/FrontendStatusButton.vue
@@ -0,0 +1,64 @@
+<template>
+  <span>
+    <el-button
+      v-if="buttonLoading"
+      :loading="true"
+      disabled
+      type="text"
+      size="small">
+      {{ $t('settings.inProcess') }}
+    </el-button>
+    <el-button
+      v-else-if="frontend.installed"
+      disabled
+      type="text"
+      size="small">
+      {{ $t('settings.installed') }}
+    </el-button>
+    <el-button
+      v-else
+      type="text"
+      size="small"
+      @click="installFrontend(frontend)">
+      {{ $t('settings.install') }}
+    </el-button>
+  </span>
+</template>
+
+<script>
+import i18n from '@/lang'
+
+export default {
+  name: 'FrontendStatusButton',
+  props: {
+    frontend: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      buttonLoading: false
+    }
+  },
+  methods: {
+    async installFrontend({ name }) {
+      this.buttonLoading = true
+      try {
+        await this.$store.dispatch('InstallFrontend', { name })
+      } catch (e) {
+        this.buttonLoading = false
+        return
+      }
+      this.buttonLoading = false
+      this.$message({
+        message: i18n.t('settings.frontendSuccess'),
+        type: 'success',
+        duration: 5 * 1000
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/settings/components/inputComponents/FrontendsTable.vue b/src/views/settings/components/inputComponents/FrontendsTable.vue
new file mode 100644
index 00000000..fa51c903
--- /dev/null
+++ b/src/views/settings/components/inputComponents/FrontendsTable.vue
@@ -0,0 +1,148 @@
+<template>
+  <el-form :label-position="labelPosition" :label-width="labelWidth" class="frontend-container">
+    <el-form-item class="description-container">
+      <span class="setting-label">{{ $t('settings.availableFrontends') }}</span>
+      <span class="expl no-top-margin"><p>{{ $t('settings.installFrontends') }}</p></span>
+    </el-form-item>
+    <el-form-item>
+      <el-table
+        :data="availableFrontends"
+        class="frontends-table">
+        <el-table-column
+          :label="$t('settings.name')"
+          prop="name"
+          width="120"/>
+        <el-table-column
+          :label="$t('settings.git')"
+          prop="git"/>
+        <el-table-column
+          :label="$t('settings.installed')"
+          prop="installed">
+          <template slot-scope="scope">
+            <frontend-status-button :frontend="scope.row"/>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="frontends-button-container">
+        <el-button
+          :size="isDesktop ? 'medium' : 'mini'"
+          :icon="frontendInputOpen ? 'el-icon-minus' : 'el-icon-plus'"
+          circle
+          @click="toggleFrontendInput"/>
+        <span class="icons-button-desc">{{ $t('settings.installAnotherFrontend') }}</span>
+      </div>
+      <el-form v-if="frontendInputOpen" ref="frontendFormData" :rules="rules" :model="frontendFormData" label-width="130px">
+        <el-form-item :label="$t('settings.name')" class="frontend-form-input" prop="name">
+          <el-input v-model="frontendFormData.name"/>
+        </el-form-item>
+        <el-form-item :label="$t('settings.ref')" class="frontend-form-input">
+          <el-input v-model="frontendFormData.ref"/>
+        </el-form-item>
+        <el-form-item :label="$t('settings.file')" class="frontend-form-input">
+          <el-input v-model="frontendFormData.file"/>
+        </el-form-item>
+        <el-form-item :label="$t('settings.buildUrl')" class="frontend-form-input">
+          <el-input v-model="frontendFormData.buildUrl"/>
+        </el-form-item>
+        <el-form-item :label="$t('settings.buildDir')" class="frontend-form-input">
+          <el-input v-model="frontendFormData.buildDir"/>
+        </el-form-item>
+        <el-form-item class="install-frontend-button">
+          <el-button :loading="buttonLoading" type="primary" @click="installNewFrontend">{{ $t('settings.install') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import i18n from '@/lang'
+import { mapGetters } from 'vuex'
+import FrontendStatusButton from './FrontendStatusButton'
+
+export default {
+  name: 'FrontendsTable',
+  components: { FrontendStatusButton },
+  data() {
+    return {
+      buttonLoading: false,
+      frontendInputOpen: false,
+      frontendFormData: {
+        name: '',
+        ref: '',
+        file: '',
+        buildUrl: '',
+        buildDir: ''
+      },
+      rules: {
+        name: { required: true, message: 'Please input Name', trigger: 'blur' }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'settings'
+    ]),
+    availableFrontends() {
+      return this.settings.frontends
+    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
+    labelWidth() {
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
+    },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    }
+  },
+  async mounted() {
+    await this.$store.dispatch('FetchFrontends')
+  },
+  methods: {
+    installNewFrontend() {
+      this.$refs['frontendFormData'].validate(async(valid) => {
+        if (valid) {
+          this.buttonLoading = true
+          try {
+            await this.$store.dispatch('InstallFrontend', this.frontendFormData)
+          } catch (e) {
+            this.buttonLoading = false
+            return
+          }
+          this.buttonLoading = false
+          this.$message({
+            message: i18n.t('settings.frontendSuccess'),
+            type: 'success',
+            duration: 5 * 1000
+          })
+          this.frontendFormData = {
+            name: '',
+            ref: '',
+            file: '',
+            buildUrl: '',
+            buildDir: ''
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    toggleFrontendInput() {
+      this.frontendInputOpen = !this.frontendInputOpen
+    }
+  }
+}
+</script>

From ab73b3facb78a23b01d0f56f05a7ca2952869963 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 14 Mar 2021 14:48:04 +0300
Subject: [PATCH 09/10] Update styles for mobile

---
 src/views/settings/styles/main.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 2ab89f69..5858267b 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -469,6 +469,15 @@
       justify-content: space-between;
       margin: 0 5px;
     }
+    .frontend-container {
+      margin: 0 15px 10px 15px;
+      .description-container {
+        margin: 0;
+      }
+    }
+    .frontend-form-input {
+      margin-top: 0;
+    }
     h1 {
       font-size: 24px;
     }

From dfc00d9aa470c884db31c8894e92ca51706ab1b7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 14 Mar 2021 14:49:44 +0300
Subject: [PATCH 10/10] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac48d297..1b8efff4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Filter users by actor type: Person, Bot or Application
 - Add ability to configure Media Preview Proxy, User Backup, Websocket based federation and Pleroma.Web.Endpoint.MetricsExporter settings
 - Mobile and Tablet UI for Single Report show page
+- Ability to install new frontends from the Frontend tab in the Settings section
 
 ### Changed