<template>
  <v-container fluid>
    <v-layout row wrap="">
      <v-flex xs12 class="text-xs-center" mt-5>
        <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
      </v-flex>
      <v-flex xs12 sm6 offset-sm3 mt-3>
        <form>
          <v-layout column>
            <v-flex>
              <v-text-field
                name="username"
                v-model="input.username"
                prepend-icon="fa-user"
                label="User"
                required
              ></v-text-field>
            </v-flex>
            <v-flex>
              <v-text-field
                name="password"
                v-model="input.password"
                prepend-icon="fa-key"
                label="Password"
                type="password"
                required
              ></v-text-field>
            </v-flex>
            <v-flex class="text-xs-center" mt-5>
              <v-btn color="primary" v-on:click="login()">
                <v-icon>fa-sign-in-alt</v-icon>
              </v-btn>
            </v-flex>
          </v-layout>
        </form>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import auth from "../api/auth";
export default {
  name: "Login",
  data() {
    return {
      input: {
        username: "manager",
        password: "l3tm3in"
      }
    };
  },
  methods: {
    login() {
      if (this.input.username != "" && this.input.password != "") {
        auth
          .authenticate(this.input.username, this.input.password)
          .then(() => {
            this.$router.replace({ name: "home" });
          })
          .catch(function(error) {
            /* eslint-disable-next-line */
            console.log(error);
            alert("login failed: " + error);
          });
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(() => {
      auth.logout();
      next();
    });
  }
};
</script>

<style scoped>
#login {
  width: 500px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  margin: auto;
  margin-top: 200px;
  padding: 20px;
}
</style>
