mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
upload request prototype UI
This commit is contained in:
Čarodej
@@ -1,126 +1,217 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true" class="!max-w-2xl mt-6 mb-12">
|
||||
<Headline class="mx-auto max-w-screen-sm !mb-10" title="Setup Wizard" description="Set up your application appearance, analytics, etc.">
|
||||
<settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
|
||||
<AuthContent name="database-credentials" :visible="true" class="mt-6 mb-12 !max-w-2xl">
|
||||
<Headline
|
||||
class="mx-auto !mb-10 max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Set up your application appearance, analytics, etc."
|
||||
>
|
||||
<settings-icon
|
||||
size="40"
|
||||
class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
|
||||
/>
|
||||
</Headline>
|
||||
|
||||
<ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form">
|
||||
<div class="card text-left shadow-card">
|
||||
<FormLabel>General Settings</FormLabel>
|
||||
|
||||
<div class="card shadow-card text-left">
|
||||
<FormLabel>General Settings</FormLabel>
|
||||
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="App Title" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="app.title"
|
||||
placeholder="Type your app title"
|
||||
type="text"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="App Title" :error="errors[0]">
|
||||
<input class="focus-border-theme input-dark" v-model="app.title" placeholder="Type your app title" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="App Description"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="App Description" :error="errors[0]" :is-last="true">
|
||||
<textarea
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="app.description"
|
||||
placeholder="Type your app description"
|
||||
type="text"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
></textarea>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="App Description" :error="errors[0]" :is-last="true">
|
||||
<textarea class="focus-border-theme input-dark" v-model="app.description" placeholder="Type your app description" type="text" :class="{ 'border-red': errors[0] }"></textarea>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="card text-left shadow-card">
|
||||
<FormLabel>Appearance</FormLabel>
|
||||
|
||||
<div class="card shadow-card text-left">
|
||||
<FormLabel>Appearance</FormLabel>
|
||||
<ValidationProvider tag="div" mode="passive" name="Theme Color" v-slot="{ errors }">
|
||||
<AppInputSwitch title="Color Theme">
|
||||
<input v-model="app.color" type="color" />
|
||||
</AppInputSwitch>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Theme Color" v-slot="{ errors }">
|
||||
<AppInputSwitch title="Color Theme">
|
||||
<input v-model="app.color" type="color" />
|
||||
</AppInputSwitch>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
|
||||
<AppInputText title="App Logo (optional)" :error="errors[0]">
|
||||
<ImageInput v-model="app.logo" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
|
||||
<AppInputText title="App Logo (optional)" :error="errors[0]">
|
||||
<ImageInput v-model="app.logo" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
|
||||
<AppInputText title="App Logo Horizontal (optional)" :error="errors[0]">
|
||||
<ImageInput v-model="app.logo_horizontal" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
|
||||
<AppInputText title="App Logo Horizontal (optional)" :error="errors[0]">
|
||||
<ImageInput v-model="app.logo_horizontal" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
|
||||
<AppInputText title="App Favicon (optional)" :error="errors[0]">
|
||||
<ImageInput v-model="app.favicon" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
|
||||
<AppInputText title="App Favicon (optional)" :error="errors[0]">
|
||||
<ImageInput v-model="app.favicon" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
|
||||
<AppInputText
|
||||
title="OG Image (optional)"
|
||||
description="Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627"
|
||||
:error="errors[0]"
|
||||
>
|
||||
<ImageInput v-model="app.og_image" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
|
||||
<AppInputText title="OG Image (optional)" description="Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627" :error="errors[0]">
|
||||
<ImageInput v-model="app.og_image" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
|
||||
<AppInputText
|
||||
title="App Touch Icon (optional)"
|
||||
description="If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156"
|
||||
:error="errors[0]"
|
||||
:is-last="true"
|
||||
>
|
||||
<ImageInput v-model="app.touch_icon" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
|
||||
<AppInputText title="App Touch Icon (optional)" description="If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156" :error="errors[0]" :is-last="true">
|
||||
<ImageInput v-model="app.touch_icon" :error="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="card text-left shadow-card">
|
||||
<FormLabel>Application</FormLabel>
|
||||
|
||||
<div class="card shadow-card text-left">
|
||||
<FormLabel>Application</FormLabel>
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Contact Email"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Contact Email" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="app.contactMail"
|
||||
placeholder="Type your contact email"
|
||||
type="email"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Contact Email" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Contact Email" :error="errors[0]">
|
||||
<input class="focus-border-theme input-dark" v-model="app.contactMail" placeholder="Type your contact email" type="email" :class="{ 'border-red': errors[0] }" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="Google Analytics Code" v-slot="{ errors }">
|
||||
<AppInputText title="Google Analytics Code (optional)" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="app.googleAnalytics"
|
||||
placeholder="Paste your Google Analytics Code"
|
||||
type="text"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Google Analytics Code" v-slot="{ errors }">
|
||||
<AppInputText title="Google Analytics Code (optional)" :error="errors[0]">
|
||||
<input class="focus-border-theme input-dark" v-model="app.googleAnalytics" placeholder="Paste your Google Analytics Code" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<AppInputSwitch
|
||||
title="Storage Limitation"
|
||||
description="If this value is off, all users will have infinity storage capacity and you won't be able to charge your users for storage plan."
|
||||
>
|
||||
<SwitchInput v-model="app.storageLimitation" :state="app.storageLimitation" />
|
||||
</AppInputSwitch>
|
||||
|
||||
<AppInputSwitch title="Storage Limitation" description="If this value is off, all users will have infinity storage capacity and you won't be able to charge your users for storage plan.">
|
||||
<SwitchInput v-model="app.storageLimitation" :state="app.storageLimitation" />
|
||||
</AppInputSwitch>
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Default Storage Space"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText
|
||||
v-if="app.storageLimitation"
|
||||
title="Default Storage Space for Accounts"
|
||||
:error="errors[0]"
|
||||
>
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="app.defaultStorage"
|
||||
min="1"
|
||||
max="999999999"
|
||||
placeholder="Set default storage space in GB"
|
||||
type="number"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Default Storage Space" rules="required" v-slot="{ errors }">
|
||||
<AppInputText v-if="app.storageLimitation" title="Default Storage Space for Accounts" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="app.defaultStorage"
|
||||
min="1"
|
||||
max="999999999"
|
||||
placeholder="Set default storage space in GB"
|
||||
type="number"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<AppInputSwitch
|
||||
title="Allow User Registration"
|
||||
description="You can disable public registration for new users. You will still able to create new users in administration panel."
|
||||
>
|
||||
<SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration" />
|
||||
</AppInputSwitch>
|
||||
|
||||
<AppInputSwitch title="Allow User Registration" description="You can disable public registration for new users. You will still able to create new users in administration panel.">
|
||||
<SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration" />
|
||||
</AppInputSwitch>
|
||||
<AppInputSwitch
|
||||
title="Require Email Verification"
|
||||
description="Turn on, if you want to allow user email verification."
|
||||
:is-last="true"
|
||||
>
|
||||
<SwitchInput v-model="app.userVerification" class="switch" :state="app.userVerification" />
|
||||
</AppInputSwitch>
|
||||
</div>
|
||||
|
||||
<AppInputSwitch title="Require Email Verification" description="Turn on, if you want to allow user email verification." :is-last="true">
|
||||
<SwitchInput v-model="app.userVerification" class="switch" :state="app.userVerification" />
|
||||
</AppInputSwitch>
|
||||
</div>
|
||||
<div v-if="isExtended" class="card text-left shadow-card">
|
||||
<FormLabel>Subscription</FormLabel>
|
||||
|
||||
<div v-if="isExtended" class="card shadow-card text-left">
|
||||
<FormLabel>Subscription</FormLabel>
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Contact Email"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText
|
||||
:title="$t('Subscription Type')"
|
||||
description="Choose your preferred subscription system in advance. After installation and any other user registration, you can't change this setting later."
|
||||
>
|
||||
<SelectInput
|
||||
v-model="app.subscriptionType"
|
||||
:default="app.subscriptionType"
|
||||
:options="$store.getters.subscriptionTypes"
|
||||
:placeholder="$t('Select your subscription type')"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Contact Email" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Subscription Type')" description="Choose your preferred subscription system in advance. After installation and any other user registration, you can't change this setting later.">
|
||||
<SelectInput v-model="app.subscriptionType" :default="app.subscriptionType" :options="$store.getters.subscriptionTypes" :placeholder="$t('Select your subscription type')" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<InfoBox class="!mb-2">
|
||||
<p>Any other subscription related settings you will be able set up later in admin panel.</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
|
||||
<InfoBox class="!mb-2">
|
||||
<p>Any other subscription related settings you will be able set up later in admin panel.</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
|
||||
<AuthButton class="w-full justify-center" icon="chevron-right" text="Save and Create Admin" :loading="isLoading" :disabled="isLoading" />
|
||||
<AuthButton
|
||||
class="w-full justify-center"
|
||||
icon="chevron-right"
|
||||
text="Save and Create Admin"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
@@ -131,10 +222,10 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-va
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import SwitchInput from '../../components/Others/Forms/SwitchInput'
|
||||
import AppInputSwitch from "../../components/Admin/AppInputSwitch"
|
||||
import AppInputSwitch from '../../components/Admin/AppInputSwitch'
|
||||
import ImageInput from '../../components/Others/Forms/ImageInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import AppInputText from "../../components/Admin/AppInputText"
|
||||
import AppInputText from '../../components/Admin/AppInputText'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
@@ -146,8 +237,8 @@ import axios from 'axios'
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
AppInputText,
|
||||
AppInputSwitch,
|
||||
AppInputText,
|
||||
AppInputSwitch,
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
@@ -165,10 +256,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isExtended: undefined,
|
||||
isExtended: undefined,
|
||||
app: {
|
||||
color: '#00BC7E',
|
||||
subscriptionType: undefined,
|
||||
subscriptionType: undefined,
|
||||
title: '',
|
||||
description: '',
|
||||
logo: undefined,
|
||||
@@ -181,15 +272,15 @@ export default {
|
||||
defaultStorage: '5',
|
||||
userRegistration: 1,
|
||||
storageLimitation: 1,
|
||||
userVerification: 0,
|
||||
userVerification: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async appSetupSubmit() {
|
||||
if (this.$root.$data.config.isSetupWizardDemo) {
|
||||
this.$router.push({name: 'AdminAccount'})
|
||||
}
|
||||
if (this.$root.$data.config.isSetupWizardDemo) {
|
||||
this.$router.push({ name: 'AdminAccount' })
|
||||
}
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.appSetup.validate()
|
||||
@@ -212,26 +303,19 @@ export default {
|
||||
formData.append('userRegistration', Boolean(this.app.userRegistration) ? 1 : 0)
|
||||
formData.append('storageLimitation', Boolean(this.app.storageLimitation) ? 1 : 0)
|
||||
|
||||
if (this.app.googleAnalytics)
|
||||
formData.append('googleAnalytics', this.app.googleAnalytics)
|
||||
if (this.app.googleAnalytics) formData.append('googleAnalytics', this.app.googleAnalytics)
|
||||
|
||||
if (this.app.defaultStorage)
|
||||
formData.append('defaultStorage', this.app.defaultStorage)
|
||||
if (this.app.defaultStorage) formData.append('defaultStorage', this.app.defaultStorage)
|
||||
|
||||
if (this.app.logo)
|
||||
formData.append('logo', this.app.logo)
|
||||
if (this.app.logo) formData.append('logo', this.app.logo)
|
||||
|
||||
if (this.app.logo_horizontal)
|
||||
formData.append('logo_horizontal', this.app.logo_horizontal)
|
||||
if (this.app.logo_horizontal) formData.append('logo_horizontal', this.app.logo_horizontal)
|
||||
|
||||
if (this.app.og_image)
|
||||
formData.append('og_image', this.app.og_image)
|
||||
if (this.app.og_image) formData.append('og_image', this.app.og_image)
|
||||
|
||||
if (this.app.touch_icon)
|
||||
formData.append('touch_icon', this.app.touch_icon)
|
||||
if (this.app.touch_icon) formData.append('touch_icon', this.app.touch_icon)
|
||||
|
||||
if (this.app.favicon)
|
||||
formData.append('favicon', this.app.favicon)
|
||||
if (this.app.favicon) formData.append('favicon', this.app.favicon)
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
@@ -256,19 +340,19 @@ export default {
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
|
||||
this.isExtended = localStorage.getItem('license') === 'Extended'
|
||||
this.isExtended = localStorage.getItem('license') === 'Extended'
|
||||
|
||||
if (this.$root.$data.config.isSetupWizardDebug) {
|
||||
this.app.subscriptionType = 'metered'
|
||||
this.app.title = 'VueFileManager'
|
||||
this.app.description = 'Your private cloud storage software build on Laravel & Vue.js.'
|
||||
this.app.contactMail = 'howdy@hi5ve.digital'
|
||||
this.app.googleAnalytics = 'UA-123456789'
|
||||
this.app.defaultStorage = '5'
|
||||
this.app.userRegistration = 1
|
||||
this.app.storageLimitation = 1
|
||||
this.app.userVerification = 0
|
||||
}
|
||||
if (this.$root.$data.config.isSetupWizardDebug) {
|
||||
this.app.subscriptionType = 'metered'
|
||||
this.app.title = 'VueFileManager'
|
||||
this.app.description = 'Your private cloud storage software build on Laravel & Vue.js.'
|
||||
this.app.contactMail = 'howdy@hi5ve.digital'
|
||||
this.app.googleAnalytics = 'UA-123456789'
|
||||
this.app.defaultStorage = '5'
|
||||
this.app.userRegistration = 1
|
||||
this.app.storageLimitation = 1
|
||||
this.app.userVerification = 0
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user