translations update

This commit is contained in:
carodej
2020-07-12 11:02:21 +02:00
parent 3c3a18cf6b
commit a74c1c7b6e
46 changed files with 13226 additions and 2018 deletions

View File

@@ -14,7 +14,7 @@
<eye-icon size="17"></eye-icon>
</div>
<div class="label">
Appearance
{{ $t('admin_settings.tabs.appearance') }}
</div>
</router-link>
@@ -24,7 +24,7 @@
<file-text-icon size="17"></file-text-icon>
</div>
<div class="label">
Billings
{{ $t('admin_settings.tabs.billings') }}
</div>
</router-link>
@@ -34,7 +34,7 @@
<mail-icon size="17"></mail-icon>
</div>
<div class="label">
Email
{{ $t('admin_settings.tabs.email') }}
</div>
</router-link>
@@ -44,7 +44,7 @@
<credit-card-icon size="17"></credit-card-icon>
</div>
<div class="label">
Payments
{{ $t('admin_settings.tabs.payments') }}
</div>
</router-link>
@@ -54,7 +54,7 @@
<code-icon size="17"></code-icon>
</div>
<div class="label">
Others
{{ $t('admin_settings.tabs.others') }}
</div>
</router-link>
</div>
@@ -71,9 +71,7 @@
import MobileHeader from '@/components/Mobile/MobileHeader'
import SectionTitle from '@/components/Others/SectionTitle'
import PageHeader from '@/components/Others/PageHeader'
import Spinner from '@/components/FilesView/Spinner'
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
name: 'AppSettings',
@@ -89,7 +87,6 @@
SectionTitle,
MobileHeader,
PageHeader,
Spinner,
},
computed: {
...mapGetters(['config']),
@@ -100,13 +97,4 @@
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>

View File

@@ -4,42 +4,45 @@
<!--Personal Information-->
<PageTabGroup>
<div class="form block-form">
<FormLabel>General Settings</FormLabel>
<FormLabel>{{ $t('admin_settings.appearance.section_general') }}</FormLabel>
<div class="block-wrapper">
<label>App Title:</label>
<label>{{ $t('admin_settings.appearance.title') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'app_title', app.title)" v-model="app.title" placeholder="Type your app title" type="text" :class="{'is-error': errors[0]}"/>
<input @input="$updateText('/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>App Description:</label>
<label>{{ $t('admin_settings.appearance.description') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'app_description', app.description)" v-model="app.description" placeholder="Type your app description" type="text" :class="{'is-error': errors[0]}"/>
<input @input="$updateText('/settings', 'app_description', app.description)" v-model="app.description"
:placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<FormLabel class="mt-70">Appearance</FormLabel>
<FormLabel class="mt-70">{{ $t('admin_settings.appearance.section_appearance') }}</FormLabel>
<div class="block-wrapper">
<label>App Logo (optional):</label>
<label>{{ $t('admin_settings.appearance.logo') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
<ImageInput @input="$updateImage('/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" :error="errors[0]"/>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>App Logo Horizontal (optional):</label>
<label>{{ $t('admin_settings.appearance.logo_horizontal') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo Horizontal" v-slot="{ errors }">
<ImageInput @input="$updateImage('/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)" v-model="app.logo_horizontal" :error="errors[0]"/>
<ImageInput @input="$updateImage('/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)"
v-model="app.logo_horizontal" :error="errors[0]"/>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>App Favicon (optional):</label>
<label>{{ $t('admin_settings.appearance.favicon') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput @input="$updateImage('/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/>
</ValidationProvider>
@@ -83,11 +86,11 @@
return {
isLoading: true,
app: {
title: '',
description: '',
logo: undefined,
logo_horizontal: undefined,
favicon: undefined,
logo: undefined,
description: '',
title: '',
},
}
},
@@ -98,13 +101,14 @@
}
})
.then(response => {
this.isLoading = false
this.app.title = response.data.app_title
this.app.description = response.data.app_description
this.app.logo = response.data.app_logo
this.app.logo_horizontal = response.data.app_logo_horizontal
this.app.description = response.data.app_description
this.app.favicon = response.data.app_favicon
this.app.title = response.data.app_title
this.app.logo = response.data.app_logo
})
.finally(() => {
this.isLoading = false
})
}
}

View File

@@ -4,44 +4,44 @@
<!--Personal Information-->
<PageTabGroup>
<div class="form block-form">
<FormLabel>Company Information</FormLabel>
<FormLabel>{{ $t('admin_settings.billings.section_company') }}</FormLabel>
<div class="block-wrapper">
<label>Company Name:</label>
<label>{{ $t('admin_settings.billings.company_name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'billing_name', billingInformation.billing_name)" v-model="billingInformation.billing_name" placeholder="Type your company name"
<input @input="$updateText('/settings', 'billing_name', billingInformation.billing_name)" v-model="billingInformation.billing_name" :placeholder="$t('admin_settings.billings.company_name_plac')"
type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>VAT Number:</label>
<label>{{ $t('admin_settings.billings.vat') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" placeholder="Type your VAT number"
<input @input="$updateText('/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" :placeholder="$t('admin_settings.billings.vat_plac')"
type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<FormLabel class="mt-70">Billing Information</FormLabel>
<FormLabel class="mt-70">{{ $t('admin_settings.billings.section_billing') }}</FormLabel>
<div class="block-wrapper">
<label>Billing Country:</label>
<label>{{ $t('admin_settings.billings.country') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Country"
rules="required" v-slot="{ errors }">
<SelectInput @input="$updateText('/settings', 'billing_country', billingInformation.billing_country)" v-model="billingInformation.billing_country" :default="billingInformation.billing_country" :options="countries" placeholder="Select your billing country" :isError="errors[0]"/>
<SelectInput @input="$updateText('/settings', 'billing_country', billingInformation.billing_country)" v-model="billingInformation.billing_country" :default="billingInformation.billing_country" :options="countries" :placeholder="$t('admin_settings.billings.country_plac')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Billing Address:</label>
<label>{{ $t('admin_settings.billings.address') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'billing_address', billingInformation.billing_address)" v-model="billingInformation.billing_address" placeholder="Type your billing address"
<input @input="$updateText('/settings', 'billing_address', billingInformation.billing_address)" v-model="billingInformation.billing_address" :placeholder="$t('admin_settings.billings.address_plac')"
type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -49,40 +49,40 @@
<div class="wrapper-inline">
<div class="block-wrapper">
<label>Billing City:</label>
<label>{{ $t('admin_settings.billings.city') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'billing_city', billingInformation.billing_city)" v-model="billingInformation.billing_city" placeholder="Type your billing city"
<input @input="$updateText('/settings', 'billing_city', billingInformation.billing_city)" v-model="billingInformation.billing_city" :placeholder="$t('admin_settings.billings.city_plac')"
type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Billing Postal Code:</label>
<label>{{ $t('admin_settings.billings.postal_code') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'billing_postal_code', billingInformation.billing_postal_code)" v-model="billingInformation.billing_postal_code"
placeholder="Type your billing postal code" type="text" :class="{'is-error': errors[0]}"/>
:placeholder="$t('admin_settings.billings.postal_code_plac')" type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
<div class="block-wrapper">
<label>Billing State:</label>
<label>{{ $t('admin_settings.billings.state') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'billing_state', billingInformation.billing_state)" v-model="billingInformation.billing_state" placeholder="Type your billing state"
<input @input="$updateText('/settings', 'billing_state', billingInformation.billing_state)" v-model="billingInformation.billing_state" :placeholder="$t('admin_settings.billings.state_plac')"
type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Billing Phone Number (optional):</label>
<label>{{ $t('admin_settings.billings.phone_number') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number"
v-slot="{ errors }">
<input @input="$updateText('/settings', 'billing_phone_number', billingInformation.billing_phone_number)" v-model="billingInformation.billing_phone_number" placeholder="Type your billing phone number"
<input @input="$updateText('/settings', 'billing_phone_number', billingInformation.billing_phone_number)" v-model="billingInformation.billing_phone_number" :placeholder="$t('admin_settings.billings.phone_number_plac')"
type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>

View File

@@ -4,63 +4,63 @@
<!--Personal Information-->
<PageTabGroup>
<ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="form block-form">
<FormLabel>Email Setup</FormLabel>
<FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>
<InfoBox>
<p>This form is not fully pre-filled for security reasons. Your email settings is available in your <b>.env</b> file. For apply new Email settings, please confirm your options by button at the end of formular.</p>
<p v-html="$t('admin_settings.email.email_disclaimer')"></p>
</InfoBox>
<div class="block-wrapper">
<label>Mail Driver:</label>
<label>{{ $t('admin_settings.email.driver') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
<input v-model="mail.driver" placeholder="Type your mail driver" type="text" :class="{'is-error': errors[0]}" />
<input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Mail Host:</label>
<label>{{ $t('admin_settings.email.host') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
<input v-model="mail.host" placeholder="Type your mail host" type="text" :class="{'is-error': errors[0]}" />
<input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Mail Port:</label>
<label>{{ $t('admin_settings.email.port') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
<input v-model="mail.port" placeholder="Type your mail port" type="text" :class="{'is-error': errors[0]}" />
<input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Mail Username:</label>
<label>{{ $t('admin_settings.email.username') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
<input v-model="mail.username" placeholder="Type your mail username" type="text" :class="{'is-error': errors[0]}" />
<input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Mail Password:</label>
<label>{{ $t('admin_settings.email.password') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
<input v-model="mail.password" placeholder="Type your mail password" type="text" :class="{'is-error': errors[0]}" />
<input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Mail Encryption:</label>
<label>{{ $t('admin_settings.email.encryption') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Encryption" rules="required" v-slot="{ errors }">
<SelectInput v-model="mail.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]"/>
<SelectInput v-model="mail.encryption" :options="encryptionList" :placeholder="$t('admin_settings.email.encryption_plac')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
button-style="theme" class="submit-button">
Save Email Settings
{{ $t('admin_settings.email.save_button') }}
</ButtonBase>
</ValidationObserver>
</PageTabGroup>
@@ -100,7 +100,7 @@
},
data() {
return {
isLoading: true,
isLoading: false,
isSendingRequest: false,
encryptionList: [
{
@@ -136,34 +136,19 @@
// Send request to get verify account
axios
.put('/api/settings/email', this.mail)
.then(response => {
// End loading
this.isSendingRequest = false
.then(() => {
events.$emit('toaster', {
type: 'success',
message: 'Your email settings was updated successfully',
message: this.$t('toaster.email_set'),
})
})
.catch(error => {
.finally(() => {
// End loading
this.isSendingRequest = false
})
},
},
mounted() {
axios.get('/api/settings', {
params: {
column: 'app_title|app_description|app_logo|app_favicon'
}
})
.then(response => {
this.isLoading = false
this.app.title = response.data.app_title
})
}
}
</script>

View File

@@ -4,26 +4,35 @@
<!--Personal Information-->
<PageTabGroup>
<div class="form block-form">
<FormLabel>Users and Storage</FormLabel>
<FormLabel>
{{ $t('admin_settings.others.section_user') }}
</FormLabel>
<div class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Storage Limitation:</label>
<small class="input-help">If this value is off, all users will have infinity storage capacity and you won't be <br/>able to charge your users for storage plan.</small>
<label class="input-label">
{{ $t('admin_settings.others.storage_limit') }}:
</label>
<small class="input-help" v-html="$t('admin_settings.others.storage_limit_help')"></small>
</div>
<SwitchInput @input="$updateText('/settings', 'storage_limitation', app.storageLimitation)" v-model="app.storageLimitation" class="switch" :state="app.storageLimitation"/>
<SwitchInput
@input="$updateText('/settings', 'storage_limitation', app.storageLimitation)"
v-model="app.storageLimitation"
class="switch"
:state="app.storageLimitation"
/>
</div>
</div>
</div>
<div class="block-wrapper" v-if="app.storageLimitation">
<label>Default Storage Space for User Accounts:</label>
<label>{{ $t('admin_settings.others.default_storage') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Default Storage Space" rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'storage_default', app.defaultStorage)"
v-model="app.defaultStorage"
min="1"
max="999999999"
placeholder="Set default storage space in GB"
:placeholder="$t('admin_settings.others.default_storage_plac')"
type="number"
:class="{'is-error': errors[0]}"
/>
@@ -34,30 +43,36 @@
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Allow User Registration:</label>
<small class="input-help">You can disable public registration for new users. You will still able to <br/>create new users in administration panel.</small>
<label class="input-label">
{{ $t('admin_settings.others.allow_registration') }}:
</label>
<small class="input-help" v-html="$t('admin_settings.others.allow_registration_help')"></small>
</div>
<SwitchInput @input="$updateText('/settings', 'registration', app.userRegistration)" v-model="app.userRegistration" class="switch" :state="app.userRegistration"/>
<SwitchInput @input="$updateText('/settings', 'registration', app.userRegistration)"
v-model="app.userRegistration"
class="switch"
:state="app.userRegistration"
/>
</div>
</div>
</div>
<FormLabel class="mt-70">Others Settings</FormLabel>
<FormLabel class="mt-70">{{ $t('admin_settings.others.section_others') }}</FormLabel>
<div class="block-wrapper">
<label>Contact Email:</label>
<label>{{ $t('admin_settings.others.contact_email') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Contact Email"
rules="required" v-slot="{ errors }">
<input @input="$updateText('/settings', 'contact_email', app.contactMail)" v-model="app.contactMail"
placeholder="Type your contact email" type="email" :class="{'is-error': errors[0]}"/>
:placeholder="$t('admin_settings.others.contact_email_plac')" type="email" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Google Analytics Code (optional):</label>
<label>{{ $t('admin_settings.others.google_analytics') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Google Analytics Code"
v-slot="{ errors }">
<input @input="$updateText('/settings', 'google_analytics', app.googleAnalytics)" v-model="app.googleAnalytics"
placeholder="Paste your Google Analytics Code"
:placeholder="$t('admin_settings.others.google_analytics_plac')"
type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -138,13 +153,4 @@
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>

View File

@@ -4,22 +4,22 @@
<!--Personal Information-->
<PageTabGroup>
<div class="form block-form">
<FormLabel>Stripe Payments</FormLabel>
<FormLabel>{{ $t('admin_settings.payments.section_payments') }}</FormLabel>
<InfoBox>
<p>Your Stripe credentials is not showed because these values are secret and must not be revealed by stranger. You can change your Stripe credentials in your <b>.env</b> file.</p>
<p v-html="$t('admin_settings.payments.credentials_disclaimer')"></p>
</InfoBox>
<div class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Allow Subscription Payments:</label>
<label class="input-label">{{ $t('admin_settings.payments.allow_payments') }}:</label>
</div>
<SwitchInput @input="$updateText('/settings', 'payments_active', payments.status)" v-model="payments.status" class="switch" :state="payments.status"/>
</div>
</div>
</div>
<div class="block-wrapper">
<label>Stripe webhook URL:</label>
<label>{{ $t('admin_settings.payments.webhook_url') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook URL" rules="required" v-slot="{ errors }">
<input :value="stripeWebhookEndpoint" type="text" disabled/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -102,13 +102,4 @@
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div id="single-page">
<div id="page-content" v-if="! isLoading">
<div id="page-content" v-if="! isLoading && data">
<div class="dashboard-headline">
<div class="logo">
<a href="https://vuefilemanager.com" target="_blank">
@@ -21,7 +21,7 @@
{{ data.license }}
</ColorLabel>
</a>
<a href="https://vuefilemanager.com" target="_blank" class="became-backer">
<a v-if="! config.isDemo" href="https://vuefilemanager.com" target="_blank" class="became-backer">
<div class="icon">
<credit-card-icon size="15"></credit-card-icon>
</div>
@@ -124,6 +124,8 @@
axios.get('/api/dashboard')
.then(response => {
this.data = response.data
})
.finally(() => {
this.isLoading = false
})
}

View File

@@ -6,15 +6,17 @@
<div class="content-page">
<ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
<FormLabel>{{ page.data.attributes.title }}</FormLabel>
<FormLabel>
{{ page.data.attributes.title }}
</FormLabel>
<!--Visible-->
<div class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Visibility:</label>
<small class="input-help">Status of your page visibility on website.</small>
<label class="input-label">{{ $t('admin_pages.form.visibility') }}:</label>
<small class="input-help">{{ $t('admin_pages.form.visibility_help') }}</small>
</div>
<SwitchInput @input="changeStatus" class="switch" :state="page.data.attributes.visibility"/>
</div>
@@ -22,28 +24,28 @@
</div>
<div class="block-wrapper">
<label>Title:</label>
<label>{{ $t('admin_pages.form.title') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
<input @input="$updateText('/pages/' + $route.params.slug, 'title', page.data.attributes.title)" v-model="page.data.attributes.title"
placeholder="Title name" type="text" :class="{'is-error': errors[0]}"/>
:placeholder="$t('admin_pages.form.title_plac')" type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Slug:</label>
<label>{{ $t('admin_pages.form.slug') }}:</label>
<div class="input-wrapper">
<input v-model="page.data.attributes.slug" type="text" disabled/>
</div>
</div>
<div class="block-wrapper">
<label>Title:</label>
<label>{{ $t('admin_pages.form.content') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
<textarea
@input="$updateText('/pages/' + $route.params.slug, 'content', page.data.attributes.content)"
v-model="page.data.attributes.content"
placeholder="Type your content here..."
:placeholder="$t('admin_pages.form.content_plac')"
:class="{'is-error': errors[0]}"
rows="18"
></textarea>

View File

@@ -14,7 +14,7 @@
<settings-icon size="17"></settings-icon>
</div>
<div class="label">
Settings
{{ $t('admin_page_plans.tabs.settings') }}
</div>
</router-link>
@@ -24,7 +24,7 @@
<users-icon size="17"></users-icon>
</div>
<div class="label">
Subscribers
{{ $t('admin_page_plans.tabs.subscribers') }}
</div>
</router-link>
@@ -34,7 +34,7 @@
<trash2-icon size="17"></trash2-icon>
</div>
<div class="label">
Delete Plan
{{ $t('admin_page_plans.tabs.delete') }}
</div>
</router-link>
</div>

View File

@@ -8,52 +8,60 @@
<ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
<div class="form-group">
<FormLabel>Plan Details</FormLabel>
<FormLabel>
{{ $t('admin_page_plans.form.title_details') }}
</FormLabel>
<!--Name-->
<div class="block-wrapper">
<label>Name:</label>
<label>{{ $t('admin_page_plans.form.name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
<input v-model="plan.name" placeholder="Plan name" type="text" :class="{'is-error': errors[0]}"/>
<input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Description-->
<div class="block-wrapper">
<label>Description (optional):</label>
<label>{{ $t('admin_page_plans.form.description') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
<textarea v-model="plan.description" placeholder="Plan description" :class="{'is-error': errors[0]}"/>
<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<FormLabel>Plan Pricing</FormLabel>
<FormLabel>
{{ $t('admin_page_plans.form.title_pricing') }}
</FormLabel>
<!--Price-->
<div class="block-wrapper">
<label>Price:</label>
<label>{{ $t('admin_page_plans.form.price') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Plan price" rules="required" v-slot="{ errors }">
<input v-model="plan.price" placeholder="Plan price" type="number" step="0.01" min="1" max="99999" :class="{'is-error': errors[0]}"/>
<input v-model="plan.price" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="99999"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Storage Capacity-->
<div class="block-wrapper">
<label>Storage Capacity:</label>
<label>{{ $t('admin_page_plans.form.storage') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
<input v-model="plan.capacity" placeholder="Storage capacity" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}"/>
<input v-model="plan.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<small class="input-help">You have to type only number e.g. value '5' means, user will have 5GB of storage capacity.</small>
<small class="input-help">
{{ $t('admin_page_plans.form.storage_helper') }}
</small>
</div>
</div>
<div class="form-group">
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
Create Plan
{{ $t('admin_page_plans.create_plan_button') }}
</ButtonBase>
</div>
</ValidationObserver>
@@ -72,7 +80,7 @@
import ButtonBase from '@/components/FilesView/ButtonBase'
import PageHeader from '@/components/Others/PageHeader'
import {required} from 'vee-validate/dist/rules'
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import {events} from "@/bus"
import axios from 'axios'
@@ -119,13 +127,10 @@
})
.then(response => {
// End loading
this.isLoading = false
// Show toaster
events.$emit('toaster', {
type: 'success',
message: 'Your plan was successfully created!',
message: this.$t('toaster.plan_created'),
})
// Go to User page
@@ -136,29 +141,14 @@
// Validation errors
if (error.response.status == 422) {
// Email validation error
if (error.response.data.errors['email']) {
this.$refs.createPlan.setErrors({
'email': error.response.data.errors['email']
});
}
// Password validation error
if (error.response.data.errors['password']) {
this.$refs.createPlan.setErrors({
'password': error.response.data.errors['password']
});
}
// Password validation error
if (error.response.data.errors['storage_capacity']) {
this.$refs.createPlan.setErrors({
'storage capacity': 'The storage capacity must be lower than 10 digit number.'
'storage capacity': this.$t('errors.capacity_digit')
});
}
} else {
events.$emit('alert:open', {
@@ -167,9 +157,11 @@
})
}
}).finally(() => {
// End loading
this.isLoading = false
})
})
}
},
}

View File

@@ -1,24 +1,19 @@
<template>
<PageTab class="form-fixed-width">
<PageTabGroup>
<FormLabel>Delete Plan</FormLabel>
<FormLabel>
{{ $t('admin_page_plans.form.title_delete') }}
</FormLabel>
<InfoBox>
<p>You can delete plan, but, pay attention!</p>
<p>{{ $t('admin_page_plans.disclaimer_delete_plan') }}</p>
</InfoBox>
<ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form"
class="form block-form">
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
name="Plan name" :rules="'required|is:' + plan.attributes.name">
<ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form" class="form block-form">
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
<label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
<div class="single-line-form">
<input v-model="planName"
placeholder="Type plan name"
type="text"
:class="{'is-error': errors[0]}"
/>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
button-style="danger" class="submit-button">
Delete Plan
<input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'is-error': errors[0]}" />
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
{{ $t('admin_page_plans.delete_plan_button') }}
</ButtonBase>
</div>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -47,15 +42,15 @@
'plan'
],
components: {
FormLabel,
InfoBox,
PageTabGroup,
PageTab,
ValidationProvider,
ValidationObserver,
PageTabGroup,
ButtonBase,
FormLabel,
SetupBox,
required,
InfoBox,
PageTab,
},
data() {
return {
@@ -88,8 +83,8 @@
// Show message
events.$emit('success:open', {
emoji: '👍',
title: 'Plan was deleted',
message: 'Your plan was successfully deleted.',
title: this.$t('popup_deleted_plan.title'),
message: this.$t('popup_deleted_plan.message'),
})
this.$router.push({name: 'Plans'})
@@ -116,14 +111,4 @@
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>

View File

@@ -2,15 +2,17 @@
<PageTab>
<ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
<PageTabGroup>
<FormLabel>Plan details</FormLabel>
<FormLabel>
{{ $t('admin_page_plans.form.title_details') }}
</FormLabel>
<!--Visible-->
<div class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Status:</label>
<small class="input-help">Status of your plan availability on website.</small>
<label class="input-label">{{ $t('admin_page_plans.form.status') }}:</label>
<small class="input-help">{{ $t('admin_page_plans.form.status_help') }}</small>
</div>
<SwitchInput @input="changeStatus" class="switch" :state="plan.attributes.status"/>
</div>
@@ -19,34 +21,36 @@
<!--Name-->
<div class="block-wrapper">
<label>Name:</label>
<label>{{ $t('admin_page_plans.form.name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
<input @input="$updateText('/plans/' + $route.params.id + '/update', 'name', plan.attributes.name)" v-model="plan.attributes.name" placeholder="Plan name" type="text" :class="{'is-error': errors[0]}"/>
<input @input="$updateText('/plans/' + $route.params.id + '/update', 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Description-->
<div class="block-wrapper">
<label>Description (optional):</label>
<label>{{ $t('admin_page_plans.form.description') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
<textarea @input="$updateText('/plans/' + $route.params.id + '/update', 'description', plan.attributes.description)" v-model="plan.attributes.description" placeholder="Plan description" :class="{'is-error': errors[0]}"/>
<textarea @input="$updateText('/plans/' + $route.params.id + '/update', 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Storage Capacity-->
<div class="block-wrapper">
<label>Storage Capacity in GB:</label>
<label>{{ $t('admin_page_plans.form.storage') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
<input @input="$updateText('/plans/' + $route.params.id + '/update', 'capacity', plan.attributes.capacity)" v-model="plan.attributes.capacity" placeholder="Storage capacity" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}"/>
<input @input="$updateText('/plans/' + $route.params.id + '/update', 'capacity', plan.attributes.capacity)" v-model="plan.attributes.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<small class="input-help">You have to type only number e.g. value '5' means, user will have 5GB of storage capacity.</small>
<small class="input-help">
{{ $t('admin_page_plans.form.storage_helper') }}
</small>
</div>
<InfoBox>
<p>Price change for your plan is not available due to Stripe service design. If you wish change your price plan, please, create new plan.</p>
<p>{{ $t('admin_page_plans.disclaimer_edit_price') }}</p>
</InfoBox>
</PageTabGroup>
</ValidationObserver>
@@ -107,13 +111,4 @@
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>

View File

@@ -33,7 +33,7 @@
</DatatableWrapper>
</PageTabGroup>
<InfoBox v-else>
<p>There is no any subscriber yet.</p>
<p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
</InfoBox>
</PageTab>
</template>
@@ -65,7 +65,7 @@
isLoading: false,
columns: [
{
label: 'User',
label: this.$t('admin_page_user.table.name'),
field: 'data.attributes.name',
sortable: true
},
@@ -99,14 +99,4 @@
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>

View File

@@ -12,7 +12,7 @@
<!--Avatar-->
<div class="block-wrapper">
<label>Avatar</label>
<label>{{ $t('admin_page_user.create_user.avatar') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
<ImageInput v-model="user.avatar" :error="errors[0]" />
</ValidationProvider>
@@ -206,7 +206,7 @@
if (error.response.data.errors['storage_capacity']) {
this.$refs.createUser.setErrors({
'storage capacity': 'The storage capacity must be lower than 10 digit number.'
'storage capacity': this.$t('errors.capacity_digit')
});
}
} else {

View File

@@ -8,11 +8,12 @@
<!--Info about active subscription-->
<div v-if="! subscription.canceled" class="state active">
<ListInfo class="list-info">
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" content="Monthly"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')"
:content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" :content="$t('admin_page_user.subscription.interval_mo')"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.created_at')" :content="subscription.attributes.created_at"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.renews_at')" :content="subscription.attributes.ends_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.created_at')" :content="subscription.attributes.created_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.renews_at')" :content="subscription.attributes.ends_at"/>
</ListInfo>
</div>
@@ -21,8 +22,8 @@
<ListInfo class="list-info">
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.canceled_at')" :content="subscription.attributes.canceled_at"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.ends_at')" :content="subscription.attributes.ends_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.attributes.canceled_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.attributes.ends_at"/>
</ListInfo>
</div>
</PageTabGroup>
@@ -83,10 +84,9 @@
this.subscription = response.data.data
this.isLoading = false
}).catch(error => {
if (error.response.status == 404) {
this.isLoading = false
}
}
})
}
}