<template>
    <b-form @submit="onSubmit" @reset="onReset">
        <b-form-group
                id="username"
                label="Username"
                label-for="username-input">
            <b-form-input
                    id="username-input"
                    v-model="form.username"
                    required></b-form-input>
        </b-form-group>
        <b-form-group
                id="password"
                label="Password"
                label-for="password-input">
            <b-form-input
                    id="password-input"
                    v-model="form.password"
                    type="password"
                    required></b-form-input>
        </b-form-group>
        <b-form-group class="justify-content-md-center align-content-center">
            <b-button
                    id="login-button"
                    type="submit"
                    variant="primary">Submit
            </b-button>
            <b-button
                    id="reset-button"
                    type="reset"
                    variant="danger">Reset
            </b-button>
        </b-form-group>
    </b-form>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        this.$store.dispatch('login', {username: this.form.username, password: this.form.password})
          .then(() => {
            this.$cookies.set('key', this.$store.state.key)
            if (!this.$route.params.returnTo)
              this.$router.push("/")
            else
              this.$router.push(this.$route.params.returnTo)
          })
      },
      onReset(evt) {
        evt.preventDefault()
        this.form.username = ''
        this.form.password = ''
      }
    }
  }
</script>

<style scoped>

</style>