<template>
  <div class="d-flex flex-column login bg-white shadow">
    <div class="m-5">
      <!-- logo section -->
      <div class="d-flex flex-row justify-content-center mb-3">
        <div class="logo mr-3"><img src="@/assets/logo.png" /></div>
        <div class="title">
          <h1>{{ appTitle }}</h1>
        </div>
      </div>
      <!-- end logo section -->
      <form class="loginform mx-auto" @submit.prevent="login">
        <div
          id="alert"
          :style="errorMessageStyle"
          :class="errorMessageClass"
          role="alert"
        >
          <span>{{ errorMessage }}</span>
        </div>
        <div class="input-group mb-3">
          <input
            type="text"
            v-model="user"
            id="inputUsername"
            class="form-control shadow-sm"
            :placeholder="usernameLabel"
            required
            autofocus
          />
        </div>
        <div class="input-group mb-3">
          <input
            :type="isPasswordVisible"
            v-model="password"
            id="inputPassword"
            class="form-control shadow-sm"
            :placeholder="passwordLabel"
            :required="!showPasswordReset"
            :disabled="showPasswordReset"
          />
          <div class="input-group-append">
            <span
              class="input-group-text disabled"
              id="basic-addon2"
              @click="showPassword"
            >
              <font-awesome-icon icon="eye" v-if="!readablePassword" />
              <font-awesome-icon icon="eye-slash" v-if="readablePassword" />
            </span>
          </div>
        </div>
        <button
          v-if="showPasswordReset == false"
          class="btn btn-info btn-block shadow-sm"
          :disabled="submitted || showPasswordReset"
          type="submit"
        >
          <translate>Login</translate>
        </button>
        <div v-if="showPasswordReset" class="passwordreset">
          <button
            class="btn btn-block btn-info"
            type="button"
            @click="resetPassword"
          >
            <translate>Request password reset!</translate>
          </button>
          <div class="pull-right">
            <a href="#" @click.prevent="togglePasswordReset">
              <translate>back to login</translate>
            </a>
          </div>
        </div>
        <div v-else class="pull-right">
          <a href="#" @click.prevent="togglePasswordReset">
            <translate>Forgot password</translate>
          </a>
        </div>
      </form>

      <!-- bottom logo section -->
      <div class="mb-3 secondary-logo mx-auto mb-auto">
        <img :src="secondaryLogo" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  min-width: 375px;
  min-height: 500px;
  @extend %fully-centered;
}

.loginform {
  max-width: 375px;
}

.alert {
  padding: 0.5rem;
}

.secondary-logo {
  max-width: 375px;
}

/* avoid IE and Edge show a password reveal as we do our own */
input[type="password"]::-ms-reveal {
  display: none;
}
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus@intevation.de >
 */
import { mapState } from "vuex";
import { HTTP } from "@/lib/http";
import { displayError } from "@/lib/errors";

const UNAUTHORIZED = 401;

export default {
  name: "login",
  data() {
    return {
      user: "",
      password: "",
      submitted: false,
      loginFailed: false,
      passwordJustResetted: false,
      readablePassword: false,
      showPasswordReset: false,
      usernameToReset: ""
    };
  },
  computed: {
    errorMessage() {
      if (this.loginFailed) return this.$gettext("Login failed");
      if (this.passwordJustResetted)
        return this.$gettext("Password reset requested!");
      return "&npsp;";
    },
    passwordLabel() {
      return this.$gettext("Enter passphrase");
    },
    usernameLabel() {
      return this.$gettext("Enter username");
    },
    isPasswordVisible() {
      return this.readablePassword ? "text" : "password";
    },
    errorMessageStyle() {
      if (this.loginFailed || this.passwordJustResetted) {
        return "visibility:visible";
      }
      return "visibility:hidden";
    },
    errorMessageClass() {
      let result = {
        "mb-3": true,
        errormessage: true,
        alert: true
      };
      if (this.loginFailed) {
        result["alert-danger"] = true;
      }
      if (this.passwordJustResetted) {
        result["alert-info"] = true;
      }
      return result;
    },
    ...mapState("application", ["appTitle", "secondaryLogo"])
  },
  methods: {
    login() {
      this.submitted = true;
      this.passwordJustResetted = false;
      const { user, password } = this;
      this.$store
        .dispatch("user/login", { user, password })
        .then(() => {
          this.loginFailed = false;
          this.$router.push(localStorage.getItem("tempRoute") || "/");
          localStorage.removeItem("tempRoute");
        })
        .catch(error => {
          this.loginFailed = true;
          this.submitted = false;
          const { status, data } = error.response;
          if (status !== UNAUTHORIZED) {
            //Unauthorized is handled in alert-div
            displayError({
              title: "Backend Error",
              message: `${status}: ${data.message || data}`
            });
          }
        });
    },
    showPassword() {
      // disallowing toggle when in reset mode
      if (this.showPasswordReset) return;
      this.readablePassword = !this.readablePassword;
    },
    togglePasswordReset() {
      this.passwordJustResetted = false;
      this.showPasswordReset = !this.showPasswordReset;
      this.loginFailed = false;
    },
    resetPassword() {
      if (this.user) {
        HTTP.post("/users/passwordreset", { user: this.user }).catch(error => {
          const { status, data } = error.response;
          displayError({
            title: "Backend Error",
            message: `${status}: ${data.message || data}`
          });
        });
        this.togglePasswordReset();
        this.passwordJustResetted = true;
      }
    }
  }
};
</script>