98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<script>
|
|
import Layout from '@layouts/main.vue'
|
|
import { authMethods } from '@state/helpers'
|
|
import appConfig from '@src/app.config'
|
|
import store from '@state/store'
|
|
|
|
export default {
|
|
page: {
|
|
title: 'Log in',
|
|
meta: [{ name: 'description', content: `Log in to ${appConfig.title}` }],
|
|
},
|
|
components: { Layout },
|
|
data() {
|
|
return {
|
|
username: '',
|
|
password: '',
|
|
authError: null,
|
|
tryingToLogIn: false,
|
|
errorMessage:''
|
|
}
|
|
},
|
|
computed: {
|
|
placeholders() {
|
|
return process.env.NODE_ENV === 'production'
|
|
? {}
|
|
: {
|
|
username: 'Enter your username',
|
|
password: 'Enter your password',
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
// console.log(process.env.API_BASE_URL)
|
|
},
|
|
methods: {
|
|
...authMethods,
|
|
// Try to log the user in with the username
|
|
// and password they provided.
|
|
tryToLogIn() {
|
|
this.tryingToLogIn = true
|
|
this.errorMessage='';
|
|
// Reset the authError if it existed.
|
|
this.authError = null
|
|
return this.logIn({
|
|
username: this.username,
|
|
password: this.password,
|
|
})
|
|
.then((token) => {
|
|
this.tryingToLogIn = false
|
|
store.dispatch('users/me').then((data) => {
|
|
this.$router.push(this.$route.query.redirectFrom || { name: 'home' })
|
|
})
|
|
// Redirect to the originally requested page, or to the home page
|
|
})
|
|
.catch((error) => {
|
|
if(error.response.data?.errors?.login){
|
|
this.errorMessage=error.response.data.errors.login
|
|
}
|
|
this.tryingToLogIn = false
|
|
this.authError = error
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Layout>
|
|
<form @submit.prevent="tryToLogIn">
|
|
<b-field label="Email">
|
|
<b-input
|
|
v-model="username"
|
|
tag="b-input"
|
|
name="username"
|
|
:placeholder="placeholders.username"
|
|
/></b-field>
|
|
<b-field label="Password">
|
|
<b-input
|
|
v-model="password"
|
|
tag="b-input"
|
|
name="password"
|
|
type="password"
|
|
:placeholder="placeholders.password"
|
|
/>
|
|
</b-field>
|
|
<b-button tag="input" native-type="submit" :disabled="tryingToLogIn" type="is-primary">
|
|
<BaseIcon v-if="tryingToLogIn" name="sync" spin />
|
|
<span v-else>
|
|
Log in
|
|
</span>
|
|
</b-button>
|
|
<p v-if="authError">
|
|
There was an error logging in to your account. {{errorMessage}}
|
|
</p>
|
|
</form>
|
|
</Layout>
|
|
</template>
|