mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
366 lines
14 KiB
Vue
366 lines
14 KiB
Vue
<template>
|
|
<PageTab :is-loading="isLoading">
|
|
<!--Store & Upload-->
|
|
<div v-if="app" class="card shadow-card">
|
|
<FormLabel>
|
|
{{ $t('Storage & Upload') }}
|
|
</FormLabel>
|
|
|
|
<!--Available only when is not metered billing-->
|
|
<div v-if="config.subscriptionType !== 'metered'">
|
|
<AppInputSwitch
|
|
:title="$t('admin_settings.others.storage_limit')"
|
|
:description="$t('admin_settings.others.storage_limit_help')"
|
|
>
|
|
<SwitchInput
|
|
@input="$updateText('/admin/settings', 'storage_limitation', app.storageLimitation)"
|
|
v-model="app.storageLimitation"
|
|
:state="app.storageLimitation"
|
|
class="switch"
|
|
/>
|
|
</AppInputSwitch>
|
|
|
|
<AppInputText v-if="app.storageLimitation" :title="$t('admin_settings.others.default_storage')">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'default_max_storage_amount', app.defaultStorage)"
|
|
v-model="app.defaultStorage"
|
|
min="1"
|
|
max="999999999"
|
|
:placeholder="$t('admin_settings.others.default_storage_plac')"
|
|
type="number"
|
|
class="focus-border-theme input-dark"
|
|
/>
|
|
</AppInputText>
|
|
</div>
|
|
|
|
<AppInputText
|
|
:title="$t('admin_settings.others.upload_limit')"
|
|
:description="$t('admin_settings.others.upload_limit_help')"
|
|
>
|
|
<input
|
|
@input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit, true)"
|
|
v-model="app.uploadLimit"
|
|
:placeholder="$t('admin_settings.others.upload_limit_plac')"
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
class="focus-border-theme input-dark"
|
|
/>
|
|
</AppInputText>
|
|
|
|
<AppInputText
|
|
:title="$t('admin_settings.others.mimetypes_blacklist')"
|
|
:description="$t('admin_settings.others.mimetypes_blacklist_help')"
|
|
:is-last="true"
|
|
>
|
|
<textarea
|
|
rows="2"
|
|
@input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist, true)"
|
|
v-model="app.mimetypesBlacklist"
|
|
:placeholder="$t('admin_settings.others.mimetypes_blacklist_plac')"
|
|
type="text"
|
|
class="focus-border-theme input-dark"
|
|
/>
|
|
</AppInputText>
|
|
</div>
|
|
|
|
<!-- ReCaptcha -->
|
|
<div v-if="app" class="card shadow-card">
|
|
<FormLabel icon="shield">
|
|
{{ $t('reCaptcha') }}
|
|
</FormLabel>
|
|
|
|
<AppInputSwitch
|
|
:title="$t('Allow ReCaptcha')"
|
|
:description="$t('ReCaptcha will be allowed on Registration and Contact Us forms.')"
|
|
:is-last="!recaptcha.allowedService"
|
|
>
|
|
<SwitchInput
|
|
@input="$updateText('/admin/settings', 'allowed_recaptcha', recaptcha.allowedService)"
|
|
v-model="recaptcha.allowedService"
|
|
class="switch"
|
|
:state="recaptcha.allowedService"
|
|
/>
|
|
</AppInputSwitch>
|
|
|
|
<div
|
|
v-if="config.isRecaptchaConfigured && recaptcha.allowedService"
|
|
@click="recaptcha.isVisibleCredentialsForm = !recaptcha.isVisibleCredentialsForm"
|
|
class="flex cursor-pointer items-center"
|
|
:class="{ 'mb-4': recaptcha.isVisibleCredentialsForm }"
|
|
>
|
|
<edit2-icon size="12" class="vue-feather text-theme mr-2" />
|
|
<b class="text-xs">{{ $t('Update Your Credentials') }}</b>
|
|
</div>
|
|
|
|
<!--Set up recaptcha credentials-->
|
|
<ValidationObserver
|
|
v-if="(!config.isRecaptchaConfigured || recaptcha.isVisibleCredentialsForm) && recaptcha.allowedService"
|
|
@submit.prevent="storeCredentials('recaptcha')"
|
|
ref="credentialsForm"
|
|
v-slot="{ invalid }"
|
|
tag="form"
|
|
class="rounded-xl p-5 shadow-lg"
|
|
>
|
|
<FormLabel v-if="!config.isRecaptchaConfigured" icon="shield">
|
|
{{ $t('Configure Credentials') }}
|
|
</FormLabel>
|
|
|
|
<ValidationProvider tag="div" mode="passive" name="Site Key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('Site Key')" :error="errors[0]">
|
|
<input
|
|
v-model="recaptcha.credentials.client_id"
|
|
:placeholder="$t('Paste your Site Key here')"
|
|
type="text"
|
|
:class="{ '!border-rose-600': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
/>
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider tag="div" mode="passive" name="Secret key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('Secret Key')" :error="errors[0]">
|
|
<input
|
|
v-model="recaptcha.credentials.client_secret"
|
|
:placeholder="$t('Paste your Secret key here')"
|
|
type="text"
|
|
:class="{ '!border-rose-600': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
/>
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
|
|
<ButtonBase
|
|
:disabled="isLoading"
|
|
:loading="isLoading"
|
|
button-style="theme"
|
|
type="submit"
|
|
class="w-full"
|
|
>
|
|
{{ $t('Store Credentials') }}
|
|
</ButtonBase>
|
|
</ValidationObserver>
|
|
</div>
|
|
|
|
<!--Other Settings-->
|
|
<div v-if="app" class="card shadow-card">
|
|
<FormLabel>
|
|
{{ $t('Application') }}
|
|
</FormLabel>
|
|
|
|
<AppInputButton
|
|
:title="$t('Cache')"
|
|
:description="$t('Did you change anything in your .env file? Then clear your cache.')"
|
|
>
|
|
<ButtonBase
|
|
@click.native="flushCache"
|
|
:loading="isFlushingCache"
|
|
:disabled="isFlushingCache"
|
|
class="w-full sm:w-auto"
|
|
button-style="theme"
|
|
>
|
|
{{ $t('admin_settings.others.cache_clear') }}
|
|
</ButtonBase>
|
|
</AppInputButton>
|
|
|
|
<AppInputText :title="$t('admin_settings.others.contact_email')">
|
|
<input
|
|
class="focus-border-theme input-dark"
|
|
@input="$updateText('/admin/settings', 'contact_email', app.contactMail)"
|
|
v-model="app.contactMail"
|
|
:placeholder="$t('admin_settings.others.contact_email_plac')"
|
|
type="email"
|
|
/>
|
|
</AppInputText>
|
|
|
|
<AppInputText :title="$t('admin_settings.others.google_analytics')" :is-last="true">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'google_analytics', app.googleAnalytics, true)"
|
|
v-model="app.googleAnalytics"
|
|
:placeholder="$t('admin_settings.others.google_analytics_plac')"
|
|
type="text"
|
|
class="focus-border-theme input-dark"
|
|
/>
|
|
</AppInputText>
|
|
</div>
|
|
|
|
<!-- Subscription -->
|
|
<div v-if="app" class="card shadow-card">
|
|
<FormLabel icon="credit-card">
|
|
{{ $t('Subscription') }}
|
|
</FormLabel>
|
|
|
|
<AppInputText :title="$t('Subscription Type')" :description="$t('Please do not change in production environment.')" :is-last="true">
|
|
<SelectInput
|
|
@change="subscriptionTypeChange"
|
|
:default="app.subscriptionType"
|
|
:options="subscriptionTypes"
|
|
:placeholder="$t('Select your subscription type')"
|
|
/>
|
|
</AppInputText>
|
|
</div>
|
|
</PageTab>
|
|
</template>
|
|
|
|
<script>
|
|
import { Edit2Icon } from 'vue-feather-icons'
|
|
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
|
import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
|
|
import AppInputButton from '../../../../components/Admin/AppInputButton'
|
|
import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
|
|
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
|
import ButtonBase from '../../../../components/FilesView/ButtonBase'
|
|
import AppInputText from '../../../../components/Admin/AppInputText'
|
|
import PageTab from '../../../../components/Others/Layout/PageTab'
|
|
import { required } from 'vee-validate/dist/rules'
|
|
import { events } from '../../../../bus'
|
|
import { mapGetters } from 'vuex'
|
|
import axios from 'axios'
|
|
import SelectInput from "../../../../components/Others/Forms/SelectInput";
|
|
|
|
export default {
|
|
name: 'AppOthers',
|
|
components: {
|
|
SelectInput,
|
|
AppInputButton,
|
|
ValidationObserver,
|
|
ValidationProvider,
|
|
AppInputSwitch,
|
|
AppInputText,
|
|
SwitchInput,
|
|
ButtonBase,
|
|
Edit2Icon,
|
|
FormLabel,
|
|
required,
|
|
PageTab,
|
|
},
|
|
computed: {
|
|
...mapGetters(['subscriptionTypes', 'config']),
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: true,
|
|
isFlushingCache: false,
|
|
app: undefined,
|
|
recaptcha: {
|
|
allowedService: false,
|
|
isVisibleCredentialsForm: false,
|
|
credentials: {
|
|
key: undefined,
|
|
secret: undefined,
|
|
},
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
subscriptionTypeChange(type) {
|
|
events.$emit('confirm:open', {
|
|
title: this.$t('Are you sure you want to change subscription type?'),
|
|
message: this.$t(
|
|
'We strongly do not recommend change this value if there is any subscribed user to prevent any failures. You can operate only with one type of subscription and you can not change it on the fly!'
|
|
),
|
|
action: {
|
|
type: type,
|
|
operation: 'change-subscription-type',
|
|
},
|
|
})
|
|
},
|
|
async storeCredentials(service) {
|
|
// Validate fields
|
|
const isValid = await this.$refs.credentialsForm.validate()
|
|
|
|
if (!isValid) return
|
|
|
|
// Start loading
|
|
this.isLoading = true
|
|
|
|
// Send request to get verify account
|
|
axios
|
|
.post('/api/admin/settings/social-service', {
|
|
client_id: this[service].credentials.client_id,
|
|
client_secret: this[service].credentials.client_secret,
|
|
service: service,
|
|
})
|
|
.then(() => {
|
|
// Commit credentials
|
|
this.$store.commit('SET_SOCIAL_LOGIN_CONFIGURED', service)
|
|
|
|
this[service].allowedService = true
|
|
this[service].isVisibleCredentialsForm = false
|
|
|
|
// Show toaster
|
|
events.$emit('toaster', {
|
|
type: 'success',
|
|
message: this.$t('toaster.credentials_set', {
|
|
service: service,
|
|
}),
|
|
})
|
|
})
|
|
.catch((error) => {
|
|
if (error.response.status === 500) {
|
|
this.isError = true
|
|
this.errorMessage = error.response.data.message
|
|
}
|
|
})
|
|
.finally(() => (this.isLoading = false))
|
|
},
|
|
flushCache() {
|
|
this.isFlushingCache = true
|
|
|
|
axios
|
|
.get('/api/admin/settings/flush-cache')
|
|
.then(() => {
|
|
events.$emit('toaster', {
|
|
type: 'success',
|
|
message: 'Your cache was successfully deleted.',
|
|
})
|
|
})
|
|
.finally(() => {
|
|
this.isFlushingCache = false
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
this.recaptcha.allowedService = this.config.allowedRecaptcha
|
|
|
|
axios
|
|
.get('/api/admin/settings', {
|
|
params: {
|
|
column: 'contact_email|google_analytics|default_max_storage_amount|storage_limitation|mimetypes_blacklist|upload_limit|subscriptionType',
|
|
},
|
|
})
|
|
.then((response) => {
|
|
this.isLoading = false
|
|
|
|
this.app = {
|
|
contactMail: response.data.contact_email,
|
|
googleAnalytics: response.data.google_analytics,
|
|
defaultStorage: response.data.default_max_storage_amount,
|
|
storageLimitation: parseInt(response.data.storage_limitation),
|
|
mimetypesBlacklist: response.data.mimetypes_blacklist,
|
|
uploadLimit: response.data.upload_limit,
|
|
subscriptionType: response.data.subscriptionType,
|
|
}
|
|
})
|
|
},
|
|
created() {
|
|
events.$on('action:confirmed', (data) => {
|
|
if (data.operation === 'change-subscription-type') {
|
|
|
|
// Update database
|
|
this.$updateText('/admin/settings', 'subscription_type', data.type)
|
|
|
|
// Update config
|
|
this.$store.commit('REPLACE_CONFIG_VALUE', {
|
|
key: 'subscriptionType',
|
|
value: data.type,
|
|
})
|
|
}
|
|
})
|
|
},
|
|
destroyed() {
|
|
events.$off('action:confirmed')
|
|
},
|
|
}
|
|
</script>
|