mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 08:32:14 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,291 +1,317 @@
|
||||
<template>
|
||||
<div v-if="user">
|
||||
|
||||
<!--2fa authentication-->
|
||||
<div v-if="! user.data.attributes.socialite_account" class="card shadow-card">
|
||||
<!--2fa authentication-->
|
||||
<div v-if="!user.data.attributes.socialite_account" class="card shadow-card">
|
||||
<FormLabel icon="smartphone">
|
||||
{{ $t('2fa.settings.title') }}
|
||||
</FormLabel>
|
||||
<AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')" :is-last="! user.data.attributes.two_factor_authentication">
|
||||
<AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')" :is-last="!user.data.attributes.two_factor_authentication">
|
||||
<SwitchInput v-model="user.data.attributes.two_factor_authentication" class="switch" :state="user.data.attributes.two_factor_authentication" />
|
||||
</AppInputSwitch>
|
||||
<AppInputButton v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')" :is-last="true">
|
||||
<AppInputButton
|
||||
v-if="user && user.data.attributes.two_factor_authentication"
|
||||
:title="$t('popup_2fa.codes_title')"
|
||||
:description="$t('popup_2fa.codes_info')"
|
||||
:is-last="true"
|
||||
>
|
||||
<ButtonBase class="w-full" button-style="secondary" @click.native="showRecoveryCodes">
|
||||
{{ $t('popup_2fa.codes_button') }}
|
||||
</ButtonBase>
|
||||
</AppInputButton>
|
||||
</div>
|
||||
|
||||
<!--Get personal api keys-->
|
||||
<!--Get personal api keys-->
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="key">
|
||||
{{ $t('personal_token.section_title') }}
|
||||
</FormLabel>
|
||||
<InfoBox v-if="tokens.length === 0">
|
||||
<p>{{ $t("personal_token.section_description") }}</p>
|
||||
<p>{{ $t('personal_token.section_description') }}</p>
|
||||
</InfoBox>
|
||||
|
||||
<div class="mb-5">
|
||||
<div v-if="tokens.length > 0" class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="token in tokens" :key="token.id">
|
||||
<div class="leading-none">
|
||||
<b class="text-sm font-bold leading-none">
|
||||
{{ token.name }}
|
||||
</b>
|
||||
<time class="text-xs text-gray-500 pt-2 leading-none block">
|
||||
{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}
|
||||
</time>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div @click="confirmDeleteToken(token)" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div
|
||||
v-if="tokens.length > 0"
|
||||
class="flex items-center justify-between border-b border-dashed border-light py-2 dark:border-opacity-5"
|
||||
v-for="token in tokens"
|
||||
:key="token.id"
|
||||
>
|
||||
<div class="leading-none">
|
||||
<b class="text-sm font-bold leading-none">
|
||||
{{ token.name }}
|
||||
</b>
|
||||
<time class="block pt-2 text-xs leading-none text-gray-500">
|
||||
{{ $t('last_used') }}:
|
||||
{{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}
|
||||
</time>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div
|
||||
@click="confirmDeleteToken(token)"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-light-background transition-colors hover:bg-red-100 dark:bg-2x-dark-foreground"
|
||||
>
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
{{ $t('personal_token.create_token') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
|
||||
<!--Change password-->
|
||||
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_password.title') }}
|
||||
</FormLabel>
|
||||
<!--Change password-->
|
||||
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_password.title') }}
|
||||
</FormLabel>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Current Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Current Password')" :error="errors[0]">
|
||||
<input v-model="passwordForm.current" :placeholder="$t('Current password')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="Current Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Current Password')" :error="errors[0]">
|
||||
<input
|
||||
v-model="passwordForm.current"
|
||||
:placeholder="$t('Current password')"
|
||||
type="password"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="New Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('page_create_password.label_new_pass')" :error="errors[0]">
|
||||
<input v-model="passwordForm.password" :placeholder="$t('page_create_password.label_new_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="New Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('page_create_password.label_new_pass')" :error="errors[0]">
|
||||
<input
|
||||
v-model="passwordForm.password"
|
||||
:placeholder="$t('page_create_password.label_new_pass')"
|
||||
type="password"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Confirm Your Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('page_create_password.label_confirm_pass')" :error="errors[0]">
|
||||
<input v-model="passwordForm.password_confirmation" :placeholder="$t('page_create_password.label_confirm_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="Confirm Your Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('page_create_password.label_confirm_pass')" :error="errors[0]">
|
||||
<input
|
||||
v-model="passwordForm.password_confirmation"
|
||||
:placeholder="$t('page_create_password.label_confirm_pass')"
|
||||
type="password"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('profile.store_pass') }}
|
||||
</ButtonBase>
|
||||
</ValidationObserver>
|
||||
<ButtonBase type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
{{ $t('profile.store_pass') }}
|
||||
</ButtonBase>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import SwitchInput from "../../components/Others/Forms/SwitchInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import ButtonBase from "../../components/FilesView/ButtonBase";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AppInputSwitch from "../../components/Admin/AppInputSwitch"
|
||||
import AppInputButton from "../../components/Admin/AppInputButton"
|
||||
import AppInputText from "../../components/Admin/AppInputText"
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {XIcon, Trash2Icon} from 'vue-feather-icons'
|
||||
import {events} from '../../bus'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import SwitchInput from '../../components/Others/Forms/SwitchInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '../../components/FilesView/ButtonBase'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AppInputSwitch from '../../components/Admin/AppInputSwitch'
|
||||
import AppInputButton from '../../components/Admin/AppInputButton'
|
||||
import AppInputText from '../../components/Admin/AppInputText'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { XIcon, Trash2Icon } from 'vue-feather-icons'
|
||||
import { events } from '../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Password',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputButton,
|
||||
AppInputSwitch,
|
||||
AppInputText,
|
||||
SwitchInput,
|
||||
ButtonBase,
|
||||
FormLabel,
|
||||
Trash2Icon,
|
||||
required,
|
||||
InfoBox,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'user.data.attributes.two_factor_authentication': function (val) {
|
||||
val ? this.enable2faPopup() : this.disable2faPopup()
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
passwordForm: {
|
||||
current: undefined,
|
||||
password: undefined,
|
||||
password_confirmation: undefined,
|
||||
},
|
||||
isLoading: false,
|
||||
tokens: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async resetPassword() {
|
||||
export default {
|
||||
name: 'Password',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputButton,
|
||||
AppInputSwitch,
|
||||
AppInputText,
|
||||
SwitchInput,
|
||||
ButtonBase,
|
||||
FormLabel,
|
||||
Trash2Icon,
|
||||
required,
|
||||
InfoBox,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
},
|
||||
watch: {
|
||||
'user.data.attributes.two_factor_authentication': function (val) {
|
||||
val ? this.enable2faPopup() : this.disable2faPopup()
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
passwordForm: {
|
||||
current: undefined,
|
||||
password: undefined,
|
||||
password_confirmation: undefined,
|
||||
},
|
||||
isLoading: false,
|
||||
tokens: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async resetPassword() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.password.validate()
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.password.validate();
|
||||
if (!isValid) return
|
||||
|
||||
if (!isValid) return;
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.post(this.$store.getters.api + '/user/password', this.passwordForm)
|
||||
.then(() => {
|
||||
// Reset inputs
|
||||
this.passwordForm = {
|
||||
current: undefined,
|
||||
password: undefined,
|
||||
password_confirmation: undefined,
|
||||
}
|
||||
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.post(this.$store.getters.api + '/user/password', this.passwordForm)
|
||||
.then(() => {
|
||||
// Reset errors
|
||||
this.$refs.password.reset()
|
||||
|
||||
// Reset inputs
|
||||
this.passwordForm = {
|
||||
current: undefined,
|
||||
password: undefined,
|
||||
password_confirmation: undefined,
|
||||
}
|
||||
// Show success message
|
||||
events.$emit('success:open', {
|
||||
title: this.$t('popup_pass_changed.title'),
|
||||
message: this.$t('popup_pass_changed.message'),
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status === 422) {
|
||||
if (error.response.data.errors['password']) {
|
||||
this.$refs.password.setErrors({
|
||||
'New Password': error.response.data.errors['password'],
|
||||
})
|
||||
}
|
||||
|
||||
// Reset errors
|
||||
this.$refs.password.reset()
|
||||
if (error.response.data.errors['current']) {
|
||||
this.$refs.password.setErrors({
|
||||
'Current Password': error.response.data.errors['current'],
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getPersonalAccessTokens() {
|
||||
axios
|
||||
.get('/api/user/tokens')
|
||||
.then((response) => {
|
||||
this.tokens = response.data
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
},
|
||||
showRecoveryCodes() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'confirm-password',
|
||||
options: {
|
||||
action: 'get-recovery-codes',
|
||||
},
|
||||
})
|
||||
},
|
||||
enable2faPopup() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'confirm-password',
|
||||
options: {
|
||||
action: 'two-factor-qr-setup',
|
||||
},
|
||||
})
|
||||
},
|
||||
disable2faPopup() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'confirm-password',
|
||||
options: {
|
||||
action: 'disable-2fa',
|
||||
},
|
||||
})
|
||||
},
|
||||
confirmDeleteToken(token) {
|
||||
events.$emit('confirm:open', {
|
||||
title: this.$t('popup_delete_personal_token.title'),
|
||||
message: this.$t('popup_delete_personal_token.description'),
|
||||
action: {
|
||||
id: token.id,
|
||||
operation: 'delete-personal-access-token',
|
||||
},
|
||||
})
|
||||
},
|
||||
openCreateTokenPopup() {
|
||||
events.$emit('popup:open', { name: 'create-personal-token' })
|
||||
},
|
||||
formatDate(date) {
|
||||
return new Intl.DateTimeFormat('en').format(new Date(date))
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getPersonalAccessTokens()
|
||||
|
||||
// Show success message
|
||||
events.$emit('success:open', {
|
||||
title: this.$t('popup_pass_changed.title'),
|
||||
message: this.$t('popup_pass_changed.message'),
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
// Actions confirmed
|
||||
events.$on('action:confirmed', (data) => {
|
||||
// Delete personal token
|
||||
if (data.operation === 'delete-personal-access-token') {
|
||||
axios
|
||||
.delete(`/api/user/tokens/${data.id}`)
|
||||
.then(() => {
|
||||
this.tokens = this.tokens.filter((tokenItem) => tokenItem.id !== data.id)
|
||||
|
||||
if (error.response.status === 422) {
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('personal_token.token_deleted'),
|
||||
})
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
}
|
||||
})
|
||||
|
||||
if (error.response.data.errors['password']) {
|
||||
this.$refs.password.setErrors({
|
||||
'New Password': error.response.data.errors['password']
|
||||
});
|
||||
}
|
||||
// Password confirmed
|
||||
events.$on('password:confirmed', (args) => {
|
||||
// Get recovery tokens
|
||||
if (args.options.action === 'get-recovery-codes') {
|
||||
events.$emit('popup:open', {
|
||||
name: 'two-factor-recovery-codes',
|
||||
})
|
||||
}
|
||||
|
||||
if (error.response.data.errors['current']) {
|
||||
this.$refs.password.setErrors({
|
||||
'Current Password': error.response.data.errors['current']
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getPersonalAccessTokens() {
|
||||
axios.get('/api/user/tokens')
|
||||
.then(response => {
|
||||
this.tokens = response.data
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
},
|
||||
showRecoveryCodes() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'confirm-password',
|
||||
options: {
|
||||
action: 'get-recovery-codes',
|
||||
}
|
||||
})
|
||||
},
|
||||
enable2faPopup() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'confirm-password',
|
||||
options: {
|
||||
action: 'two-factor-qr-setup',
|
||||
}
|
||||
})
|
||||
},
|
||||
disable2faPopup() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'confirm-password',
|
||||
options: {
|
||||
action: 'disable-2fa',
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmDeleteToken(token) {
|
||||
events.$emit('confirm:open', {
|
||||
title: this.$t('popup_delete_personal_token.title'),
|
||||
message: this.$t('popup_delete_personal_token.description'),
|
||||
action: {
|
||||
id: token.id,
|
||||
operation: 'delete-personal-access-token'
|
||||
}
|
||||
})
|
||||
},
|
||||
openCreateTokenPopup() {
|
||||
events.$emit('popup:open', {name: 'create-personal-token'})
|
||||
},
|
||||
formatDate(date) {
|
||||
return new Intl.DateTimeFormat('en').format(new Date(date))
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getPersonalAccessTokens()
|
||||
// Get 2fa qr code
|
||||
if (args.options.action === 'two-factor-qr-setup') {
|
||||
events.$emit('popup:open', { name: 'two-factor-qr-setup' })
|
||||
}
|
||||
|
||||
// Actions confirmed
|
||||
events.$on('action:confirmed', data => {
|
||||
// Get 2fa qr code
|
||||
if (args.options.action === 'disable-2fa') {
|
||||
axios
|
||||
.delete('/user/two-factor-authentication')
|
||||
.then(() => {
|
||||
this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', false)
|
||||
})
|
||||
.catch(() => {
|
||||
this.$isSomethingWrong()
|
||||
})
|
||||
.finally(() => {
|
||||
this.$closePopup()
|
||||
|
||||
// Delete personal token
|
||||
if (data.operation === 'delete-personal-access-token') {
|
||||
axios.delete(`/api/user/tokens/${data.id}`)
|
||||
.then(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('popup_2fa.toaster_disabled'),
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.tokens = this.tokens.filter(tokenItem => tokenItem.id !== data.id)
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('personal_token.token_deleted'),
|
||||
})
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
}
|
||||
})
|
||||
|
||||
// Password confirmed
|
||||
events.$on('password:confirmed', args => {
|
||||
|
||||
// Get recovery tokens
|
||||
if (args.options.action === 'get-recovery-codes') {
|
||||
events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
|
||||
}
|
||||
|
||||
// Get 2fa qr code
|
||||
if (args.options.action === 'two-factor-qr-setup') {
|
||||
events.$emit('popup:open', {name: 'two-factor-qr-setup'})
|
||||
}
|
||||
|
||||
// Get 2fa qr code
|
||||
if (args.options.action === 'disable-2fa') {
|
||||
axios
|
||||
.delete('/user/two-factor-authentication')
|
||||
.then(() => {
|
||||
this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', false)
|
||||
})
|
||||
.catch(() => {
|
||||
this.$isSomethingWrong()
|
||||
})
|
||||
.finally(() => {
|
||||
this.$closePopup()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('popup_2fa.toaster_disabled'),
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
events.$on('reload-personal-access-tokens', () => this.getPersonalAccessTokens())
|
||||
},
|
||||
destroyed() {
|
||||
events.$off('action:confirmed')
|
||||
},
|
||||
}
|
||||
events.$on('reload-personal-access-tokens', () => this.getPersonalAccessTokens())
|
||||
},
|
||||
destroyed() {
|
||||
events.$off('action:confirmed')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user