<template>
  <div>
    <h1>Login</h1>
    <div>
      <input class="c-game__input" name="username" type="text" v-model="input.username" placeholder="username">
      <input class="c-game__input" name="password" type="password" v-model="input.password" placeholder="password">
      <button class="c-btn" type="submit" v-on:click="postLogin()">Login</button>
      <p>{{welcome}}</p>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";

export default {
  name: "Login",
  components: {},
  props: ["mockAccount"],
  data() {
    return {
      input: {
        username: "",
        password: ""
      },
      welcome: ""
    };
  },
  methods: {
    // login() {
    //   if (this.input.username != "" && this.input.password != "") {
    //     if (
    //       this.input.username == "LennertVanHowest" &&
    //       this.input.password == "LennertVanHowestP@ssw0rd"
    //     ) {
    //       this.$emit("authenticated", true);
    //       this.$router.replace({ name: "createGame" });
    //       this.$store.dispatch('storeUsername', this.input.username);
    //     } else {
    //       console.log("The username and / or password is incorrect");
    //     }
    //   } else {
    //     console.log("A username and password must be present");
    //   }
    // },
    postLogin() {
      axios({
        method: "post",
        url: "https://blackboxapi20181126121241.azurewebsites.net/api/auth/login",
        data: {
          userName: this.input.username,
          password: this.input.password
        },
        withCredentials: true
      })
        .then(response => (this.welcome = response.data))
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./src/style/components/components.button";
</style>