--- a/client/src/components/Userdetail.vue	Thu Aug 09 17:59:28 2018 +0200
+++ b/client/src/components/Userdetail.vue	Fri Aug 10 11:21:18 2018 +0200
@@ -1,26 +1,21 @@
 <template>
   <div class="userdetail card">
-    <div @click="showDetails" class="card-header userinfo bg-white" id="headingOne">
-      <h6 class="mb-0">
-        <div data-toggle="collapse" :data-target="datatarget" aria-expanded="true" aria-controls="collapseOne">
-            <table>
-              <tbody>
-                <tr>
-                  <td class="caret"><i class="fa  fa-caret-right"></i></td>
-                  <td class="user">Name:</td><td class="user">{{this.user.user}}</td>
-                  <td class="mail">Email:</td><td class="mail">{{this.user.email}}</td>
-                  <td class="country">Country:</td><td class="country">{{this.user.country}}</td>
-                  <td class="role">Role:</td><td class="role">{{this.user.role}}</td>
-                </tr>
-              </tbody>
-            </table>
+    <div @click="showDetails" class="card-header bg-light" id="headingOne">
+      <h5 class="mb-0">
+        <div class="btn" data-toggle="collapse" :data-target="datatarget" aria-expanded="true" aria-controls="collapseOne">
+          <div class="d-flex d-flex-row">
+            <div class="name">Name: {{this.user.user}}</div>
+            <div class="mail">Email: {{this.user.email}}</div>
+            <div class="country">Country: {{this.user.country}}</div>
+            <div class="role">Role: {{this.user.role}}</div>
+          </div>
         </div>
-      </h6>
+      </h5>
     </div>
     <div :id="target" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
       <div class="card-body">
         <div>
-          <form class="details form" @submit.prevent="saveUser">
+          <form class="details" @submit.prevent="editUser">
             <div class="form-group"><label for="user">User</label><input class="form-control" id="user" v-model="currentUser.user"></div>
             <div class="form-group"><label for="email">Email</label><input class="form-control" id="email" v-model="currentUser.email"></div>
             <div class="form-group">
@@ -61,36 +56,16 @@
 @import "../assets/application.scss";
 .userdetail {
   text-align: left !important;
-  border: none !important;
 }
 .details {
-  padding-left: 20px;
-  width: 10vw;
+  width: 30vw;
   height: 45vh;
 }
-
-.userinfo {
-  border: none !important;
-}
-
-.userinfo tr {
-  width: 40vw;
-}
-
-.caret {
-  padding-right: 10px;
-}
-
-.user,
+.name,
 .mail,
 .country,
 .role {
-  padding-right: 10px;
-}
-
-label {
-  margin-bottom: 1px !important;
-  font-size: 14px !important;
+  padding-right: $large-offset;
 }
 </style>
 <script>
@@ -116,29 +91,27 @@
     }
   },
   methods: {
-    saveUser() {
-      if (!this.user.isNew) {
-        HTTP.put("/users/" + this.user.user, {
-          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-        })
-          .then(() => {
-            this.show = false;
-            store.dispatch("usermanagement/loadUsers").catch(error => {
-              const { status, data } = error.response;
-              app.$toast.error({
-                title: "Error while loading users",
-                message: `${status}: ${data}`
-              });
-            });
-          })
-          .catch(error => {
+    editUser() {
+      HTTP.put("/users/" + this.user.user, {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(() => {
+          this.show = false;
+          store.dispatch("usermanagement/loadUsers").catch(error => {
             const { status, data } = error.response;
             app.$toast.error({
-              title: "Error while updating user",
+              title: "Backend Error",
               message: `${status}: ${data}`
             });
           });
-      }
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          app.$toast.error({
+            title: "Backend Error",
+            message: `${status}: ${data}`
+          });
+        });
     },
     showDetails() {
       this.show = !this.show;

--- a/client/src/stores/usermanagement.js	Thu Aug 09 17:59:28 2018 +0200
+++ b/client/src/stores/usermanagement.js	Fri Aug 10 11:21:18 2018 +0200
@@ -17,27 +17,7 @@
   },
   mutations: {
     usersLoaded: (state, data) => {
-      const addSavedAndNewFlags = user => {
-        return {
-          ...user,
-          isNew: false
-        };
-      };
-      data.users = data.users.map(addSavedAndNewFlags);
       state.users = data.users;
-    },
-    addUser: state => {
-      state.users = [
-        ...state.users,
-        {
-          country: "",
-          email: "",
-          extent: {},
-          role: "waterway_user",
-          user: "N.N",
-          isNew: true
-        }
-      ];
     }
   },
   actions: {

--- a/client/src/views/Users.vue	Thu Aug 09 17:59:28 2018 +0200
+++ b/client/src/views/Users.vue	Fri Aug 10 11:21:18 2018 +0200
@@ -11,7 +11,6 @@
               <div class="card-header text-white bg-info mb-3">
                 users
               </div>
-              <!-- <div><button @click="addUser" class="btn btn-primary pull-left" style="margin-left:25px;">+</button></div> -->
               <div class="card-body">
                 <div class="accordion" v-for="user in this.users" v-bind:key="user.name">
                   <Userdetail :user="user"></Userdetail>
@@ -69,11 +68,7 @@
   computed: {
     ...mapGetters("usermanagement", ["users"])
   },
-  methods: {
-    addUser() {
-      store.commit("usermanagement/addUser");
-    }
-  },
+  methods: {},
   beforeRouteEnter(to, from, next) {
     store
       .dispatch("usermanagement/loadUsers")
@@ -81,7 +76,7 @@
       .catch(error => {
         const { status, data } = error.response;
         app.$toast.error({
-          title: "Error while loading users",
+          title: "Backend Error",
           message: `${status}: ${data}`
         });
       });