nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 19:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/2fa'

Browse Source 
# Conflicts:
#	.php-cs-fixer.cache
#	config/language-translations.php
#	public/mix-manifest.json
#	resources/js/views/Auth/SignIn.vue
#	webpack.mix.js
This commit is contained in:
Peter Papp
2021-07-17 20:25:30 +02:00
parent cdd99f66b7 a438f8fb99
commit 460b95e6de
18 changed files with 1035 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Auth/SignIn.vue
+156 -9
View File
@@ -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
+11 -3
View File
@@ -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
+65
View File
@@ -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) {
}