mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 19:25:57 +00:00
Two Factor Recovery Codes functionality
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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) {
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user