<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="12" sm="12" v-if="error">
        <v-alert type="error">{{error}}</v-alert>
      </v-col>
      <v-col cols="12" md="6" sm="12">
        <v-text-field placeholder="Name/Nickname" v-model="name"></v-text-field>
      </v-col>
      <v-col cols="12" md="6" sm="12">
        <v-text-field placeholder="Code" v-model="code"></v-text-field>
      </v-col>
      <v-col cols="12" md="12" sm="12">
        <v-text-field v-if="passwd" v-model="password" placeholder="Password" type="password"></v-text-field>

      </v-col>
      <v-col cols="12" md="6" sm="12"><v-btn @click="passwd=!passwd" text>Password Login</v-btn></v-col>
      <v-col cols="12" md="6" sm="12">
        <v-btn @click="login">Login</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'Home',
  data:() => ({
    passwd: false,
    name:'',
    code:'',
    error:'',
    password:''
  }),
  methods: {
    login () {
      this.$axios.post('login', {
        username: this.code,
        password: this.password
      }).then(response => {
        this.$store.state.token = response.data.access_token
        this.$axios.defaults.headers.common['Authorization'] = "Bearer " + response.data.access_token
        this.$store.state.name = this.name
        this.$router.push('/rooms')
      }).catch((resp) => {
        this.error = resp.response.data.msg
      })
    }
  }
}
</script>
