<template>
  <div style="min-height: 100pc;" class="bg">
  <div class="header2">
  </div>
    <v-container grid-list-md>
      <v-layout row wrap>
        <v-flex md4></v-flex>
        <v-flex md4 v-if="!$store.state.loggedIn" style="">
          <template>
            <v-card
                    class="mx-auto"
            >
              <v-card-title>Login</v-card-title>
              <v-card-text><Login></Login></v-card-text>
            </v-card>
          </template>

        </v-flex>
        <v-flex md4 v-if="$store.state.loggedIn">
          <template>
            <v-card
                    class="mx-auto"
            >
              <v-card-title>Login</v-card-title>
              <v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
            </v-card>
          </template>

        </v-flex>



      </v-layout>
    </v-container>


  </div>

</template>

<script>
  import ServerService from '../services/Server'
  import UserService from '../services/User'
  import LoginComponent from '../components/Login'

  export default {
    data () {
      return {
        nameBig: '',
        nameSmall: '',
        username: '',
        password: '',
        errorMessage: ''
      }
    },
    components: {
      "Login": LoginComponent
    },
    methods: {
      'login': function () {
        UserService.login(this.username, this.password).then((res) => {
          this.errorMessage = '';
          UserService.setAccessToken(res.data.data["access_token"]);
          console.log("Login ok, dispatch event");
          this.$store.dispatch('checkAccount');
        }, (res) => {
          this.errorMessage = res.response.data.msg;
        });
      }
    },
    mounted: function() {
      console.log("REDIRECT: "+this.$store.state.redirectIfLoggedIn)
      if(this.$store.state.loggedIn == true) {
        if(this.$store.state.redirectIfLoggedIn != null) {
          this.$router.push(this.$store.state.redirectIfLoggedIn);
        } else {
          this.$router.push({name: 'Dashboard'});
        }


      }
      this.nameBig = this.$store.getters.getSettingValue("name_big");
      this.nameSmall = this.$store.getters.getSettingValue("name_small");
    }
      }
</script>

<style>
  .bg {
    background-image: url('~@/assets/texture-1485529_1920.jpg');
  }
.header2 {
  background-image: url('~@/assets/texture-1485529_1920.jpg');
  background-repeat: no-repeat;
  margin-top: -100px;
  height: 50vh;
  text-align: center;
}
  .header h1{
    padding-top: 200px;
    font-size: 56px !important;
    font-weight: 400;
    line-height: 32px !important;
    letter-spacing: normal !important;
  }
  .header h1 .small{
    font-weight: 300 !important;
  }
.header h2{
  padding-top: 30px;
  font-size: 34px !important;
  font-weight: 300;
  line-height: 32px !important;
  letter-spacing: normal !important;
}
h1{
  font-weight: 300;
  line-height: 32px !important;
  letter-spacing: normal !important;
}
h2{
  font-weight: 300;
  line-height: 32px !important;
  letter-spacing: normal !important;
}
</style>
