--- a/client/src/assets/application.scss	Tue Feb 05 13:34:29 2019 +0100
+++ b/client/src/assets/application.scss	Tue Feb 05 13:55:59 2019 +0100
@@ -81,12 +81,9 @@
   max-height: 0;
   max-width: 0;
   overflow: hidden;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 0;
+  margin: 0;
   box-shadow: $shadow-xs;
-  transition: max-width 0.4s, max-height 0.4s, margin-left 0.4s,
-    margin-right 0.4s, margin-bottom 0.4s;
+  transition: max-width 0.4s, max-height 0.4s, margin 0.4s;
 }
 
 .box h6,
@@ -98,9 +95,21 @@
 .expanded {
   max-height: 999px;
   max-width: 999px;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  margin-bottom: 1rem;
+  margin: 0 0.5rem 1rem 0.5rem;
+}
+
+.popup {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  margin-left: -150px;
+  width: 300px;
+  max-width: 300px;
+}
+
+.popup.show {
+  margin: 0.5rem 0 0 -150px;
+  max-height: 999px;
 }
 
 // needed to fix the whitespace problem of

--- a/client/src/components/usermanagement/Usermanagement.vue	Tue Feb 05 13:34:29 2019 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Tue Feb 05 13:55:59 2019 +0100
@@ -58,15 +58,11 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr
-                    v-for="user in users"
-                    :key="user.user"
-                    @click="selectUser(user.user)"
-                  >
-                    <td>{{ user.user }}</td>
-                    <td>{{ user.country }}</td>
-                    <td>{{ user.email }}</td>
-                    <td>
+                  <tr v-for="user in users" :key="user.user">
+                    <td @click="selectUser(user.user)">{{ user.user }}</td>
+                    <td @click="selectUser(user.user)">{{ user.country }}</td>
+                    <td @click="selectUser(user.user)">{{ user.email }}</td>
+                    <td @click="selectUser(user.user)">
                       <font-awesome-icon
                         v-tooltip="roleLabel(user.role)"
                         :icon="roleIcon(user.role)"
@@ -75,7 +71,7 @@
                     <td>
                       <font-awesome-icon
                         icon="trash"
-                        @click="deleteUser(user.user)"
+                        @click="showDeleteUserPrompt = true; userToDelete = user.user"
                       ></font-awesome-icon>
                     </td>
                   </tr>
@@ -112,6 +108,41 @@
         ></Userdetail>
       </div>
     </div>
+    
+    <div
+      :class="[
+        'box popup ui-element rounded bg-white',
+        { show: showDeleteUserPrompt }
+      ]"
+    >
+      <div>
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+          <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
+          <translate>Delete user</translate>
+          <font-awesome-icon
+            icon="times"
+            class="ml-auto text-muted"
+            @click="showDeleteUserPrompt = false;"
+          ></font-awesome-icon>
+        </h6>
+        <div class="p-3 text-left">
+          <translate class="text-center d-block">Do you really want to delete the following user account:</translate>
+          <h5 class="mt-3 text-center">{{ userToDelete }}</h5>
+        </div>
+        <div class="py-2 px-3 border-top d-flex align-items-center justify-content-between">
+          <button
+            class="btn btn-sm btn-warning"
+            @click="showDeleteUserPrompt = false;">
+            no
+          </button>
+          <button
+            class="btn btn-sm btn-info"
+            @click="deleteUser(userToDelete)">
+            yes
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -210,7 +241,9 @@
     return {
       sortCriterion: "user",
       pageSize: 20,
-      currentPage: 1
+      currentPage: 1,
+      userToDelete: "",
+      showDeleteUserPrompt: false
     };
   },
   components: {
@@ -290,6 +323,7 @@
       this.$store
         .dispatch("usermanagement/deleteUser", { name: name })
         .then(() => {
+          this.showDeleteUserPrompt = false;
           this.submitted = false;
           this.$store.dispatch("usermanagement/loadUsers").catch(error => {
             const { status, data } = error.response;