{
    path: '/',
    component: () => import('components/login'),
  },

  {
    path: '/main',
    component: () => import('layouts/default'),
    children: [
      { path: '', component: () => import('pages/index') },
      { path: 'chat', component: () => import('components/chat')}
    ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

<template>
    <div>
        <form id="login" label="Login">
            <q-input type="text" float-label="Username" v-model="username" /> <br>
            <q-input v-model="password" type="password" float-label="Password" />
            <q-btn input type="submit" @click="authenticate()">Submit</q-btn>
        </form>
    </div>
</template>

<style>
    input{
        margin: 10px;
    }
    #login{
        vertical-align: middle;
        text-align: center;
    }
</style>

<script>

module.exports = {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    authenticate () {
      this.$axios.post('/api/login', {
        Username: this.username,
        Password: this.password
      })
        .then(response => {
          this.$Socket.emit('LoginInfo', {
            firstname: response.data[0].ClientFirstName,
            lastname: response.data[0].ClientLastName,
            name: response.data[0].ClientFirstName + ' ' + response.data[0].ClientLastName,
            userid: response.data[0].ClientID
          })
          console.log(this.$router)
          this.$router.push({path: '/main'})
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>