diff --git a/src/components/settings_modal/admin_tabs/auth_tab.js b/src/components/settings_modal/admin_tabs/auth_tab.js
index 0e0c082e8..a078291e6 100644
--- a/src/components/settings_modal/admin_tabs/auth_tab.js
+++ b/src/components/settings_modal/admin_tabs/auth_tab.js
@@ -6,7 +6,7 @@ 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 MapSetting from '../helpers/map_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -26,7 +26,7 @@ const AuthTab = {
AttachmentSetting,
GroupSetting,
ListSetting,
- ListTupleSetting
+ MapSetting
},
computed: {
...SharedComputedObject(),
diff --git a/src/components/settings_modal/admin_tabs/auth_tab.vue b/src/components/settings_modal/admin_tabs/auth_tab.vue
index e953afaa6..99922ff3b 100644
--- a/src/components/settings_modal/admin_tabs/auth_tab.vue
+++ b/src/components/settings_modal/admin_tabs/auth_tab.vue
@@ -67,13 +67,21 @@
-
+
+
-
+
+
diff --git a/src/components/settings_modal/helpers/map_setting.js b/src/components/settings_modal/helpers/map_setting.js
new file mode 100644
index 000000000..ad93ceacf
--- /dev/null
+++ b/src/components/settings_modal/helpers/map_setting.js
@@ -0,0 +1,70 @@
+import Setting from './setting.js'
+
+export default {
+ ...Setting,
+ props: {
+ ...Setting.props,
+ allowNew: {
+ required: false,
+ type: Boolean,
+ default: true
+ }
+ },
+ data () {
+ return {
+ newValue: ['',''] // avoiding extra complexity by just using an array instead of an object
+ }
+ },
+ computed: {
+ ...Setting.computed,
+ // state that we'll show in the UI, i.e. transforming map into list
+ displayState () {
+ return Object.entries(this.visibleState)
+ }
+ },
+ methods: {
+ ...Setting.methods,
+ getValue ({ event, key, eventType, isKey }) {
+ switch (eventType) {
+ case 'add': {
+ if (key === '') return this.visibleState
+ const res = {...this.visibleState, ...Object.fromEntries([this.newValue])}
+ this.newValue = ['', '']
+ return res
+ }
+
+ case 'remove': {
+ // initial state for this type is empty array
+ if (Array.isArray(this.visibleState)) return this.visibleState
+ const newEntries = Object.entries(this.visibleState).filter(([k]) => k !== key)
+
+ if (newEntries.length === 0 ) return []
+ return Object.fromEntries(newEntries)
+ }
+
+ case 'edit': {
+ const string = event.target.value
+ const newEntries = Object
+ .entries(this.visibleState)
+ .map(([k, v]) => {
+ if (isKey) {
+ if (k === key) {
+ return [string, v]
+ } else {
+ return [k, v]
+ }
+ } else {
+ if (k === key) {
+ return [k, string]
+ } else {
+ return [k, v]
+ }
+ }
+ })
+
+ return Object.fromEntries(newEntries)
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/settings_modal/helpers/map_setting.vue b/src/components/settings_modal/helpers/map_setting.vue
new file mode 100644
index 000000000..01b6cbc0f
--- /dev/null
+++ b/src/components/settings_modal/helpers/map_setting.vue
@@ -0,0 +1,109 @@
+
+
+
+
+ {{ backendDescriptionDescription + ' ' }}
+
+
+
+
+
+
+
+
+
+