<template>
  <q-page class="flex flex-center">
    <div class="text-center">
      <img alt="Quasar logo" src="~assets/gyoza.jpg" style="max-width:80vw">
      <br/>
      <q-input label="Username" v-model="username" class="q-mt-md" autofocus @keydown.enter="login"></q-input>
      <br/>
      <q-input label="Password" type="password" v-model="password" @keydown.enter="login"></q-input>
      <br/>
      <q-btn label="Login" color="primary" @click="login" ></q-btn>
    </div>
  </q-page>
</template>

<style>
</style>

<script>
export default {
  name: 'PageIndex',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  created () {
    if (!window.crypto || !window.crypto.subtle) {
      throw new Error('Web Crypto API is not supported in this browser. Use Chrome 79+.')
    }
    // use the helper boot file which exposes $helpers
    let creds = this.$helpers.getStoredCredentials()
    console.log('credits', creds)
    if (creds) {
      this.$router.push('/dashboard')
    }
  },
  methods: {
    async login () {
      let logged = await this.$helpers.verifyCredentials(this.username + ':' + this.password)
      console.log('logged', logged)
      if (logged) {
        this.$router.push('/dashboard')
      } else {
        this.$q.notify({
          type: 'negative',
          message: 'Invalid username or password'
        })
      }
    }
  }
}
</script>
