From e27420cd5a98c84a10a9f304a941081d45478738 Mon Sep 17 00:00:00 2001 From: Maksim Pechnikov Date: Wed, 22 May 2019 15:59:09 +0300 Subject: [PATCH] update login form --- src/components/login_form/login_form.js | 17 ++++++----- src/components/login_form/login_form.vue | 9 +++++- src/components/login_form/password_form.vue | 12 ++++---- src/components/login_form/recovery_form.vue | 10 +++---- src/components/login_form/totp_form.vue | 10 +++---- src/main.js | 2 ++ src/modules/mfa.js | 32 +++++++++++++++++++++ 7 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 src/modules/mfa.js diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index 846ca0a8a3..b45f2142ce 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -7,23 +7,26 @@ const LoginForm = { data: () => ({ user: {}, authError: false, - form: null, - mfa: null, - app: null + form: null }), components: { PasswordForm, TokenForm, TotpForm, RecoveryForm }, computed: { loginForm () { - let initForm = 'PasswordForm' - if (this.$store.state.instance.loginMethod === 'token') { - initForm = 'TokenForm' - } + const initForm = this.$store.state.instance.loginMethod !== 'token' + ? 'PasswordForm' + : 'TokenForm' return this.form || initForm } }, methods: { + displayErrors (errors) { + this.authError = errors + }, + setForm (formName) { + this.form = formName + }, clearError () { this.authError = false }, diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 45beaa6643..ae68d24bc0 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -2,7 +2,14 @@
- + + +
diff --git a/src/components/login_form/password_form.vue b/src/components/login_form/password_form.vue index b3c1116688..777ebe18df 100644 --- a/src/components/login_form/password_form.vue +++ b/src/components/login_form/password_form.vue @@ -49,7 +49,7 @@ export default { oauth: this.$store.state.oauth, instance: this.$store.state.instance.server } - this.$parent.authError = false + this.$emit('display-errors', false) oauthApi.getOrCreateApp(data).then((app) => { oauthApi.getTokenWithCredentials( @@ -62,17 +62,17 @@ export default { ).then(async (result) => { if (result.error) { if (result.error === 'mfa_required') { - this.$parent.form = 'TotpForm' - this.$parent.mfa = result - this.$parent.app = app + this.$store.commit('mfa/setApp', app) + this.$store.commit('mfa/setSettings', result) + this.$emit('change-form', 'TotpForm') return } else { - this.$parent.authError = result.error + this.$emit('display-errors', result.error) this.user.password = '' return } } - await this.$parent.login(result) + this.$emit('login', result) }) }) } diff --git a/src/components/login_form/recovery_form.vue b/src/components/login_form/recovery_form.vue index d88fa7cf9a..8b7bdf33cf 100644 --- a/src/components/login_form/recovery_form.vue +++ b/src/components/login_form/recovery_form.vue @@ -39,24 +39,24 @@ export default { }, methods: { gotoOtp () { - this.$parent.form = 'TotpForm' + this.$emit('change-form', 'TotpForm') }, submit () { const data = { - app: this.$parent.app, + app: this.$store.state.mfa.app, instance: this.$store.state.instance.server, - mfaToken: this.$parent.mfa.mfa_token, + mfaToken: this.$store.state.mfa.settings.mfa_token, code: this.code } oauthApi.verifyRecoveryCode(data).then((result) => { if (result.error) { - this.$parent.authError = result.error + this.$emit('display-errors', result.error) this.code = null return } - this.$parent.login(result) + this.$emit('login', result) }) } } diff --git a/src/components/login_form/totp_form.vue b/src/components/login_form/totp_form.vue index 142b416bd5..7b941fa7da 100644 --- a/src/components/login_form/totp_form.vue +++ b/src/components/login_form/totp_form.vue @@ -40,24 +40,24 @@ export default { }, methods: { gotoRecoveryCodes () { - this.$parent.form = 'RecoveryForm' + this.$emit('change-form', 'RecoveryForm') }, submit () { const data = { - app: this.$parent.app, + app: this.$store.state.mfa.app, instance: this.$store.state.instance.server, - mfaToken: this.$parent.mfa.mfa_token, + mfaToken: this.$store.state.mfa.settings.mfa_token, code: this.code } oauthApi.verifyOTPCode(data).then((result) => { if (result.error) { - this.$parent.authError = result.error + this.$emit('display-errors', result.error) this.code = null return } - this.$parent.login(result) + this.$emit('login', result) }) } } diff --git a/src/main.js b/src/main.js index 62194ef8eb..1321f8bfcd 100644 --- a/src/main.js +++ b/src/main.js @@ -11,6 +11,7 @@ import apiModule from './modules/api.js' import configModule from './modules/config.js' import chatModule from './modules/chat.js' import oauthModule from './modules/oauth.js' +import mfaModule from './modules/mfa.js' import mediaViewerModule from './modules/media_viewer.js' import oauthTokensModule from './modules/oauth_tokens.js' import reportsModule from './modules/reports.js' @@ -78,6 +79,7 @@ const persistedStateOptions = { config: configModule, chat: chatModule, oauth: oauthModule, + mfa: mfaModule, mediaViewer: mediaViewerModule, oauthTokens: oauthTokensModule, reports: reportsModule diff --git a/src/modules/mfa.js b/src/modules/mfa.js new file mode 100644 index 0000000000..25bb1c2094 --- /dev/null +++ b/src/modules/mfa.js @@ -0,0 +1,32 @@ +// initial state +const state = { + app: null, + settings: {} +} + +// getters +const getters = { + app: (state, getters) => { + return state.app + }, + settings: (state, getters) => { + return state.settings + } +} + +// mutations +const mutations = { + setSettings (state, data) { + state.settings = data + }, + setApp (state, app) { + state.app = app + } +} + +export default { + namespaced: true, + state, + getters, + mutations +}