User kann eigene Einstellungen updaten

src/plugins/user/components/settings/Main.vue

@@ -4,15 +4,13 @@
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Vorname"
-        readonly
-        :value="user.firstname"
+        v-model="firstname"
         filled
       />
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Nachname"
-        readonly
-        :value="user.lastname"
+        v-model="lastname"
         filled
       />
       <q-input
@@ -25,8 +23,13 @@
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="E-Mail"
-        readonly
-        :value="user.mail"
+        v-model="mail"
+        filled
+      />
+      <q-input
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="Display Name"
+        v-model="display_name"
         filled
       />
       <q-select
@@ -50,33 +53,91 @@
         class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
         label="Password"
         type="password"
+        hint="Password muss immer eingetragen werden"
+        v-model="password"
         filled
       />
       <q-input
         class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
         label="Neues Password"
         type="password"
+        v-model="new_password"
+        :rules="[samePassword]"
         filled
       />
       <q-input
         class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
         label="Wiederhole neues Password"
         type="password"
+        v-model="new_password2"
+        :disable="new_password.length == 0"
+        :rules="[samePassword]"
         filled
       />
     </q-card-section>
+    <q-card-actions align="right">
+      <q-btn color="primary" label="Speichern" @click="save" />
+    </q-card-actions>
   </q-card>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
+import { computed, defineComponent, ref } from '@vue/composition-api';
 export default defineComponent({
   name: 'Main',
   setup(_, { root: { $store } }) {
-    const user = computed(() => {
-      return $store.getters['user/user'];
+    const user = computed<FG.User>(() => {
+      return <FG.User>$store.getters['user/user'];
     });
-    return { user };
+
+    const firstname = ref(user.value.firstname);
+    const lastname = ref(user.value.lastname);
+    const mail = ref(user.value.mail);
+    const display_name = ref(user.value.display_name);
+
+    const password = ref<string>('');
+    const new_password = ref<string>('');
+    const new_password2 = ref<string>('');
+
+    function save() {
+      let change_values = {
+        firstname: firstname.value,
+        lastname: lastname.value,
+        mail: mail.value,
+        display_name: display_name.value
+      };
+      Object.keys(change_values).forEach(key => {
+        if (change_values[key] === user.value[key]) {
+          delete change_values[key];
+        }
+      });
+      change_values = Object.assign(change_values, {
+        password: password.value
+      });
+      if (new_password.value != '') {
+        change_values = Object.assign(change_values, {
+          new_password: new_password.value
+        });
+      }
+      console.log(change_values);
+      $store.dispatch('user/updateUser', change_values);
+    }
+    function samePassword(val) {
+      return val == new_password.value || 'Passwörter sind nicht identisch!';
+    }
+
+    return {
+      user,
+      firstname,
+      lastname,
+      mail,
+      display_name,
+      password,
+      new_password,
+      new_password2,
+      samePassword,
+      save
+    };
   }
 });
 </script>

src/plugins/user/store/user.ts

@@ -35,22 +35,22 @@ const state: UserStateInterface = {
 };
 
 const mutations: MutationTree<UserStateInterface> = {
-  setUser (state, data: FG.User) {
+  setUser(state, data: FG.User) {
     state.user = data;
   },
-  setSession (state, data: FG.Session) {
+  setSession(state, data: FG.Session) {
     state.session = data;
   },
-  setLoginLoading (state, data: boolean) {
+  setLoginLoading(state, data: boolean) {
     state.loginLoading = data;
   },
-  showState (state) {
+  showState(state) {
     console.log(state);
   }
 };
 
 const actions: ActionTree<UserStateInterface, StateInterface> = {
-  login ({ commit }, data: LoginData) {
+  login({ commit }, data: LoginData) {
     commit('setLoginLoading', true);
     Loading.show({ message: 'Du wirst eingeloggt' });
     void axios
@@ -73,7 +73,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
         Loading.hide();
       });
   },
-  logout ({ commit }, token) {
+  logout({ commit }, token) {
     void axios.delete(`/auth/${token}`).then(() => {
       commit('setUser', {
         display_name: '',
@@ -92,17 +92,33 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
       });
     });
   },
-  loadFromLocalStorage ({ commit }) {
+  updateUser({ commit, getters }, data) {
+    commit('setLoginLoading', true);
+    axios
+      .put(`/users/${getters.user.userid}`, data)
+      .catch(error => {
+        console.log(error);
+      })
+      .finally(() => {
+        commit('setLoginLoading', false);
+      });
+  },
+  loadFromLocalStorage({ commit }) {
     console.log('load from store');
     let data = LocalStorage.getItem('user');
-    commit('setUser', data ? data : {
+    commit(
+      'setUser',
+      data
+        ? data
+        : {
             display_name: '',
             firstname: '',
             lastname: '',
             mail: '',
             roles: [],
             userid: ''
-    });
+          }
+    );
     data = LocalStorage.getItem('session');
     commit(
       'setSession',
@@ -121,16 +137,16 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
 };
 
 const getters: GetterTree<UserStateInterface, StateInterface> = {
-  user ({ user }) {
+  user({ user }) {
     return user;
   },
-  displayName ({ user }) {
+  displayName({ user }) {
     return user.display_name;
   },
-  session ({ session }) {
+  session({ session }) {
     return session;
   },
-  loginLoading ({ loginLoading }) {
+  loginLoading({ loginLoading }) {
     return loginLoading;
   }
 };