Add validation and installation of an unknown frontend

src/api/settings.js

 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
   })
 }
 

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',

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)

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 {

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%;