index.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div class="md-layout md-alignment-center-center" style="height: 100vh;">
  3. <md-card class="md-layout-item md-size-50">
  4. <md-card-header>
  5. <div class="md-title">
  6. Register
  7. </div>
  8. </md-card-header>
  9. <form @submit.prevent="resisterUser">
  10. <md-card-content>
  11. <md-field md-clearable>
  12. <label for="email">Email</label>
  13. <md-input id="email" v-model="form.email" type="email" name="email" autocomplete="email"/>
  14. </md-field>
  15. <md-field>
  16. <label for="password">password</label>
  17. <md-input id="password" v-model="form.password" type="password" name="password" autocomplete="password" />
  18. </md-field>
  19. </md-card-content>
  20. <md-card-actions>
  21. <md-button to="/login">
  22. Go To Login
  23. </md-button>
  24. <md-button class="md-primary md-raised" type="submit">
  25. Submit
  26. </md-button>
  27. </md-card-actions>
  28. </form>
  29. </md-card>
  30. </div>
  31. </template>
  32. <script>
  33. export default {
  34. data: () => ({
  35. form: {
  36. email: '',
  37. password: ''
  38. }
  39. }),
  40. methods: {
  41. async resisterUser () {
  42. await this.$store.dispatch('authenticateUser', {
  43. email: this.form.email,
  44. password: this.form.password,
  45. resturnSecureToken: true
  46. })
  47. }
  48. }
  49. }
  50. </script>