StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Finalize two-factor handling on account.

Browse source
This commit is contained in:
Dane Everitt 2018-06-20 23:05:35 -07:00
parent 0cc895f2d5
commit 7711b697ad
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
13 changed files with 299 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

184
resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
View file

@ -1,11 +1,191 @@
<template>
<div>
Todo: put the 2FA magic here!
<div class="h-16 text-center" v-show="spinner">
<span class="spinner spinner-xl text-blue"></span>
</div>
<div v-if="response.enabled" v-show="!spinner">
<h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
<div class="mt-6">
<label class="input-label" for="grid-two-factor-token-disable">{{ $t('dashboard.account.two_factor.disable.field') }}</label>
<input id="grid-two-factor-token-disable" type="number" class="input"
name="token"
v-model="token"
ref="token"
v-validate="'length:6'"
:class="{ error: errors.has('token') }"
>
<p class="input-help error" v-show="errors.has('token')">{{ errors.first('token') }}</p>
</div>
<div class="mt-6 w-full text-right">
<button class="btn btn-sm btn-secondary mr-4" v-on:click="$emit('close')">
Cancel
</button>
<button class="btn btn-sm btn-red" type="submit"
:disabled="submitDisabled"
v-on:click.prevent="disableTwoFactor"
>{{ $t('strings.disable') }}</button>
</div>
</div>
<div v-else v-show="!spinner">
<h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
<div class="flex mt-6">
<div class="flex-none w-full sm:w-1/2 text-center">
<div>
<img :src="response.qr_image" alt="Two-factor qr image" class="w-3/4">
</div>
<div>
<p class="text-xs text-grey-darker mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
<p class="text-xs"><code>{{response.secret}}</code></p>
</div>
</div>
<div class="flex-none w-full sm:w-1/2">
<div>
<label class="input-label" for="grid-two-factor-token">{{ $t('dashboard.account.two_factor.setup.field') }}</label>
<input id="grid-two-factor-token" type="number" class="input"
name="token"
v-model="token"
ref="token"
v-validate="'length:6'"
:class="{ error: errors.has('token') }"
>
<p class="input-help error" v-show="errors.has('token')">{{ errors.first('token') }}</p>
</div>
<div class="mt-6">
<button class="btn btn-blue btn-jumbo" type="submit"
:disabled="submitDisabled"
v-on:click.prevent="enableTwoFactor"
>{{ $t('strings.enable') }}</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import isObject from 'lodash/isObject';
export default {
name: 'TwoFactorAuthentication'
name: 'TwoFactorAuthentication',
data: function () {
return {
spinner: true,
token: '',
submitDisabled: true,
response: {
enabled: false,
qr_image: '',
secret: '',
},
};
},
/**
* Before the component is mounted setup the event listener. This event is fired when a user
* presses the 'Configure 2-Factor' button on their account page. Once this happens we fire off
* a HTTP request to get their information.
*/
mounted: function () {
window.events.$on('two_factor:open', () => {
this.prepareModalContent();
});
},
watch: {
token: function (value) {
this.$data.submitDisabled = value.length !== 6;
},
},
methods: {
/**
* Determine the correct content to show in the modal.
*/
prepareModalContent: function () {
// Reset the data object when the modal is opened again.
Object.assign(this.$data, this.$options.data());
window.axios.get(this.route('account.two_factor'))
.finally(() => {
this.clearFlashes();
})
.then(response => {
this.$data.response = response.data;
this.$data.spinner = false;
Vue.nextTick().then(() => {
this.$refs.token.focus();
})
})
.catch(error => {
if (!error.response) {
this.error(error.message);
}
const response = error.response;
if (response.data && isObject(response.data.errors)) {
response.data.errors.forEach(e => {
this.error(e.detail);
});
}
this.$emit('close');
});
},
/**
* Enable two-factor authentication on the account by validating the token provided by the user.
* Close the modal once the request completes so that the success or error message can be shown
* to the user.
*/
enableTwoFactor: function () {
return this._callInternalApi('account.two_factor.enable', 'enabled');
},
/**
* Disables two-factor authentication for the client account and closes the modal.
*/
disableTwoFactor: function () {
return this._callInternalApi('account.two_factor.disable', 'disabled');
},
/**
* Call the Panel API endpoint and handle errors.
*
* @param {String} route
* @param {String} langKey
* @private
*/
_callInternalApi: function (route, langKey) {
window.axios.post(this.route(route), {
token: this.$data.token,
})
.finally(() => {
this.clearFlashes();
})
.then(response => {
if (response.data.success) {
this.success(this.$t(`dashboard.account.two_factor.${langKey}`));
} else {
this.error(this.$t('dashboard.account.two_factor.invalid'));
}
})
.catch(error => {
if (!error.response) {
this.error(error.message);
}
const response = error.response;
if (response.data && isObject(response.data.errors)) {
response.data.errors.forEach(e => {
this.error(e.detail);
});
}
})
.finally(() => {
this.$emit('close');
})
}
},
};
</script>