Two Factor Recovery Codes functionality

This commit is contained in:
Peter Papp
2021-07-16 17:38:01 +02:00
parent 40866405fc
commit 097a930245
11 changed files with 529 additions and 53 deletions
+55 -20
View File
@@ -32,43 +32,64 @@
</div>
</ValidationObserver>
</PageTabGroup>
<PageTabGroup class="form block-form">
<FormLabel> Two Factor Authentication </FormLabel>
<FormLabel>{{ $t('2fa.settings.title') }}</FormLabel>
<div class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">
Enable / Disable Two Factor Authentication
</label>
<small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
</div>
<SwitchInput @click.native.prevent.stop="open2faPopup"
class="switch"
:state="user.data.attributes.two_factor_authentication"
/>
</div>
</div>
</div>
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">
{{ $t('popup_2fa.switch_title') }}
</label>
<small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
</div>
<SwitchInput @click.native.prevent.stop="open2faPopup"
class="switch"
:state="user.data.attributes.two_factor_authentication"
/>
</div>
</div>
</div>
<div v-if="user && user.data.attributes.two_factor_authentication" class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper button-block">
<div class="switch-label">
<label class="input-label">
{{ $t('popup_2fa.codes_title') }}
</label>
<small class="input-help">
{{ $t('popup_2fa.codes_info') }}
</small>
</div>
<ButtonBase
class="popup-button"
button-style="secondary"
@click.native="showRecoveryCodes"
>
{{ $t('popup_2fa.codes_button') }}
</ButtonBase>
</div>
</div>
</div>
</PageTabGroup>
</PageTab>
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
import UserImageInput from '@/components/Others/UserImageInput'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import FormLabel from '@/components/Others/Forms/FormLabel'
import MobileHeader from '@/components/Mobile/MobileHeader'
import ButtonBase from '@/components/FilesView/ButtonBase'
import PageTab from '@/components/Others/Layout/PageTab'
import PageHeader from '@/components/Others/PageHeader'
import ThemeLabel from '@/components/Others/ThemeLabel'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import {mapGetters} from 'vuex'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import axios from 'axios'
@@ -142,6 +163,9 @@
},
open2faPopup() {
events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
},
showRecoveryCodes() {
events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
}
}
}
@@ -167,6 +191,17 @@
}
}
@media only screen and (max-width: 690px) {
.form .button-block {
display: block;
.popup-button {
margin-top: 15px;
}
}
}
@media (prefers-color-scheme: dark) {
}