4 files changed, 168 insertions, 0 deletions
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
new file mode 100644
index 00000000..fbe9b437
--- /dev/null
+++ b/src/components/mfa_form/recovery_form.js
@@ -0,0 +1,41 @@
+import mfaApi from '../../services/new_api/mfa.js'
+import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+
+export default {
+  data: () => ({
+    code: null,
+    error: false
+  }),
+  computed: {
+    ...mapGetters({
+      authApp: 'authFlow/app',
+      authSettings: 'authFlow/settings'
+    }),
+    ...mapState({ instance: 'instance' })
+  },
+  methods: {
+    ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
+    ...mapActions({ login: 'authFlow/login' }),
+    clearError () { this.error = false },
+    submit () {
+      const data = {
+        app: this.authApp,
+        instance: this.instance.server,
+        mfaToken: this.authSettings.mfa_token,
+        code: this.code
+      }
+
+      mfaApi.verifyRecoveryCode(data).then((result) => {
+        if (result.error) {
+          this.error = result.error
+          this.code = null
+          return
+        }
+
+        this.login(result).then(() => {
+          this.$router.push({name: 'friends'})
+        })
+      })
+    }
+  }
+}
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
new file mode 100644
index 00000000..e0e2d65b
--- /dev/null
+++ b/src/components/mfa_form/recovery_form.vue
@@ -0,0 +1,42 @@
+<template>
+<div class="login panel panel-default">
+  <!-- Default panel contents -->
+
+  <div class="panel-heading">{{$t('login.heading.recovery')}}</div>
+
+  <div class="panel-body">
+    <form class='login-form' @submit.prevent='submit'>
+      <div class='form-group'>
+        <label for='code'>{{$t('login.recovery_code')}}</label>
+        <input v-model='code' class='form-control' id='code'>
+      </div>
+
+      <div class='form-group'>
+        <div class='login-bottom'>
+          <div>
+            <a href="#" @click.prevent="requireTOTP">
+              {{$t('login.enter_two_factor_code')}}
+            </a>
+            <br />
+            <a href="#" @click.prevent="abortMFA">
+              {{$t('general.cancel')}}
+            </a>
+          </div>
+          <button type='submit' class='btn btn-default'>
+            {{$t('general.verify')}}
+          </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="./recovery_form.js" ></script>
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
new file mode 100644
index 00000000..6c94fe52
--- /dev/null
+++ b/src/components/mfa_form/totp_form.js
@@ -0,0 +1,40 @@
+import mfaApi from '../../services/new_api/mfa.js'
+import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+export default {
+  data: () => ({
+    code: null,
+    error: false
+  }),
+  computed: {
+    ...mapGetters({
+      authApp: 'authFlow/app',
+      authSettings: 'authFlow/settings'
+    }),
+    ...mapState({ instance: 'instance' })
+  },
+  methods: {
+    ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']),
+    ...mapActions({ login: 'authFlow/login' }),
+    clearError () { this.error = false },
+    submit () {
+      const data = {
+        app: this.authApp,
+        instance: this.instance.server,
+        mfaToken: this.authSettings.mfa_token,
+        code: this.code
+      }
+
+      mfaApi.verifyOTPCode(data).then((result) => {
+        if (result.error) {
+          this.error = result.error
+          this.code = null
+          return
+        }
+
+        this.login(result).then(() => {
+          this.$router.push({name: 'friends'})
+        })
+      })
+    }
+  }
+}
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
new file mode 100644
index 00000000..c547785e
--- /dev/null
+++ b/src/components/mfa_form/totp_form.vue
@@ -0,0 +1,45 @@
+<template>
+<div class="login panel panel-default">
+  <!-- Default panel contents -->
+
+  <div class="panel-heading">
+    {{$t('login.heading.totp')}}
+  </div>
+
+  <div class="panel-body">
+    <form class='login-form' @submit.prevent='submit'>
+      <div class='form-group'>
+        <label for='code'>
+          {{$t('login.authentication_code')}}
+        </label>
+        <input v-model='code' class='form-control' id='code'>
+      </div>
+
+      <div class='form-group'>
+        <div class='login-bottom'>
+          <div>
+            <a href="#" @click.prevent="requireRecovery">
+              {{$t('login.enter_recovery_code')}}
+            </a>
+            <br />
+            <a href="#" @click.prevent="abortMFA">
+              {{$t('general.cancel')}}
+            </a>
+          </div>
+          <button type='submit' class='btn btn-default'>
+            {{$t('general.verify')}}
+          </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="./totp_form.js"></script>