Skip to content
Permalink
Browse files

Refactor the login page to use composition api

  • Loading branch information
marshallswain committed Dec 19, 2019
1 parent f95dbef commit eb9ba377c5705c1378bee72661a13dd0db48be05
Showing with 28 additions and 24 deletions.
  1. +28 −24 src/views/Login.vue
@@ -58,40 +58,44 @@
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
import { ref } from '@vue/composition-api'
export default {
data() {
return {
email: undefined,
password: undefined,
error: undefined
name: 'Login',
setup(props, context) {
const { $store } = context.root
const email = ref('')
const password = ref('')
const error = ref(null)
function dismissError() {
error.value = null
}
},
methods: {
dismissError() {
this.error = undefined
this.clearAuthenticateError()
},
onSubmit(email, password) {
this.authenticate({ strategy: 'local', email, password })
function onSubmit(email, password) {
$store
.dispatch('auth/authenticate', { strategy: 'local', email, password })
// Just use the returned error instead of mapping it from the store.
.catch(error => {
.catch(err => {
// Convert the error to a plain object and add a message.
let type = error.className
error = Object.assign({}, error)
error.message =
let type = err.className
err = Object.assign({}, err)
err.message =
type === 'not-authenticated'
? 'Incorrect email or password.'
: 'An error prevented login.'
this.error = error
this.error = err
})
},
...mapMutations('auth', {
clearAuthenticateError: 'clearAuthenticateError'
}),
...mapActions('auth', ['authenticate'])
}
return {
email,
password,
error,
dismissError,
onSubmit
}
}
}
</script>

0 comments on commit eb9ba37

Please sign in to comment.
You can’t perform that action at this time.