<template>
  <div class="login">
    <div>
      <div class="d-flex flex-row justify-content-center">
        <div><img src="../assets/logo.png"></div>
        <div><h1>{{ appTitle }}</h1></div>
      </div>
    </div>
    <div class="login-wrapper border border-light d-flex flex-row justify-content-center">
      <form class="form-signin" @submit.prevent="login">
        <h2 class="form-signin-heading">{{ signinHeader }}</h2>
        <label for="inputEmail" class="sr-only">{{ emailLabel }}</label>
        <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
        <label for="inputPassword" class="sr-only">{{ passwordLabel }}</label>
        <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">{{ loginButtonLabel }}</button>
      </form>
    </div>
  </div>
</template>

<style>
.login {
  margin-top: 200px;
}
</style>

<script>
import { mapGetters } from "vuex";

export default {
  name: "login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  computed: {
    ...mapGetters("application", ["appTitle"]),
    ...mapGetters("i18n", [
      "signinHeader",
      "emailLabel",
      "passwordLabel",
      "loginButtonLabel"
    ])
  },
  methods: {
    login() {
      const { username, password } = this;
      this.$store.dispatch("user/auth", { username, password });
    }
  }
};
</script>