Merge branch 'feature/auto-render-mrf' into 'develop'

Render settings on the MRF tab automatically

Closes #124 and #123

See merge request pleroma/admin-fe!139

src/lang/en.js

@@ -388,10 +388,6 @@ export default {
     files: 'files',
     successfullyRemoved: 'Setting removed successfully!',
     seeDocs: 'See Documentation',
-    assets: 'Assets',
-    emoji: 'Emoji',
-    markup: 'Markup settings',
-    corsPlug: 'CORS plug config',
     instanceReboot: 'Reboot Instance',
     restartApp: 'You must restart the instance to apply settings',
     restartSuccess: 'Instance rebooted successfully!',

src/views/settings/components/ActivityPub.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="activitypubData" :model="activitypubData" :label-position="labelPosition" :label-width="labelWidth" data-search=":activitypub">
+    <el-form :model="activitypubData" :label-position="labelPosition" :label-width="labelWidth" data-search=":activitypub">
       <setting :setting-group="activitypub" :data="activitypubData"/>
     </el-form>
-    <el-divider v-if="activitypub" class="divider thick-line"/>
+    <el-divider v-if="user" class="divider thick-line"/>
-    <el-form ref="userData" :model="userData" :label-position="labelPosition" :label-width="labelWidth" data-search=":user">
+    <el-form :model="userData" :label-position="labelPosition" :label-width="labelWidth" data-search=":user">
       <setting :setting-group="user" :data="userData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Authentication.vue

@@ -1,18 +1,18 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="pleromaAuthenticatorData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
     </el-form>
     <el-divider v-if="pleromaAuthenticator" class="divider thick-line"/>
-    <el-form ref="authData" :model="authData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="authData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="auth" :data="authData"/>
     </el-form>
     <el-divider v-if="auth" class="divider thick-line"/>
-    <el-form ref="ldapData" :model="ldapData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="ldapData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="ldap" :data="ldapData"/>
     </el-form>
     <el-divider v-if="oauth2" class="divider thick-line"/>
-    <el-form ref="oauth2" :model="oauth2Data" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="oauth2Data" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="oauth2" :data="oauth2Data"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/AutoLinker.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="autoLinker" :model="autoLinkerData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="autoLinkerData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="autoLinker" :data="autoLinkerData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Captcha.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="captchaData" :model="captchaData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="captchaData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="captcha" :data="captchaData"/>
     </el-form>
     <el-divider v-if="captcha" class="divider thick-line"/>
-    <el-form ref="kocaptchaData" :model="kocaptchaData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="kocaptchaData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Esshd.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="esshdData" :model="esshdData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="esshdData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="esshd" :data="esshdData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Frontend.vue

@@ -1,34 +1,26 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="frontendData" :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
-    <el-form ref="staticFeData" :model="staticFeData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="frontend" class="divider thick-line"/>
+    <el-form :model="staticFeData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="staticFe" :data="staticFeData"/>
     </el-form>
     <el-divider v-if="staticFe" class="divider thick-line"/>
-    <el-form ref="assetsData" :model="assetsData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="assetsData" :label-position="labelPosition" :label-width="labelWidth">
-      <el-form-item v-if="assets" class="grouped-settings-header">
-        <span class="label-font label-with-margin">{{ $t('settings.assets') }}</span>
-      </el-form-item>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
     <el-divider v-if="assets" class="divider thick-line"/>
-    <el-form ref="emojiData" :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
-      <el-form-item v-if="emoji" data-search=":emoji" class="grouped-settings-header">
-        <span class="label-font label-with-margin">{{ $t('settings.emoji') }}</span>
-      </el-form-item>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
     <el-divider v-if="emoji" class="divider thick-line"/>
-    <el-form ref="chatData" :model="chatData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="chatData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="chat" :data="chatData"/>
     </el-form>
     <el-divider v-if="chat" class="divider thick-line"/>
-    <el-form ref="markupData" :model="markupData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="markupData" :label-position="labelPosition" :label-width="labelWidth">
-      <el-form-item v-if="markup" data-search=":markup" class="grouped-settings-header">
-        <span class="label-font label-with-margin">{{ $t('settings.markup') }}</span>
-      </el-form-item>
       <setting :setting-group="markup" :data="markupData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Gopher.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="gopher" :model="gopherData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form v-if="!loading" :model="gopherData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="gopher" :data="gopherData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Http.vue

@@ -1,24 +1,18 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="httpData" :model="httpData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="httpData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="http" :data="httpData"/>
     </el-form>
-    <el-form ref="corsPlugData" :model="corsPlugData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="http" class="divider thick-line"/>
-      <el-form-item v-if="corsPlug" data-search=":cors_plug" class="grouped-settings-header">
+    <el-form :model="corsPlugData" :label-position="labelPosition" :label-width="labelWidth">
-        <span class="label-font label-with-margin">{{ $t('settings.corsPlug') }}</span>
-      </el-form-item>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
     <el-divider v-if="corsPlug" class="divider thick-line"/>
-    <el-form ref="httpSignatures" :model="httpSignaturesData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="httpSecurityData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="httpSignatures" :data="httpSignaturesData"/>
-    </el-form>
-    <el-divider v-if="httpSignatures" class="divider thick-line"/>
-    <el-form ref="httpSecurityData" :model="httpSecurityData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="httpSecurity" :data="httpSecurityData"/>
     </el-form>
     <el-divider v-if="httpSecurity" class="divider thick-line"/>
-    <el-form ref="webCacheTtl" :model="webCacheTtlData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="webCacheTtlData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Inputs.vue

@@ -228,6 +228,9 @@ export default {
         return this.data.value ? this.data.value[this.setting.key] : []
       } else if (this.setting.type === 'atom') {
         return this.data[this.setting.key] && this.data[this.setting.key][0] === ':' ? this.data[this.setting.key].substr(1) : this.data[this.setting.key]
+      } else if (Array.isArray(this.setting.type) &&
+          this.setting.type.find(el => Array.isArray(el) && el.includes('list'))) {
+        return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
       } else {
         return this.data[this.setting.key]
       }

src/views/settings/components/Instance.vue

@@ -1,33 +1,34 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="instanceData" :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
     <el-divider v-if="instance" class="divider thick-line"/>
-    <el-form ref="adminToken" :model="adminTokenData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="adminTokenData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="adminToken" :data="adminTokenData"/>
     </el-form>
     <el-divider v-if="adminToken" class="divider thick-line"/>
-    <el-form ref="scheduledActivity" :model="scheduledActivityData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="scheduledActivityData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
     </el-form>
     <el-divider v-if="scheduledActivity" class="divider thick-line"/>
-    <el-form ref="manifest" :model="manifestData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="manifestData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="manifest" :data="manifestData"/>
     </el-form>
     <el-divider v-if="manifest" class="divider thick-line"/>
-    <el-form ref="pleromaUser" :model="pleromaUserData" :label-position="labelPosition" :label-width="labelWidth" data-search="Pleroma.User">
+    <el-form :model="pleromaUserData" :label-position="labelPosition" :label-width="labelWidth" data-search="Pleroma.User">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
     </el-form>
     <el-divider v-if="pleromaUser" class="divider thick-line"/>
-    <el-form ref="uriSchemes" :model="uriSchemesData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="uriSchemesData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="uriSchemes" :data="uriSchemesData"/>
     </el-form>
     <el-divider v-if="uriSchemes" class="divider thick-line"/>
-    <el-form ref="feed" :model="feedData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="feedData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="feed" :data="feedData"/>
     </el-form>
-    <el-form ref="streamer" :model="streamerData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="uriSchemes" class="divider thick-line"/>
+    <el-form :model="streamerData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="streamer" :data="streamerData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/JobQueue.vue

@@ -1,12 +1,14 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="obanQueuesData" :model="obanQueuesData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="obanQueuesData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="obanQueues" :data="obanQueuesData"/>
     </el-form>
-    <el-form ref="workersData" :model="workersData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="obanQueues" class="divider thick-line"/>
+    <el-form :model="workersData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="workers" :data="workersData"/>
     </el-form>
-    <el-form ref="activityExpiration" :model="activityExpirationData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="workers" class="divider thick-line"/>
+    <el-form :model="activityExpirationData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="activityExpiration" :data="activityExpirationData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Logger.vue

@@ -1,18 +1,18 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="loggerData" :model="loggerData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="loggerData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="logger" :data="loggerData"/>
     </el-form>
     <el-divider v-if="logger" class="divider thick-line"/>
-    <el-form ref="consoleData" :model="consoleData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="consoleData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="console" :data="consoleData"/>
     </el-form>
     <el-divider v-if="console" class="divider thick-line"/>
-    <el-form ref="exsysloggerData" :model="exsysloggerData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="exsysloggerData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="exsyslogger" :data="exsysloggerData"/>
     </el-form>
     <el-divider v-if="exsyslogger" class="divider thick-line"/>
-    <el-form ref="quackData" :model="quackData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="quackData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="quack" :data="quackData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/MRF.vue

@@ -1,46 +1,11 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mrfSimple" :model="mrfSimpleData" :label-position="labelPosition" :label-width="labelWidth">
+    <div v-for="setting in mrfSettings" :key="setting.key">
-      <setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
+      <el-form :model="getSettingData(setting)" :label-position="labelPosition" :label-width="labelWidth">
-    </el-form>
+        <setting :setting-group="setting" :data="getSettingData(setting)"/>
-    <el-divider v-if="mrfSimple" class="divider thick-line"/>
+      </el-form>
-    <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-position="labelPosition" :label-width="labelWidth">
+      <el-divider v-if="setting" class="divider thick-line"/>
-      <setting :setting-group="mrfRejectnonpublic" :data="mrfRejectnonpublicData"/>
+    </div>
-    </el-form>
-    <el-divider v-if="mrfRejectnonpublic" class="divider thick-line"/>
-    <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfHellthread" :data="mrfHellthreadData"/>
-    </el-form>
-    <el-divider v-if="mrfHellthread" class="divider thick-line"/>
-    <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfKeyword" :data="mrfKeywordData"/>
-    </el-form>
-    <el-form ref="mrfSubchain" :model="mrfSubchainData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfSubchain" :data="mrfSubchainData"/>
-    </el-form>
-    <el-form ref="mrfMention" :model="mrfMentionData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfMention" :data="mrfMentionData"/>
-    </el-form>
-    <el-divider v-if="mrfMention" class="divider thick-line"/>
-    <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfNormalizeMarkup" :data="mrfNormalizeMarkupData"/>
-    </el-form>
-    <el-divider v-if="mrfNormalizeMarkup" class="divider thick-line"/>
-    <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
-    </el-form>
-    <el-divider v-if="mrfVocabulary" class="divider thick-line"/>
-    <el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfObjectAge" :data="mrfObjectAgeData"/>
-    </el-form>
-    <el-divider v-if="mrfObjectAge" class="divider thick-line"/>
-    <el-form ref="mrfActivityExpiration" :model="mrfActivityExpirationData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="mrfActivityExpiration" :data="mrfActivityExpirationData"/>
-    </el-form>
-    <el-divider v-if="mrfActivityExpiration" class="divider thick-line"/>
-    <el-form ref="modules" :model="modulesData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="modules" :data="modulesData"/>
-    </el-form>
     <div class="submit-button-container">
       <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
     </div>
@@ -87,71 +52,14 @@ export default {
     modules() {
       return this.settings.description.find(setting => setting.key === ':modules')
     },
-    modulesData() {
+    mrfSettings() {
-      return _.get(this.settings.settings, [':pleroma', ':modules']) || {}
+      return this.settings.description.filter(el => el.tab === 'mrf')
-    },
-    mrfActivityExpiration() {
-      return this.settings.description.find(setting => setting.key === ':mrf_activity_expiration')
-    },
-    mrfActivityExpirationData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_activity_expiration']) || {}
-    },
-    mrfSimple() {
-      return this.settings.description.find(setting => setting.key === ':mrf_simple')
-    },
-    mrfSimpleData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_simple']) || {}
-    },
-    mrfRejectnonpublic() {
-      return this.settings.description.find(setting => setting.key === ':mrf_rejectnonpublic')
-    },
-    mrfRejectnonpublicData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_rejectnonpublic']) || {}
-    },
-    mrfHellthread() {
-      return this.settings.description.find(setting => setting.key === ':mrf_hellthread')
-    },
-    mrfHellthreadData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_hellthread']) || {}
-    },
-    mrfKeyword() {
-      return this.settings.description.find(setting => setting.key === ':mrf_keyword')
-    },
-    mrfKeywordData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_keyword']) || {}
-    },
-    mrfObjectAge() {
-      return this.settings.description.find(setting => setting.key === ':mrf_object_age')
-    },
-    mrfObjectAgeData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_object_age']) || {}
-    },
-    mrfSubchain() {
-      return this.settings.description.find(setting => setting.key === ':mrf_subchain')
-    },
-    mrfSubchainData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_subchain']) || {}
-    },
-    mrfMention() {
-      return this.settings.description.find(setting => setting.key === ':mrf_mention')
-    },
-    mrfMentionData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_mention']) || {}
-    },
-    mrfNormalizeMarkup() {
-      return this.settings.description.find(setting => setting.key === ':mrf_normalize_markup')
-    },
-    mrfNormalizeMarkupData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_normalize_markup']) || {}
-    },
-    mrfVocabulary() {
-      return this.settings.description.find(setting => setting.key === ':mrf_vocabulary')
-    },
-    mrfVocabularyData() {
-      return _.get(this.settings.settings, [':pleroma', ':mrf_vocabulary']) || {}
     }
   },
   methods: {
+    getSettingData(setting) {
+      return _.get(this.settings.settings, [setting.group, setting.key]) || {}
+    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')

src/views/settings/components/Mailer.vue

@@ -1,20 +1,22 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mailer" :model="mailerData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="mailerData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mailer" :data="mailerData"/>
     </el-form>
     <el-divider v-if="mailer" class="divider thick-line"/>
-    <el-form ref="swoosh" :model="swooshData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="swooshData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="swoosh" :data="swooshData"/>
     </el-form>
     <el-divider v-if="swoosh" class="divider thick-line"/>
-    <el-form ref="emailNotifications" :model="emailNotificationsData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="emailNotificationsData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
     </el-form>
-    <el-form ref="userEmail" :model="userEmailData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="emailNotifications" class="divider thick-line"/>
+    <el-form :model="userEmailData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="userEmail" :data="userEmailData"/>
     </el-form>
-    <el-form ref="newUsersDigestEmail" :model="newUsersDigestEmailData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="userEmail" class="divider thick-line"/>
+    <el-form :model="newUsersDigestEmailData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="newUsersDigestEmail" :data="newUsersDigestEmailData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/MediaProxy.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="mediaProxy" :model="mediaProxyData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form v-if="!loading" :model="mediaProxyData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mediaProxy" :data="mediaProxyData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Metadata.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="metadata" :model="metadataData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="metadataData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="metadata" :data="metadataData"/>
     </el-form>
     <el-divider v-if="metadata" class="divider thick-line"/>
-    <el-form ref="richMedia" :model="richMediaData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="richMediaData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="richMedia" :data="richMediaData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Other.vue

@@ -1,9 +1,10 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mimeTypes" :model="mimeTypesData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="mimeTypesData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
     </el-form>
-    <el-form ref="remoteIp" :model="remoteIpData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="mimeTypes" class="divider thick-line"/>
+    <el-form :model="remoteIpData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="remoteIp" :data="remoteIpData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/RateLimiters.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form v-if="!loading" :model="rateLimitersData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="rateLimiters" :data="rateLimitersData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/Setting.vue

@@ -61,7 +61,7 @@
                 :nested="true"/>
             </div>
           </div>
-          <el-divider class="divider"/>
+          <el-divider v-if="notLastInGroup(setting.key)" class="divider"/>
         </div>
       </div>
     </div>
@@ -125,11 +125,14 @@ export default {
         key === ':replace'
     },
     divideSetting(key) {
-      return [':sslopts', ':tlsopts', ':adapter', ':poll_limits', ':queues', ':styling', ':proxy_opts'].includes(key)
+      return [':sslopts', ':tlsopts', ':adapter', ':poll_limits', ':queues', ':styling', ':invalidation', ':multi_factor_authentication'].includes(key)
     },
     getFormattedDescription(desc) {
       return marked(desc)
     },
+    notLastInGroup(key) {
+      return this.settingGroup.children.slice(-1)[0].key !== key
+    },
     async removeSetting(key) {
       this.$confirm(
         this.$t('settings.removeSettingConfirmation'),

src/views/settings/components/Upload.vue

@@ -1,24 +1,22 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="uploadData" :model="uploadData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="uploadData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="upload" :data="uploadData"/>
     </el-form>
-    <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-divider v-if="upload" class="divider thick-line"/>
-      <el-form-item v-if="uploadersLocal" class="grouped-settings-header">
+    <el-form v-if="showUploadersLocal" :model="uploadersLocalData" :label-position="labelPosition" :label-width="labelWidth">
-        <span class="label-font label-with-margin">Pleroma.Uploaders.Local</span>
-      </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
       <el-divider v-if="uploadersLocal" class="divider thick-line"/>
     </el-form>
-    <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form v-if="showUploadersS3" :model="uploadersS3Data" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
       <el-divider v-if="uploadersS3" class="divider thick-line"/>
     </el-form>
-    <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="uploadFilterMogrifyData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
     </el-form>
     <el-divider v-if="uploadFilterMogrify" class="divider thick-line"/>
-    <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form :model="uploadAnonymizeFilenameData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/WebPush.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-position="labelPosition" :label-width="labelWidth">
+    <el-form v-if="!loading" :model="vapidDetailsData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
     </el-form>
     <div class="submit-button-container">

src/views/settings/components/inputComponents/PruneInput.vue

@@ -5,7 +5,7 @@
       <el-radio label=":maxlen">Limit-based</el-radio>
       <el-radio label=":maxage">Time-based</el-radio>
     </el-radio-group>
-    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
+    <el-form-item v-if="prune === ':maxlen'" label="Max length" label-width="100" label-position="left">
       <el-input-number
         :value="data[1]"
         :min="0"
@@ -14,7 +14,7 @@
         class="top-margin"
         @change="updateIntInput($event, ':maxlen')"/>
     </el-form-item>
-    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
+    <el-form-item v-if="prune === ':maxage'" label="Max age" label-width="100" label-position="left">
       <el-input-number
         :value="data[1]"
         :min="0"

src/views/settings/styles/main.scss

@@ -177,6 +177,9 @@
   }
   .no-top-margin {
     margin-top: 0;
+    p {
+      margin-right: 30px;
+    }
   }
   .pattern-input {
     width: 20%;
@@ -215,7 +218,7 @@
     width: 100%;
   }
   .rate-limit-content {
-    width: 100%;
+    width: 70%;
   }
   .rate-limit-label {
     float: right;
@@ -225,8 +228,8 @@
     color: #606266;
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
     font-weight: 700;
-    height: 36px;
+    height: fit-content;
-    width: 100%;
+    width: 30%;
     margin-right: 10px;
   }
   .reboot-button {
@@ -405,6 +408,9 @@
         font-size: 14px;
       }
     }
+    .description-container {
+      margin: 0 15px 22px 15px;
+    }
     .divider {
       margin: 0 0 10px 0;
     }
@@ -488,9 +494,15 @@
         flex-direction: column;
       }
     }
+    .rate-limit-content {
+      width: 100%;
+    }
     .rate-limit-label {
       float: left;
     }
+    .rate-limit-label-container {
+      width: 100%;
+    }
     .reboot-button {
       margin: 0 15px 0 0;
     }
@@ -646,8 +658,11 @@
       align-items: center;
       margin: 15px 30px 15px 15px;
     }
+    .rate-limit-content {
+      width: 65%;
+    }
     .rate-limit-label-container {
-      width: 250px;
+      width: 35%;
     }
     .settings-delete-button {
       float: right;