Auth tab done

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>