[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

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
       />
       <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 firstname = ref<string>(user.value.firstname);
-    const lastname = ref(user.value.lastname);
+    const lastname = ref<string>(user.value.lastname);
-    const mail = ref(user.value.mail);
+    const mail = ref<string>(user.value.mail);
-    const display_name = ref(user.value.display_name);
+    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);
+      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
     };
   }
 });