<template>
  <div class="login border border-dark rounded bg-white">
    <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 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>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span>
          </div>
          <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text"><span class="password-icon">*</span></span>
          </div>
          <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
          <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span>
          </div>
        </div>
        <button class="btn btn-lg btn-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
        <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div>
      </form>
      <div class="secondary-logo"><img :src="secondaryLogo"></div>
    </div>
  </div>
</template>

<style lang="scss">
$offset: 20px;
$small-offset: 10px;
$iconsize: 3em;
$iconLineHeight: 0.25em;
$iconwidth: 20px;

.forgottenlink {
  text-align: right;
  margin-top: $small-offset;
  margin-bottom: $offset;
}
#inputPassword {
  border-right: none;
}
.input-group-text {
  background-color: white !important;
}
.login {
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  width: 600px;
}
.loginerror {
  white-space: pre;
}
.loginform {
  width: 300px;
}
.logo {
  position: relative;
  left: -85px;
  margin-top: $offset;
  margin-bottom: $offset;
}
.mail-icon {
  line-height: $iconLineHeight;
  font-size: $iconsize;
  width: $iconwidth;
}
.password-icon {
  position: relative;
  top: 10px;
  font-size: $iconsize;
  line-height: $iconLineHeight;
  width: $iconwidth;
}
.secondary-logo {
  position: relative;
  top: -$offset;
  margin-left: $offset;
}
.title {
  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>