<template>
    <div>
        <h1>Авторизация</h1>
        <b-form @submit="onSubmit">
            <b-form-group id="exampleInputGroup2"
                          label="Ваш логин:" label-for="exampleInput2">
                <b-form-input id="exampleInput2"
                              type="text" v-model="form.name" required
                              placeholder="Введите Ваш логин"
                ></b-form-input>

            </b-form-group>
            <b-form-group id="exampleInputGroup2"
                          label="Ваш пароль:" label-for="exampleInput2">
                <b-form-input id="exampleInput2"
                              type="password" v-model="form.pass" required
                              placeholder="Введите Ваш пароль"
                ></b-form-input>
            </b-form-group>
            <b-button type="submit" variant="primary">Submit</b-button>
            <b-button type="reset" variant="secondary">Reset</b-button>
        </b-form>
    </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data () {
      return {
        form: {
          name: '',
          pass: ''
        }
      }
    },
    mounted () {
      console.log(localStorage.getItem('token'))
    },
    methods: {
      onSubmit (evt) {
        evt.preventDefault()
        axios.post('http://127.0.0.1:8000/token',
          {
            username: this.form.name, password: this.form.pass
          })
          .then((e) => {
            if (e.data.token !== undefined) {
              localStorage.setItem('token', e.data.token)
              localStorage.setItem('loginUser', this.form.name)
            }
          })
          .catch((err) => console.log(err))
      }
    }
  }
</script>