<template>
  <div class="login">
    <div>
      <div class="logo d-flex flex-row justify-content-center">
        <div><img src="../assets/logo.png"></div>
        <div class="title"><h1>{{ appTitle }}</h1></div>
      </div>
    </div>
    <div class="login-wrapper border border-light d-flex flex-row justify-content-center">
      <form class="loginform form-signin" @submit.prevent="login">
        <div v-if="loginFailed" class="alert alert-danger" role="alert">
          <span class="loginerror">{{ loginAttemptFailed }}</span>
        </div>
        <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-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
      </form>
      <div class="secondary-logo"><img :src="secondaryLogo"></div>
    </div>
    <div><a href="#">{{ passPhraseForgotten }}</a></div>
  </div>
</template>

<style lang="scss">
$offset: 20px;

.login {
  margin-top: 200px;
}
.loginerror {
  white-space: pre;
}
.loginform {
  width: 300px;
}
.logo {
  position: relative;
  left: -85px;
  margin-bottom: $offset;
}
.title {
  margin-left: $offset;
}
.secondary-logo {
  margin-left: $offset;
}
</style>

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

export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      submitted: false,
      loginFailed: false
    };
  },
  computed: {
    ...mapGetters("application", ["appTitle", "secondaryLogo"]),
    ...mapGetters("i18n", [
      "signinHeader",
      "emailLabel",
      "passwordLabel",
      "loginButtonLabel",
      "loginAttemptFailed",
      "passPhraseForgotten"
    ])
  },
  methods: {
    login() {
      this.submitted = true;
      const { username, password } = this;
      this.$store
        .dispatch("user/login", { username, password })
        .then(() => {
          this.loginFailed = false;
          this.$router.push("/");
        })
        .catch(() => {
          this.loginFailed = true;
          this.submitted = false;
        });
    }
  }
};
</script>