Merge branch 'feature/config-improvements' into 'develop'

Config improvements

Closes #66, #65, #63, #61, and #60

See merge request pleroma/admin-fe!83

package.json

@@ -52,6 +52,7 @@
     "localforage": "^1.7.3",
     "lodash": "^4.17.11",
     "lodash.debounce": "^4.0.8",
+    "marked": "^0.8.0",
     "moment": "^2.24.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/store/modules/normalizers.js

@@ -138,10 +138,7 @@ const parseProxyUrl = value => {
 }
 
 const partialUpdate = (group, key) => {
-  if (group === ':auto_linker' && key === ':opts') {
+  return !(group === ':auto_linker' && key === ':opts')
-    return false
-  }
-  return true
 }
 
 export const processNested = (valueForState, valueForUpdatedSettings, group, parentKey, parents, settings, updatedSettings) => {

src/store/modules/settings.js

@@ -95,6 +95,9 @@ const settings = {
       if (key === 'Pleroma.Emails.Mailer' && input === ':adapter') {
         const subkeys = Object.keys(state.settings[group][key]).filter(el => el !== ':adapter')
         await removeSettings([{ group, key, delete: true, subkeys }], getters.authHost, getters.token)
+      } else if (key === 'Pleroma.Upload' && input === ':uploader') {
+        const deletedKey = value === 'Pleroma.Uploaders.Local' ? 'Pleroma.Uploaders.S3' : 'Pleroma.Uploaders.Local'
+        await removeSettings([{ group, key: deletedKey, delete: true }], getters.authHost, getters.token)
       }
       key
         ? commit('UPDATE_STATE', { group, key, input, value })

src/views/settings/components/ActivityPub.vue

@@ -1,15 +1,15 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
       <setting :setting-group="activitypub" :data="activitypubData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="userData" :model="userData" :label-width="labelWidth">
       <setting :setting-group="user" :data="userData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Authentication.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
       <setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
     </el-form>
@@ -14,10 +14,10 @@
     <div class="line"/>
     <el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
       <setting :setting-group="oauth2" :data="oauth2Data"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 
@@ -62,7 +62,7 @@ export default {
       return _.get(this.settings.settings, [':pleroma', ':oauth2']) || {}
     },
     pleromaAuthenticator() {
-      return this.settings.description.find(setting => setting.description === 'Authenticator')
+      return this.settings.description.find(setting => setting.children && setting.children[0].key === 'Pleroma.Web.Auth.Authenticator')
     },
     pleromaAuthenticatorData() {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.Web.Auth.Authenticator']) || {}

src/views/settings/components/AutoLinker.vue

@@ -1,10 +1,12 @@
 <template>
-  <el-form v-if="!loading" ref="autoLinker" :model="autoLinkerData" :label-width="labelWidth">
+  <div v-if="!loading" class="form-container">
-    <setting :setting-group="autoLinker" :data="autoLinkerData"/>
+    <el-form ref="autoLinker" :model="autoLinkerData" :label-width="labelWidth">
-    <el-form-item>
+      <setting :setting-group="autoLinker" :data="autoLinkerData"/>
-      <el-button type="primary" @click="onSubmit">Submit</el-button>
+    </el-form>
-    </el-form-item>
+    <div class="submit-button-container">
-  </el-form>
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
+  </div>
 </template>
 
 <script>

src/views/settings/components/Captcha.vue

@@ -1,15 +1,15 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
       <setting :setting-group="captcha" :data="captchaData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
       <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Esshd.vue

@@ -1,18 +1,11 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
       <setting :setting-group="esshd" :data="esshdData"/>
-      <el-form-item>
-        <p class="expl">Feel free to adjust the priv_dir and port number.
-        Then you will have to create the key for the keys (in the example <span class="code">priv/ssh_keys</span>) and create the host keys with
-          <span class="code">ssh-keygen -m PEM -N "" -b 2048 -t rsa -f ssh_host_rsa_key</span>.
-          After restarting, you should be able to connect to your Pleroma instance with <span class="code">ssh username@server -p $PORT</span>
-        </p>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Frontend.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="frontendData" :model="frontendData" :label-width="labelWidth">
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
@@ -20,10 +20,10 @@
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
       <el-form-item label="Markup settings:"/>
       <setting :setting-group="markup" :data="markupData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Gopher.vue

@@ -1,10 +1,12 @@
 <template>
-  <el-form v-if="!loading" ref="gopher" :model="gopherData" :label-width="labelWidth">
+  <div v-if="!loading" class="form-container">
-    <setting :setting-group="gopher" :data="gopherData"/>
+    <el-form v-if="!loading" ref="gopher" :model="gopherData" :label-width="labelWidth">
-    <el-form-item>
+      <setting :setting-group="gopher" :data="gopherData"/>
-      <el-button type="primary" @click="onSubmit">Submit</el-button>
+    </el-form>
-    </el-form-item>
+    <div class="submit-button-container">
-  </el-form>
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
+  </div>
 </template>
 
 <script>

src/views/settings/components/Http.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="httpData" :model="httpData" :label-width="labelWidth">
       <setting :setting-group="http" :data="httpData"/>
     </el-form>
@@ -18,10 +18,10 @@
     <div class="line"/>
     <el-form ref="webCacheTtl" :model="webCacheTtlData" :label-width="labelWidth">
       <setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Inputs.vue

@@ -77,7 +77,11 @@
     <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
     <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <!-------------------->
-    <p v-if="setting.type !== 'keyword'" :class="inputClass" class="expl">{{ setting.description }}</p>
+    <span
+      v-if="setting.description && setting.type !== 'keyword'"
+      :class="inputClass"
+      class="expl"
+      v-html="getFormattedDescription(setting.description)"/>
   </el-form-item>
 </template>
 
@@ -86,6 +90,7 @@ import i18n from '@/lang'
 import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
+import marked from 'marked'
 
 export default {
   name: 'Inputs',
@@ -203,6 +208,9 @@ export default {
         type === 'map' ||
         (Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1)
     },
+    getFormattedDescription(desc) {
+      return marked(desc)
+    },
     processNestedData(value, group, parentKey, parents) {
       const { valueForState,
         valueForUpdatedSettings,

src/views/settings/components/Instance.vue

@@ -1,13 +1,9 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="uriSchemes" :model="uriSchemesData" :label-width="labelWidth">
-      <setting :setting-group="uriSchemes" :data="uriSchemesData"/>
-    </el-form>
-    <div class="line"/>
     <el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
       <setting :setting-group="adminToken" :data="adminTokenData"/>
     </el-form>
@@ -31,10 +27,10 @@
     <div class="line"/>
     <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 
@@ -54,7 +50,7 @@ export default {
       'settings'
     ]),
     adminToken() {
-      return this.settings.description.find(setting => setting.description === `Allows to set a token that can be used to authenticate with the admin api without using an actual user by giving it as the 'admin_token' parameter`)
+      return this.settings.description.find(setting => setting.children && setting.children[0].key === ':admin_token')
     },
     adminTokenData() {
       return _.get(this.settings.settings, [':pleroma', ':admin_token']) || {}
@@ -103,12 +99,6 @@ export default {
     },
     suggestionsData() {
       return _.get(this.settings.settings, [':pleroma', ':suggestions']) || {}
-    },
-    uriSchemes() {
-      return this.$store.state.settings.description.find(setting => setting.key === ':uri_schemes')
-    },
-    uriSchemesData() {
-      return _.get(this.settings.settings, [':pleroma', ':uri_schemes']) || {}
     }
   },
   methods: {

src/views/settings/components/JobQueue.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="obanQueuesData" :model="obanQueuesData" :label-width="labelWidth">
       <setting :setting-group="obanQueues" :data="obanQueuesData"/>
     </el-form>
@@ -8,10 +8,10 @@
     </el-form>
     <el-form ref="activityExpiration" :model="activityExpirationData" :label-width="labelWidth">
       <setting :setting-group="activityExpiration" :data="activityExpirationData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Logger.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
       <setting :setting-group="logger" :data="loggerData"/>
     </el-form>
@@ -15,10 +15,10 @@
     <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
       <el-form-item label="Quack logger:"/>
       <setting :setting-group="quack" :data="quackData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/MRF.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="mrfSimple" :model="mrfSimpleData" :label-width="labelWidth">
       <setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
     </el-form>
@@ -28,10 +28,10 @@
     <div class="line"/>
     <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
       <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Mailer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
       <setting :setting-group="mailer" :data="mailerData"/>
     </el-form>
@@ -9,10 +9,10 @@
     </el-form>
     <el-form ref="userEmail" :model="userEmail" :label-width="labelWidth">
       <setting :setting-group="userEmail" :data="userEmailData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/MediaProxy.vue

@@ -1,10 +1,12 @@
 <template>
-  <el-form v-if="!loading" ref="mediaProxy" :model="mediaProxyData" :label-width="labelWidth">
+  <div v-if="!loading" class="form-container">
-    <setting :setting-group="mediaProxy" :data="mediaProxyData"/>
+    <el-form v-if="!loading" ref="mediaProxy" :model="mediaProxyData" :label-width="labelWidth">
-    <el-form-item>
+      <setting :setting-group="mediaProxy" :data="mediaProxyData"/>
-      <el-button type="primary" @click="onSubmit">Submit</el-button>
+    </el-form>
-    </el-form-item>
+    <div class="submit-button-container">
-  </el-form>
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
+  </div>
 </template>
 
 <script>

src/views/settings/components/Metadata.vue

@@ -1,15 +1,15 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
       <setting :setting-group="metadata" :data="metadataData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
       <setting :setting-group="richMedia" :data="richMediaData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/Other.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="teslaAdapter" :model="teslaAdapterData" :label-width="labelWidth">
       <setting :setting-group="teslaAdapter" :data="teslaAdapterData"/>
     </el-form>
@@ -9,10 +9,10 @@
     </el-form>
     <el-form ref="remoteIp" :model="remoteIpData" :label-width="labelWidth">
       <setting :setting-group="remoteIp" :data="remoteIpData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 

src/views/settings/components/RateLimiters.vue

@@ -1,10 +1,12 @@
 <template>
-  <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-width="labelWidth">
+  <div v-if="!loading" class="form-container">
-    <setting :setting-group="rateLimiters" :data="rateLimitersData"/>
+    <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-width="labelWidth">
-    <el-form-item>
+      <setting :setting-group="rateLimiters" :data="rateLimitersData"/>
-      <el-button type="primary" @click="onSubmit">Submit</el-button>
+    </el-form>
-    </el-form-item>
+    <div class="submit-button-container">
-  </el-form>
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
+  </div>
 </template>
 
 <script>

src/views/settings/components/Setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!loading">
     <el-form-item v-if="settingGroup.description" class="description-container">
-      <p class="description">{{ settingGroup.description }}</p>
+      <span class="description" v-html="getFormattedDescription(settingGroup.description)"/>
     </el-form-item>
     <div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
       <div v-for="setting in settingGroup.children.filter(setting => !setting.group)" :key="setting.key">
@@ -65,6 +65,7 @@
 import Inputs from './Inputs'
 import i18n from '@/lang'
 import _ from 'lodash'
+import marked from 'marked'
 
 export default {
   name: 'Setting',
@@ -107,6 +108,9 @@ export default {
         type.includes('keyword') ||
         key === ':replace'
     },
+    getFormattedDescription(desc) {
+      return marked(desc)
+    },
     async removeSetting(key) {
       const config = this.settingGroup.key
         ? [{ group: this.settingGroup.group, key: this.settingGroup.key, delete: true, subkeys: [key] }]

src/views/settings/components/Upload.vue

@@ -1,26 +1,29 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="form-container">
     <el-form ref="uploadData" :model="uploadData" :label-width="labelWidth">
       <setting :setting-group="upload" :data="uploadData"/>
     </el-form>
-    <el-form ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
+    <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
+      <el-form-item class="description-container description">
+        <span class="description"><p>Pleroma.Uploaders.Local</p></span>
+      </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
+      <div class="line"/>
     </el-form>
-    <div class="line"/>
+    <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
-    <el-form ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
       <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
+      <div class="line"/>
     </el-form>
-    <div class="line"/>
     <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
       <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
       <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Submit</el-button>
-      </el-form-item>
     </el-form>
+    <div class="submit-button-container">
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
   </div>
 </template>
 
@@ -46,6 +49,14 @@ export default {
     loading() {
       return this.settings.loading
     },
+    showUploadersS3() {
+      const uploader = _.get(this.settings.settings, [':pleroma', 'Pleroma.Upload', ':uploader'])
+      return uploader === 'Pleroma.Uploaders.S3'
+    },
+    showUploadersLocal() {
+      const uploader = _.get(this.settings.settings, [':pleroma', 'Pleroma.Upload', ':uploader'])
+      return uploader === 'Pleroma.Uploaders.Local'
+    },
     upload() {
       return this.settings.description.find(setting => setting.key === 'Pleroma.Upload')
     },

src/views/settings/components/WebPush.vue

@@ -1,10 +1,12 @@
 <template>
-  <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
+  <div v-if="!loading" class="form-container">
-    <setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
+    <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
-    <el-form-item>
+      <setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
-      <el-button type="primary" @click="onSubmit">Submit</el-button>
+    </el-form>
-    </el-form-item>
+    <div class="submit-button-container">
-  </el-form>
+      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+    </div>
+  </div>
 </template>
 
 <script>

src/views/settings/styles/main.scss

@@ -2,19 +2,27 @@
   a {
     text-decoration: underline;
   }
+  .center-label label {
+    text-align: center;
+  }
   .code {
     background-color: #adbed67a;
     border-radius: 3px;
     font-family: monospace;
     padding: 0 3px 0 3px;
   }
-  .description {
+  .description > p {
     font-size: 14px;
     color: #606266;
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
     font-weight: 700;
     line-height: 20px;
     margin: 0 0 14px 0;
+    code {
+      display: inline;
+      padding: 2px 3px;
+      font-size: 14px;
+    }
   }
   .description-container {
     overflow-wrap: break-word;
@@ -26,9 +34,6 @@
   .el-form-item .rate-limit {
     margin-right: 0;
   }
-  .center-label label {
-    text-align: center;
-  }
   .el-input-group__prepend {
     padding-left: 10px;
     padding-right: 10px;
@@ -39,12 +44,21 @@
   .esshd-list {
     margin: 0;
   }
-  .expl {
+  .expl, .expl > p {
     color: #666666;
     font-size: 13px;
     line-height: 22px;
     margin: 5px 0 0 0;
     overflow-wrap: break-word;
+    code {
+      display: inline;
+      line-height: 22px;
+      font-size: 13px;
+      padding: 2px 3px;
+    }
+  }
+  .form-container {
+    margin-bottom: 80px;
   }
   .highlight {
   background-color: #e6e6e6;
@@ -152,6 +166,17 @@
   .ssl-tls-opts {
     margin: 36px 0 0 0;
   }
+  .submit-button {
+    float: right;
+    margin: 0 30px 22px 0;
+  }
+  .submit-button-container {
+    width: 100%;
+    position: fixed;
+    bottom: 0px;
+    right: 0;
+    z-index: 10000;
+  }
   .text {
     line-height: 20px;
     margin-right: 15px

src/views/users/index.vue

@@ -9,8 +9,8 @@
       <el-input :placeholder="$t('users.search')" v-model="search" class="search" @input="handleDebounceSearchInput"/>
     </div>
     <div class="actions-container">
-      <el-button class="actions-button create-account" @click="createAccountDialogOpen = true">
+      <el-button class="actions-button" @click="createAccountDialogOpen = true">
-        <span>
+        <span class="create-account">
           <i class="el-icon-plus"/>
           {{ $t('users.createAccount') }}
         </span>
@@ -354,7 +354,7 @@ export default {
     cursor: pointer;
     color: #409EFF;
   }
-.el-icon-plus {
+.create-account > .el-icon-plus {
   margin-right: 5px;
 }
 .password-reset-token {
@@ -402,14 +402,14 @@ only screen and (max-width: 760px),
     h1 {
       margin: 7px 10px 15px 10px;
     }
+    .actions-button {
+      width: 100%;
+    }
     .actions-container {
       display: flex;
       flex-direction: column;
       margin: 0 10px 7px 10px
     }
-    .create-account {
-      width: 100%;
-    }
     .el-icon-arrow-down {
       font-size: 12px;
     }

yarn.lock

@@ -6348,6 +6348,11 @@ markdown-it@^8.4.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+marked@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.0.tgz#ec5c0c9b93878dc52dd54be8d0e524097bd81a99"
+  integrity sha512-MyUe+T/Pw4TZufHkzAfDj6HarCBWia2y27/bhuYkTaiUnfDYFnCP3KUN+9oM7Wi6JA2rymtVYbQu3spE0GCmxQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"