79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<!-- components/Login.vue -->
|
|
<template>
|
|
<div>
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<h2 class="title">Login or Register</h2>
|
|
<p class="subtitle error-msg">{{ errorMsg }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="field">
|
|
<label class="label is-large" for="email">Email:</label>
|
|
<div class="control">
|
|
<input type="email" class="input is-large" id="email" v-model="email">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label is-large" for="password">Password:</label>
|
|
<div class="control">
|
|
<input type="password" class="input is-large" id="password" v-model="password">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<a class="button is-large is-primary" @click="authenticate">Login</a>
|
|
<a class="button is-large is-success" @click="register">Register</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { EventBus } from '@/utils'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
email: '',
|
|
password: '',
|
|
errorMsg: ''
|
|
}
|
|
},
|
|
methods: {
|
|
authenticate () {
|
|
this.$store.dispatch('login', { email: this.email, password: this.password })
|
|
.then(() => this.$router.push('/'))
|
|
},
|
|
register () {
|
|
this.$store.dispatch('register', { email: this.email, password: this.password })
|
|
.then(() => this.$router.push('/'))
|
|
}
|
|
},
|
|
mounted () {
|
|
EventBus.$on('failedRegistering', (msg) => {
|
|
this.errorMsg = msg
|
|
})
|
|
EventBus.$on('failedAuthentication', (msg) => {
|
|
this.errorMsg = msg
|
|
})
|
|
},
|
|
beforeDestroy () {
|
|
EventBus.$off('failedRegistering')
|
|
EventBus.$off('failedAuthentication')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.error-msg {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
</style> |