<template lang="pug">
  main
    nav.navbar.is-u-blue
      div.navbar-brand
        a.navbar-item PC PUMA
    .container
      .columns
        .column.is-4.is-offset-4
          figure.image
            img(src="../assets/unam.png")
          un-notification(v-if='this.status' v-bind:msj='this.err' status=true)
          form
            .field
              p.control.has-icons-left
                input.input(placeholder="Usuario" v-model="user")
                span.icon.is-small.is-left
                  i
                    font-awesome-icon(icon="user")
            .field
              p.control.has-icons-left
                input.input(placeholder="Contraseña" v-model="pass")
                span.icon.is-small.is-left
                  i
                    font-awesome-icon(icon="lock")
            .field.has-text-centered
              input.button.is-u-blue(type="submit" v-on:click="Login()" value="Iniciar sesión")
</template>

<script>
import UnNotification from '../components/general/Notificacion.vue'
const axios = require('axios')
export default {
  components: {
    UnNotification
  },
  data () {
    return {
      user: '',
      pass: '',
      err: '',
      status: false
    }
  },
  methods: {
    Login: function () {
      axios.post('http://39a65af6.ngrok.io/login', {
        nombre: this.user,
        pass: this.pass
      })
        .then(response => {
          console.log(response.data.data)
          window.localStorage.pcpumaT = response.data.data.token
          window.localStorage.pcpumaU = response.data.data.usuario
        })
        .catch(error => {
          this.err = error.response.data.err
          this.status = !error.response.data.status
        })
    }
  }
}
</script>

<style lang="css">
</style>
