-
+
+
diff --git a/src/components/user_settings/confirm.js b/src/components/user_settings/confirm.js
new file mode 100644
index 00000000..0f4ddfc9
--- /dev/null
+++ b/src/components/user_settings/confirm.js
@@ -0,0 +1,9 @@
+const Confirm = {
+ props: ['disabled'],
+ data: () => ({}),
+ methods: {
+ confirm () { this.$emit('confirm') },
+ cancel () { this.$emit('cancel') }
+ }
+}
+export default Confirm
diff --git a/src/components/user_settings/confirm.vue b/src/components/user_settings/confirm.vue
new file mode 100644
index 00000000..46a42e38
--- /dev/null
+++ b/src/components/user_settings/confirm.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js
new file mode 100644
index 00000000..d44a3ab7
--- /dev/null
+++ b/src/components/user_settings/mfa.js
@@ -0,0 +1,155 @@
+import RecoveryCodes from './mfa_backup_codes.vue'
+import TOTP from './mfa_totp.vue'
+import Confirm from './confirm.vue'
+import VueQrcode from '@chenfengyuan/vue-qrcode'
+import { mapState } from 'vuex'
+
+const Mfa = {
+ data: () => ({
+ settings: { // current settings of MFA
+ available: false,
+ enabled: false,
+ totp: false
+ },
+ setupState: { // setup mfa
+ state: '', // state of setup. '' -> 'getBackupCodes' -> 'setupOTP' -> 'complete'
+ setupOTPState: '' // state of setup otp. '' -> 'prepare' -> 'confirm' -> 'complete'
+ },
+ backupCodes: {
+ getNewCodes: false,
+ inProgress: false, // progress of fetch codes
+ codes: []
+ },
+ otpSettings: { // pre-setup setting of OTP. secret key, qrcode url.
+ provisioning_uri: '',
+ key: ''
+ },
+ currentPassword: null,
+ otpConfirmToken: null,
+ error: null,
+ readyInit: false
+ }),
+ components: {
+ 'recovery-codes': RecoveryCodes,
+ 'totp-item': TOTP,
+ 'qrcode': VueQrcode,
+ 'confirm': Confirm
+ },
+ computed: {
+ canSetupOTP () {
+ return (
+ (this.setupInProgress && this.backupCodesPrepared) ||
+ this.settings.enabled
+ ) && !this.settings.totp && !this.setupOTPInProgress
+ },
+ setupInProgress () {
+ return this.setupState.state !== '' && this.setupState.state !== 'complete'
+ },
+ setupOTPInProgress () {
+ return this.setupState.state === 'setupOTP' && !this.completedOTP
+ },
+ prepareOTP () {
+ return this.setupState.setupOTPState === 'prepare'
+ },
+ confirmOTP () {
+ return this.setupState.setupOTPState === 'confirm'
+ },
+ completedOTP () {
+ return this.setupState.setupOTPState === 'completed'
+ },
+ backupCodesPrepared () {
+ return !this.backupCodes.inProgress && this.backupCodes.codes.length > 0
+ },
+ confirmNewBackupCodes () {
+ return this.backupCodes.getNewCodes
+ },
+ ...mapState({
+ backendInteractor: (state) => state.api.backendInteractor
+ })
+ },
+
+ methods: {
+ activateOTP () {
+ if (!this.settings.enabled) {
+ this.setupState.state = 'getBackupcodes'
+ this.fetchBackupCodes()
+ }
+ },
+ fetchBackupCodes () {
+ this.backupCodes.inProgress = true
+ this.backupCodes.codes = []
+
+ return this.backendInteractor.generateMfaBackupCodes()
+ .then((res) => {
+ this.backupCodes.codes = res.codes
+ this.backupCodes.inProgress = false
+ })
+ },
+ getBackupCodes () { // get a new backup codes
+ this.backupCodes.getNewCodes = true
+ },
+ confirmBackupCodes () { // confirm getting new backup codes
+ this.fetchBackupCodes().then((res) => {
+ this.backupCodes.getNewCodes = false
+ })
+ },
+ cancelBackupCodes () { // cancel confirm form of new backup codes
+ this.backupCodes.getNewCodes = false
+ },
+
+ // Setup OTP
+ setupOTP () { // prepare setup OTP
+ this.setupState.state = 'setupOTP'
+ this.setupState.setupOTPState = 'prepare'
+ this.backendInteractor.mfaSetupOTP()
+ .then((res) => {
+ this.otpSettings = res
+ this.setupState.setupOTPState = 'confirm'
+ })
+ },
+ doConfirmOTP () { // handler confirm enable OTP
+ this.error = null
+ this.backendInteractor.mfaConfirmOTP({
+ token: this.otpConfirmToken,
+ password: this.currentPassword
+ })
+ .then((res) => {
+ if (res.error) {
+ this.error = res.error
+ return
+ }
+ this.completeSetup()
+ })
+ },
+
+ completeSetup () {
+ this.setupState.setupOTPState = 'complete'
+ this.setupState.state = 'complete'
+ this.currentPassword = null
+ this.error = null
+ this.fetchSettings()
+ },
+ cancelSetup () { // cancel setup
+ this.setupState.setupOTPState = ''
+ this.setupState.state = ''
+ this.currentPassword = null
+ this.error = null
+ },
+ // end Setup OTP
+
+ // fetch settings from server
+ async fetchSettings () {
+ let result = await this.backendInteractor.fetchSettingsMFA()
+ if (result.error) return
+ this.settings = result.settings
+ this.settings.available = true
+ return result
+ }
+ },
+ mounted () {
+ this.fetchSettings().then(() => {
+ this.readyInit = true
+ })
+ }
+}
+export default Mfa
diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue
new file mode 100644
index 00000000..1f1be60d
--- /dev/null
+++ b/src/components/user_settings/mfa.vue
@@ -0,0 +1,121 @@
+
+
+
+
+
{{$t('settings.mfa.title')}}
+
+
+
+
+
+
{{$t('settings.mfa.authentication_methods')}}
+
+
+
+
+
+
+
+
+
+ {{$t('settings.mfa.warning_of_generate_new_codes')}}
+
+
+
+
+
+
+
+
{{$t('settings.mfa.setup_otp')}}
+
+
+
+
+
+
+
+
+
+ {{$t('settings.mfa.wait_pre_setup_otp')}}
+
+
+
+
+
{{$t('settings.mfa.scan.title')}}
+
{{$t('settings.mfa.scan.desc')}}
+
+
+ {{$t('settings.mfa.scan.secret_code')}}:
+ {{otpSettings.key}}
+
+
+
+
+
{{$t('general.verify')}}
+
{{$t('settings.mfa.verify.desc')}}
+
+
+
{{$t('settings.enter_current_password_to_confirm')}}:
+
+
+
+
+
+
{{error}}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/user_settings/mfa_backup_codes.js b/src/components/user_settings/mfa_backup_codes.js
new file mode 100644
index 00000000..f0a984ec
--- /dev/null
+++ b/src/components/user_settings/mfa_backup_codes.js
@@ -0,0 +1,17 @@
+export default {
+ props: {
+ backupCodes: {
+ type: Object,
+ default: () => ({
+ inProgress: false,
+ codes: []
+ })
+ }
+ },
+ data: () => ({}),
+ computed: {
+ inProgress () { return this.backupCodes.inProgress },
+ ready () { return this.backupCodes.codes.length > 0 },
+ displayTitle () { return this.inProgress || this.ready }
+ }
+}
diff --git a/src/components/user_settings/mfa_backup_codes.vue b/src/components/user_settings/mfa_backup_codes.vue
new file mode 100644
index 00000000..c275bd63
--- /dev/null
+++ b/src/components/user_settings/mfa_backup_codes.vue
@@ -0,0 +1,22 @@
+
+
+
{{$t('settings.mfa.recovery_codes')}}
+
{{$t('settings.mfa.waiting_a_recovery_codes')}}
+
+ {{$t('settings.mfa.recovery_codes_warning')}}
+
+
+
+
+
+
diff --git a/src/components/user_settings/mfa_totp.js b/src/components/user_settings/mfa_totp.js
new file mode 100644
index 00000000..8408d8e9
--- /dev/null
+++ b/src/components/user_settings/mfa_totp.js
@@ -0,0 +1,49 @@
+import Confirm from './confirm.vue'
+import { mapState } from 'vuex'
+
+export default {
+ props: ['settings'],
+ data: () => ({
+ error: false,
+ currentPassword: '',
+ deactivate: false,
+ inProgress: false // progress peform request to disable otp method
+ }),
+ components: {
+ 'confirm': Confirm
+ },
+ computed: {
+ isActivated () {
+ return this.settings.totp
+ },
+ ...mapState({
+ backendInteractor: (state) => state.api.backendInteractor
+ })
+ },
+ methods: {
+ doActivate () {
+ this.$emit('activate')
+ },
+ cancelDeactivate () { this.deactivate = false },
+ doDeactivate () {
+ this.error = null
+ this.deactivate = true
+ },
+ confirmDeactivate () { // confirm deactivate TOTP method
+ this.error = null
+ this.inProgress = true
+ this.backendInteractor.mfaDisableOTP({
+ password: this.currentPassword
+ })
+ .then((res) => {
+ this.inProgress = false
+ if (res.error) {
+ this.error = res.error
+ return
+ }
+ this.deactivate = false
+ this.$emit('deactivate')
+ })
+ }
+ }
+}
diff --git a/src/components/user_settings/mfa_totp.vue b/src/components/user_settings/mfa_totp.vue
new file mode 100644
index 00000000..6b73c8f4
--- /dev/null
+++ b/src/components/user_settings/mfa_totp.vue
@@ -0,0 +1,23 @@
+
+
+
+ {{$t('settings.mfa.otp')}}
+
+
+
+
+
+
+ {{$t('settings.enter_current_password_to_confirm')}}:
+
+
+
{{error}}
+
+
+
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index ae36e5e8..69505806 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -17,6 +17,7 @@ import Importer from '../importer/importer.vue'
import Exporter from '../exporter/exporter.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription'
import userSearchApi from '../../services/new_api/user_search.js'
+import Mfa from './mfa.vue'
const BlockList = withSubscription({
fetch: (props, $store) => $store.dispatch('fetchBlocks'),
@@ -75,7 +76,8 @@ const UserSettings = {
MuteCard,
ProgressButton,
Importer,
- Exporter
+ Exporter,
+ Mfa
},
computed: {
user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 20b10979..bbe41f11 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -44,6 +44,7 @@