2018-09-06 17:46:38 +00:00
|
|
|
<template>
|
2018-11-01 21:34:29 +00:00
|
|
|
<div>
|
2021-12-12 16:40:13 +00:00
|
|
|
<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
|
|
|
|
{{ $t('user.auth.confirmEmailSuccess') }}
|
|
|
|
</message>
|
|
|
|
<message variant="danger" v-if="errorMessage">
|
|
|
|
{{ errorMessage }}
|
|
|
|
</message>
|
|
|
|
<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
|
|
|
|
<div class="field">
|
|
|
|
<label class="label" for="username">{{ $t('user.auth.usernameEmail') }}</label>
|
|
|
|
<div class="control">
|
|
|
|
<input
|
|
|
|
class="input" id="username"
|
|
|
|
name="username"
|
|
|
|
:placeholder="$t('user.auth.usernamePlaceholder')"
|
|
|
|
ref="username"
|
|
|
|
required
|
|
|
|
type="text"
|
|
|
|
autocomplete="username"
|
|
|
|
v-focus
|
|
|
|
@keyup.enter="submit"
|
|
|
|
/>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
2021-12-12 16:40:13 +00:00
|
|
|
</div>
|
|
|
|
<div class="field">
|
|
|
|
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
|
|
|
|
<div class="control">
|
|
|
|
<input
|
|
|
|
class="input"
|
|
|
|
id="password"
|
|
|
|
name="password"
|
|
|
|
:placeholder="$t('user.auth.passwordPlaceholder')"
|
|
|
|
ref="password"
|
|
|
|
required
|
|
|
|
type="password"
|
|
|
|
autocomplete="current-password"
|
|
|
|
@keyup.enter="submit"
|
|
|
|
/>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
2021-12-12 16:40:13 +00:00
|
|
|
</div>
|
|
|
|
<div class="field" v-if="needsTotpPasscode">
|
|
|
|
<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
|
|
|
|
<div class="control">
|
|
|
|
<input
|
|
|
|
autocomplete="one-time-code"
|
|
|
|
class="input"
|
|
|
|
id="totpPasscode"
|
|
|
|
:placeholder="$t('user.auth.totpPlaceholder')"
|
|
|
|
ref="totpPasscode"
|
|
|
|
required
|
|
|
|
type="text"
|
|
|
|
v-focus
|
|
|
|
@keyup.enter="submit"
|
|
|
|
/>
|
2020-04-17 23:46:07 +00:00
|
|
|
</div>
|
2021-12-12 16:40:13 +00:00
|
|
|
</div>
|
2018-09-06 18:15:49 +00:00
|
|
|
|
2021-12-12 16:40:13 +00:00
|
|
|
<div class="field is-grouped login-buttons">
|
|
|
|
<div class="control is-expanded">
|
|
|
|
<x-button
|
|
|
|
@click="submit"
|
|
|
|
:loading="loading"
|
|
|
|
>
|
|
|
|
{{ $t('user.auth.login') }}
|
|
|
|
</x-button>
|
|
|
|
<x-button
|
|
|
|
:to="{ name: 'user.register' }"
|
|
|
|
v-if="registrationEnabled"
|
|
|
|
type="secondary"
|
|
|
|
>
|
|
|
|
{{ $t('user.auth.register') }}
|
|
|
|
</x-button>
|
|
|
|
</div>
|
|
|
|
<div class="control">
|
|
|
|
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
|
|
|
|
{{ $t('user.auth.forgotPassword') }}
|
|
|
|
</router-link>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
2020-11-21 16:38:40 +00:00
|
|
|
</div>
|
2021-12-12 16:40:13 +00:00
|
|
|
</form>
|
2020-11-21 16:38:40 +00:00
|
|
|
|
2021-12-12 16:40:13 +00:00
|
|
|
<div
|
|
|
|
v-if="hasOpenIdProviders"
|
|
|
|
class="mt-4">
|
|
|
|
<x-button
|
|
|
|
@click="redirectToProvider(p)"
|
|
|
|
v-for="(p, k) in openidConnect.providers"
|
|
|
|
:key="k"
|
|
|
|
type="secondary"
|
|
|
|
class="is-fullwidth mt-2"
|
|
|
|
>
|
|
|
|
{{ $t('user.auth.loginWith', {provider: p.name}) }}
|
|
|
|
</x-button>
|
2018-09-06 18:15:49 +00:00
|
|
|
</div>
|
2018-09-06 17:46:38 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-09-05 20:35:52 +00:00
|
|
|
import {mapState} from 'vuex'
|
2020-05-08 18:43:51 +00:00
|
|
|
|
2020-10-11 10:13:35 +00:00
|
|
|
import {HTTPFactory} from '@/http-common'
|
2021-10-17 19:38:30 +00:00
|
|
|
import {LOADING} from '@/store/mutation-types'
|
2021-06-23 23:24:57 +00:00
|
|
|
import {getErrorText} from '@/message'
|
2021-11-28 14:18:27 +00:00
|
|
|
import Message from '@/components/misc/message'
|
2021-08-15 10:02:29 +00:00
|
|
|
import {redirectToProvider} from '../../helpers/redirectToProvider'
|
2021-10-13 19:53:39 +00:00
|
|
|
import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
|
2018-09-06 17:46:38 +00:00
|
|
|
|
2020-09-05 20:35:52 +00:00
|
|
|
export default {
|
|
|
|
components: {
|
2021-11-28 14:18:27 +00:00
|
|
|
Message,
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
confirmedEmailSuccess: false,
|
2021-10-17 19:38:30 +00:00
|
|
|
errorMessage: '',
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
beforeMount() {
|
2020-10-11 10:13:35 +00:00
|
|
|
const HTTP = HTTPFactory()
|
2020-09-05 20:35:52 +00:00
|
|
|
// Try to verify the email
|
|
|
|
// FIXME: Why is this here? Can we find a better place for this?
|
|
|
|
let emailVerifyToken = localStorage.getItem('emailConfirmToken')
|
|
|
|
if (emailVerifyToken) {
|
2021-06-22 20:07:57 +00:00
|
|
|
const cancel = this.setLoading()
|
2021-07-17 21:21:46 +00:00
|
|
|
HTTP.post('user/confirm', {token: emailVerifyToken})
|
2020-09-05 20:35:52 +00:00
|
|
|
.then(() => {
|
|
|
|
localStorage.removeItem('emailConfirmToken')
|
|
|
|
this.confirmedEmailSuccess = true
|
|
|
|
cancel()
|
|
|
|
})
|
|
|
|
.catch(e => {
|
|
|
|
cancel()
|
2021-10-17 19:38:30 +00:00
|
|
|
this.errorMessage = e.response.data.message
|
2020-09-05 20:35:52 +00:00
|
|
|
})
|
|
|
|
}
|
2018-11-01 22:58:59 +00:00
|
|
|
|
2021-10-13 19:53:39 +00:00
|
|
|
// Check if the user is already logged in, if so, redirect them to the homepage
|
2020-09-05 20:35:52 +00:00
|
|
|
if (this.authenticated) {
|
2021-10-13 19:53:39 +00:00
|
|
|
const last = getLastVisited()
|
|
|
|
if (last !== null) {
|
|
|
|
this.$router.push({
|
2021-11-28 14:18:27 +00:00
|
|
|
name: last.name,
|
2021-10-13 19:53:39 +00:00
|
|
|
params: last.params,
|
|
|
|
})
|
|
|
|
clearLastVisited()
|
|
|
|
} else {
|
|
|
|
this.$router.push({name: 'home'})
|
|
|
|
}
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
2021-06-23 23:24:57 +00:00
|
|
|
this.setTitle(this.$t('user.auth.login'))
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2021-08-15 10:02:29 +00:00
|
|
|
computed: {
|
|
|
|
hasOpenIdProviders() {
|
2021-12-12 16:40:13 +00:00
|
|
|
return this.openidConnect.enabled &&
|
2021-08-15 10:02:29 +00:00
|
|
|
this.openidConnect.providers &&
|
|
|
|
this.openidConnect.providers.length > 0
|
|
|
|
},
|
|
|
|
...mapState({
|
|
|
|
registrationEnabled: state => state.config.registrationEnabled,
|
|
|
|
loading: LOADING,
|
|
|
|
needsTotpPasscode: state => state.auth.needsTotpPasscode,
|
|
|
|
authenticated: state => state.auth.authenticated,
|
|
|
|
localAuthEnabled: state => state.config.auth.local.enabled,
|
|
|
|
openidConnect: state => state.config.auth.openidConnect,
|
|
|
|
}),
|
|
|
|
},
|
2020-09-05 20:35:52 +00:00
|
|
|
methods: {
|
2021-06-22 20:07:57 +00:00
|
|
|
setLoading() {
|
|
|
|
const timeout = setTimeout(() => {
|
|
|
|
this.loading = true
|
|
|
|
}, 100)
|
|
|
|
return () => {
|
|
|
|
clearTimeout(timeout)
|
|
|
|
this.loading = false
|
|
|
|
}
|
|
|
|
},
|
2021-10-11 17:37:20 +00:00
|
|
|
|
|
|
|
async submit() {
|
2021-10-17 19:38:30 +00:00
|
|
|
this.errorMessage = ''
|
2020-09-05 20:35:52 +00:00
|
|
|
// Some browsers prevent Vue bindings from working with autofilled values.
|
|
|
|
// To work around this, we're manually getting the values here instead of relying on vue bindings.
|
|
|
|
// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
|
|
|
|
const credentials = {
|
|
|
|
username: this.$refs.username.value,
|
|
|
|
password: this.$refs.password.value,
|
2019-03-02 10:25:10 +00:00
|
|
|
}
|
2020-04-17 23:46:07 +00:00
|
|
|
|
2020-09-05 20:35:52 +00:00
|
|
|
if (this.needsTotpPasscode) {
|
|
|
|
credentials.totpPasscode = this.$refs.totpPasscode.value
|
2019-03-02 10:25:10 +00:00
|
|
|
}
|
2020-09-05 20:35:52 +00:00
|
|
|
|
2021-10-11 17:37:20 +00:00
|
|
|
try {
|
|
|
|
await this.$store.dispatch('auth/login', credentials)
|
|
|
|
this.$store.commit('auth/needsTotpPasscode', false)
|
2021-11-28 14:18:27 +00:00
|
|
|
} catch (e) {
|
2021-10-11 17:37:20 +00:00
|
|
|
if (e.response && e.response.data.code === 1017 && !credentials.totpPasscode) {
|
|
|
|
return
|
|
|
|
}
|
2021-07-30 10:23:31 +00:00
|
|
|
|
2021-10-11 17:37:20 +00:00
|
|
|
const err = getErrorText(e)
|
2021-10-17 19:38:30 +00:00
|
|
|
this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
|
2021-10-11 17:37:20 +00:00
|
|
|
}
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2021-10-11 17:37:20 +00:00
|
|
|
|
2021-12-12 17:42:03 +00:00
|
|
|
redirectToProvider,
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
|
|
|
}
|
2018-09-06 17:46:38 +00:00
|
|
|
</script>
|
|
|
|
|
2021-10-18 12:32:59 +00:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
.login-buttons {
|
|
|
|
@media screen and (max-width: 450px) {
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
.control:first-child {
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-05 20:35:52 +00:00
|
|
|
.button {
|
2021-01-23 17:18:09 +00:00
|
|
|
margin: 0 0.4rem 0 0;
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
2018-11-01 21:34:29 +00:00
|
|
|
|
2020-09-05 20:35:52 +00:00
|
|
|
.reset-password-link {
|
|
|
|
display: inline-block;
|
|
|
|
padding-top: 5px;
|
|
|
|
}
|
2018-09-06 17:46:38 +00:00
|
|
|
</style>
|