ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[User] Validation der Settingseingaben der User 

Es werden die Eingaben der User bei den Einstellungen kontrolliert.
Es muss ein Passwort eingegeben werden, E-Mail muss eine E-Mail sein und die Felder dürfen nicht leer sein.
Es wurde ein Reset Button hinzugefügt und gemachte Eingaben zurückzusetzen
This commit is contained in:
Tim Gröger 2020-10-28 12:19:09 +01:00
parent 925982d700
commit 27d44b350f
1 changed files with 70 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/plugins/user/components/settings/Main.vue
View File

@ -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
/>
<q-input
class="col-xs-12 col-sm-6 q-pa-sm"
label="Nachname"
v-model="lastname"
:rules="[notEmpty]"
ref="ref_lastname"
filled
/>
<q-input
@ -24,12 +28,16 @@
class="col-xs-12 col-sm-6 q-pa-sm"
label="E-Mail"
v-model="mail"
:rules="[isEmail, notEmpty]"
ref="ref_mail"
filled
/>
<q-input
class="col-xs-12 col-sm-6 q-pa-sm"
label="Display Name"
v-model="display_name"
:rules="[notEmpty]"
ref="ref_display_name"
filled
/>
<q-select
@ -55,6 +63,8 @@
type="password"
hint="Password muss immer eingetragen werden"
v-model="password"
:rules="[notEmpty]"
ref="ref_password"
filled
/>
<q-input
@ -62,7 +72,6 @@
label="Neues Password"
type="password"
v-model="new_password"
:rules="[samePassword]"
filled
/>
<q-input
@ -72,10 +81,12 @@
v-model="new_password2"
:disable="new_password.length == 0"
:rules="[samePassword]"
ref="ref_new_password"
filled
/>
</q-card-section>
<q-card-actions align="right">
<q-btn label="Reset" @click="reset" />
<q-btn color="primary" label="Speichern" @click="save" />
</q-card-actions>
</q-card>
@ -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<FG.User>(() => {
return <FG.User>$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<string>(user.value.firstname);
const lastname = ref<string>(user.value.lastname);
const mail = ref<string>(user.value.mail);
const display_name = ref<string>(user.value.display_name);
const password = ref<string>('');
const new_password = ref<string>('');
@ -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
};
}
});