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
-4
View File
@@ -14,8 +14,6 @@
<CreateFolderPopup />
<RenameItemPopup />
<TwoFactorSetupPopup />
<MoveItemPopup />
<!--Mobile components-->
@@ -37,7 +35,6 @@
</template>
<script>
import TwoFactorSetupPopup from '@/components/Others/TwoFactorSetupPopup'
import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
@@ -59,7 +56,6 @@
export default {
name: 'Platform',
components: {
TwoFactorSetupPopup,
MultiSelectToolbarMobile,
CreateFolderPopup,
FileSortingMobile,
+11 -3
View File
@@ -1,6 +1,5 @@
<template>
<section id="viewport">
<ContentSidebar>
<!--Settings-->
@@ -34,6 +33,8 @@
</router-link>
</div>
</ContentGroup>
<!--Subscription-->
<ContentGroup title="Subscription" class="navigator" v-if="canShowSubscriptionSettings">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
@@ -66,7 +67,7 @@
</ContentGroup>
</ContentSidebar>
<div id="single-page" v-if="user">
<div v-if="user" id="single-page">
<div id="page-content" class="medium-width" v-if="! isLoading">
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
@@ -120,11 +121,16 @@
<Spinner></Spinner>
</div>
</div>
</section>
<!--2FA popups-->
<TwoFactorRecoveryCodesPopup />
<TwoFactorSetupPopup />
</section>
</template>
<script>
import TwoFactorRecoveryCodesPopup from '@/components/Others/TwoFactorRecoveryCodesPopup'
import TwoFactorSetupPopup from '@/components/Others/TwoFactorSetupPopup'
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
import ContentGroup from '@/components/Sidebar/ContentGroup'
import UserImageInput from '@/components/Others/UserImageInput'
@@ -147,6 +153,8 @@
export default {
name: 'Settings',
components: {
TwoFactorRecoveryCodesPopup,
TwoFactorSetupPopup,
ContentSidebar,
CreditCardIcon,
UserImageInput,
+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) {
}