Add input for registrations and invites with confirmations

src/views/settings/components/Inputs.vue

@@ -41,7 +41,7 @@
           class="input"
           @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
         <el-switch
-          v-if="setting.type === 'boolean'"
+          v-if="setting.type === 'boolean' && ![':registrations_open', ':invites_enabled'].includes(setting.key)"
           :value="inputValue"
           :data-search="setting.key || setting.group"
           class="switch-input"
@@ -103,6 +103,7 @@
         <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
         <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"/>
         <!-------------------->
         <el-tooltip v-if="canBeDeleted && (isMobile || 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"/>
@@ -118,7 +119,17 @@
 
 <script>
 import i18n from '@/lang'
-import { AutoLinkerInput, CrontabInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
+import {
+  AutoLinkerInput,
+  CrontabInput,
+  EditableKeywordInput,
+  IconsInput,
+  MascotsInput,
+  MultipleSelect,
+  ProxyUrlInput,
+  PruneInput,
+  RateLimitInput,
+  RegInvitesInput } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
 import marked from 'marked'
@@ -134,7 +145,8 @@ export default {
     MultipleSelect,
     ProxyUrlInput,
     PruneInput,
-    RateLimitInput
+    RateLimitInput,
+    RegInvitesInput
   },
   props: {
     customLabelWidth: {

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

@@ -0,0 +1,74 @@
+<template>
+  <el-switch
+    :value="data[setting.key]"
+    :data-search="setting.key"
+    class="switch-input"
+    @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)"/>
+</template>
+
+<script>
+export default {
+  name: 'RegInvitesInput',
+  props: {
+    data: {
+      type: [Object, Array],
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  methods: {
+    updateSetting(value, group, key, input, type) {
+      const registrationsOpen = this.$store.state.settings.settings[group][key][':registrations_open']
+      const invitesEnabled = this.$store.state.settings.settings[group][key][':invites_enabled']
+      if (input === ':registrations_open' && value && invitesEnabled) {
+        this.$confirm(
+          'Enabling this setting requires invites to be disabled. Are you sure you want to open registrations?',
+          'Warning',
+          { confirmButtonText: 'OK',
+            cancelButtonText: 'Cancel',
+            type: 'warning'
+          }).then(() => {
+          this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+          this.$store.dispatch('UpdateSettings', { group, key, input: ':invites_enabled', value: false, type })
+          this.$store.dispatch('UpdateState', { group, key, input, value })
+          this.$store.dispatch('UpdateState', { group, key, input: ':invites_enabled', value: false })
+        })
+      } else if (input === ':invites_enabled' && value && registrationsOpen) {
+        this.$confirm(
+          'Enabling this setting requires registrations to be disabled. Are you sure you want to enable invitations?',
+          'Warning',
+          { confirmButtonText: 'OK',
+            cancelButtonText: 'Cancel',
+            type: 'warning'
+          }).then(() => {
+          this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+          this.$store.dispatch('UpdateSettings', { group, key, input: ':registrations_open', value: false, type })
+          this.$store.dispatch('UpdateState', { group, key, input, value })
+          this.$store.dispatch('UpdateState', { group, key, input: ':registrations_open', value: false })
+        })
+      } else {
+        this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+        this.$store.dispatch('UpdateState', { group, key, input, value })
+      }
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

src/views/settings/components/inputComponents/index.js

@@ -7,3 +7,4 @@ export { default as MultipleSelect } from './MultipleSelect'
 export { default as ProxyUrlInput } from './ProxyUrlInput'
 export { default as PruneInput } from './PruneInput'
 export { default as RateLimitInput } from './RateLimitInput'
+export { default as RegInvitesInput } from './RegInvitesInput'