<template>
  <v-container fluid>
    <v-layout row wrap>
      <v-flex xs12 class="hidden-sm-and-down text-xs-center" mt-5 ml-5 pl-5>
        <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
      </v-flex>
      <v-flex xs12 class="hidden-md-and-up text-xs-center">
        <v-img :src="require('../assets/logo.svg')" contain height="64"></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"
                autofocus
                required
                clearable
                autocomplete="off"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                :error="errorBadCreds"
              ></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
                clearable
                :error="errorBadCreds"
              ></v-text-field>
            </v-flex>
            <v-flex class="text-xs-center" mt-1>
              <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>
/*  xeslint-disable */
import auth from "../api/auth";
export default {
  name: "Login",
  data() {
    return {
      input: {
        username: "manager",
        password: "l3tm3in"
      },
      errorBadCreds: false
    };
  },
  created() {
    this.$gzevent.$emit("menu-change", {
      isMain: true,
      icon: "",
      title: ""
    });
  },
  methods: {
    login() {
      if (this.input.username != "" && this.input.password != "") {
        this.errorBadCreds = false;
        var that = this;
        auth
          .authenticate(this.input.username, this.input.password)
          .then(() => {
            this.$router.replace({ name: "home" });
          })
          .catch(function(error) {
            /* xeslint-disable-next-line */
            if (
              error.message &&
              error.message.includes("ErrorUserNotAuthenticated")
            ) {
              that.errorBadCreds = true;
              // alert("BAD CREDENTIALS - BOO!");
            }
            //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>
