diff --git a/app/src/helpers/api.js b/app/src/helpers/api.js
index 5c679db7..9ccf4e9f 100644
--- a/app/src/helpers/api.js
+++ b/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,
diff --git a/app/src/helpers/dataStore.js b/app/src/helpers/dataStore.js
index 20a9d5c0..3964fdc1 100644
--- a/app/src/helpers/dataStore.js
+++ b/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())
+        }
+      })
     }
   },
 
diff --git a/app/src/locales/en.json b/app/src/locales/en.json
index f8e81f4f..d9c24d2f 100644
--- a/app/src/locales/en.json
+++ b/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!"
 }
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index cf823546..567c30fd 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/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' }