Auth tab done

src/components/settings_modal/admin_tabs/auth_tab.js

@@ -0,0 +1,39 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import TupleSetting from '../helpers/tuple_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+import ListTupleSetting from '../helpers/list_tuple_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const AuthTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    TupleSetting,
+    AttachmentSetting,
+    GroupSetting,
+    ListSetting,
+    ListTupleSetting
+  },
+  computed: {
+    ...SharedComputedObject(),
+    LDAPEnabled () {
+      return this.$store.state.adminSettings.draft[':pleroma'][':ldap'][':enabled']
+    },
+  }
+}
+
+export default AuthTab

src/components/settings_modal/admin_tabs/auth_tab.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :label="$t('admin_dash.tabs.job_queues')">
+    <div class="setting-item">
+      <h3>{{ $t('admin_dash.auth.OAuth') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <StringSetting path=":pleroma.:auth.:auth_template" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:auth.:enforce_oauth_admin_scope_usage" />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:auth.:oauth_consumer_template" />
+        </li>
+        <li>
+          <ListSetting path=":pleroma.:auth.:oauth_consumer_strategies" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:oauth2.:token_expires_in" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:oauth2.:issue_new_refresh_token" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:oauth2.:clean_expired_tokens" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.auth.LDAP') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:ldap.:enabled" />
+        </li>
+        <template v-if="LDAPEnabled">
+          <li>
+            <StringSetting path=":pleroma.:ldap.:host" />
+          </li>
+          <li>
+            <IntegerSetting path=":pleroma.:ldap.:port" />
+          </li>
+          <li>
+            <BooleanSetting path=":pleroma.:ldap.:tls" />
+          </li>
+          <li>
+            <ListTupleSetting tuple path=":pleroma.:ldap.:tlsopts" />
+          </li>
+          <li>
+            <BooleanSetting path=":pleroma.:ldap.:ssl" />
+          </li>
+          <li>
+            <ListTupleSetting tuple path=":pleroma.:ldap.:sslopts" />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:base" />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:uid" />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:cacertfile" />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:mail" />
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./auth_tab.js"></script>

src/components/settings_modal/helpers/list_setting.js

@@ -53,6 +53,7 @@ export default {
     },
     suggestionsSet () {
       const suggestions = this.backendDescriptionSuggestions
+      console.log(suggestions)
       if (suggestions) {
         return new Set(suggestions)
       } else {
@@ -93,6 +94,7 @@ export default {
         }
 
         case 'add': {
+          if (!this.newValue) return this.visibleState
           const res = [...this.visibleState, this.newValue]
           this.newValue = ''
           return res
@@ -108,7 +110,8 @@ export default {
         case 'edit': {
           const pre = this.visibleState.slice(0, index)
           const post = this.visibleState.slice(index + 1)
-          const string = event?.target?.value
+          const string = event.target.value
+          if (!string) return this.visibleState
 
           return [...pre, string, ...post]
         }

src/components/settings_modal/helpers/list_tuple_setting.js

@@ -0,0 +1,44 @@
+import ListSetting from './list_setting.js'
+
+export default {
+  ...ListSetting,
+  data () {
+    return {
+      newValue: ['','']
+    }
+  },
+  methods: {
+    ...ListSetting.methods,
+    getValue ({ event, index, eventType, tuple }) {
+      switch (eventType) {
+        case 'add': {
+          if (!this.newValue[0] || !this.newValue[1]) return this.visibleState
+          const res = [...this.visibleState, this.newValue]
+          this.newValue = ['', '']
+          return res
+        }
+
+        case 'remove': {
+          const pre = this.visibleState.slice(0, index)
+          const post = this.visibleState.slice(index + 1)
+
+          return [...pre, ...post]
+        }
+
+        case 'edit': {
+          const pre = this.visibleState.slice(0, index)
+          const post = this.visibleState.slice(index + 1)
+          const item = this.visibleState[index]
+          const string = event.target.value
+          if (!string) return this.visibleState
+
+          if (tuple === 0) {
+            return [...pre, [string, item[1]], ...post]
+          } else {
+            return [...pre, [item[0], string], ...post]
+          }
+        }
+      }
+    }
+  }
+}

src/components/settings_modal/helpers/list_tuple_setting.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    v-if="matchesExpertLevel"
+    class="ListSetting"
+  >
+    <label
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <ul class="setting-list">
+      <li v-for="(item, index) in visibleState">
+        <div class="btn-group">
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :value="item[0]"
+            @change="e => update({ event: e, index, eventType: 'edit', tuple: 0 })"
+          >
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :value="item[1]"
+            @change="e => update({ event: e, index, eventType: 'edit', tuple: 1 })"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ index, eventType: 'remove' })"
+          >
+            <FAIcon icon="times" />
+          </button>
+        </div>
+      </li>
+      <li>
+        <div class="btn-group">
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :disabled="shouldBeDisabled"
+            :placeholder="backendDescriptionSuggestions[0][0]"
+            v-model="newValue[0]"
+          >
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :disabled="shouldBeDisabled"
+            :placeholder="backendDescriptionSuggestions[0][1]"
+            v-model="newValue[1]"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ eventType: 'add' })"
+          >
+            <FAIcon icon="plus" />
+          </button>
+        </div>
+      </li>
+    </ul>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </div>
+</template>
+
+<style lang="scss">
+.ListSetting {
+  .btn-group {
+    display: flex
+  }
+
+  dl {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    gap: 0.5em;
+
+    dt {
+      display: inline;
+      font-weight: 800;
+
+      &::after {
+        content: ':'
+      }
+    }
+
+    dd {
+      display: inline;
+      margin: 0
+    }
+  }
+}
+</style>
+<script src="./list_tuple_setting.js"></script>

src/components/settings_modal/settings_modal.scss

@@ -31,6 +31,11 @@
     margin-top: 0;
   }
 
+  p {
+    width: 40em;
+    line-height: 1.5;
+  }
+
   .setting-list,
   .option-list {
     list-style-type: none;

src/components/settings_modal/settings_modal_admin_content.js

@@ -10,6 +10,7 @@ import UploadsTab from './admin_tabs/uploads_tab.vue'
 import MailerTab from './admin_tabs/mailer_tab.vue'
 import MonitoringTab from './admin_tabs/monitoring_tab.vue'
 import RegistrationsTab from './admin_tabs/registrations_tab.vue'
+import AuthTab from './admin_tabs/auth_tab.vue'
 import JobQueuesTab from './admin_tabs/job_queues_tab.vue'
 import { useInterfaceStore } from 'src/stores/interface'
 
@@ -24,6 +25,7 @@ import {
   faChartLine,
   faDoorOpen,
   faGears,
+  faKey,
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -37,6 +39,7 @@ library.add(
   faChartLine,
   faDoorOpen,
   faGears,
+  faKey,
   faUpload
 )
 
@@ -54,6 +57,7 @@ const SettingsModalAdminContent = {
     MediaProxyTab,
     LinksTab,
     JobQueuesTab,
+    AuthTab,
     MonitoringTab,
   },
   computed: {

src/components/settings_modal/settings_modal_admin_content.vue

@@ -57,6 +57,14 @@
       <RegistrationsTab />
     </div>
 
+    <div
+      :label="$t('admin_dash.tabs.auth')"
+      icon="key"
+      data-tab-name="monitoring"
+    >
+      <AuthTab />
+    </div>
+
     <div
       :label="$t('admin_dash.tabs.emoji')"
       icon="face-smile-beam"

src/i18n/en.json

@@ -1159,7 +1159,12 @@
       "monitoring": "Monitoring",
       "registrations": "Registrations",
       "links": "Links",
-      "job_queues": "Job Queues"
+      "job_queues": "Job Queues",
+      "auth": "Auth"
+    },
+    "auth": {
+      "LDAP": "LDAP Settings",
+      "OAuth": "Oauth2 settings"
     },
     "job_queues": {
       "Oban": "Oban queues",