<template>
    <div class="LoginForm">
        <h2>Login</h2>
        <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
    </div>
</template>

<script>
import MyForm from '../../components/my-form.vue';

export default {
  name: 'LoginForm',
  components: {
      MyForm
  },
  data() {
      return {
          username: '',
          password: '',
          elements: {
              username: {
                  label: 'Benutzername',
                  type: 'text',
                  required: true
              },
              password: {
                  label: 'Passwort',
                  type: 'password',
                  required: true
              }
          },
          buttons: [
              {
                  label: 'login',
                  type: 'submit'
              }
          ]
      }
  },
  methods: {
      login(formData) {
          this.$store.dispatch("login", formData)
            .then(user => {
                console.log("---- user login --------");
                console.log(user);
                this.$router.go(-1);
            })
            .catch(error => {
                console.log("---- login error -------");
                console.log(error);
            });
      }
  }
}
</script>
