<template>
  <v-container>
    <v-row align="center" justify="center" class="mx-auto mt-sm-12 mb-8">
      <v-col cols="12" offset-md="4">
        <form>
          <v-row>
            <v-col cols="12" class="hidden-md-and-up">
              <v-img
                :src="require('../assets/logo.svg')"
                contain
                height="64"
              ></v-img>
            </v-col>
            <v-col cols="12" md="7" class="hidden-sm-and-down">
              <v-img
                :src="require('../assets/logo.svg')"
                contain
                height="128"
              ></v-img>
            </v-col>
            <v-col cols="12" md="7" v-if="formState.errorBoxMessage">
              <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
            </v-col>
            <v-col cols="12" md="7">
              <v-text-field
                name="username"
                id="username"
                v-model="input.username"
                prepend-icon="fa-user"
                label="User"
                autofocus
                autocomplete="off"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                :error="errorBadCreds"
                v-focus
                v-on:keyup.enter="onEnterUserName"
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="7">
              <v-text-field
                name="password"
                id="password"
                v-model="input.password"
                :append-outer-icon="reveal ? 'fa-eye' : 'fa-eye-slash'"
                prepend-icon="fa-key"
                label="Password"
                :type="reveal ? 'text' : 'password'"
                :error="errorBadCreds"
                v-on:keyup.enter="login"
                @click:append-outer="reveal = !reveal"
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="7" mt-1>
              <v-btn color="primary" v-on:click="login()" value="LOGIN">
                <v-icon>fa-sign-in-alt</v-icon>
              </v-btn>
            </v-col>

            <template v-if="$ay.dev">
              <v-col cols="12">
                <span class="subtitle-2 red--text">DEVELOPMENT MODE</span>
              </v-col>
            </template>
          </v-row>
        </form>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
/*  xeslint-disable */
import auth from "../api/auth";
export default {
  name: "Login",
  data() {
    return {
      input: {
        username: "manager",
        password: "l3tm3in"
        // username: "CustomerLimited",
        // password: "CustomerLimited"
      },
      errorBadCreds: false,
      reveal: false,
      formState: { errorBoxMessage: null }
    };
  },
  created() {
    window.$gz.eventBus.$emit("menu-change", {
      isMain: true,
      icon: "",
      title: ""
    });
  },
  methods: {
    onEnterUserName: function() {
      //move focus to password
      document.getElementsByName("password")[0].focus();
    },
    login() {
      let vm = this;
      if (vm.input.username != "" && vm.input.password != "") {
        vm.errorBadCreds = false;

        auth
          .authenticate(vm.input.username, vm.input.password)
          .then(() => {
            vm.$router.push(vm.$store.state.homePage);
          })
          .catch(function handleCaughtLoginError(error) {
            //bad creds?
            if (
              error.message &&
              error.message.includes("ErrorUserNotAuthenticated")
            ) {
              vm.errorBadCreds = true;
              return;
            }
            //server closed by server state setting?
            if (error.code == 2000 || error.code == 2001) {
              vm.formState.errorBoxMessage = error.message;
              return;
            }
            //probably here because server unresponsive.
            if (error.message) {
              let msg = error.message;
              if (
                msg.includes("NetworkError") ||
                msg.includes("Failed to fetch")
              ) {
                msg =
                  "Could not connect to AyaNova server at " +
                  window.$gz.api.APIUrl("") +
                  "\r\nError: " +
                  error.message;
              }
              vm.formState.errorBoxMessage = msg;
              return;
            }
            /* xeslint-disable-next-line */

            /* 
            server down errors:
            firefox: NetworkError when attempting to fetch resource."
            brave: Error in login.vue catch: TypeError: Failed to fetch
            chrome: Error in auth.js catch: TypeError: Failed to fetch
            */

            //-----
          });
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    //very important as this in conjunction with the menu options means
    //navigation guards work properly by just sending people here
    next(() => {
      auth.logout();
      next();
    });
  }
};
</script>
