update login form

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
     },

src/components/login_form/login_form.vue

@@ -2,7 +2,14 @@
 <div class="login panel panel-default">
   <!-- Default panel contents -->
 
-  <component :is="loginForm" :user="user"></component>
+  <component
+    :is="loginForm"
+    @change-form="setForm"
+    @display-errors="displayErrors"
+    @login="login"
+    :user="user">
+
+  </component>
 
   <div v-if="authError" class='form-group'>
     <div class='alert error'>

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)
         })
       })
     }

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)
       })
     }
   }

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)
       })
     }
   }

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

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
+}