mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
vue components refactoring
This commit is contained in:
Čarodej
108
resources/js/components/TwoFactorSetup/ConfirmPassword.vue
Normal file
108
resources/js/components/TwoFactorSetup/ConfirmPassword.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<PopupWrapper name="confirm-password">
|
||||
<PopupHeader :title="$t('confirm_password')" icon="edit" />
|
||||
|
||||
<PopupContent>
|
||||
<ValidationObserver @submit.prevent="confirmPassword" ref="passwordForm" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('password')" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
v-model="password"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
type="password"
|
||||
ref="input"
|
||||
class="focus-border-theme input-dark"
|
||||
:placeholder="$t('page_sign_in.placeholder_password')"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</PopupContent>
|
||||
|
||||
<PopupActions>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
|
||||
{{ $t('cancel') }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="confirmPassword"
|
||||
button-style="theme"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
{{ $t('confirm') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '../Popups/Components/PopupWrapper'
|
||||
import PopupActions from '../Popups/Components/PopupActions'
|
||||
import PopupContent from '../Popups/Components/PopupContent'
|
||||
import PopupHeader from '../Popups/Components/PopupHeader'
|
||||
import ButtonBase from '../UI/Buttons/ButtonBase'
|
||||
import AppInputText from '../Forms/Layouts/AppInputText'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { events } from '../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'ConfirmPassword',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
password: undefined,
|
||||
args: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmPassword() {
|
||||
this.isLoading = true
|
||||
|
||||
axios
|
||||
.post('/user/confirm-password', {
|
||||
password: this.password,
|
||||
})
|
||||
.then(() => {
|
||||
events.$emit('password:confirmed', this.args)
|
||||
})
|
||||
.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
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// Show popup
|
||||
events.$on('popup:open', (args) => {
|
||||
if (args.name !== 'confirm-password') return
|
||||
|
||||
this.args = args
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
132
resources/js/components/TwoFactorSetup/TwoFactorQrSetupPopup.vue
Normal file
132
resources/js/components/TwoFactorSetup/TwoFactorQrSetupPopup.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<PopupWrapper name="two-factor-qr-setup">
|
||||
<PopupHeader :title="$t('set_up_2fa_app')" icon="edit" />
|
||||
|
||||
<PopupContent>
|
||||
<div v-if="qrCode" class="flex justify-center">
|
||||
<div v-html="qrCode" class="my-5"></div>
|
||||
</div>
|
||||
|
||||
<InfoBox style="margin-bottom: 0">
|
||||
<p v-html="$t('popup_2fa.help')"></p>
|
||||
</InfoBox>
|
||||
|
||||
<ValidationObserver @submit.prevent="confirm2FaSetup" ref="codeForm" v-slot="{ invalid }" tag="form" class="mt-5">
|
||||
<ValidationProvider tag="div" mode="passive" name="Code" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('confirm')" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
v-model="code"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
type="text"
|
||||
ref="input"
|
||||
class="focus-border-theme input-dark"
|
||||
:placeholder="$t('paste_code_from_2fa_app')"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<PopupActions>
|
||||
<ButtonBase @click.native="confirm2FaSetup" class="w-full" button-style="theme" :loading="isLoading">
|
||||
{{ $t('confirm_your_code') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import ButtonBase from '../UI/Buttons/ButtonBase'
|
||||
import AppInputText from '../Forms/Layouts/AppInputText'
|
||||
import PopupWrapper from '../Popups/Components/PopupWrapper'
|
||||
import PopupActions from '../Popups/Components/PopupActions'
|
||||
import PopupContent from '../Popups/Components/PopupContent'
|
||||
import PopupHeader from '../Popups/Components/PopupHeader'
|
||||
import InfoBox from '../UI/Others/InfoBox'
|
||||
import { events } from '../../bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'TwoFactorQrSetupPopup',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qrCode: undefined,
|
||||
isLoading: false,
|
||||
code: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async confirm2FaSetup() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.codeForm.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
this.isLoading = true
|
||||
|
||||
axios
|
||||
.post('/user/confirmed-two-factor-authentication', {code: this.code})
|
||||
.then(() => {
|
||||
this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', true)
|
||||
|
||||
this.$closePopup()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('popup_2fa.toaster_enabled'),
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status === 422) {
|
||||
this.$refs.codeForm.setErrors({
|
||||
'Code': error.response.data.errors['code'][0],
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => this.isLoading = false)
|
||||
},
|
||||
enable() {
|
||||
axios
|
||||
.post('/user/two-factor-authentication')
|
||||
.then(() => {
|
||||
this.getQrCode()
|
||||
})
|
||||
.catch(() => {
|
||||
this.$isSomethingWrong()
|
||||
})
|
||||
},
|
||||
getQrCode() {
|
||||
axios
|
||||
.get('/user/two-factor-qr-code')
|
||||
.then((response) => {
|
||||
this.qrCode = response.data.svg
|
||||
})
|
||||
.catch(() => {
|
||||
this.$isSomethingWrong()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('popup:open', (args) => {
|
||||
if (args.name !== 'two-factor-qr-setup') return
|
||||
|
||||
this.enable()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<PopupWrapper name="two-factor-recovery-codes">
|
||||
<PopupHeader :title="$t('your_security_codes')" icon="key" />
|
||||
|
||||
<PopupContent style="padding: 0 20px">
|
||||
<div class="mobile-actions">
|
||||
<MobileActionButton @click.native="copyCodes" icon="copy">
|
||||
{{ $t('copy') }}
|
||||
</MobileActionButton>
|
||||
|
||||
<MobileActionButton @click.native="downloadCodes" icon="download">
|
||||
{{ $t('download') }}
|
||||
</MobileActionButton>
|
||||
|
||||
<MobileActionButton @click.native="regenerateCodes" icon="refresh">
|
||||
{{ $t('regenerate_codes') }}
|
||||
</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="w-full" @click.native="$closePopup()" button-style="theme">
|
||||
{{ $t('awesome_iam_done') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileActionButton from '../UI/Buttons/MobileActionButton'
|
||||
import PopupWrapper from '../Popups/Components/PopupWrapper'
|
||||
import PopupActions from '../Popups/Components/PopupActions'
|
||||
import PopupContent from '../Popups/Components/PopupContent'
|
||||
import PopupHeader from '../Popups/Components/PopupHeader'
|
||||
import ButtonBase from '../UI/Buttons/ButtonBase'
|
||||
import InfoBox from '../UI/Others/InfoBox'
|
||||
import Spinner from '../UI/Others/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()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../sass/vuefilemanager/variables';
|
||||
@import '../../../sass/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;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.codes-list {
|
||||
li {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box,
|
||||
.mobile-action-button {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user