diff options
Diffstat (limited to 'src/components/mfa_form')
| -rw-r--r-- | src/components/mfa_form/recovery_form.js | 46 | ||||
| -rw-r--r-- | src/components/mfa_form/recovery_form.vue | 65 | ||||
| -rw-r--r-- | src/components/mfa_form/totp_form.js | 45 | ||||
| -rw-r--r-- | src/components/mfa_form/totp_form.vue | 67 |
4 files changed, 223 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..b25c65dd --- /dev/null +++ b/src/components/mfa_form/recovery_form.js @@ -0,0 +1,46 @@ +import mfaApi from '../../services/new_api/mfa.js' +import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' + +export default { + data: () => ({ + code: null, + error: false + }), + computed: { + ...mapGetters({ + authSettings: 'authFlow/settings' + }), + ...mapState({ + instance: 'instance', + oauth: 'oauth' + }) + }, + methods: { + ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']), + ...mapActions({ login: 'authFlow/login' }), + clearError () { this.error = false }, + submit () { + const { clientId, clientSecret } = this.oauth + + const data = { + clientId, + clientSecret, + 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..57294630 --- /dev/null +++ b/src/components/mfa_form/recovery_form.vue @@ -0,0 +1,65 @@ +<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 + id="code" + v-model="code" + class="form-control" + > + </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" + /> + </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..b774f2d0 --- /dev/null +++ b/src/components/mfa_form/totp_form.js @@ -0,0 +1,45 @@ +import mfaApi from '../../services/new_api/mfa.js' +import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' +export default { + data: () => ({ + code: null, + error: false + }), + computed: { + ...mapGetters({ + authSettings: 'authFlow/settings' + }), + ...mapState({ + instance: 'instance', + oauth: 'oauth' + }) + }, + methods: { + ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']), + ...mapActions({ login: 'authFlow/login' }), + clearError () { this.error = false }, + submit () { + const { clientId, clientSecret } = this.oauth + + const data = { + clientId, + clientSecret, + 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..a344b395 --- /dev/null +++ b/src/components/mfa_form/totp_form.vue @@ -0,0 +1,67 @@ +<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 + id="code" + v-model="code" + class="form-control" + > + </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" + /> + </div> + </div> + </div> +</template> +<script src="./totp_form.js"></script> |