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,26 +1,26 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<!-- Metered subscription components -->
|
||||
<div v-if="config.subscriptionType === 'metered'">
|
||||
<!--Failed Payments-->
|
||||
<UserFailedPayments />
|
||||
<!-- Metered subscription components -->
|
||||
<div v-if="config.subscriptionType === 'metered'">
|
||||
<!--Failed Payments-->
|
||||
<UserFailedPayments />
|
||||
|
||||
<!--
|
||||
<!--
|
||||
...
|
||||
Charge user and increase his balance
|
||||
...
|
||||
Available for PayPal, Paystack
|
||||
...
|
||||
-->
|
||||
<UserBalance/>
|
||||
<UserBalance />
|
||||
|
||||
<!--Usage Estimates-->
|
||||
<UserUsageEstimates />
|
||||
<!--Usage Estimates-->
|
||||
<UserUsageEstimates />
|
||||
|
||||
<!--Billing Alert-->
|
||||
<UserBillingAlerts />
|
||||
<!--Billing Alert-->
|
||||
<UserBillingAlerts />
|
||||
|
||||
<!--
|
||||
<!--
|
||||
...
|
||||
We can store user credit card and charge for fixed billing and metered billing
|
||||
This component handle storing and showing payment card UI
|
||||
@@ -28,21 +28,21 @@
|
||||
Handle only Stripe
|
||||
...
|
||||
-->
|
||||
<UserStoredPaymentMethods />
|
||||
<UserStoredPaymentMethods />
|
||||
|
||||
<!-- Show all users transactions -->
|
||||
<UserTransactionsForMeteredBilling />
|
||||
</div>
|
||||
<!-- Show all users transactions -->
|
||||
<UserTransactionsForMeteredBilling />
|
||||
</div>
|
||||
|
||||
<!-- Fixed subscription components -->
|
||||
<div v-if="config.subscriptionType === 'fixed'">
|
||||
<!-- Empty subscription -->
|
||||
<UserEmptySubscription />
|
||||
<!-- Fixed subscription components -->
|
||||
<div v-if="config.subscriptionType === 'fixed'">
|
||||
<!-- Empty subscription -->
|
||||
<UserEmptySubscription />
|
||||
|
||||
<!-- Subscription Detail -->
|
||||
<UserFixedSubscriptionDetail />
|
||||
<!-- Subscription Detail -->
|
||||
<UserFixedSubscriptionDetail />
|
||||
|
||||
<!--
|
||||
<!--
|
||||
...
|
||||
We can store user credit card and charge for fixed billing and metered billing
|
||||
This component handle storing and showing payment card UI
|
||||
@@ -50,9 +50,9 @@
|
||||
Handle only Stripe
|
||||
...
|
||||
-->
|
||||
<UserStoredPaymentMethods />
|
||||
<UserStoredPaymentMethods />
|
||||
|
||||
<!--
|
||||
<!--
|
||||
...
|
||||
Paystack or PayPal need generate external resources to update payment method.
|
||||
This component will handle all user cases
|
||||
@@ -60,53 +60,50 @@
|
||||
Handle only Paypal, Paystack
|
||||
...
|
||||
-->
|
||||
<UserUpdatePaymentMethodsExternally />
|
||||
<UserUpdatePaymentMethodsExternally />
|
||||
|
||||
<!-- Component for cancel or upgrade subscription plan -->
|
||||
<UserEditSubscription />
|
||||
|
||||
<!-- Show all users transactions -->
|
||||
<UserTransactionsForFixedBilling />
|
||||
</div>
|
||||
<!-- Component for cancel or upgrade subscription plan -->
|
||||
<UserEditSubscription />
|
||||
|
||||
<!-- Show all users transactions -->
|
||||
<UserTransactionsForFixedBilling />
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserUpdatePaymentMethodsExternally from "../../components/Subscription/UserUpdatePaymentMethodsExternally"
|
||||
import UserTransactionsForMeteredBilling from "../../components/Subscription/UserTransactionsForMeteredBilling"
|
||||
import UserTransactionsForFixedBilling from "../../components/Subscription/UserTransactionsForFixedBilling"
|
||||
import UserFixedSubscriptionDetail from "../../components/Subscription/UserFixedSubscriptionDetail"
|
||||
import UserStoredPaymentMethods from "../../components/Subscription/UserStoredPaymentMethods"
|
||||
import UserEmptySubscription from "../../components/Subscription/UserEmptySubscription"
|
||||
import UserEditSubscription from "../../components/Subscription/UserEditSubscription"
|
||||
import UserFailedPayments from "../../components/Subscription/UserFailedPayments"
|
||||
import UserUsageEstimates from "../../components/Subscription/UserUsageEstimates"
|
||||
import UserBillingAlerts from "../../components/Subscription/UserBillingAlerts"
|
||||
import PageTab from "../../components/Others/Layout/PageTab";
|
||||
import UserBalance from "../../components/Subscription/UserBalance"
|
||||
import {mapGetters} from 'vuex'
|
||||
import UserUpdatePaymentMethodsExternally from '../../components/Subscription/UserUpdatePaymentMethodsExternally'
|
||||
import UserTransactionsForMeteredBilling from '../../components/Subscription/UserTransactionsForMeteredBilling'
|
||||
import UserTransactionsForFixedBilling from '../../components/Subscription/UserTransactionsForFixedBilling'
|
||||
import UserFixedSubscriptionDetail from '../../components/Subscription/UserFixedSubscriptionDetail'
|
||||
import UserStoredPaymentMethods from '../../components/Subscription/UserStoredPaymentMethods'
|
||||
import UserEmptySubscription from '../../components/Subscription/UserEmptySubscription'
|
||||
import UserEditSubscription from '../../components/Subscription/UserEditSubscription'
|
||||
import UserFailedPayments from '../../components/Subscription/UserFailedPayments'
|
||||
import UserUsageEstimates from '../../components/Subscription/UserUsageEstimates'
|
||||
import UserBillingAlerts from '../../components/Subscription/UserBillingAlerts'
|
||||
import PageTab from '../../components/Others/Layout/PageTab'
|
||||
import UserBalance from '../../components/Subscription/UserBalance'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Billing',
|
||||
components: {
|
||||
UserUpdatePaymentMethodsExternally,
|
||||
UserTransactionsForMeteredBilling,
|
||||
UserTransactionsForFixedBilling,
|
||||
UserFixedSubscriptionDetail,
|
||||
UserStoredPaymentMethods,
|
||||
UserEmptySubscription,
|
||||
UserEditSubscription,
|
||||
UserFailedPayments,
|
||||
UserUsageEstimates,
|
||||
UserBillingAlerts,
|
||||
UserBalance,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config',
|
||||
]),
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'Billing',
|
||||
components: {
|
||||
UserUpdatePaymentMethodsExternally,
|
||||
UserTransactionsForMeteredBilling,
|
||||
UserTransactionsForFixedBilling,
|
||||
UserFixedSubscriptionDetail,
|
||||
UserStoredPaymentMethods,
|
||||
UserEmptySubscription,
|
||||
UserEditSubscription,
|
||||
UserFailedPayments,
|
||||
UserUsageEstimates,
|
||||
UserBillingAlerts,
|
||||
UserBalance,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,210 +2,223 @@
|
||||
<div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Account Settings') }}
|
||||
</FormLabel>
|
||||
{{ $t('Account Settings') }}
|
||||
</FormLabel>
|
||||
|
||||
<div class="md:flex justify-items md:space-x-4">
|
||||
<AppInputText :title="$t('First Name')" class="w-full">
|
||||
<input
|
||||
@keyup="updateFirstName"
|
||||
v-model="user.data.relationships.settings.data.attributes.first_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('Last Name')" class="w-full">
|
||||
<input
|
||||
@keyup="updateLastName"
|
||||
v-model="user.data.relationships.settings.data.attributes.last_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<div class="justify-items md:flex md:space-x-4">
|
||||
<AppInputText :title="$t('First Name')" class="w-full">
|
||||
<input
|
||||
@keyup="updateFirstName"
|
||||
v-model="user.data.relationships.settings.data.attributes.first_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('Last Name')" class="w-full">
|
||||
<input
|
||||
@keyup="updateLastName"
|
||||
v-model="user.data.relationships.settings.data.attributes.last_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<AppInputText :title="$t('GMT')" :is-last="true">
|
||||
<AppInputText :title="$t('GMT')" :is-last="true">
|
||||
<SelectInput
|
||||
@input="$updateText('/user/settings', 'timezone', user.data.relationships.settings.data.attributes.timezone)"
|
||||
v-model="user.data.relationships.settings.data.attributes.timezone"
|
||||
:default="user.data.relationships.settings.data.attributes.timezone"
|
||||
:options="timezones"
|
||||
:placeholder="$t('user_settings.timezone_plac')" />
|
||||
@input="$updateText('/user/settings', 'timezone', user.data.relationships.settings.data.attributes.timezone)"
|
||||
v-model="user.data.relationships.settings.data.attributes.timezone"
|
||||
:default="user.data.relationships.settings.data.attributes.timezone"
|
||||
:options="timezones"
|
||||
:placeholder="$t('user_settings.timezone_plac')"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Appearance') }}
|
||||
</FormLabel>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Appearance') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="! $isApple()">
|
||||
<div class="md:flex items-center md:space-x-6 md:space-x-4 md:space-y-0 space-y-4">
|
||||
<div
|
||||
v-for="(theme, i) in themeSetup"
|
||||
:key="i"
|
||||
:title="theme.title"
|
||||
@click="$store.dispatch('toggleThemeMode', theme.type)"
|
||||
class="w-full rounded-xl shadow-lg overflow-hidden cursor-pointer border-3"
|
||||
:class="{'border-theme': config.defaultThemeMode === theme.type, 'border-transparent': config.defaultThemeMode !== theme.type}"
|
||||
>
|
||||
<img :src="theme.image" :alt="theme.type">
|
||||
</div>
|
||||
</div>
|
||||
<AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="!$isApple()">
|
||||
<div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
|
||||
<div
|
||||
v-for="(theme, i) in themeSetup"
|
||||
:key="i"
|
||||
:title="theme.title"
|
||||
@click="$store.dispatch('toggleThemeMode', theme.type)"
|
||||
class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
|
||||
:class="{
|
||||
'border-theme': config.defaultThemeMode === theme.type,
|
||||
'border-transparent': config.defaultThemeMode !== theme.type,
|
||||
}"
|
||||
>
|
||||
<img :src="theme.image" :alt="theme.type" />
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
|
||||
<AppInputText v-if="$isApple()" :title="$t('Default Emojis')" :description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')" :is-last="true">
|
||||
<div class="md:flex items-center md:space-x-6 md:space-x-4 md:space-y-0 space-y-4">
|
||||
<div
|
||||
v-for="(emoji, i) in emojiSetup"
|
||||
:key="i"
|
||||
:title="emoji.title"
|
||||
@click="$store.dispatch('toggleEmojiType', emoji.type)"
|
||||
class="w-full rounded-xl shadow-lg overflow-hidden cursor-pointer border-3"
|
||||
:class="{'border-theme': currentEmojis === emoji.type, 'border-transparent': currentEmojis !== emoji.type}"
|
||||
>
|
||||
<img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type">
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<AppInputText
|
||||
v-if="$isApple()"
|
||||
:title="$t('Default Emojis')"
|
||||
:description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')"
|
||||
:is-last="true"
|
||||
>
|
||||
<div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
|
||||
<div
|
||||
v-for="(emoji, i) in emojiSetup"
|
||||
:key="i"
|
||||
:title="emoji.title"
|
||||
@click="$store.dispatch('toggleEmojiType', emoji.type)"
|
||||
class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
|
||||
:class="{
|
||||
'border-theme': currentEmojis === emoji.type,
|
||||
'border-transparent': currentEmojis !== emoji.type,
|
||||
}"
|
||||
>
|
||||
<img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_settings.title_billing') }}
|
||||
</FormLabel>
|
||||
<AppInputText :title="$t('user_settings.address')">
|
||||
<input @keyup="$updateText('/user/settings', 'address', user.data.relationships.settings.data.attributes.address)"
|
||||
v-model="user.data.relationships.settings.data.attributes.address"
|
||||
:placeholder="$t('user_settings.address_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
@keyup="$updateText('/user/settings', 'address', user.data.relationships.settings.data.attributes.address)"
|
||||
v-model="user.data.relationships.settings.data.attributes.address"
|
||||
:placeholder="$t('user_settings.address_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<div class="flex space-x-4">
|
||||
<AppInputText :title="$t('user_settings.city')" class="w-full">
|
||||
<input @keyup="$updateText('/user/settings', 'city', user.data.relationships.settings.data.attributes.city)"
|
||||
v-model="user.data.relationships.settings.data.attributes.city"
|
||||
:placeholder="$t('user_settings.city_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
@keyup="$updateText('/user/settings', 'city', user.data.relationships.settings.data.attributes.city)"
|
||||
v-model="user.data.relationships.settings.data.attributes.city"
|
||||
:placeholder="$t('user_settings.city_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.postal_code')" class="w-full">
|
||||
<input @keyup="$updateText('/user/settings', 'postal_code', user.data.relationships.settings.data.attributes.postal_code)"
|
||||
v-model="user.data.relationships.settings.data.attributes.postal_code"
|
||||
:placeholder="$t('user_settings.postal_code_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
@keyup="$updateText('/user/settings', 'postal_code', user.data.relationships.settings.data.attributes.postal_code)"
|
||||
v-model="user.data.relationships.settings.data.attributes.postal_code"
|
||||
:placeholder="$t('user_settings.postal_code_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<AppInputText :title="$t('user_settings.country')">
|
||||
<SelectInput @input="$updateText('/user/settings', 'country', user.data.relationships.settings.data.attributes.country)"
|
||||
v-model="user.data.relationships.settings.data.attributes.country"
|
||||
:default="user.data.relationships.settings.data.attributes.country"
|
||||
:options="countries"
|
||||
:placeholder="$t('user_settings.country_plac')"
|
||||
/>
|
||||
<SelectInput
|
||||
@input="$updateText('/user/settings', 'country', user.data.relationships.settings.data.attributes.country)"
|
||||
v-model="user.data.relationships.settings.data.attributes.country"
|
||||
:default="user.data.relationships.settings.data.attributes.country"
|
||||
:options="countries"
|
||||
:placeholder="$t('user_settings.country_plac')"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.state')" :description="$t('State, county, province, or region.')">
|
||||
<input @keyup="$updateText('/user/settings', 'state', user.data.relationships.settings.data.attributes.state)"
|
||||
v-model="user.data.relationships.settings.data.attributes.state"
|
||||
:placeholder="$t('user_settings.state_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
@keyup="$updateText('/user/settings', 'state', user.data.relationships.settings.data.attributes.state)"
|
||||
v-model="user.data.relationships.settings.data.attributes.state"
|
||||
:placeholder="$t('user_settings.state_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.phone_number')" :is-last="true">
|
||||
<input @keyup="$updateText('/user/settings', 'phone_number', user.data.relationships.settings.data.attributes.phone_number)"
|
||||
v-model="user.data.relationships.settings.data.attributes.phone_number"
|
||||
:placeholder="$t('user_settings.phone_number_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
@keyup="$updateText('/user/settings', 'phone_number', user.data.relationships.settings.data.attributes.phone_number)"
|
||||
v-model="user.data.relationships.settings.data.attributes.phone_number"
|
||||
:placeholder="$t('user_settings.phone_number_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../../components/Admin/AppInputText";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import AppInputText from '../../components/Admin/AppInputText'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: {
|
||||
AppInputText,
|
||||
SelectInput,
|
||||
FormLabel,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isDarkMode',
|
||||
'countries',
|
||||
'timezones',
|
||||
'config',
|
||||
]),
|
||||
currentEmojis() {
|
||||
return this.config.defaultEmoji
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: this.$store.getters.user,
|
||||
isLoading: false,
|
||||
themeSetup: [
|
||||
{
|
||||
title: this.$t('Light mode'),
|
||||
type: 'light',
|
||||
image: '/assets/setup/light-mode.jpg',
|
||||
},
|
||||
{
|
||||
title: this.$t('Dark mode'),
|
||||
type: 'dark',
|
||||
image: '/assets/setup/dark-mode.jpg',
|
||||
},
|
||||
{
|
||||
title: this.$t('Based on system settings'),
|
||||
type: 'system',
|
||||
image: '/assets/setup/system-mode.jpg',
|
||||
},
|
||||
],
|
||||
emojiSetup: [
|
||||
{
|
||||
title: 'Twemoji',
|
||||
type: 'twemoji',
|
||||
image: {
|
||||
dark: '/assets/setup/twemoji-preview-dark.jpg',
|
||||
light: '/assets/setup/twemoji-preview.jpg',
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Applemoji',
|
||||
type: 'applemoji',
|
||||
image: {
|
||||
dark: '/assets/setup/applemoji-preview-dark.jpg',
|
||||
light: '/assets/setup/applemoji-preview.jpg',
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateFirstName() {
|
||||
this.$store.commit('UPDATE_FIRST_NAME', this.user.data.relationships.settings.data.attributes.first_name)
|
||||
this.$updateText('/user/settings', 'first_name', this.user.data.relationships.settings.data.attributes.first_name)
|
||||
},
|
||||
updateLastName() {
|
||||
this.$store.commit('UPDATE_LAST_NAME', this.user.data.relationships.settings.data.attributes.last_name)
|
||||
this.$updateText('/user/settings', 'last_name', this.user.data.relationships.settings.data.attributes.last_name)
|
||||
}
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: {
|
||||
AppInputText,
|
||||
SelectInput,
|
||||
FormLabel,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isDarkMode', 'countries', 'timezones', 'config']),
|
||||
currentEmojis() {
|
||||
return this.config.defaultEmoji
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: this.$store.getters.user,
|
||||
isLoading: false,
|
||||
themeSetup: [
|
||||
{
|
||||
title: this.$t('Light mode'),
|
||||
type: 'light',
|
||||
image: '/assets/setup/light-mode.jpg',
|
||||
},
|
||||
{
|
||||
title: this.$t('Dark mode'),
|
||||
type: 'dark',
|
||||
image: '/assets/setup/dark-mode.jpg',
|
||||
},
|
||||
{
|
||||
title: this.$t('Based on system settings'),
|
||||
type: 'system',
|
||||
image: '/assets/setup/system-mode.jpg',
|
||||
},
|
||||
],
|
||||
emojiSetup: [
|
||||
{
|
||||
title: 'Twemoji',
|
||||
type: 'twemoji',
|
||||
image: {
|
||||
dark: '/assets/setup/twemoji-preview-dark.jpg',
|
||||
light: '/assets/setup/twemoji-preview.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Applemoji',
|
||||
type: 'applemoji',
|
||||
image: {
|
||||
dark: '/assets/setup/applemoji-preview-dark.jpg',
|
||||
light: '/assets/setup/applemoji-preview.jpg',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateFirstName() {
|
||||
this.$store.commit('UPDATE_FIRST_NAME', this.user.data.relationships.settings.data.attributes.first_name)
|
||||
this.$updateText('/user/settings', 'first_name', this.user.data.relationships.settings.data.attributes.first_name)
|
||||
},
|
||||
updateLastName() {
|
||||
this.$store.commit('UPDATE_LAST_NAME', this.user.data.relationships.settings.data.attributes.last_name)
|
||||
this.$updateText('/user/settings', 'last_name', this.user.data.relationships.settings.data.attributes.last_name)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,91 +1,88 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Storage Usage') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block">
|
||||
{{ storage.data.attributes.used }}
|
||||
</b>
|
||||
<b class="-mt-3 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ storage.data.attributes.used }}
|
||||
</b>
|
||||
|
||||
<b v-if="config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)" class="mt-0.5 block text-sm text-gray-400">
|
||||
{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
|
||||
</b>
|
||||
<b v-if="config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)" class="mt-0.5 block text-sm text-gray-400">
|
||||
{{ $t('Total of') }} {{ storage.data.attributes.capacity }}
|
||||
{{ $t('Used') }}
|
||||
</b>
|
||||
|
||||
<ProgressLine :data="distribution" class="mt-5" />
|
||||
</div>
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
<ProgressLine :data="distribution" class="mt-5" />
|
||||
</div>
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Upload') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.meta.traffic.upload }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ storage.data.meta.traffic.upload }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
<b class="mb-3 mb-5 block text-sm text-gray-400">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
|
||||
<BarChart :data="storage.data.meta.traffic.chart.upload" color="#FFBD2D" />
|
||||
</div>
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
<BarChart :data="storage.data.meta.traffic.chart.upload" color="#FFBD2D" />
|
||||
</div>
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Download') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.meta.traffic.download }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ storage.data.meta.traffic.download }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
<b class="mb-3 mb-5 block text-sm text-gray-400">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
|
||||
<BarChart :data="storage.data.meta.traffic.chart.download" color="#9d66fe" />
|
||||
</div>
|
||||
<BarChart :data="storage.data.meta.traffic.chart.download" color="#9d66fe" />
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressLine from "../../components/Admin/ProgressLine";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import PageTab from "../../components/Others/Layout/PageTab";
|
||||
import axios from 'axios'
|
||||
import BarChart from "../../components/UI/BarChart";
|
||||
import {mapGetters} from "vuex";
|
||||
import ProgressLine from '../../components/Admin/ProgressLine'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import PageTab from '../../components/Others/Layout/PageTab'
|
||||
import axios from 'axios'
|
||||
import BarChart from '../../components/UI/BarChart'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Storage',
|
||||
components: {
|
||||
BarChart,
|
||||
ProgressLine,
|
||||
FormLabel,
|
||||
PageTab,
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
distribution: undefined,
|
||||
storage: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get('/api/user/storage')
|
||||
.then(response => {
|
||||
this.distribution = this.$mapStorageUsage(response.data)
|
||||
|
||||
this.storage = response.data
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
export default {
|
||||
name: 'Storage',
|
||||
components: {
|
||||
BarChart,
|
||||
ProgressLine,
|
||||
FormLabel,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
distribution: undefined,
|
||||
storage: undefined,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get('/api/user/storage').then((response) => {
|
||||
this.distribution = this.$mapStorageUsage(response.data)
|
||||
|
||||
this.storage = response.data
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user