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

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

2 files changed, 79 insertions, 54 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)
     }
   }
 }
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c6be2e00..a2c5cf8f 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -1,47 +1,53 @@
 <template>
-  <div class="login panel panel-default">
-    <!-- Default panel contents -->
-    <div class="panel-heading">
-      {{$t('login.login')}}
-    </div>
-    <div class="panel-body">
-      <form v-if="loginMethod == 'password'" v-on:submit.prevent='submit(user)' class='login-form'>
+<div class="login panel panel-default">
+  <!-- Default panel contents -->
+
+  <div class="panel-heading">{{$t('login.login')}}</div>
+
+  <div class="panel-body">
+    <form class='login-form' @submit.prevent='submit'>
+      <template v-if="isPasswordAuth">
         <div class='form-group'>
           <label for='username'>{{$t('login.username')}}</label>
-          <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' v-bind:placeholder="$t('login.placeholder')">
+          <input :disabled="loggingIn" v-model='user.username'
+                 class='form-control' id='username'
+                 :placeholder="$t('login.placeholder')">
         </div>
         <div class='form-group'>
           <label for='password'>{{$t('login.password')}}</label>
-          <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
+          <input :disabled="loggingIn" v-model='user.password'
+                 ref='passwordInput' class='form-control' id='password' type='password'>
         </div>
-        <div class='form-group'>
-          <div class='login-bottom'>
-            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
-            <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
-          </div>
-        </div>
-      </form>
+      </template>
 
-      <form v-if="loginMethod == 'token'" v-on:submit.prevent='oAuthLogin'  class="login-form">
-        <div class="form-group">
-          <p>{{$t('login.description')}}</p>
-        </div>
-        <div class='form-group'>
-          <div class='login-bottom'>
-            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
-            <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
+      <div class="form-group" v-if="isTokenAuth">
+        <p>{{$t('login.description')}}</p>
+      </div>
+
+      <div class='form-group'>
+        <div class='login-bottom'>
+          <div>
+            <router-link :to="{name: 'registration'}"
+                         v-if='registrationOpen'
+                         class='register'>
+              {{$t('login.register')}}
+            </router-link>
           </div>
-        </div>
-      </form>
-      
-      <div v-if="authError" class='form-group'>
-        <div class='alert error'>
-          {{authError}}
-          <i class="button-icon icon-cancel" @click="clearError"></i>
+          <button :disabled="loggingIn" type='submit' class='btn btn-default'>
+            {{$t('login.login')}}
+          </button>
         </div>
       </div>
+    </form>
+  </div>
+
+  <div v-if="error" class='form-group'>
+    <div class='alert error'>
+      {{error}}
+      <i class="button-icon icon-cancel" @click="clearError"></i>
     </div>
   </div>
+</div>
 </template>
 
 <script src="./login_form.js" ></script>