Merge remote-tracking branch 'upstream/develop' into masto-register-app-secret

* upstream/develop:
  Revert "add TOTP/Recovery Form for mobile version"

1 files changed, 42 insertions, 23 deletions

diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 7d49fade..da302c76 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -1,34 +1,50 @@
+import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import oauthApi from '../../services/new_api/oauth.js'
+
 const LoginForm = {
   data: () => ({
     user: {},
-    authError: false
+    error: false
   }),
   computed: {
-    loginMethod () { return this.$store.state.instance.loginMethod },
-    loggingIn () { return this.$store.state.users.loggingIn },
-    registrationOpen () { return this.$store.state.instance.registrationOpen }
+    isPasswordAuth () { return this.requiredPassword },
+    isTokenAuth () { return this.requiredToken },
+    ...mapState({
+      registrationOpen: state => state.instance.registrationOpen,
+      instance: state => state.instance,
+      loggingIn: state => state.users.loggingIn,
+      oauth: state => state.oauth
+    }),
+    ...mapGetters(
+      'authFlow', ['requiredPassword', 'requiredToken', 'requiredMFA']
+    )
   },
   methods: {
-    oAuthLogin () {
-      const { clientId } = this.$store.state.oauth
+    ...mapMutations('authFlow', ['requireMFA']),
+    ...mapActions({ login: 'authFlow/login' }),
+    submit () {
+      this.isTokenMethod ? this.submitToken() : this.submitPassword()
+    },
+    submitToken () {
+      const { clientId } = this.oauth
       const data = {
         clientId,
-        instance: this.$store.state.instance.server,
+        instance: this.instance.server,
         commit: this.$store.commit
       }
 
       oauthApi.getOrCreateApp(data)
         .then((app) => { oauthApi.login({ ...app, ...data }) })
     },
-    submit () {
-      const { clientId } = this.$store.state.oauth
+    submitPassword () {
+      const { clientId } = this.oauth
       const data = {
         clientId,
-        instance: this.$store.state.instance.server,
-        commit: this.$store.commit
+        oauth: this.oauth,
+        instance: this.instance.server
       }
-      this.clearError()
+      this.error = false
+
       oauthApi.getOrCreateApp(data).then((app) => {
         oauthApi.getTokenWithCredentials(
           {
@@ -37,24 +53,27 @@ const LoginForm = {
             username: this.user.username,
             password: this.user.password
           }
-        ).then(async (result) => {
+        ).then((result) => {
           if (result.error) {
-            this.authError = result.error
-            this.user.password = ''
+            if (result.error === 'mfa_required') {
+              this.requireMFA({app: app, settings: result})
+            } else {
+              this.error = result.error
+              this.focusOnPasswordInput()
+            }
             return
           }
-          this.$store.commit('setToken', result.access_token)
-          try {
-            await this.$store.dispatch('loginUser', result.access_token)
+          this.login(result).then(() => {
             this.$router.push({name: 'friends'})
-          } catch (e) {
-            console.log(e)
-          }
+          })
         })
       })
     },
-    clearError () {
-      this.authError = false
+    clearError () { this.error = false },
+    focusOnPasswordInput () {
+      let passwordInput = this.$refs.passwordInput
+      passwordInput.focus()
+      passwordInput.setSelectionRange(0, passwordInput.value.length)
     }
   }
 }