<template>
  <v-app id="inspire">
    <v-content class="white">
      <v-container fluid grid-list-md px-2 py-2 fill-height>
        <v-layout justify-center align-center text-xs-center fill-height wrap>
          <v-flex xs12 sm8 md4>
            <v-card tile class="px-3 pt-3 pb-5 custom-border">
              <v-card-text>
                <img id="logo" src="~@/assets/logo3.png" alt="electron-vue" width="125px">

                <div class="font-weight-medium headline text-xs-center mb-2">Login</div>
                <div
                  class="font-weight-regular subheading text-xs-center mb-5"
                >Use your Forca POS account</div>
                <v-form>
                  <v-text-field
                    prepend-inner-icon="person"
                    solo
                    hide-details
                    name="username"
                    label="Username"
                    type="text"
                    class="mb-2"
                    v-model="form.username"
                  ></v-text-field>
                  <v-text-field
                    prepend-inner-icon="lock"
                    solo
                    hide-details
                    name="password"
                    label="Password"
                    id="password"
                    type="password"
                    v-model="form.password"
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions class="mt-4">
                <v-btn color="primary" class="text-none" flat>Create account</v-btn>
                <v-spacer></v-spacer>
                <v-btn
                  color="primary"
                  depressed
                  class="mr-2 text-none"
                  :loading="loading"
                  :disabled="loading"
                  @click="login()"
                >Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
/* eslint-disable */

export default {
  name: "login-page",
  data() {
    return {
      loading: false,
      form: {
        username : "",
        password : ""
      }
    };
  },
  methods: {
    login() {
      this.loading = true;
      this.$store.dispatch("GET_AUTH", this.form).then(result => {
        if(result.status == 200){
          this.$router.push({
            name : "cashier-page"
          })
        } else {
          console.log("Username and/or Password are wrong");
        }
        this.loading = false;
      });
    }
  },

  mounted() {},
  props: {
    source: String
  },
  watch: {},
  created() {},
  computed: {}
};
</script>

<style scoped>
/* CSS */
</style>