nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-13 08:45:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

admin settings inputs refactoring

Browse Source
This commit is contained in:
Čarodej
2021-11-23 07:09:03 +01:00
parent d958da933d
commit 0ad8afcfe2
6 changed files with 281 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mix-manifest.json
+22 -6
View File
@@ -14,18 +14,18 @@
"/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=90270d0c5aeb5c50dacf", "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=90270d0c5aeb5c50dacf",
"/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=61e970ffb679245686c3", "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=61e970ffb679245686c3",
"/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=26a26c5593b41f794d32", "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=26a26c5593b41f794d32",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f3246350503786bf3618", "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=70acb48a6c7627c1de7a",
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=aa284736dda7647d5c9e", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=aa284736dda7647d5c9e",
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=6bd4516589f23ec25ae6", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=6bd4516589f23ec25ae6",
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=b1123c792a51f9b3ec11", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=b1123c792a51f9b3ec11",
"/chunks/app-billings.js": "/chunks/app-billings.js?id=a2e8225cb2d71bb233cb", "/chunks/app-billings.js": "/chunks/app-billings.js?id=b929de231c24d2e82389",
"/chunks/app-email.js": "/chunks/app-email.js?id=818ceb6be0fe9f4d06a4", "/chunks/app-email.js": "/chunks/app-email.js?id=c0b15222a239b25c24e9",
"/chunks/app-index.js": "/chunks/app-index.js?id=6c55fe0a70ae4080ae1c", "/chunks/app-index.js": "/chunks/app-index.js?id=6c55fe0a70ae4080ae1c",
"/chunks/app-language.js": "/chunks/app-language.js?id=91e1d30bf7a3c7a54136", "/chunks/app-language.js": "/chunks/app-language.js?id=91e1d30bf7a3c7a54136",
"/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=38b2085e829a84df0e5f", "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=38b2085e829a84df0e5f",
"/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5", "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5",
"/chunks/app-others.js": "/chunks/app-others.js?id=9d013212bbac52d5f2f8", "/chunks/app-others.js": "/chunks/app-others.js?id=9c049ba80e8a889146be",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=af38547bd60f92575c03", "/chunks/app-payments.js": "/chunks/app-payments.js?id=f0f2dec48dc193f73197",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=db54f40c07bdfb86b81e", "/chunks/app-settings.js": "/chunks/app-settings.js?id=db54f40c07bdfb86b81e",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf", "/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf",
"/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81", "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
@@ -721,5 +721,21 @@
"/chunks/users.5bef86aeafe91be3c73d.hot-update.js": "/chunks/users.5bef86aeafe91be3c73d.hot-update.js", "/chunks/users.5bef86aeafe91be3c73d.hot-update.js": "/chunks/users.5bef86aeafe91be3c73d.hot-update.js",
"/chunks/pages.35e66049556a2f1388a3.hot-update.js": "/chunks/pages.35e66049556a2f1388a3.hot-update.js", "/chunks/pages.35e66049556a2f1388a3.hot-update.js": "/chunks/pages.35e66049556a2f1388a3.hot-update.js",
"/chunks/pages.89358421733f488c18c9.hot-update.js": "/chunks/pages.89358421733f488c18c9.hot-update.js", "/chunks/pages.89358421733f488c18c9.hot-update.js": "/chunks/pages.89358421733f488c18c9.hot-update.js",
"/chunks/pages.3857ee94741a4c0f04eb.hot-update.js": "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js" "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js": "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js",
"/chunks/app-appearance.23c94a5e9c4d5655a932.hot-update.js": "/chunks/app-appearance.23c94a5e9c4d5655a932.hot-update.js",
"/chunks/app-billings.fafa1b5774aab9057fd9.hot-update.js": "/chunks/app-billings.fafa1b5774aab9057fd9.hot-update.js",
"/chunks/app-others.fafa1b5774aab9057fd9.hot-update.js": "/chunks/app-others.fafa1b5774aab9057fd9.hot-update.js",
"/chunks/app-payments.16145bda6b9f9bd09826.hot-update.js": "/chunks/app-payments.16145bda6b9f9bd09826.hot-update.js",
"/chunks/app-payments.50e02d5d9399b7eb3875.hot-update.js": "/chunks/app-payments.50e02d5d9399b7eb3875.hot-update.js",
"/chunks/app-payments.8f03d3f4af2ffca93413.hot-update.js": "/chunks/app-payments.8f03d3f4af2ffca93413.hot-update.js",
"/chunks/app-payments.1b098bed5b84f6222ad5.hot-update.js": "/chunks/app-payments.1b098bed5b84f6222ad5.hot-update.js",
"/chunks/app-payments.8c20a203271b2aa80805.hot-update.js": "/chunks/app-payments.8c20a203271b2aa80805.hot-update.js",
"/chunks/app-payments.129a75b63876743900a8.hot-update.js": "/chunks/app-payments.129a75b63876743900a8.hot-update.js",
"/chunks/app-payments.a73ee8581bc859ddd2b6.hot-update.js": "/chunks/app-payments.a73ee8581bc859ddd2b6.hot-update.js",
"/chunks/app-payments.10d448070de9d8313b42.hot-update.js": "/chunks/app-payments.10d448070de9d8313b42.hot-update.js",
"/chunks/app-email.fc8defe74763bbfbcdc3.hot-update.js": "/chunks/app-email.fc8defe74763bbfbcdc3.hot-update.js",
"/chunks/app-email.ef13b40e7b033b5b30f6.hot-update.js": "/chunks/app-email.ef13b40e7b033b5b30f6.hot-update.js",
"/chunks/app-email.efb96547f2fb7485f00a.hot-update.js": "/chunks/app-email.efb96547f2fb7485f00a.hot-update.js",
"/chunks/app-payments.e26c17b73a3347c18e4b.hot-update.js": "/chunks/app-payments.e26c17b73a3347c18e4b.hot-update.js",
"/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js": "/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js"
} }
resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+52 -60
View File
@@ -1,68 +1,60 @@
<template> <template>
<PageTab :is-loading="isLoading"> <PageTab :is-loading="isLoading">
<div v-if="app" class="card shadow-card">
<FormLabel>
{{ $t('admin_settings.appearance.section_general') }}
</FormLabel>
<!--Personal Information--> <AppInputText :title="$t('admin_settings.appearance.title')">
<PageTabGroup v-if="app"> <input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text" class="focus-border-theme input-dark"/>
<div class="form block-form"> </AppInputText>
<div class="card shadow-card"> <AppInputText :title="$t('admin_settings.appearance.description')">
<FormLabel> <input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" class="focus-border-theme input-dark"/>
{{ $t('admin_settings.appearance.section_general') }} </AppInputText>
</FormLabel>
<AppInputText :title="$t('admin_settings.appearance.title')"> <AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')">
<input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text" class="focus-border-theme input-dark"/> <input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"/>
</AppInputText> </AppInputSwitch>
</div>
<AppInputText :title="$t('admin_settings.appearance.description')"> <div v-if="app" class="card shadow-card">
<input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" class="focus-border-theme input-dark"/> <FormLabel>
</AppInputText> {{ $t('Branding') }}
</FormLabel>
<AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')"> <div class="block-wrapper">
<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"/> <label>{{ $t('admin_settings.appearance.logo') }}:</label>
</AppInputSwitch> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
</div> <ImageInput @input="$updateImage('/admin/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" :error="errors[0]"/>
</ValidationProvider>
<div class="card shadow-card"> </div>
<FormLabel> <div class="block-wrapper">
{{ $t('Branding') }} <label>{{ $t('admin_settings.appearance.logo_horizontal') }}:</label>
</FormLabel> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo Horizontal" v-slot="{ errors }">
<div class="block-wrapper"> <ImageInput @input="$updateImage('/admin/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)"
<label>{{ $t('admin_settings.appearance.logo') }}:</label> v-model="app.logo_horizontal" :error="errors[0]"/>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }"> </ValidationProvider>
<ImageInput @input="$updateImage('/admin/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" :error="errors[0]"/> </div>
</ValidationProvider> <div class="block-wrapper">
</div> <label>{{ $t('admin_settings.appearance.favicon') }}:</label>
<div class="block-wrapper"> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<label>{{ $t('admin_settings.appearance.logo_horizontal') }}:</label> <ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo Horizontal" v-slot="{ errors }"> </ValidationProvider>
<ImageInput @input="$updateImage('/admin/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)" </div>
v-model="app.logo_horizontal" :error="errors[0]"/> <div class="block-wrapper">
</ValidationProvider> <label>{{ $t('og_image') }}:</label>
</div> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<div class="block-wrapper"> <ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" :error="errors[0]"/>
<label>{{ $t('admin_settings.appearance.favicon') }}:</label> <small class="input-help">{{ $t('og_image_description') }}</small>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }"> </ValidationProvider>
<ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/> </div>
</ValidationProvider> <div class="block-wrapper">
</div> <label>{{ $t('app_touch_icon') }}:</label>
<div class="block-wrapper"> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<label>{{ $t('og_image') }}:</label> <ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" :error="errors[0]"/>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }"> <small class="input-help">{{ $t('app_touch_icon_description') }}</small>
<ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" :error="errors[0]"/> </ValidationProvider>
<small class="input-help">{{ $t('og_image_description') }}</small> </div>
</ValidationProvider> </div>
</div>
<div class="block-wrapper">
<label>{{ $t('app_touch_icon') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" :error="errors[0]"/>
<small class="input-help">{{ $t('app_touch_icon_description') }}</small>
</ValidationProvider>
</div>
</div>
</div>
</PageTabGroup>
</PageTab> </PageTab>
</template> </template>
resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
-1
View File
@@ -13,7 +13,6 @@
<input @input="$updateText('/admin/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" :placeholder="$t('admin_settings.billings.vat_plac')" type="text" class="focus-border-theme input-dark"/> <input @input="$updateText('/admin/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" :placeholder="$t('admin_settings.billings.vat_plac')" type="text" class="focus-border-theme input-dark"/>
</AppInputText> </AppInputText>
</div> </div>
<div v-if="billingInformation" class="card shadow-card"> <div v-if="billingInformation" class="card shadow-card">
<FormLabel> <FormLabel>
{{ $t('admin_settings.billings.section_billing') }} {{ $t('admin_settings.billings.section_billing') }}
resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+41 -86
View File
@@ -1,76 +1,49 @@
<template> <template>
<PageTab :is-loading="isLoading"> <PageTab :is-loading="isLoading">
<ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="card shadow-card">
<!--Personal Information--> <FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>
<PageTabGroup> <InfoBox>
<ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="form block-form"> <p v-html="$t('admin_settings.email.email_disclaimer')"></p>
</InfoBox>
<div class="card shadow-card"> <ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
<FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel> <AppInputText :title="$t('admin_settings.email.driver')" :error="errors[0]">
<input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<InfoBox> </AppInputText>
<p v-html="$t('admin_settings.email.email_disclaimer')"></p> </ValidationProvider>
</InfoBox> <ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_settings.email.host')" :error="errors[0]">
<div class="block-wrapper"> <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<label>{{ $t('admin_settings.email.driver') }}:</label> </AppInputText>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }"> </ValidationProvider>
<input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" /> <ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> <AppInputText :title="$t('admin_settings.email.port')" :error="errors[0]">
</ValidationProvider> <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
</div> </AppInputText>
</ValidationProvider>
<div class="block-wrapper"> <ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
<label>{{ $t('admin_settings.email.host') }}:</label> <AppInputText :title="$t('admin_settings.email.username')" :error="errors[0]">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }"> <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" /> </AppInputText>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> </ValidationProvider>
</ValidationProvider> <ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
</div> <AppInputText :title="$t('admin_settings.email.password')" :error="errors[0]">
<input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<div class="block-wrapper"> </AppInputText>
<label>{{ $t('admin_settings.email.port') }}:</label> </ValidationProvider>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">
<input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" /> <AppInputText :title="$t('admin_settings.email.encryption')" :error="errors[0]">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> <SelectInput v-model="mail.encryption" :options="encryptionList" :placeholder="$t('admin_settings.email.encryption_plac')" :isError="errors[0]"/>
</ValidationProvider> </AppInputText>
</div> </ValidationProvider>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
<div class="block-wrapper"> {{ $t('admin_settings.email.save_button') }}
<label>{{ $t('admin_settings.email.username') }}:</label> </ButtonBase>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }"> </ValidationObserver>
<input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<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="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<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="$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">
{{ $t('admin_settings.email.save_button') }}
</ButtonBase>
</div>
</ValidationObserver>
</PageTabGroup>
</PageTab> </PageTab>
</template> </template>
<script> <script>
import AppInputText from "../../../../components/Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full' import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail' import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup' import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
@@ -88,6 +61,7 @@
export default { export default {
name: 'AppAppearance', name: 'AppAppearance',
components: { components: {
AppInputText,
ValidationObserver, ValidationObserver,
ValidationProvider, ValidationProvider,
StorageItemDetail, StorageItemDetail,
@@ -161,22 +135,3 @@
} }
} }
</script> </script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
.dark {
}
</style>
resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
-2
View File
@@ -43,7 +43,6 @@
/> />
</AppInputSwitch> </AppInputSwitch>
</div> </div>
<div class="card shadow-card"> <div class="card shadow-card">
<FormLabel> <FormLabel>
{{ $t('admin_settings.others.section_others') }} {{ $t('admin_settings.others.section_others') }}
@@ -65,7 +64,6 @@
<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" /> <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>
</div> </div>
<div class="card shadow-card"> <div class="card shadow-card">
<FormLabel> <FormLabel>
{{ $t('admin_settings.others.section_cache') }} {{ $t('admin_settings.others.section_cache') }}
resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
+166 -207
View File
@@ -1,228 +1,187 @@
<template> <template>
<PageTab :is-loading="isLoading"> <PageTab :is-loading="isLoading">
<!--Stripe Information--> <!--Stripe Information-->
<PageTabGroup v-if="config.stripe_public_key && payments"> <PageTabGroup v-if="config.stripe_public_key && payments">
<div class="form block-form"> <div class="card shadow-card">
<div class="card shadow-card"> <FormLabel>
<FormLabel> {{ $t('admin_settings.payments.section_payments') }}
{{ $t('admin_settings.payments.section_payments') }} </FormLabel>
</FormLabel> <InfoBox>
<InfoBox> <p v-html="$t('admin_settings.payments.credentials_disclaimer')"></p>
<p v-html="$t('admin_settings.payments.credentials_disclaimer')"></p> </InfoBox>
</InfoBox> <AppInputSwitch :title="$t('admin_settings.payments.allow_payments')">
<div class="block-wrapper"> <SwitchInput @input="$updateText('/admin/settings', 'payments_active', payments.status)" v-model="payments.status" class="switch" :state="payments.status" />
<div class="input-wrapper"> </AppInputSwitch>
<div class="inline-wrapper"> <AppInputText :title="$t('admin_settings.payments.webhook_url')">
<div class="switch-label"> <input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled />
<label class="input-label">{{ $t('admin_settings.payments.allow_payments') }}:</label> </AppInputText>
</div> </div>
<SwitchInput @input="$updateText('/admin/settings', 'payments_active', payments.status)" v-model="payments.status" class="switch" :state="payments.status"/> </PageTabGroup>
</div>
</div>
</div>
<div class="block-wrapper">
<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" class="focus-border-theme input-dark" disabled/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
</div>
</PageTabGroup>
<!--Stripe Set up--> <!--Stripe Set up-->
<PageTabGroup v-if="! config.stripe_public_key"> <PageTabGroup v-if="! config.stripe_public_key">
<ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form"> <ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="card shadow-card">
<FormLabel>
<div class="card shadow-card"> {{ $t('admin_settings.payments.stripe_setup') }}
<FormLabel> </FormLabel>
{{ $t('admin_settings.payments.stripe_setup') }} <InfoBox>
</FormLabel> <p v-html="$t('admin_settings.payments.stripe_create_acc')"></p>
</InfoBox>
<InfoBox> <ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }">
<p v-html="$t('admin_settings.payments.stripe_create_acc')"></p> <AppInputText :title="$t('admin_settings.payments.stripe_currency')" :error="errors[0]">
</InfoBox> <SelectInput v-model="stripeCredentials.currency" :options="currencyList" :placeholder="$t('admin_settings.payments.stripe_currency_plac')" :isError="errors[0]" />
</AppInputText>
<div class="block-wrapper"> </ValidationProvider>
<label>{{ $t('admin_settings.payments.stripe_currency') }}:</label> <ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Currency" rules="required" v-slot="{ errors }"> <AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
<SelectInput v-model="stripeCredentials.currency" :options="currencyList" :placeholder="$t('admin_settings.payments.stripe_currency_plac')" :isError="errors[0]"/> <input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> </AppInputText>
</ValidationProvider> </ValidationProvider>
</div> <ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
<div class="block-wrapper"> <input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<label>{{ $t('admin_settings.payments.stripe_pub_key') }}:</label> </AppInputText>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Publishable Key" rules="required" v-slot="{ errors }"> </ValidationProvider>
<input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/> <ValidationProvider tag="div" mode="passive" name="Webhook URL" rules="required" v-slot="{ errors }">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> <AppInputText :title="$t('Webhook URL')" :error="errors[0]">
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>{{ $t('admin_settings.payments.stripe_sec_key') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret Key" rules="required" v-slot="{ errors }">
<input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Webhook URL:</label>
<InfoBox> <InfoBox>
<p v-html="$t('admin_settings.payments.stripe_create_webhook')"></p> <p v-html="$t('admin_settings.payments.stripe_create_webhook')"></p>
</InfoBox> </InfoBox>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook URL" rules="required" v-slot="{ errors }"> <input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled />
<input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled/> </AppInputText>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> </ValidationProvider>
</ValidationProvider> <ValidationProvider tag="div" mode="passive" name="Webhook Secret" rules="required" v-slot="{ errors }">
</div> <AppInputText :title="$t('Webhook Secret')" :error="errors[0]">
<input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<div class="block-wrapper"> </AppInputText>
<label>Webhook Secret:</label> </ValidationProvider>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook Secret" rules="required" v-slot="{ errors }"> <InfoBox v-if="isError" type="error">
<input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/> <p>{{ errorMessage }}</p>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> </InfoBox>
</ValidationProvider> <ButtonBase :loading="isLoading" :disabled="isLoading" type="submit"
</div> button-style="theme" class="submit-button">
{{ submitButtonText }}
<InfoBox v-if="isError" type="error" > </ButtonBase>
<p>{{ errorMessage }}</p> </ValidationObserver>
</InfoBox> </PageTabGroup>
</PageTab>
<ButtonBase :loading="isLoading" :disabled="isLoading" type="submit"
button-style="theme" class="submit-button">
{{ submitButtonText }}
</ButtonBase>
</div>
</ValidationObserver>
</PageTabGroup>
</PageTab>
</template> </template>
<script> <script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full' import AppInputText from "../../../../components/Admin/AppInputText";
import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail' import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup' import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
import SelectInput from '/resources/js/components/Others/Forms/SelectInput' import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput' import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
import ImageInput from '/resources/js/components/Others/Forms/ImageInput' import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
import FormLabel from '/resources/js/components/Others/Forms/FormLabel' import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase' import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import SetupBox from '/resources/js/components/Others/Forms/SetupBox' import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import PageTab from '/resources/js/components/Others/Layout/PageTab' import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox' import PageTab from '/resources/js/components/Others/Layout/PageTab'
import {required} from 'vee-validate/dist/rules' import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {mapGetters} from 'vuex' import {required} from 'vee-validate/dist/rules'
import {events} from '/resources/js/bus' import {mapGetters} from 'vuex'
import axios from 'axios' import {events} from '/resources/js/bus'
import axios from 'axios'
import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
export default { export default {
name: 'AppPayments', name: 'AppPayments',
components: { components: {
ValidationObserver, AppInputSwitch,
ValidationProvider, AppInputText,
StorageItemDetail, ValidationObserver,
PageTabGroup, ValidationProvider,
SwitchInput, StorageItemDetail,
SelectInput, PageTabGroup,
ImageInput, SwitchInput,
ButtonBase, SelectInput,
FormLabel, ImageInput,
SetupBox, ButtonBase,
required, FormLabel,
PageTab, SetupBox,
InfoBox, required,
}, PageTab,
computed: { InfoBox,
...mapGetters(['config', 'currencyList']), },
stripeWebhookEndpoint() { computed: {
return this.config.host + '/stripe/webhook' ...mapGetters(['config', 'currencyList']),
}, stripeWebhookEndpoint() {
submitButtonText() { return this.config.host + '/stripe/webhook'
return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit') },
} submitButtonText() {
}, return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
data() { }
return { },
isLoading: true, data() {
isError: false, return {
errorMessage: '', isLoading: true,
payments: undefined, isError: false,
stripeCredentials: { errorMessage: '',
key: '', payments: undefined,
secret: '', stripeCredentials: {
webhookSecret: '', key: '',
currency: '', secret: '',
}, webhookSecret: '',
} currency: '',
}, },
methods: { }
async stripeCredentialsSubmit() { },
methods: {
async stripeCredentialsSubmit() {
// Validate fields // Validate fields
const isValid = await this.$refs.stripeCredentials.validate(); const isValid = await this.$refs.stripeCredentials.validate();
if (!isValid) return; if (!isValid) return;
// Start loading // Start loading
this.isLoading = true this.isLoading = true
// Send request to get verify account // Send request to get verify account
axios axios
.post('/api/admin/settings/stripe', this.stripeCredentials) .post('/api/admin/settings/stripe', this.stripeCredentials)
.then(() => { .then(() => {
// Store Stripe Public // Store Stripe Public
this.$store.commit('SET_STRIPE_PUBLIC_KEY', this.stripeCredentials.key) this.$store.commit('SET_STRIPE_PUBLIC_KEY', this.stripeCredentials.key)
// Show toaster // Show toaster
events.$emit('toaster', { events.$emit('toaster', {
type: 'success', type: 'success',
message: this.$t('toaster.stripe_set'), message: this.$t('toaster.stripe_set'),
}) })
}) })
.catch(error => { .catch(error => {
if (error.response.status = 401) { if (error.response.status = 401) {
this.isError = true this.isError = true
this.errorMessage = error.response.data.message this.errorMessage = error.response.data.message
} }
}) })
.finally(() => { .finally(() => {
// End loading // End loading
this.isLoading = false this.isLoading = false
}) })
}, },
}, },
mounted() { mounted() {
axios.get('/api/admin/settings', { axios.get('/api/admin/settings', {
params: { params: {
column: 'payments_active|payments_configured' column: 'payments_active|payments_configured'
} }
}) })
.then(response => { .then(response => {
this.isLoading = false this.isLoading = false
this.payments = { this.payments = {
configured: parseInt(response.data.payments_configured), configured: parseInt(response.data.payments_configured),
status: parseInt(response.data.payments_active), status: parseInt(response.data.payments_active),
} }
}) })
} }
} }
</script> </script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
.block-form {
max-width: 100%;
}
</style>