add api/store DELETE and add user delete modal

app/src/helpers/api.js

@@ -58,6 +58,14 @@ export default {
     }).then(response => handleResponse(response))
   },
 
+  delete (uri, data) {
+    return fetch('/api/' + uri, {
+      ...this.options,
+      method: 'DELETE',
+      body: objectToParams(data)
+    }).then(response => response.ok ? 'ok' : handleErrors(response))
+  },
+
   login (password) {
     return fetch('/api/login', {
       ...this.options,

app/src/helpers/dataStore.js

@@ -32,6 +32,13 @@ export default {
         }
       }
       Vue.set(user, 'fullname', `${userData.firstname} ${userData.lastname}`)
+    },
+
+    'DEL_USERS_PARAM' (state, username) {
+      Vue.delete(state.users_details, username)
+      if (state.users) {
+        Vue.delete(state.users, username)
+      }
     }
   },
 
@@ -57,7 +64,7 @@ export default {
     },
 
     'PUT' ({ state, commit }, { uri, param, data, storeKey = uri }) {
-      return api.put(param ? `${uri}/${param}` : uri, data).then(async responseData => {
+      return api.put(param ? `${uri}/${param}` : uri, data).then(responseData => {
         const data = responseData[uri] ? responseData[uri] : responseData
         if (param) {
           commit(`SET_${uri.toUpperCase()}_PARAM`, [param, data])
@@ -66,6 +73,16 @@ export default {
         }
         return param ? state[storeKey][param] : state[storeKey]
       })
+    },
+
+    'DELETE' ({ state, commit }, { uri, param, data }) {
+      return api.delete(param ? `${uri}/${param}` : uri, data).then(() => {
+        if (param) {
+          commit(`DEL_${uri.toUpperCase()}_PARAM`, param)
+        } else {
+          commit('DEL_' + uri.toUpperCase())
+        }
+      })
     }
   },
 

app/src/locales/en.json

@@ -55,7 +55,7 @@
     "confirm_app_change_url": "Are you sure you want to change the app access URL?",
     "confirm_app_default": "Are you sure you want to make this app default?",
     "confirm_change_maindomain": "Are you sure you want to change the main domain?",
-    "confirm_delete": "Are you sure you want to delete %s?",
+    "confirm_delete": "Are you sure you want to delete {name}?",
     "confirm_firewall_open": "Are you sure you want to open port %s? (protocol: %s, connection: %s)",
     "confirm_firewall_close": "Are you sure you want to close port %s? (protocol: %s, connection: %s)",
     "confirm_install_custom_app": "WARNING! Installing 3rd party applications may compromise the integrity and security of your system. You should probably NOT install it unless you know what you are doing. Are you willing to take that risk?",
@@ -365,6 +365,6 @@
     "regenerate_selfsigned_cert": "Regenerate self-signed certificate",
     "revert_to_selfsigned_cert_message": "If you really want to, you can reinstall a self-signed certificate. (Not recommended)",
     "revert_to_selfsigned_cert": "Revert to a self-signed certificate",
-    "purge_user_data_checkbox": "Purge %s's data? (This will remove the content of its home and mail directories.)",
+    "purge_user_data_checkbox": "Purge {name}'s data? (This will remove the content of its home and mail directories.)",
     "purge_user_data_warning": "Purging user's data is not reversible. Be sure you know what you're doing!"
 }

app/src/views/user/UserInfo.vue

@@ -71,16 +71,35 @@
             {{ user ? $t('user_username_edit', {name: user.username}) : '' }}
           </b-button>
 
-          <b-button :variant="user ? 'danger' : 'dark'" class="ml-2">
+          <b-button :variant="user ? 'danger' : 'dark'" class="ml-2" v-b-modal.delete-modal>
             {{ user ? $t('delete') : '' }}
           </b-button>
         </div>
       </template>
     </b-card>
+
+    <b-modal
+      v-if="user" id="delete-modal" centered
+      header-bg-variant="danger" header-text-variant="light"
+      :title="$t('confirm_delete', {name: user.username })"
+      @ok="deleteUser"
+    >
+      <b-form-group>
+        <template v-slot:description>
+          <span class="bg-warning p-2 text-dark">
+            <icon iname="exclamation-triangle" /> {{ $t('purge_user_data_warning') }}
+          </span>
+        </template>
+        <b-form-checkbox v-model="purge" class="mb-3">
+          {{ $t('purge_user_data_checkbox', {name: user.username}) }}
+        </b-form-checkbox>
+      </b-form-group>
+    </b-modal>
   </div>
 </template>
 
 <script>
+
 export default {
   name: 'UserInfo',
   props: {
@@ -89,11 +108,26 @@ export default {
       required: true
     }
   },
+  data () {
+    return {
+      purge: false
+    }
+  },
   computed: {
     user () {
       return this.$store.state.data.users_details[this.name]
     }
   },
+  methods: {
+    deleteUser () {
+      const data = this.purge ? { purge: '' } : {}
+      this.$store.dispatch('DELETE',
+        { uri: 'users', data, param: this.name }
+      ).then(() => {
+        this.$router.push({ name: 'user-list' })
+      })
+    }
+  },
   created () {
     this.$store.dispatch('FETCH',
       { uri: 'users', param: this.name, storeKey: 'users_details' }