<template>
  <div class="md-layout md-alignment-center-center" style="height: 100vh;">
    <md-card class="md-layout-item md-size-50">
      <md-card-header>
        <div class="md-title">
          Register
        </div>
      </md-card-header>

      <form @submit.prevent="resisterUser">
        <md-card-content>
          <md-field md-clearable>
            <label for="email">Email</label>
            <md-input id="email" v-model="form.email" type="email" name="email" autocomplete="email"/>
          </md-field>
          <md-field>
            <label for="password">password</label>
            <md-input id="password" v-model="form.password" type="password" name="password" autocomplete="password" />
          </md-field>
        </md-card-content>

        <md-card-actions>
          <md-button to="/login">
            Go To Login
          </md-button>
          <md-button class="md-primary md-raised" type="submit">
            Submit
          </md-button>
        </md-card-actions>
      </form>
    </md-card>
  </div>
</template>

<script>
export default {
  data: () => ({
    form: {
      email: '',
      password: ''
    }
  }),
  methods: {
    async resisterUser () {
      await this.$store.dispatch('authenticateUser', {
        email: this.form.email,
        password: this.form.password,
        resturnSecureToken: true
      })
    }
  }
}
</script>
