Merge remote-tracking branch 'origin/2fa'

# Conflicts:
#	.php-cs-fixer.cache
#	config/language-translations.php
#	public/mix-manifest.json
#	resources/js/views/Auth/SignIn.vue
#	webpack.mix.js

resources/js/components/FilesView/MobileActionButton.vue

@@ -1,6 +1,9 @@
 <template>
     <button class="mobile-action-button">
         <div class="flex">
+            <refresh-cw-icon v-if="icon === 'refresh'" size="15" class="icon dark-text-theme" />
+            <download-icon v-if="icon === 'download'" size="15" class="icon dark-text-theme" />
+            <copy-icon v-if="icon === 'copy'" size="15" class="icon dark-text-theme" />
             <filter-icon v-if="icon === 'filter'" size="15" class="icon dark-text-theme" />
             <credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon dark-text-theme" />
             <folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon dark-text-theme" />
@@ -22,7 +25,7 @@
 </template>
 
 <script>
-    import { FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon  } from 'vue-feather-icons'
+    import { RefreshCwIcon, DownloadIcon, CopyIcon, FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon  } from 'vue-feather-icons'
     import SortingIcon from '@/components/FilesView/Icons/SortingIcon'
 
     export default {
@@ -31,17 +34,20 @@
             'icon'
         ],
         components: {
-            SortingIcon,
             CheckSquareIcon,
             DollarSignIcon,
             CreditCardIcon,
             FolderPlusIcon,
+			RefreshCwIcon,
             UserPlusIcon,
+			DownloadIcon,
+            SortingIcon,
             XSquareIcon,
             FilterIcon,
             CheckIcon,
             TrashIcon,
             PlusIcon,
+			CopyIcon,
             ListIcon,
             GridIcon,
         }

resources/js/components/Others/Notifications/ToastrWrapper.vue

@@ -46,7 +46,7 @@
         position: absolute;
         right: 30px;
         top: 30px;
