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,17 +296,30 @@ export default {
         { group, key: parentKey, input: setting.key, value: valueForState })
     },
     async removeSetting() {
-      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 }]
-      try {
-        await this.$store.dispatch('RemoveSetting', config)
-      } catch (e) {
-        return
-      }
-      this.$message({
-        type: 'success',
-        message: i18n.t('settings.successfullyRemoved')
+      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 }]
+        try {
+          await this.$store.dispatch('RemoveSetting', config)
+        } catch (e) {
+          return
+        }
+        this.$message({
+          type: 'success',
+          message: i18n.t('settings.successfullyRemoved')
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: this.$t('users.canceled')
+        })
       })
     },
     renderMultipleSelect(type) {