<template>
  <!-- <div style="height:100%"> -->
  <v-app id="inspire">
    <auth-header btnToProp="signup" btnLabel="Login.registerBtn" btnIconName="mdi-account-plus"></auth-header>
    <v-content>
      <v-container fluid fill-height class="align-center backgroundImg">
        <v-row justify="center" class="loginCard">
          <v-col xs="8" sm="6" md="4" lg="3">
            <v-card class="elevation-12 roundedCard" light elevation="24">
              <v-toolbar color="rgb(94, 181, 177,.85)" dark>
                <v-icon class="ma-3">mdi-login</v-icon>
                <v-toolbar-title>{{$t('Login.loginHeader')}}</v-toolbar-title>
              </v-toolbar>
              <v-card-text class="d-flex align-center justify-center">
                <v-img
                  src="/img/0.png"
                  contain
                  :height="$vuetify.breakpoint.mdAndUp?150:100"
                  :width="$vuetify.breakpoint.mdAndUp?150:100"
                ></v-img>
                <v-form>
                  <v-container fluid>
                    <v-row>
                      <v-col cols="12">
                        <v-text-field
                          data-cy="username"
                          :label="$t('Login.username')"
                          prepend-icon="mdi-account-circle"
                          :rules="[rules.required]"
                          v-model="username"
                          ref="usernameTextField"
                          :hint="this.usernameAlert?`${$t('Login.usernameAlert')}`:''"
                          @keyup.enter="loginUser()"
                        />
                      </v-col>
                      <v-col cols="12">
                        <v-text-field
                          data-cy="password"
                          :type="!showPassword?'password' :'text'"
                          :label="$t('Login.password')"
                          prepend-icon="mdi-lock"
                          @click:append="showPassword = !showPassword"
                          :append-icon="showPassword ? 'mdi-eye': 'mdi-eye-off'"
                          :hint="this.passwordAlert?$t('Login.passwordAlert'):$t('Login.passwordHint')"
                          :rules="[rules.required, rules.min]"
                          v-model="password"
                          ref="passwordTextField"
                          @keyup.enter="loginUser()"
                        />
                      </v-col>
                    </v-row>
                  </v-container>
                </v-form>
              </v-card-text>
              <v-card-actions class="flex-wrap">
                <v-btn
                  style="width:100%"
                  color="rgb(94, 181, 177,.85)"
                  rounded
                  class="white--text mb-2"
                  @click="loginUser()"
                  :loading="loading"
                  :disabled="loading"
                >
                  <v-icon left>mdi-login</v-icon>
                  <small>{{$t('Login.loginBtn')}}</small>
                </v-btn>
                <v-btn
                  text
                  rounded
                  color="green"
                  x-small
                  to="/changePassword"
                >{{$t('Login.changePassword')}}</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
        <ul class="bubble-boxes">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="2000">{{ snackbarText }}</v-snackbar>
      </v-container>
    </v-content>
    <app-footer></app-footer>
    <!-- </div> -->
  </v-app>
</template>

<script>
import AppFooter from "../components/AppFooter.vue";
import AuthHeader from "../components/AuthHeader.vue";
import { Meteor } from "meteor/meteor";

export default {
  components: {
    "app-footer": AppFooter,
    "auth-header": AuthHeader
  },
  mounted() {
    let self = this;
    this.username = null;
    this.password = null;
  },
  data() {
    return {
      loading: false,
      snackbar: false,
      snackbarColor: "red",
      snackbarText: "",
      showPassword: false,
      username: null,
      usernameAlert: false,
      password: null,
      passwordAlert: false,
      rules: {
        required: value => !!value || this.$t("Login.required"),
        min: v => {
          if (v == undefined) return true;
          return v.length >= 8 || this.$t("Login.min8Character");
        }
      }
    };
  },
  methods: {
    loginUser() {
      const that = this;

      if (this.username == null || this.username.length == 0) {
        this.$refs.usernameTextField.focus();
        this.usernameAlert = true;
        return;
      }

      if (this.password == null || this.password.length == 0) {
        this.$refs.passwordTextField.focus();
        this.passwordAlert = true;
        return;
      }
      this.loading = true;
      Meteor.loginWithPassword(this.username, this.password, function(
        error,
        result
      ) {
        if (error) {
          that.loading = false;
          if (error.reason == "Incorrect password") {
            that.snackbarText = that.$t("Login.errorIncorrectPassword");
            that.snackbarColor = "red";
            that.snackbar = true;
          }

          if (error.reason == "User not found") {
            that.snackbarText = that.$t("Login.errorUserNotFound");
            that.snackbarColor = "red";
            that.snackbar = true;
          }
        } else {
          Meteor.setTimeout(() => {
            that.loading = false;
            that.$router.push("/main/worklist");
          }, 1000);
        }
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      debugger;

      // if (Meteor.userId()) {
      //   vm.$router.push("/main/worklist");
      // }
    });
  }
};
</script>

<style scoped>
.backgroundImg {
  background-color: #abdae4ad;
  background-image: linear-gradient(
    141deg,
    #9fb8ad 0%,
    #1fc8db 51%,
    #2ce8ceb0 75%
  );
}

img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  opacity: 0.6;
  filter: grayscale(0.5) blur(2px);
  z-index: 0;
}

.backgroundSheet {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden;

  z-index: 0;
}

.loginCard {
  z-index: 1;
}

.backgroundImg {
  overflow-y: hidden;
}

.roundedCard {
  border-radius: 20px;
}
@import url("./css/bubbles.css");

/* loader */

@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>