wikijs-fork/client/js/components/login.vue

198 lines
6.1 KiB
Vue
Raw Normal View History

<template lang="pug">
.login(:class='{ "is-error": error }')
2018-01-10 01:41:53 +00:00
.login-container(:class='{ "is-expanded": strategies.length > 1, "is-loading": isLoading }')
.login-providers(v-show='strategies.length > 1')
button(v-for='strategy in strategies', :class='{ "is-active": strategy.key === selectedStrategy }', @click='selectStrategy(strategy.key, strategy.useForm)', :title='strategy.title')
em(v-html='strategy.icon')
span {{ strategy.title }}
.login-providers-fill
2018-01-10 01:41:53 +00:00
.login-frame(v-show='screen === "login"')
h1 {{ siteTitle }}
2018-01-10 01:41:53 +00:00
h2 {{ $t('auth:loginRequired') }}
input(type='text', ref='iptEmail', v-model='username', :placeholder='$t("auth:fields.emailUser")')
input(type='password', ref='iptPassword', v-model='password', :placeholder='$t("auth:fields.password")', @keyup.enter='login')
button.button.is-blue.is-fullwidth(@click='login')
span {{ $t('auth:actions.login') }}
2018-01-10 01:41:53 +00:00
.login-frame(v-show='screen === "tfa"')
.login-frame-icon
svg.icons.is-48(role='img')
title {{ $t('auth:tfa.title') }}
use(xlink:href='#nc-key')
h2 {{ $t('auth:tfa.subtitle') }}
input(type='text', ref='iptTFA', v-model='securityCode', :placeholder='$t("auth:tfa.placeholder")', @keyup.enter='verifySecurityCode')
button.button.is-blue.is-fullwidth(@click='verifySecurityCode')
span {{ $t('auth:tfa.verifyToken') }}
.login-copyright
2018-01-10 01:41:53 +00:00
span {{ $t('footer.poweredBy') }}
a(href='https://wiki.js.org', rel='external', title='Wiki.js') Wiki.js
</template>
<script>
2017-10-30 01:36:05 +00:00
/* global CONSTANTS, graphQL, siteConfig */
export default {
name: 'login',
2018-01-10 01:41:53 +00:00
data () {
return {
error: false,
strategies: [],
2018-01-10 01:41:53 +00:00
selectedStrategy: 'local',
screen: 'login',
username: '',
password: '',
securityCode: '',
loginToken: '',
isLoading: false
}
},
computed: {
2018-01-10 01:41:53 +00:00
siteTitle () {
return siteConfig.title
}
2017-09-30 02:32:43 +00:00
},
methods: {
2018-01-10 01:41:53 +00:00
selectStrategy (key, useForm) {
this.selectedStrategy = key
2018-01-10 01:41:53 +00:00
this.screen = 'login'
if (!useForm) {
2018-01-10 01:41:53 +00:00
window.location.assign(siteConfig.path + 'login/' + key)
} else {
this.$refs.iptEmail.focus()
}
},
2018-01-10 01:41:53 +00:00
refreshStrategies () {
this.isLoading = true
graphQL.query({
query: CONSTANTS.GRAPHQL.GQL_QUERY_AUTHENTICATION,
variables: {
mode: 'active'
}
}).then(resp => {
if (resp.data.authentication) {
this.strategies = resp.data.authentication
} else {
throw new Error('No authentication providers available!')
}
2018-01-10 01:41:53 +00:00
this.isLoading = false
}).catch(err => {
console.error(err)
2018-01-10 01:41:53 +00:00
this.$store.dispatch('alert', {
style: 'error',
icon: 'gg-warning',
msg: err.message
})
this.isLoading = false
})
},
2018-01-10 01:41:53 +00:00
login () {
if (this.username.length < 2) {
this.$store.dispatch('alert', {
style: 'error',
icon: 'gg-warning',
msg: 'Enter a valid email / username.'
})
this.$refs.iptEmail.focus()
} else if (this.password.length < 2) {
this.$store.dispatch('alert', {
style: 'error',
icon: 'gg-warning',
msg: 'Enter a valid password.'
})
this.$refs.iptPassword.focus()
} else {
this.isLoading = true
graphQL.mutate({
mutation: CONSTANTS.GRAPHQL.GQL_MUTATION_LOGIN,
variables: {
username: this.username,
password: this.password,
provider: this.selectedStrategy
}
}).then(resp => {
if (resp.data.login) {
let respObj = resp.data.login
if (respObj.succeeded === true) {
if (respObj.tfaRequired === true) {
this.screen = 'tfa'
this.securityCode = ''
this.loginToken = respObj.tfaLoginToken
this.$nextTick(() => {
this.$refs.iptTFA.focus()
})
} else {
this.$store.dispatch('alert', {
style: 'success',
icon: 'gg-check',
msg: 'Login successful!'
})
}
this.isLoading = false
} else {
throw new Error(respObj.message)
}
} else {
throw new Error('Authentication is unavailable.')
}
}).catch(err => {
console.error(err)
this.$store.dispatch('alert', {
style: 'error',
icon: 'gg-warning',
msg: err.message
})
this.isLoading = false
})
}
},
verifySecurityCode () {
if (this.securityCode.length !== 6) {
this.$store.dispatch('alert', {
style: 'error',
icon: 'gg-warning',
msg: 'Enter a valid security code.'
})
this.$refs.iptTFA.focus()
} else {
this.isLoading = true
graphQL.mutate({
mutation: CONSTANTS.GRAPHQL.GQL_MUTATION_LOGINTFA,
variables: {
loginToken: this.loginToken,
securityCode: this.securityCode
}
}).then(resp => {
if (resp.data.loginTFA) {
let respObj = resp.data.loginTFA
if (respObj.succeeded === true) {
this.$store.dispatch('alert', {
style: 'success',
icon: 'gg-check',
msg: 'Login successful!'
})
this.isLoading = false
} else {
throw new Error(respObj.message)
}
} else {
throw new Error('Authentication is unavailable.')
}
}).catch(err => {
console.error(err)
this.$store.dispatch('alert', {
style: 'error',
icon: 'gg-warning',
msg: err.message
})
this.isLoading = false
})
}
}
},
2018-01-10 01:41:53 +00:00
mounted () {
this.$store.commit('navigator/subtitleStatic', 'Login')
this.refreshStrategies()
this.$refs.iptEmail.focus()
}
}
</script>