From ba0499a1d36673234eca2838734eec3bd184fd84 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 15 Nov 2019 17:06:47 +0900
Subject: [PATCH] Render RateLimiters using data from API

---
 src/views/settings/components/Inputs.vue      |  56 +++
 .../settings/components/RateLimiters.vue      | 364 +-----------------
 2 files changed, 65 insertions(+), 355 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 4fe634eb..2f582cd7 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -99,6 +99,30 @@
           @change="updateSetting($event, settingGroup.key, setting.key)"/>
       </el-form-item>
     </div>
+    <div v-if="settingGroup.key === ':rate_limit'">
+      <div v-if="!rateLimitAuthUsers">
+        <el-input :value="rateLimitAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'oneLimit', rateLimitAllUsers)"/> :
+        <el-input :value="rateLimitAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
+        <div class="limit-button-container">
+          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], setting.key)"/>
+          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
+        </div>
+      </div>
+      <div v-if="rateLimitAuthUsers">
+        <el-form-item label="Authenticated users:">
+          <el-input :value="rateLimitAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/> :
+          <el-input :value="rateLimitAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+        </el-form-item>
+        <el-form-item label="Unauthenticated users:">
+          <el-input :value="rateLimitUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/> :
+          <el-input :value="rateLimitUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+        </el-form-item>
+        <div class="limit-button-container">
+          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, setting.key)"/>
+          <p class="expl limit-expl">Set limit for all users</p>
+        </div>
+      </div>
+    </div>
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
 </template>
