diff --git a/src/plugins/user/components/settings/Main.vue b/src/plugins/user/components/settings/Main.vue index 8ebefc1..f507a78 100644 --- a/src/plugins/user/components/settings/Main.vue +++ b/src/plugins/user/components/settings/Main.vue @@ -5,12 +5,16 @@ class="col-xs-12 col-sm-6 q-pa-sm" label="Vorname" v-model="firstname" + :rules="[notEmpty]" + ref="ref_firstname" filled /> + @@ -85,15 +96,15 @@ import { computed, defineComponent, ref } from '@vue/composition-api'; export default defineComponent({ name: 'Main', - setup(_, { root: { $store } }) { + setup(_, { root: { $store }, refs }) { const user = computed(() => { return $store.getters['user/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 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(''); const new_password = ref(''); @@ -119,13 +130,60 @@ export default defineComponent({ new_password: new_password.value }); } - console.log(change_values); - $store.dispatch('user/updateUser', change_values); + if ( + Object.keys(refs).every(key => { + return refs[key].validate(); + }) + ) { + $store.dispatch('user/updateUser', change_values); + resetPassword(); + } } + + function reset() { + firstname.value = user.value.firstname; + lastname.value = user.value.lastname; + mail.value = user.value.mail; + display_name.value = user.value.display_name; + password.value = ''; + new_password.value = ''; + new_password2.value = ''; + setTimeout(() => { + Object.keys(refs).forEach(key => { + refs[key].resetValidation(); + }); + }, 500); + } + + function resetPassword() { + password.value = ''; + new_password.value = ''; + new_password2.value = ''; + console.log(refs); + console.log(refs.ref_password); + console.log(refs.ref_new_password); + setTimeout(() => { + refs.ref_password.resetValidation(); + refs.ref_new_password.resetValidation(); + }, 1000); + } + function samePassword(val) { return val == new_password.value || 'Passwörter sind nicht identisch!'; } + function notEmpty(val: string) { + return !!val || 'Feld darf nicht leer sein!'; + } + + function isEmail(val) { + return ( + !val || + /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w\w+)+$/.test(val) || + 'E-Mail ist nicht valide.' + ); + } + return { user, firstname, @@ -136,7 +194,10 @@ export default defineComponent({ new_password, new_password2, samePassword, - save + isEmail, + notEmpty, + save, + reset }; } });