-        z-index: 10;
+        z-index: 90;
     }
 
     @media only screen and (max-width: 690px) {

resources/js/components/Others/Popup/PopupHeader.vue

@@ -4,6 +4,7 @@
             <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme" />
             <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme" />
             <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme" />
+            <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
@@ -13,7 +14,7 @@
 </template>
 
 <script>
-    import {CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon} from 'vue-feather-icons'
+    import {KeyIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon} from 'vue-feather-icons'
     import {events} from '@/bus'
 
     export default {
@@ -26,6 +27,7 @@
             ShareIcon,
             Edit2Icon,
             LinkIcon,
+			KeyIcon,
             XIcon,
         },
         methods: {

resources/js/components/Others/ShareEditPopup.vue

@@ -152,11 +152,11 @@
                     return this.$t('popup_share_edit.go_back')
             },
             destroyButtonStyle() {
-                    if(! this.sendToRecipientsMenu)
-                        return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'
+				if(! this.sendToRecipientsMenu)
+					return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'
 
-                    if(this.sendToRecipientsMenu)
-                        return 'secondary'
+				if(this.sendToRecipientsMenu)
+					return 'secondary'
             },
             secondButtonText(){
                 if(! this.sendToRecipientsMenu)

resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue

@@ -0,0 +1,207 @@
+<template>
+    <PopupWrapper name="two-factor-recovery-codes">
+        <PopupHeader :title="$t('popup_2fa.popup_codes_title')" icon="key" />
+
+        <PopupContent style="padding: 0 20px">
+
+			<div class="mobile-actions">
+				<MobileActionButton @click.native="copyCodes" icon="copy">
+					{{ $t('context_menu.copy') }}
+				</MobileActionButton>
+
+				<MobileActionButton @click.native="downloadCodes" icon="download">
+					{{ $t('context_menu.download') }}
+				</MobileActionButton>
+
+				<MobileActionButton @click.native="regenerateCodes" icon="refresh">
+					{{ $t('context_menu.codes_regenerate') }}
+				</MobileActionButton>
+			</div>
+
+			<ul v-if="! isLoading" class="codes-list">
+				<li v-for="(code, i) in codes" :key="i">{{ code }}</li>
+			</ul>
+
+			<div v-if="isLoading" class="spinner-wrapper">
+				<Spinner />
+			</div>
+
+			<textarea v-model="inputCodes" ref="codes" class="codes-output"></textarea>
+
+			<InfoBox style="margin-bottom: 0">
+				<p v-html="$t('popup_2fa.popup_codes_disclaimer')"></p>
+			</InfoBox>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="theme"
+			>
+                {{ $t('shared_form.button_done') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import MobileActionButton from '@/components/FilesView/MobileActionButton'
+import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+import PopupActions from '@/components/Others/Popup/PopupActions'
+import PopupContent from '@/components/Others/Popup/PopupContent'
+import PopupHeader from '@/components/Others/Popup/PopupHeader'
+import ButtonBase from '@/components/FilesView/ButtonBase'
+import InfoBox from '@/components/Others/Forms/InfoBox'
+import Spinner from '@/components/FilesView/Spinner'
+import {mapGetters} from "vuex"
+import {events} from '@/bus'
+import axios from 'axios'
+
+export default {
+	name: "TwoFactorRecoveryCodesPopup",
+	components: {
+		MobileActionButton,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		Spinner,
+		InfoBox,
+	},
+	data() {
+		return {
+			codes: undefined,
+			isLoading: true,
+			inputCodes: undefined,
+		}
+	},
+	computed: {
+		...mapGetters(['user']),
+	},
+	methods: {
+		copyCodes() {
+			let copyText = this.$refs.codes
+
+			copyText.select()
+			copyText.setSelectionRange(0, 99999)
+
+			document.execCommand('copy')
+
+			events.$emit('toaster', {
+				type: 'success',
+				message: this.$t('popup_2fa.toaster_codes_copied'),
+			})
+		},
+		downloadCodes() {
+			// Create txt content
+			let recoveryCodes = "data:x-application/xml;charset=utf-8," + escape(this.codes.join("\n"));
+
+			// Create download link
+			let downloadLink = document.createElement("a")
+
+			downloadLink.href = recoveryCodes
+			downloadLink.download = "recovery-codes.txt"
+
+			// Download .txt
+			document.body.appendChild(downloadLink);
+			downloadLink.click();
+			document.body.removeChild(downloadLink);
+		},
+		regenerateCodes() {
+			this.isLoading = true
+
+			axios.post('/user/two-factor-recovery-codes')
+				.then(() => {
+					this.getRecoveryCodes()
+
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('popup_2fa.toaster_codes_regenerated'),
+					})
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+				.finally(() => this.isLoading = false)
+		},
+		getRecoveryCodes() {
+			axios.get('/user/two-factor-recovery-codes')
+				.then(response => {
+					this.codes = response.data
+					this.inputCodes = response.data.join("\n")
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+				.finally(() => this.isLoading = false)
+		}
+	},
+	created() {
+		events.$on('popup:open', ({name}) => {
+			if ('two-factor-recovery-codes' === name)
+				this.getRecoveryCodes()
+		})
+	},
+	destroyed() {
+		events.off('popup:open')
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vuefilemanager/_variables';
+	@import '@assets/vuefilemanager/_mixins';
+
+	.mobile-actions {
+		white-space: nowrap;
+		overflow-x: auto;
+		margin: 0 -20px;
+		padding: 10px 0 10px 20px;
+	}
+
+	.codes-list {
+		margin: 5px 0 15px;
+		padding-left: 30px;
+
+		li {
+			@include font-size(14);
+			font-weight: bold;
+			padding: 10px 0;
+			border-bottom: 1px solid $light_mode_border;
+			list-style: circle;
+
+			&:last-child {
+				border-bottom: none;
+			}
+		}
+	}
+
+	.codes-output {
+		position: absolute;
+		right: -9999px;
+	}
+
+	.spinner-wrapper {
+		height: 339px;
+		position: relative;
+
+		.spinner {
+			top: 46% !important;
+		}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.codes-list {
+
+			li {
+				border-color: $dark_mode_border_color;
+			}
+		}
+
+		.info-box, .mobile-action-button {
+			background: lighten($dark_mode_foreground, 3%);
+		}
+	}
+</style>

resources/js/components/Others/TwoFactorSetupPopup.vue

@@ -0,0 +1,211 @@
+<template>
+    <PopupWrapper name="two-factor-authentication-confirm">
+
+        <PopupHeader :title="$t('popup_2fa.title')" icon="edit" />
+
+        <PopupContent>
+             <ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
+                    <label class="input-label"> {{ $t('popup_2fa.input_label') }}:</label>
+                    <input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+
+            <div v-if="qrCode" class="qr-code-wrapper">
+                <div class="qr-code">
+                    <div v-html="qrCode"></div>
+                </div>
+
+				<InfoBox style="margin-bottom: 0">
+                	<p v-html="$t('popup_2fa.help')"></p>
+            	</InfoBox>
+            </div>
+        </PopupContent>
+
+        <PopupActions v-if="! qrCode">
+            <ButtonBase
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="secondary"
+			>
+                {{ $t('global.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+				class="popup-button"
+				@click.native="confirmPassword"
+				button-style="theme"
+				:loading="isLoading"
+				:disabled="isLoading"
+			>
+               {{ $t('popup_2fa.confirm_button') }}
+            </ButtonBase>
+        </PopupActions>
+
+        <PopupActions v-if="qrCode">
+            <ButtonBase
+				class="popup-button"
+				@click.native="closeQrCodePopup"
+				:button-style="closeQrButtonStyle"
+			>
+                {{ closeQrButtonText }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+import PopupActions from '@/components/Others/Popup/PopupActions'
+import PopupContent from '@/components/Others/Popup/PopupContent'
+import PopupHeader from '@/components/Others/Popup/PopupHeader'
+import ButtonBase from '@/components/FilesView/ButtonBase'
+import InfoBox from '@/components/Others/Forms/InfoBox'
+import {required} from 'vee-validate/dist/rules'
+import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+import axios from 'axios'
+
+export default {
+	name: "TwoFactorSetupPopup",
+	components: {
+		ValidationProvider,
+		ValidationObserver,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		required,
+		InfoBox,
+	},
+	computed: {
+		...mapGetters(['user']),
+		closeQrButtonText() {
+			return this.isConfirmedClose
+				? this.$t('popup_2fa.disappear_qr')
+				: this.$t('shared_form.button_done')
+		},
+		closeQrButtonStyle() {
+			return this.isConfirmedClose
+				? 'danger'
+				: 'theme'
+		},
+	},
+	data() {
+		return {
+			isLoading: false,
+			password: '',
+			qrCode: '',
+			isConfirmedClose: false,
+		}
+	},
+	methods: {
+		confirmPassword() {
+
+			this.isLoading = true
+
+			axios
+				.post('/user/confirm-password', {
+					password: this.password
+				})
+				.then(() => {
+
+					if (!this.user.data.attributes.two_factor_authentication) {
+
+						this.enable()
+					} else {
+
+						this.disable()
+					}
+				})
+				.catch(error => {
+
+					if (error.response.status == 422) {
+
+						this.$refs.passwordForm.setErrors({
+							'Password': this.$t('validation_errors.incorrect_password')
+						});
+					}
+				})
+				.finally(() => {
+					this.isLoading = false
+					this.password = undefined
+				})
+		},
+		enable() {
+			axios
+				.post('/user/two-factor-authentication')
+				.then(() => {
+
+					this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', true)
+
+					this.getQrCode()
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+		},
+		disable() {
+			axios
+				.delete('/user/two-factor-authentication')
+				.then(() => {
+					this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', false)
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+				.finally(() => {
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('popup_2fa.toaster_disabled'),
+					})
+
+					this.$closePopup()
+				})
+		},
+		getQrCode() {
+			axios
+				.get('/user/two-factor-qr-code')
+				.then(response => {
+					this.qrCode = response.data.svg
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+		},
+		closeQrCodePopup() {
+			if (!this.isConfirmedClose) {
+				this.isConfirmedClose = true
+			} else {
+				events.$emit('toaster', {
+					type: 'success',
+					message: this.$t('popup_2fa.toaster_enabled'),
+				})
+
+				this.qrCode = undefined
+				this.isConfirmedClose = false
+
+				this.$closePopup()
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vuefilemanager/_inapp-forms.scss";
+@import '@assets/vuefilemanager/_forms';
+
+.qr-code-wrapper {
+	padding: 0 20px;
+
+	.qr-code {
+		display: flex;
+		justify-content: center;
+		margin: 20px 0;
+	}
+}
+</style>

resources/js/store/modules/userAuth.js

@@ -108,6 +108,9 @@ const actions = {
 }
 
 const mutations = {
+    CHANGE_TWO_FACTOR_AUTHENTICATION_STATE(state, condition) {
+        state.user.data.attributes.two_factor_authentication = condition
+    },
     RETRIEVE_USER(state, user) {
         state.user = user
     },

resources/js/views/Auth/SignIn.vue

@@ -70,10 +70,82 @@
                 <h2>{{ $t('page_not_verified.subtitle') }}</h2>
             </div>
 
-            <span class="additional-link"> {{ $t('page_not_verified.resend_text') }} 
+            <span class="additional-link"> {{ $t('page_not_verified.resend_text') }}
                 <a @click="resendEmail" class="text-theme">{{ $t('page_not_verified.resend_button') }} </a>
             </span>
         </AuthContent>
+
+        <!-- Log in by 2fa -->
+        <AuthContent name="two-factor-authentication" :visible="false">
+
+           <div class="user" v-if="checkedAccount">
+                <img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
+                <h1> {{ $t('page_sign_in_2fa_title', {name: checkedAccount.name}) }} </h1>
+                <h2> {{ $t('page_sign_in_2fa_subtitle') }}:</h2>
+            </div>
+
+            <ValidationObserver ref="two_factor_authentication" v-slot="{ invalid }" tag="form"
+                                class="form inline-form">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Two Factor Authentication" rules="required"
+                                    v-slot="{ errors }">
+                    <input v-model="twoFactorCode" :placeholder="$t('page_sign_in.placeholder_2fa')"
+                            @input="twoFactorChallenge(false)"
+                           type="text"
+                           maxlength="6"
+                           class="focus-border-theme"
+                           :class="{'is-error': errors[0]}" />
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+            </ValidationObserver>
+
+             <span class="additional-link"> {{ $t('page_sign_in.2fa_recovery_text') }}
+                <a @click="goToAuthPage('two-factor-recovery')" class="text-theme">
+                   {{ $t('page_sign_in.2fa_recovery_button') }}
+                </a>
+            </span>
+
+            <div class="spinner-wrapper">
+                <Spinner v-if="isLoading" class="spinner"/>
+            </div>
+
+        </AuthContent>
+
+        <!-- Log in by 2fa recovery code -->
+        <AuthContent name="two-factor-recovery" :visible="false">
+
+           <div class="user" v-if="checkedAccount">
+                <img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
+                <h1> {{ checkedAccount.name }} </h1>
+                <h2>{{ $t('page_sign_in.2fa_recovery_subtitle') }}:</h2>
+            </div>
+
+            <ValidationObserver ref="two_factor_recovery" v-slot="{ invalid }" tag="form"
+                                class="form inline-form">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Two Factor Recovery" rules="required"
+                                    v-slot="{ errors }">
+                    <input v-model="twoFactorRecoveryCode" :placeholder="$t('page_sign_in.placeholder_2fa_recovery')"
+                            @input="twoFactorChallenge(true)"
+                           type="text"
+                           maxlength="21"
+                           class="focus-border-theme"
+                           :class="{'is-error': errors[0]}" />
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+            </ValidationObserver>
+
+			 <span class="additional-link">
+                <a @click="goToAuthPage('two-factor-authentication')" class="text-theme">
+                   {{ $t('2fa.i_have_2fa_app') }}
+                </a>
+            </span>
+
+             <div v-if="isLoading" class="spinner-wrapper">
+                <Spinner class="spinner"/>
+            </div>
+
+        </AuthContent>
     </AuthContentWrapper>
 </template>
 
@@ -82,6 +154,7 @@
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import AuthContent from '@/components/Auth/AuthContent'
     import AuthButton from '@/components/Auth/AuthButton'
+    import Spinner from '@/components/FilesView/Spinner'
     import {required} from 'vee-validate/dist/rules'
     import {mapGetters} from 'vuex'
     import {events} from "@/bus"
@@ -96,6 +169,7 @@
             AuthContent,
             AuthButton,
             required,
+            Spinner,
         },
         computed: {
             ...mapGetters(['config']),
@@ -103,9 +177,12 @@
         data() {
             return {
                 isLoading: false,
+                validSignIn: false,
                 checkedAccount: undefined,
                 loginPassword: '',
                 loginEmail: '',
+                twoFactorCode: '',
+                twoFactorRecoveryCode: '',
             }
         },
         methods: {
@@ -128,8 +205,8 @@
                     post('/api/user/email/resend/verify', {
                         email: this.loginEmail
                     })
-                    .then( 
-                        this.$router.push({name: 'SuccessfullySend'}) 
+                    .then(
+                        this.$router.push({name: 'SuccessfullySend'})
                     )
                     .catch(() => {
                         this.$isSomethingWrong()
@@ -185,7 +262,7 @@
             async singIn() {
 
                 // Validate fields
-                const isValid = await this.$refs.sign_in.validate();
+                const isValid = this.validSignIn ? this.validSignIn : await this.$refs.sign_in.validate();
 
                 if (!isValid) return;
 
@@ -205,16 +282,28 @@
                         email: this.loginEmail,
                         password: this.loginPassword,
                     })
-                    .then(() => {
+                    .then((response) => {
 
                         // End loading
                         this.isLoading = false
 
-                        // Set login state
-                        this.$store.commit('SET_AUTHORIZED', true)
+                        // If is enabled two factor authentication
+                        if(response.data.two_factor && ! this.validSignIn) {
 
-                        // Go to files page
-                        this.$router.push({name: 'Files'})
+                            this.validSignIn = true
+
+                            this.goToAuthPage('two-factor-authentication')
+                        }
+
+                        // If is disabled two factor authentication
+                        if(! response.data.two_factor ) {
+
+                            // Set login state
+                            this.$store.commit('SET_AUTHORIZED', true)
+
+                            // Go to files page
+                            this.$router.push({name: 'Files'})
+                        }
                     })
                     .catch(error => {
 
@@ -229,6 +318,57 @@
                         this.isLoading = false
                     })
             },
+			async twoFactorChallenge(recovery) {
+				// Check if is normal authentication or recovery
+				if (!recovery && this.twoFactorCode.length === 6 || recovery && this.twoFactorRecoveryCode.length === 21) {
+
+					this.isLoading = true
+
+					let payload = recovery
+						? {recovery_code: this.twoFactorRecoveryCode}
+						: {code: this.twoFactorCode}
+
+					axios.post('/two-factor-challenge', payload)
+						.then(() => {
+
+							this.isLoading = false
+
+							// Set login state
+							this.$store.commit('SET_AUTHORIZED', true)
+
+							// Go to files page
+							this.$router.push({name: 'Files'})
+						})
+						.catch(error => {
+
+							if (error.response.status == 422) {
+
+								//Authentication bad input
+								if (!recovery) {
+
+									this.$refs.two_factor_authentication.setErrors({
+										'Two Factor Authentication': this.$t('validation_errors.incorrect_2fa_code')
+									})
+								}
+
+								// Recovery bad input
+								if (recovery) {
+
+									this.$refs.two_factor_recovery.setErrors({
+										'Two Factor Recovery': this.$t('validation_errors.incorrect_2fa_recovery_code')
+									})
+								}
+
+							}
+
+							// Repeat the login for next try to type right 2fa code / recovery code
+							this.singIn()
+
+							this.isLoading = false
+						})
+				}
+
+			},
         },
         created() {
             this.$scrollTop()
@@ -245,4 +385,11 @@
 <style scoped lang="scss">
     @import '@assets/vuefilemanager/_auth-form';
     @import '@assets/vuefilemanager/_auth';
+
+    .spinner-wrapper {
+        width: 100%;
+        height: 50px;
+        position: relative;
+        top: 50px;
+    }
 </style>

resources/js/views/Profile.vue

@@ -1,6 +1,5 @@
 <template>
     <section id="viewport">
-
         <ContentSidebar>
 
             <!--Settings-->
@@ -43,6 +42,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">
@@ -75,7 +76,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)"/>
 
@@ -129,11 +130,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'
@@ -157,6 +163,8 @@
     export default {
         name: 'Settings',
         components: {
+			TwoFactorRecoveryCodesPopup,
+			TwoFactorSetupPopup,
             ContentSidebar,
             CreditCardIcon,
             UserImageInput,

resources/js/views/User/Password.vue

@@ -32,13 +32,56 @@
                 </div>
             </ValidationObserver>
         </PageTabGroup>
+        <PageTabGroup class="form block-form">
+            <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">
+								{{ $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'
@@ -46,6 +89,7 @@
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
     import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
     import {events} from '@/bus'
     import axios from 'axios'
 
@@ -58,12 +102,16 @@
             ValidationProvider,
             ValidationObserver,
             UserImageInput,
+            SwitchInput,
             MobileHeader,
             PageHeader,
             ButtonBase,
             ThemeLabel,
             required,
         },
+        computed: {
+            ...mapGetters(['user'])
+        },
         data() {
             return {
                 newPasswordConfirmation: '',
@@ -112,6 +160,12 @@
                             }
                         }
                     })
+            },
+            open2faPopup() {
+                events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
+            },
+            showRecoveryCodes() {
+                events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
             }
         }
     }
@@ -137,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) {
 
     }