@@ -153,6 +177,19 @@ export default {
       return this.data[this.setting.key] === ':disabled'
         ? ':disabled'
         : Object.keys(this.data[this.setting.key])[0]
+    },
+    rateLimitAllUsers() {
+      return this.data[this.setting.key] ? Object.entries(this.data[this.setting.key])[0] : [null, null]
+    },
+    rateLimitAuthUsers() {
+      return Array.isArray(this.data[this.setting.key])
+        ? Object.entries(this.data[this.setting.key][1])[0]
+        : false
+    },
+    rateLimitUnauthUsers() {
+      return Array.isArray(this.data[this.setting.key])
+        ? Object.entries(this.data[this.setting.key][0])[0]
+        : false
     }
   },
   methods: {
@@ -194,6 +231,22 @@ export default {
       console.log(updatedValue)
       this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
     },
+    parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
+      if (typeOfLimit === 'oneLimit') {
+        const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }
+        this.updateSetting(valueToSend, 'rate_limit', input)
+      } else if (typeOfLimit === 'authUserslimit') {
+        const valueToSend = typeOfInput === 'scale'
+          ? [{ 'tuple': [currentValue[0][0], currentValue[0][1]] }, { 'tuple': [value, currentValue[1][1]] }]
+          : [{ 'tuple': [currentValue[0][0], currentValue[0][1]] }, { 'tuple': [currentValue[1][0], value] }]
+        this.updateSetting(valueToSend, 'rate_limit', input)
+      } else if (typeOfLimit === 'unauthUsersLimit') {
+        const valueToSend = typeOfInput === 'scale'
+          ? [{ 'tuple': [value, currentValue[0][1]] }, { 'tuple': [currentValue[1][0], currentValue[1][1]] }]
+          : [{ 'tuple': [currentValue[0][0], value] }, { 'tuple': [currentValue[1][0], currentValue[1][1]] }]
+        this.updateSetting(valueToSend, 'rate_limit', input)
+      }
+    },
     processNestedData(value, tab, inputName, childName) {
       const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
       this.updateSetting(updatedValue, tab, inputName)
@@ -209,6 +262,9 @@ export default {
     toggleAtomTuple(value, tab, input) {
       console.log(value)
     },
+    toggleLimits(value, input) {
+      this.updateSetting(value, 'rate_limit', input)
+    },
     updateSetting(value, tab, input) {
       this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
     }
diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue
index f0381846..5c079b83 100644
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@@ -1,221 +1,6 @@
 <template>
-  <el-form v-if="!loading" ref="rateLimiters" :model="rateLimiters" :label-width="labelWidth">
-    <el-form-item label="Search:">
-      <div v-if="!searchLimitAuthUsers">
-        <el-input :value="searchLimitAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'search', 'scale', 'oneLimit', searchLimitAllUsers)"/> :
-        <el-input :value="searchLimitAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'search', 'limit', 'oneLimit', searchLimitAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'search')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="searchLimitAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="searchLimitAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'search', 'scale', 'authUserslimit', [searchLimitUnauthUsers, searchLimitAuthUsers])"/> :
-          <el-input :value="searchLimitAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'search', 'limit', 'authUserslimit', [searchLimitUnauthUsers, searchLimitAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="searchLimitUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'search', 'scale', 'unauthUsersLimit', [searchLimitUnauthUsers, searchLimitAuthUsers])"/> :
-          <el-input :value="searchLimitUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'search', 'limit', 'unauthUsersLimit', [searchLimitUnauthUsers, searchLimitAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'search')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="App account creation:">
-      <div v-if="!appAccountCreationAuthUsers">
-        <el-input :value="appAccountCreationAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'app_account_creation', 'scale', 'oneLimit', appAccountCreationAllUsers)"/> :
-        <el-input :value="appAccountCreationAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'app_account_creation', 'limit', 'oneLimit', appAccountCreationAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'app_account_creation')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="appAccountCreationAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="appAccountCreationAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'app_account_creation', 'scale', 'authUserslimit', [appAccountCreationUnauthUsers, appAccountCreationAuthUsers])"/> :
-          <el-input :value="appAccountCreationAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'app_account_creation', 'limit', 'authUserslimit', [appAccountCreationUnauthUsers, appAccountCreationAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="appAccountCreationUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'app_account_creation', 'scale', 'unauthUsersLimit', [appAccountCreationUnauthUsers, appAccountCreationAuthUsers])"/> :
-          <el-input :value="appAccountCreationUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'app_account_creation', 'limit', 'unauthUsersLimit', [appAccountCreationUnauthUsers, appAccountCreationAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'app_account_creation')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="Relations actions:">
-      <div v-if="!relationsActionsAuthUsers">
-        <el-input :value="relationsActionsAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'relations_actions', 'scale', 'oneLimit', relationsActionsAllUsers)"/> :
-        <el-input :value="relationsActionsAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'relations_actions', 'limit', 'oneLimit', relationsActionsAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'relations_actions')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="relationsActionsAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="relationsActionsAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'relations_actions', 'scale', 'authUserslimit', [relationsActionsUnauthUsers, relationsActionsAuthUsers])"/> :
-          <el-input :value="relationsActionsAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'relations_actions', 'limit', 'authUserslimit', [relationsActionsUnauthUsers, relationsActionsAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="relationsActionsUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'relations_actions', 'scale', 'unauthUsersLimit', [relationsActionsUnauthUsers, relationsActionsAuthUsers])"/> :
-          <el-input :value="relationsActionsUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'relations_actions', 'limit', 'unauthUsersLimit', [relationsActionsUnauthUsers, relationsActionsAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'relations_actions')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="Relation ID Action:">
-      <div v-if="!relationIdActionAuthUsers">
-        <el-input :value="relationIdActionAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'relation_id_action', 'scale', 'oneLimit', relationIdActionAllUsers)"/> :
-        <el-input :value="relationIdActionAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'relation_id_action', 'limit', 'oneLimit', relationIdActionAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'relation_id_action')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="relationIdActionAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="relationIdActionAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'relation_id_action', 'scale', 'authUserslimit', [relationIdActionUnauthUsers, relationIdActionAuthUsers])"/> :
-          <el-input :value="relationIdActionAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'relation_id_action', 'limit', 'authUserslimit', [relationIdActionUnauthUsers, relationIdActionAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="relationIdActionUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'relation_id_action', 'scale', 'unauthUsersLimit', [relationIdActionUnauthUsers, relationIdActionAuthUsers])"/> :
-          <el-input :value="relationIdActionUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'relation_id_action', 'limit', 'unauthUsersLimit', [relationIdActionUnauthUsers, relationIdActionAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'relation_id_action')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="Statuses actions:">
-      <div v-if="!statusesActionsAuthUsers">
-        <el-input :value="statusesActionsAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'statuses_actions', 'scale', 'oneLimit', statusesActionsAllUsers)"/> :
-        <el-input :value="statusesActionsAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'statuses_actions', 'limit', 'oneLimit', statusesActionsAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'statuses_actions')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="statusesActionsAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="statusesActionsAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'statuses_actions', 'scale', 'authUserslimit', [statusesActionsUnauthUsers, statusesActionsAuthUsers])"/> :
-          <el-input :value="statusesActionsAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'statuses_actions', 'limit', 'authUserslimit', [statusesActionsUnauthUsers, statusesActionsAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="statusesActionsUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'statuses_actions', 'scale', 'unauthUsersLimit', [statusesActionsUnauthUsers, statusesActionsAuthUsers])"/> :
-          <el-input :value="statusesActionsUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'statuses_actions', 'limit', 'unauthUsersLimit', [statusesActionsUnauthUsers, statusesActionsAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'statuses_actions')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="Status ID Action:">
-      <div v-if="!statusIdActionAuthUsers">
-        <el-input :value="statusIdActionAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'status_id_action', 'scale', 'oneLimit', statusIdActionAllUsers)"/> :
-        <el-input :value="statusIdActionAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'status_id_action', 'limit', 'oneLimit', statusIdActionAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'status_id_action')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="statusIdActionAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="statusIdActionAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'status_id_action', 'scale', 'authUserslimit', [statusIdActionUnauthUsers, statusIdActionAuthUsers])"/> :
-          <el-input :value="statusIdActionAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'status_id_action', 'limit', 'authUserslimit', [statusIdActionUnauthUsers, statusIdActionAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="statusIdActionUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'status_id_action', 'scale', 'unauthUsersLimit', [statusIdActionUnauthUsers, statusIdActionAuthUsers])"/> :
-          <el-input :value="statusIdActionUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'status_id_action', 'limit', 'unauthUsersLimit', [statusIdActionUnauthUsers, statusIdActionAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'status_id_action')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="Password reset:">
-      <div v-if="!passwordResetAuthUsers">
-        <el-input :value="passwordResetAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'password_reset', 'scale', 'oneLimit', passwordResetAllUsers)"/> :
-        <el-input :value="passwordResetAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'password_reset', 'limit', 'oneLimit', passwordResetAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'password_reset')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="passwordResetAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="passwordResetAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'password_reset', 'scale', 'authUserslimit', [passwordResetUnauthUsers, passwordResetAuthUsers])"/> :
-          <el-input :value="passwordResetAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'password_reset', 'limit', 'authUserslimit', [passwordResetUnauthUsers, passwordResetAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="passwordResetUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'password_reset', 'scale', 'unauthUsersLimit', [passwordResetUnauthUsers, passwordResetAuthUsers])"/> :
-          <el-input :value="passwordResetUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'password_reset', 'limit', 'unauthUsersLimit', [passwordResetUnauthUsers, passwordResetAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'password_reset')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="Account confirmation resend:">
-      <div v-if="!accountConfirmationResendAuthUsers">
-        <el-input :value="accountConfirmationResendAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'account_confirmation_resend', 'scale', 'oneLimit', accountConfirmationResendAllUsers)"/> :
-        <el-input :value="accountConfirmationResendAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'account_confirmation_resend', 'limit', 'oneLimit', accountConfirmationResendAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'account_confirmation_resend')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="accountConfirmationResendAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="accountConfirmationResendAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'account_confirmation_resend', 'scale', 'authUserslimit', [accountConfirmationResendUnauthUsers, accountConfirmationResendAuthUsers])"/> :
-          <el-input :value="accountConfirmationResendAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'account_confirmation_resend', 'limit', 'authUserslimit', [accountConfirmationResendUnauthUsers, accountConfirmationResendAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="accountConfirmationResendUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'account_confirmation_resend', 'scale', 'unauthUsersLimit', [accountConfirmationResendUnauthUsers, accountConfirmationResendAuthUsers])"/> :
-          <el-input :value="accountConfirmationResendUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'account_confirmation_resend', 'limit', 'unauthUsersLimit', [accountConfirmationResendUnauthUsers, accountConfirmationResendAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'account_confirmation_resend')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
-    <el-form-item label="Activity pub routes:">
-      <div v-if="!activityPubRoutesAuthUsers">
-        <el-input :value="activityPubRoutesAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'ap_routes', 'scale', 'oneLimit', activityPubRoutesAllUsers)"/> :
-        <el-input :value="activityPubRoutesAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'ap_routes', 'limit', 'oneLimit', activityPubRoutesAllUsers)"/>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], 'ap_routes')"/>
-          <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
-        </div>
-      </div>
-      <div v-if="activityPubRoutesAuthUsers">
-        <el-form-item label="Authenticated users:">
-          <el-input :value="activityPubRoutesAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'ap_routes', 'scale', 'authUserslimit', [activityPubRoutesUnauthUsers, activityPubRoutesAuthUsers])"/> :
-          <el-input :value="activityPubRoutesAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'ap_routes', 'limit', 'authUserslimit', [activityPubRoutesUnauthUsers, activityPubRoutesAuthUsers])"/>
-        </el-form-item>
-        <el-form-item label="Unauthenticated users:">
-          <el-input :value="activityPubRoutesUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'ap_routes', 'scale', 'unauthUsersLimit', [activityPubRoutesUnauthUsers, activityPubRoutesAuthUsers])"/> :
-          <el-input :value="activityPubRoutesUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, 'ap_routes', 'limit', 'unauthUsersLimit', [activityPubRoutesUnauthUsers, activityPubRoutesAuthUsers])"/>
-        </el-form-item>
-        <div class="limit-button-container">
-          <el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, 'ap_routes')"/>
-          <p class="expl limit-expl">Set limit for all users</p>
-        </div>
-      </div>
-    </el-form-item>
+  <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-width="labelWidth">
+    <setting :setting-group="rateLimiters" :data="rateLimitersData"/>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">Submit</el-button>
     </el-form-item>
