Add cofirm message dialog on clicking remove button

src/lang/en.js

@@ -387,7 +387,8 @@ export default {
     corsPlug: 'CORS plug config',
     instanceReboot: 'Reboot Instance',
     restartApp: 'You must restart the instance to apply settings',
-    restartSuccess: 'Instance rebooted successfully!'
+    restartSuccess: 'Instance rebooted successfully!',
+    removeSettingConfirmation: 'Are you sure you want to remove this setting\'s value from the database?'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/views/settings/components/Inputs.vue

@@ -296,6 +296,13 @@ export default {
         { group, key: parentKey, input: setting.key, value: valueForState })
     },
     async removeSetting() {
+      this.$confirm(
+        this.$t('settings.removeSettingConfirmation'),
+        {
+          confirmButtonText: this.$t('users.ok'),
+          cancelButtonText: this.$t('users.cancel'),
+          type: 'warning'
+        }).then(async() => {
         const config = this.settingGroup.key
           ? [{ group: this.settingGroup.group, key: this.settingGroup.key, delete: true, subkeys: [this.setting.key] }]
           : [{ group: this.settingGroup.group, key: this.setting.key, delete: true }]
@@ -308,6 +315,12 @@ export default {
           type: 'success',
           message: i18n.t('settings.successfullyRemoved')
         })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: this.$t('users.canceled')
+        })
+      })
     },
     renderMultipleSelect(type) {
       return Array.isArray(type) && this.setting.key !== ':backends' && this.setting.key !== ':args' && (