mirror of
https://github.com/jwinterm/modoboa.git
synced 2026-10-17 05:41:25 +02:00
Added recovery codes reset dialog for 2FA.
This commit is contained in:
Antoine Nguyen
@@ -25,5 +25,8 @@ export default {
|
||||
},
|
||||
disableTFA () {
|
||||
return repository.post(`${resource}/tfa/disable/`)
|
||||
},
|
||||
resetRecoveryCodes () {
|
||||
return repository.post(`${resource}/tfa/reset_codes/`)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline"><translate>New recovery codes</translate></span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-alert type="info">
|
||||
<translate>
|
||||
The following recovery codes can be used one time each to let
|
||||
you regain access to your account, in case you lose your phone
|
||||
for example. Make sure to save them in a safe place, otherwise
|
||||
you won't be able to access your account anymore.
|
||||
</translate>
|
||||
</v-alert>
|
||||
<ul>
|
||||
<li v-for="token in tokens" :key="token">
|
||||
{{ token }}
|
||||
</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="grey darken-1"
|
||||
text
|
||||
@click="close"
|
||||
>
|
||||
<translate>Close</translate>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
tokens: Array
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,96 +1,114 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="text-subtitle-1"><translate>Two factor authentication</translate></span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template v-if="qrCode">
|
||||
<v-row>
|
||||
<v-col cols="4">
|
||||
<div v-html="qrCode"></div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-alert color="grey lighten-2">
|
||||
<translate>
|
||||
Install a soft token authenticator like FreeOTP or Google
|
||||
Authenticator from your application repository and use that
|
||||
app to scan this QR code.
|
||||
</translate>
|
||||
</v-alert>
|
||||
<label class="m-label"><translate>Pin code</translate></label>
|
||||
<validation-observer ref="observer">
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="pinCode"
|
||||
outlined
|
||||
:error-messages="errors"
|
||||
/>
|
||||
</validation-provider>
|
||||
</validation-observer>
|
||||
<v-btn color="primary" @click="finalizeTFASetup">
|
||||
<translate>Register</translate>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-else-if="tokens.length">
|
||||
<v-alert color="success">
|
||||
<translate>
|
||||
Congratulations! Two-Factor Authentication is now enabled for your account.
|
||||
<div>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="text-subtitle-1"><translate>Two factor authentication</translate></span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template v-if="qrCode">
|
||||
<v-row>
|
||||
<v-col cols="4">
|
||||
<div v-html="qrCode"></div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-alert type="info">
|
||||
<translate>
|
||||
Install a soft token authenticator like FreeOTP or Google
|
||||
Authenticator from your application repository and use that
|
||||
app to scan this QR code.
|
||||
</translate>
|
||||
</v-alert>
|
||||
<label class="m-label"><translate>Pin code</translate></label>
|
||||
<validation-observer ref="observer">
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="pinCode"
|
||||
outlined
|
||||
:error-messages="errors"
|
||||
/>
|
||||
</validation-provider>
|
||||
</validation-observer>
|
||||
<v-btn color="primary" @click="finalizeTFASetup">
|
||||
<translate>Register</translate>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-else-if="tokens.length">
|
||||
<v-alert type="success">
|
||||
<translate>
|
||||
Congratulations! Two-Factor Authentication is now enabled for your account.
|
||||
</translate>
|
||||
</v-alert>
|
||||
<p>
|
||||
<translate>
|
||||
The following recovery codes can be used one time each to
|
||||
let you regain access to your account, in case you lose your
|
||||
phone for example. Make sure to save them in a safe place,
|
||||
otherwise you won't be able to access your account anymore.
|
||||
</translate>
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="token in tokens" :key="token">
|
||||
{{ token }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-else-if="account.tfa_enabled">
|
||||
<v-alert type="info">
|
||||
Two-Factor Authentication is enabled for your account.
|
||||
</v-alert>
|
||||
<v-btn color="error" @click="disableTFA" class="mr-2">
|
||||
<translate>Disable 2FA</translate>
|
||||
</v-btn>
|
||||
<v-btn @click="resetRecoveryCodes">
|
||||
<translate>Reset recovery codes</translate>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-else>
|
||||
<translate tag="p" class="my-4">
|
||||
Two-Factor Authentication (2FA) is not yet activated for your account. Enabling this feature will increase your account's security.
|
||||
</translate>
|
||||
</v-alert>
|
||||
<p>
|
||||
<translate>
|
||||
The following recovery codes can be used one time each to
|
||||
let you regain access to your account, in case you lose your
|
||||
phone for example. Make sure to save them in a safe place,
|
||||
otherwise you won't be able to access your account anymore.
|
||||
</translate>
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="token in tokens" :key="token">
|
||||
{{ token }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-else-if="account.tfa_enabled">
|
||||
<v-alert color="grey lighten-2">
|
||||
Two-Factor Authentication is enabled for your account.
|
||||
</v-alert>
|
||||
<v-btn color="error" @click="disableTFA" class="mr-2">
|
||||
<translate>Disable 2FA</translate>
|
||||
</v-btn>
|
||||
<v-btn @click="resetRecoveryCodes">
|
||||
<translate>Reset recovery codes</translate>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-else>
|
||||
<translate tag="p" class="my-4">
|
||||
Two-Factor Authentication (2FA) is not yet activated for your account. Enabling this feature will increase your account's security.
|
||||
</translate>
|
||||
<v-btn color="success" @click="startTFASetup">
|
||||
<v-btn color="success" @click="startTFASetup">
|
||||
<translate>Enable 2FA</translate>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-dialog
|
||||
v-model="showCodesResetDialog"
|
||||
max-width="800px"
|
||||
persistent
|
||||
>
|
||||
<recovery-codes-reset-dialog
|
||||
:tokens="newTokens"
|
||||
@close="closeRecoveryCodesResetDialog"
|
||||
/>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import account from '@/api/account'
|
||||
import Cookies from 'js-cookie'
|
||||
import RecoveryCodesResetDialog from './RecoveryCodesResetDialog'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RecoveryCodesResetDialog
|
||||
},
|
||||
props: {
|
||||
account: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
newTokens: [],
|
||||
pinCode: null,
|
||||
qrCode: null,
|
||||
showCodesResetDialog: false,
|
||||
tokens: []
|
||||
}
|
||||
},
|
||||
@@ -123,7 +141,14 @@ export default {
|
||||
})
|
||||
},
|
||||
resetRecoveryCodes () {
|
||||
|
||||
account.resetRecoveryCodes().then(resp => {
|
||||
this.newTokens = resp.data.tokens
|
||||
this.showCodesResetDialog = true
|
||||
})
|
||||
},
|
||||
closeRecoveryCodesResetDialog () {
|
||||
this.newTokens = []
|
||||
this.showCodesResetDialog = false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
Reference in New Issue
Block a user