@@ -225,129 +10,20 @@
 <script>
 import i18n from '@/lang'
 import { mapGetters } from 'vuex'
+import Setting from './Setting'
 
 export default {
   name: 'RateLimiters',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'rateLimiters'
+      'settings'
     ]),
-    accountConfirmationResendAllUsers() {
-      return this.rateLimiters.account_confirmation_resend ? this.rateLimiters.account_confirmation_resend.tuple : [null, null]
+    rateLimiters() {
+      return this.settings.description.find(setting => setting.key === ':rate_limit')
     },
-    accountConfirmationResendAuthUsers() {
-      return Array.isArray(this.rateLimiters.account_confirmation_resend)
-        ? this.rateLimiters.account_confirmation_resend[1].tuple
-        : false
-    },
-    accountConfirmationResendUnauthUsers() {
-      return Array.isArray(this.rateLimiters.account_confirmation_resend)
-        ? this.rateLimiters.account_confirmation_resend[0].tuple
-        : false
-    },
-    activityPubRoutesAllUsers() {
-      return this.rateLimiters.ap_routes ? this.rateLimiters.ap_routes.tuple : [null, null]
-    },
-    activityPubRoutesAuthUsers() {
-      return Array.isArray(this.rateLimiters.ap_routes)
-        ? this.rateLimiters.ap_routes[1].tuple
-        : false
-    },
-    activityPubRoutesUnauthUsers() {
-      return Array.isArray(this.rateLimiters.ap_routes)
-        ? this.rateLimiters.ap_routes[0].tuple
-        : false
-    },
-    appAccountCreationAllUsers() {
-      return this.rateLimiters.app_account_creation ? this.rateLimiters.app_account_creation.tuple : [null, null]
-    },
-    appAccountCreationAuthUsers() {
-      return Array.isArray(this.rateLimiters.app_account_creation)
-        ? this.rateLimiters.app_account_creation[1].tuple
-        : false
-    },
-    appAccountCreationUnauthUsers() {
-      return Array.isArray(this.rateLimiters.app_account_creation)
-        ? this.rateLimiters.app_account_creation[0].tuple
-        : false
-    },
-    passwordResetAllUsers() {
-      return this.rateLimiters.password_reset ? this.rateLimiters.password_reset.tuple : [null, null]
-    },
-    passwordResetAuthUsers() {
-      return Array.isArray(this.rateLimiters.password_reset)
-        ? this.rateLimiters.password_reset[1].tuple
-        : false
-    },
-    passwordResetUnauthUsers() {
-      return Array.isArray(this.rateLimiters.password_reset)
-        ? this.rateLimiters.password_reset[0].tuple
-        : false
-    },
-    relationsActionsAllUsers() {
-      return this.rateLimiters.relations_actions ? this.rateLimiters.relations_actions.tuple : [null, null]
-    },
-    relationsActionsAuthUsers() {
-      return Array.isArray(this.rateLimiters.relations_actions)
-        ? this.rateLimiters.relations_actions[1].tuple
-        : false
-    },
-    relationsActionsUnauthUsers() {
-      return Array.isArray(this.rateLimiters.relations_actions)
-        ? this.rateLimiters.relations_actions[0].tuple
-        : false
-    },
-    relationIdActionAllUsers() {
-      return this.rateLimiters.relation_id_action ? this.rateLimiters.relation_id_action.tuple : [null, null]
-    },
-    relationIdActionAuthUsers() {
-      return Array.isArray(this.rateLimiters.relation_id_action)
-        ? this.rateLimiters.relation_id_action[1].tuple
-        : false
-    },
-    relationIdActionUnauthUsers() {
-      return Array.isArray(this.rateLimiters.relation_id_action)
-        ? this.rateLimiters.relation_id_action[0].tuple
-        : false
-    },
-    searchLimitAllUsers() {
-      return this.rateLimiters.search ? this.rateLimiters.search.tuple : [null, null]
-    },
-    searchLimitAuthUsers() {
-      return Array.isArray(this.rateLimiters.search)
-        ? this.rateLimiters.search[1].tuple
-        : false
-    },
-    searchLimitUnauthUsers() {
-      return Array.isArray(this.rateLimiters.search)
-        ? this.rateLimiters.search[0].tuple
-        : false
-    },
-    statusesActionsAllUsers() {
-      return this.rateLimiters.statuses_actions ? this.rateLimiters.statuses_actions.tuple : [null, null]
-    },
-    statusesActionsAuthUsers() {
-      return Array.isArray(this.rateLimiters.statuses_actions)
-        ? this.rateLimiters.statuses_actions[1].tuple
-        : false
-    },
-    statusesActionsUnauthUsers() {
-      return Array.isArray(this.rateLimiters.statuses_actions)
-        ? this.rateLimiters.statuses_actions[0].tuple
-        : false
-    },
-    statusIdActionAllUsers() {
-      return this.rateLimiters.status_id_action ? this.rateLimiters.status_id_action.tuple : [null, null]
-    },
-    statusIdActionAuthUsers() {
-      return Array.isArray(this.rateLimiters.status_id_action)
-        ? this.rateLimiters.status_id_action[1].tuple
-        : false
-    },
-    statusIdActionUnauthUsers() {
-      return Array.isArray(this.rateLimiters.status_id_action)
-        ? this.rateLimiters.status_id_action[0].tuple
-        : false
+    rateLimitersData() {
+      return this.settings.settings[':rate_limit']
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -360,28 +36,6 @@ export default {
     }
   },
   methods: {
-    parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
-      if (typeOfLimit === 'oneLimit') {
-        const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }
-        this.updateSetting(valueToSend, 'rate_limit', input)
-      } else if (typeOfLimit === 'authUserslimit') {
-        const valueToSend = typeOfInput === 'scale'
-          ? [{ 'tuple': [currentValue[0][0], currentValue[0][1]] }, { 'tuple': [value, currentValue[1][1]] }]
-          : [{ 'tuple': [currentValue[0][0], currentValue[0][1]] }, { 'tuple': [currentValue[1][0], value] }]
-        this.updateSetting(valueToSend, 'rate_limit', input)
-      } else if (typeOfLimit === 'unauthUsersLimit') {
-        const valueToSend = typeOfInput === 'scale'
-          ? [{ 'tuple': [value, currentValue[0][1]] }, { 'tuple': [currentValue[1][0], currentValue[1][1]] }]
-          : [{ 'tuple': [currentValue[0][0], value] }, { 'tuple': [currentValue[1][0], currentValue[1][1]] }]
-        this.updateSetting(valueToSend, 'rate_limit', input)
-      }
-    },
-    toggleLimits(value, input) {
-      this.updateSetting(value, 'rate_limit', input)
-    },
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')