forked from vikunja/frontend
sytone
306a926c66
Co-authored-by: sytone <github@sytone.com> Co-authored-by: Sytone <github@sytone.com> Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#520 Reviewed-by: konrad <konrad@kola-entertainments.de> Co-authored-by: sytone <kolaente@sytone.com> Co-committed-by: sytone <kolaente@sytone.com>
217 lines
5.8 KiB
Vue
217 lines
5.8 KiB
Vue
<template>
|
|
<div>
|
|
<h2 class="title has-text-centered">Login</h2>
|
|
<div class="box">
|
|
<div class="notification is-success has-text-centered" v-if="confirmedEmailSuccess">
|
|
{{ $t('user.auth.confirmEmailSuccess') }}
|
|
</div>
|
|
<api-config @foundApi="hasApiUrl = true"/>
|
|
<form @submit.prevent="submit" id="loginform" v-if="hasApiUrl && 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"
|
|
/>
|
|
</div>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field" v-if="needsTotpPasscode">
|
|
<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="totpPasscode"
|
|
:placeholder="$t('user.auth.totpPlaceholder')"
|
|
ref="totpPasscode"
|
|
required
|
|
type="text"
|
|
v-focus
|
|
@keyup.enter="submit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<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.resetPassword') }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div class="notification is-danger" v-if="errorMessage">
|
|
{{ errorMessage }}
|
|
</div>
|
|
</form>
|
|
|
|
<div
|
|
v-if="hasApiUrl && openidConnect.enabled && openidConnect.providers && openidConnect.providers.length > 0"
|
|
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>
|
|
</div>
|
|
|
|
<legal/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
import router from '../../router'
|
|
import {HTTPFactory} from '@/http-common'
|
|
import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
|
|
import legal from '../../components/misc/legal'
|
|
import ApiConfig from '@/components/misc/api-config'
|
|
import {getErrorText} from '@/message'
|
|
|
|
export default {
|
|
components: {
|
|
ApiConfig,
|
|
legal,
|
|
},
|
|
data() {
|
|
return {
|
|
confirmedEmailSuccess: false,
|
|
hasApiUrl: false,
|
|
}
|
|
},
|
|
beforeMount() {
|
|
const HTTP = HTTPFactory()
|
|
// 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) {
|
|
const cancel = this.setLoading()
|
|
HTTP.post('user/confirm', {token: emailVerifyToken})
|
|
.then(() => {
|
|
localStorage.removeItem('emailConfirmToken')
|
|
this.confirmedEmailSuccess = true
|
|
cancel()
|
|
})
|
|
.catch(e => {
|
|
cancel()
|
|
this.$store.commit(ERROR_MESSAGE, e.response.data.message)
|
|
})
|
|
}
|
|
|
|
// Check if the user is already logged in, if so, redirect him to the homepage
|
|
if (this.authenticated) {
|
|
router.push({name: 'home'})
|
|
}
|
|
},
|
|
created() {
|
|
this.hasApiUrl = window.API_URL !== ''
|
|
this.setTitle(this.$t('user.auth.login'))
|
|
},
|
|
computed: mapState({
|
|
registrationEnabled: state => state.config.registrationEnabled,
|
|
loading: LOADING,
|
|
errorMessage: ERROR_MESSAGE,
|
|
needsTotpPasscode: state => state.auth.needsTotpPasscode,
|
|
authenticated: state => state.auth.authenticated,
|
|
localAuthEnabled: state => state.config.auth.local.enabled,
|
|
openidConnect: state => state.config.auth.openidConnect,
|
|
}),
|
|
methods: {
|
|
setLoading() {
|
|
const timeout = setTimeout(() => {
|
|
this.loading = true
|
|
}, 100)
|
|
return () => {
|
|
clearTimeout(timeout)
|
|
this.loading = false
|
|
}
|
|
},
|
|
submit() {
|
|
this.$store.commit(ERROR_MESSAGE, '')
|
|
// 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,
|
|
}
|
|
|
|
if (this.needsTotpPasscode) {
|
|
credentials.totpPasscode = this.$refs.totpPasscode.value
|
|
}
|
|
|
|
this.$store.dispatch('auth/login', credentials)
|
|
.catch(e => {
|
|
const err = getErrorText(e, p => this.$t(p))
|
|
if (typeof err[1] !== 'undefined') {
|
|
this.$store.commit(ERROR_MESSAGE, err[1])
|
|
return
|
|
}
|
|
|
|
this.$store.commit(ERROR_MESSAGE, err[0])
|
|
})
|
|
},
|
|
redirectToProvider(provider) {
|
|
const state = Math.random().toString(36).substring(2, 24)
|
|
localStorage.setItem('state', state)
|
|
|
|
window.location.href = `${provider.authUrl}?client_id=${provider.clientId}&redirect_uri=${this.openidConnect.redirectUrl}${provider.key}&response_type=code&scope=openid email profile&state=${state}`
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.button {
|
|
margin: 0 0.4rem 0 0;
|
|
}
|
|
|
|
.reset-password-link {
|
|
display: inline-block;
|
|
padding-top: 5px;
|
|
}
|
|
</style>
|