<template>
  <div id="app">
    <div id="wrapper">
      <sidebar v-if="this.$store.getters.isAuthenticated"></sidebar>
      <div id="page-wrapper" class="gray-bg">
        <topbar v-if="this.$store.getters.isAuthenticated"></topbar>
        <router-view :key="$route.fullPath"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from '@/components/shared/Sidebar.vue'
import TopBar from '@/components/shared/TopBar.vue'
import { USER_REQUEST } from '@/store/actions/user'

export default {
  components: {
    'topbar': TopBar,
    'sidebar': Sidebar
  },
  name: 'App',
  created: function () {
    if(this.$store.getters.isAuthenticated) {
      this.$store.dispatch(USER_REQUEST)
    }
  }
}
</script>

<template>
  <div>
    <div class="middle-box text-center loginscreen animated fadeInDown">
      <div>
        <div>
          <h1 class="logo-name">K+</h1>
        </div>
        <h3>Welcome to KRONOS</h3>
        <p>Login in.</p>
        <form class="m-t" role="form" action="" @submit.prevent="login" autocomplete="off">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Quad" maxlength="4" required="" v-model="username">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password" required="" v-model="password">
          </div>
          <button type="submit" class="btn btn-primary block full-width m-b">Login</button>

        </form>
        <p class="m-t" style="font-color:white;"> <small>KRONOS Timesheet &copy; 2018</small> </p>
      </div>
    </div>
  </div>
</template>
<script>
import { AUTH_REQUEST } from '@/store/actions/auth'
export default {
  name: 'Login',
  data () {
    return {
      errors:[],
      username: 'dogo',
      password: 'dogy',
      error: false,
      companies:[]
    }
  },
  methods: {
      login: function () {
        const { username, password } = this
        this.$store.dispatch(AUTH_REQUEST, { username, password }).then(() => {
          this.$router.push({name: 'Dashboard'})
        })
      }
    },
}
</script>