index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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
  14. id="email"
  15. v-model="form.email"
  16. :disabled="loading"
  17. type="email"
  18. name="email"
  19. autocomplete="email"
  20. />
  21. </md-field>
  22. <md-field>
  23. <label for="password">password</label>
  24. <md-input
  25. id="password"
  26. v-model="form.password"
  27. :disabled="loading"
  28. type="password"
  29. name="password"
  30. autocomplete="password"
  31. />
  32. </md-field>
  33. </md-card-content>
  34. <md-card-actions>
  35. <md-button to="/login">
  36. Go To Login
  37. </md-button>
  38. <md-button class="md-primary md-raised" type="submit">
  39. Submit
  40. </md-button>
  41. </md-card-actions>
  42. </form>
  43. <md-snackbar :md-active.sync="isAuthenticated">
  44. {{ form.email }} was successfully registerd!
  45. </md-snackbar>
  46. </md-card>
  47. </div>
  48. </template>
  49. <script>
  50. export default {
  51. middleware: 'auth',
  52. data: () => ({
  53. form: {
  54. email: '',
  55. password: ''
  56. }
  57. }),
  58. computed: {
  59. loading () {
  60. return this.$store.getters.loading
  61. },
  62. isAuthenticated () {
  63. return this.$store.getters.isAuthenticated
  64. }
  65. },
  66. watch: {
  67. isAuthenticated (value) {
  68. if (value) {
  69. setTimeout(() => this.$router.push('/'), 500)
  70. }
  71. }
  72. },
  73. methods: {
  74. async resisterUser () {
  75. await this.$store.dispatch('authenticateUser', {
  76. email: this.form.email,
  77. password: this.form.password,
  78. resturnSecureToken: true
  79. })
  80. }
  81. }
  82. }
  83. </script>