Reduce options and labels for Pleroma authenticator input

src/views/settings/components/Inputs.vue

@@ -55,7 +55,7 @@
           :data-search="setting.key || setting.group"
           @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
         <el-select
-          v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
+          v-if="setting.key !== 'Pleroma.Web.Auth.Authenticator' && (setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown')))"
           :value="inputValue === false ? 'false' : inputValue"
           :data-search="setting.key || setting.group"
           clearable
@@ -67,7 +67,7 @@
             :key="index"/>
         </el-select>
         <el-select
-          v-if="!setting.key === ':rewrite_policy' && renderMultipleSelect(setting.type)"
+          v-if="renderMultipleSelect(setting.type) && setting.key !== ':rewrite_policy'"
           :value="inputValue"
           :data-search="setting.key || setting.group"
           multiple
@@ -104,7 +104,7 @@
         <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"/>
         <reg-invites-input v-if="[':registrations_open', ':invites_enabled'].includes(setting.key)" :data="data" :setting-group="settingGroup" :setting="setting"/>
-        <rewrite-policy-input v-if="setting.key === ':rewrite_policy'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
+        <rewrite-policy-input v-if="reducedSelects" :data="data" :setting-group="settingGroup" :setting="setting"/>
         <!-------------------->
         <el-tooltip v-if="canBeDeleted && isTablet" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
           <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
@@ -253,6 +253,9 @@ export default {
     keywordData() {
       return Array.isArray(this.data) ? this.data : []
     },
+    reducedSelects() {
+      return [':rewrite_policy', 'Pleroma.Web.Auth.Authenticator'].includes(this.setting.key)
+    },
     settings() {
       return this.$store.state.settings.settings
     },

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

@@ -1,7 +1,7 @@
 <template>
   <div class="input">
     <el-select
-      v-if="isMobile"
+      v-if="renderMultipleSelect(setting.type)"
       :value="rewritePolicyValue"
       :data-search="setting.key"
       multiple
@@ -11,15 +11,17 @@
       <el-option v-for="(option, index) in rewritePolicyOptions(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
     </el-select>
     <el-select
-      v-else
+      v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
-      :value="rewritePolicyValue"
+      :value="data.value"
-      :data-search="setting.key"
+      :data-search="setting.key || setting.group"
-      multiple
+      clearable
-      filterable
-      allow-create
       class="input"
       @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
-      <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
+      <el-option
+        v-for="(option, index) in authenticatorOptions(setting.suggestions)"
+        :value="option.value"
+        :label="option.label"
+        :key="index"/>
     </el-select>
   </div>
 </template>
@@ -29,7 +31,7 @@ export default {
   name: 'RewritePolicyInput',
   props: {
     data: {
-      type: [String, Array],
+      type: [Array, Object],
       default: function() {
         return {}
       }
@@ -52,10 +54,27 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     rewritePolicyValue() {
-      return typeof this.data === 'string' ? [this.data] : this.data
+      return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
     }
   },
   methods: {
+    authenticatorOptions(suggestions) {
+      return suggestions.map(element => {
+        const label = element.split('Pleroma.Web.Auth.')[1]
+          ? element.split('Pleroma.Web.Auth.')[1]
+          : element
+        return { value: element, label }
+      })
+    },
+    renderMultipleSelect(type) {
+      return Array.isArray(type) && this.setting.key !== ':backends' && this.setting.key !== ':args' && (
+        type.includes('module') ||
+        (type.includes('list') && type.includes('string')) ||
+        (type.includes('list') && type.includes('atom')) ||
+        (type.includes('regex') && type.includes('string')) ||
+        this.setting.key === ':args'
+      )
+    },
     rewritePolicyOptions(suggestions) {
       return suggestions.map(element => {
         const label = element.split('Pleroma.Web.ActivityPub.MRF.')[1]