User kann eigene Einstellungen updaten

This commit is contained in:
Tim Gröger 2020-10-27 13:49:45 +01:00
parent c6ef18b009
commit 925982d700
2 changed files with 112 additions and 35 deletions

View File

@ -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>

View File

@ -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;
}
};