nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

upload request prototype UI

Browse Source
This commit is contained in:
Čarodej
2022-02-16 16:57:57 +01:00
parent 3fafc811fe
commit 394a7b6baf
197 changed files with 6927 additions and 2738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
resources/js/views/SetupWizard/AdminAccount.vue
View File

@@ -1,54 +1,108 @@
<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="Create your admin account.">
<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="Create your admin account."
>
<settings-icon
size="40"
class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
/>
</Headline>
<ValidationObserver @submit.prevent="adminAccountSubmit" ref="adminAccount" v-slot="{ invalid }" tag="form" class="card shadow-card text-left">
<FormLabel>
Create Admin Account
</FormLabel>
<ValidationObserver
@submit.prevent="adminAccountSubmit"
ref="adminAccount"
v-slot="{ invalid }"
tag="form"
class="card text-left shadow-card"
>
<FormLabel> Create Admin Account </FormLabel>
<ValidationProvider tag="div" mode="passive" name="Avatar" v-slot="{ errors }">
<AppInputText title="Avatar (optional)" :error="errors[0]">
<ValidationProvider tag="div" mode="passive" name="Avatar" v-slot="{ errors }">
<AppInputText title="Avatar (optional)" :error="errors[0]">
<ImageInput v-model="admin.avatar" :error="errors[0]" />
</AppInputText>
</ValidationProvider>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Full Name" rules="required" v-slot="{ errors }">
<AppInputText title="Full Name" :error="errors[0]">
<input v-model="admin.name" class="focus-border-theme input-dark" placeholder="Type your full name" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Full Name" rules="required" v-slot="{ errors }">
<AppInputText title="Full Name" :error="errors[0]">
<input
v-model="admin.name"
class="focus-border-theme input-dark"
placeholder="Type your full name"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
<AppInputText title="Email" :error="errors[0]">
<input v-model="admin.email" class="focus-border-theme input-dark" placeholder="Type your email" type="email" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
<AppInputText title="Email" :error="errors[0]">
<input
v-model="admin.email"
class="focus-border-theme input-dark"
placeholder="Type your email"
type="email"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Password" rules="required|confirmed:confirmation" v-slot="{ errors }">
<AppInputText title="Password" :error="errors[0]">
<input v-model="admin.password" class="focus-border-theme input-dark" placeholder="Type your password" type="password" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider
tag="div"
mode="passive"
name="Password"
rules="required|confirmed:confirmation"
v-slot="{ errors }"
>
<AppInputText title="Password" :error="errors[0]">
<input
v-model="admin.password"
class="focus-border-theme input-dark"
placeholder="Type your password"
type="password"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" name="confirmation" rules="required" vid="confirmation" v-slot="{ errors }">
<AppInputText title="Password Confirmation" :error="errors[0]" :is-last="true">
<input v-model="admin.password_confirmation" class="focus-border-theme input-dark" placeholder="Confirm your password" type="password" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider
tag="div"
name="confirmation"
rules="required"
vid="confirmation"
v-slot="{ errors }"
>
<AppInputText title="Password Confirmation" :error="errors[0]" :is-last="true">
<input
v-model="admin.password_confirmation"
class="focus-border-theme input-dark"
placeholder="Confirm your password"
type="password"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</ValidationObserver>
<AuthButton @click.native="adminAccountSubmit" class="w-full justify-center" icon="chevron-right" text="Create Admin and Login" :loading="isLoading" :disabled="isLoading" />
<AuthButton
@click.native="adminAccountSubmit"
class="w-full justify-center"
icon="chevron-right"
text="Create Admin and Login"
:loading="isLoading"
:disabled="isLoading"
/>
</AuthContent>
</AuthContentWrapper>
</template>
<script>
import AppInputText from "../../components/Admin/AppInputText";
import AppInputText from '../../components/Admin/AppInputText'
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
import SelectInput from '../../components/Others/Forms/SelectInput'
@@ -60,7 +114,7 @@ import AuthContent from '../../components/Auth/AuthContent'
import AuthButton from '../../components/Auth/AuthButton'
import { required } from 'vee-validate/dist/rules'
import { SettingsIcon } from 'vue-feather-icons'
import Headline from "../Auth/Headline"
import Headline from '../Auth/Headline'
import { events } from '../../bus'
import axios from 'axios'
@@ -70,7 +124,7 @@ export default {
AuthContentWrapper,
ValidationProvider,
ValidationObserver,
AppInputText,
AppInputText,
SettingsIcon,
SelectInput,
SwitchInput,
@@ -79,7 +133,7 @@ export default {
AuthButton,
FormLabel,
required,
Headline,
Headline,
InfoBox,
},
data() {
@@ -125,12 +179,10 @@ export default {
},
})
.then((response) => {
// Go to sign page
window.location = '/sign-in'
window.location = '/sign-in'
})
.catch((error) => {
if (error.response.status === 500) {
events.$emit('alert:open', {
emoji: '🤔',
@@ -152,22 +204,22 @@ export default {
})
}
}
}).finally(() => this.isLoading = false)
})
.finally(() => (this.isLoading = false))
},
},
created() {
this.$scrollTop()
if (this.$root.$data.config.isSetupWizardDebug) {
this.admin = {
name: 'Jane Doe',
email: 'howdy@hi5ve.digital',
avatar: undefined,
password: 'vuefilemanager',
password_confirmation: 'vuefilemanager',
}
}
if (this.$root.$data.config.isSetupWizardDebug) {
this.admin = {
name: 'Jane Doe',
email: 'howdy@hi5ve.digital',
avatar: undefined,
password: 'vuefilemanager',
password_confirmation: 'vuefilemanager',
}
}
},
}
</script>

350
resources/js/views/SetupWizard/AppSetup.vue
View File

@@ -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>

195
resources/js/views/SetupWizard/Database.vue
View File

@@ -1,79 +1,144 @@
<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 database connection to install application database.">
<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 database connection to install application database."
>
<settings-icon
size="40"
class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
/>
</Headline>
<ValidationObserver @submit.prevent="databaseCredentialsSubmit" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="card shadow-card text-left">
<FormLabel>
Database Credentials
</FormLabel>
<ValidationObserver
@submit.prevent="databaseCredentialsSubmit"
ref="verifyPurchaseCode"
v-slot="{ invalid }"
tag="form"
class="card text-left shadow-card"
>
<FormLabel> Database Credentials </FormLabel>
<InfoBox>
<p>
We strongly recommend use MySQL or MariaDB database. Create new database, set all privileges and get credentials. For those who use cPanel or Plesk, here is
useful resources:
We strongly recommend use MySQL or MariaDB database. Create new database, set all privileges and
get credentials. For those who use cPanel or Plesk, here is useful resources:
</p>
<ul>
<li>
<a href="https://www.inmotionhosting.com/support/edu/cpanel/create-database-2/" target="_blank">1. cPanel - MySQL Database Wizard</a>
<a href="https://docs.plesk.com/en-US/obsidian/customer-guide/65157/" target="_blank">2. Plesk - Website databases</a>
<a
href="https://www.inmotionhosting.com/support/edu/cpanel/create-database-2/"
target="_blank"
>1. cPanel - MySQL Database Wizard</a
>
<a href="https://docs.plesk.com/en-US/obsidian/customer-guide/65157/" target="_blank"
>2. Plesk - Website databases</a
>
</li>
</ul>
</InfoBox>
<ValidationProvider tag="div" mode="passive" name="Connection" rules="required" v-slot="{ errors }">
<AppInputText title="Connection" :error="errors[0]">
<SelectInput
v-model="databaseCredentials.connection"
:options="connectionList"
default="mysql"
placeholder="Select your database connection"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Connection" rules="required" v-slot="{ errors }">
<AppInputText title="Connection" :error="errors[0]">
<SelectInput
v-model="databaseCredentials.connection"
:options="connectionList"
default="mysql"
placeholder="Select your database connection"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
<AppInputText title="Host" :error="errors[0]">
<input v-model="databaseCredentials.host" class="focus-border-theme input-dark" placeholder="Type your database host" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
<AppInputText title="Host" :error="errors[0]">
<input
v-model="databaseCredentials.host"
class="focus-border-theme input-dark"
placeholder="Type your database host"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
<AppInputText title="Port" :error="errors[0]">
<input v-model="databaseCredentials.port" class="focus-border-theme input-dark" placeholder="Type your database port" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
<AppInputText title="Port" :error="errors[0]">
<input
v-model="databaseCredentials.port"
class="focus-border-theme input-dark"
placeholder="Type your database port"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Database Name" rules="required" v-slot="{ errors }">
<AppInputText title="Database Name" :error="errors[0]">
<input v-model="databaseCredentials.name" class="focus-border-theme input-dark" placeholder="Select your database name" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Database Name" rules="required" v-slot="{ errors }">
<AppInputText title="Database Name" :error="errors[0]">
<input
v-model="databaseCredentials.name"
class="focus-border-theme input-dark"
placeholder="Select your database name"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Database Username" rules="required" v-slot="{ errors }">
<AppInputText title="Database Username" :error="errors[0]">
<input v-model="databaseCredentials.username" class="focus-border-theme input-dark" placeholder="Select your database name" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider
tag="div"
mode="passive"
name="Database Username"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Database Username" :error="errors[0]">
<input
v-model="databaseCredentials.username"
class="focus-border-theme input-dark"
placeholder="Select your database name"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Database Password" rules="required" v-slot="{ errors }">
<AppInputText title="Database Password" :error="errors[0]" :is-last="true">
<input v-model="databaseCredentials.password" class="focus-border-theme input-dark" placeholder="Select your database password" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider
tag="div"
mode="passive"
name="Database Password"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Database Password" :error="errors[0]" :is-last="true">
<input
v-model="databaseCredentials.password"
class="focus-border-theme input-dark"
placeholder="Select your database password"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<InfoBox v-if="isError" type="error" style="margin-bottom: 10px">
<p>We couldn't establish database connection. Please double check your database credentials.</p>
<br />
<p>Detailed error: {{ errorMessage }}</p>
</InfoBox>
</ValidationObserver>
<AuthButton @click.native="databaseCredentialsSubmit" class="w-full justify-center" icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading" />
<AuthButton
@click.native="databaseCredentialsSubmit"
class="w-full justify-center"
icon="chevron-right"
:text="submitButtonText"
:loading="isLoading"
:disabled="isLoading"
/>
</AuthContent>
</AuthContentWrapper>
</template>
@@ -82,7 +147,7 @@
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
import SelectInput from '../../components/Others/Forms/SelectInput'
import AppInputText from "../../components/Admin/AppInputText"
import AppInputText from '../../components/Admin/AppInputText'
import FormLabel from '../../components/Others/Forms/FormLabel'
import InfoBox from '../../components/Others/Forms/InfoBox'
import AuthContent from '../../components/Auth/AuthContent'
@@ -99,7 +164,7 @@ export default {
AuthContentWrapper,
ValidationProvider,
ValidationObserver,
AppInputText,
AppInputText,
SettingsIcon,
SelectInput,
AuthContent,
@@ -137,10 +202,10 @@ export default {
},
methods: {
async databaseCredentialsSubmit() {
if (this.$root.$data.config.isSetupWizardDemo) {
this.$router.push({name: 'EnvironmentSetup'})
return
}
if (this.$root.$data.config.isSetupWizardDemo) {
this.$router.push({ name: 'EnvironmentSetup' })
return
}
// Validate fields
const isValid = await this.$refs.verifyPurchaseCode.validate()
@@ -175,16 +240,16 @@ export default {
created() {
this.$scrollTop()
if (this.$root.$data.config.isSetupWizardDebug) {
this.databaseCredentials = {
connection: 'mysql',
host: '127.0.0.1',
port: '3306',
name: 'vuefilemanager-v2',
username: 'root',
password: 'secret',
}
}
if (this.$root.$data.config.isSetupWizardDebug) {
this.databaseCredentials = {
connection: 'mysql',
host: '127.0.0.1',
port: '3306',
name: 'vuefilemanager-v2',
username: 'root',
password: 'secret',
}
}
},
}
</script>

1264
resources/js/views/SetupWizard/EnvironmentSetup.vue
View File

File diff suppressed because it is too large Load Diff

85
resources/js/views/SetupWizard/PurchaseCode.vue
View File

@@ -1,22 +1,63 @@
<template>
<AuthContentWrapper ref="auth" class="h-screen dark:bg-dark-background bg-white">
<AuthContentWrapper ref="auth" class="h-screen bg-white dark:bg-dark-background">
<!--Licence Verify-->
<AuthContent name="licence-verify" :visible="true">
<Headline title="Setup Wizard" description="Please set your purchase code before continue to set up your application.">
<settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
<Headline
title="Setup Wizard"
description="Please set your purchase code before continue to set up your application."
>
<settings-icon
size="40"
class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
/>
</Headline>
<ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0">
<ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Purchase Code" rules="required" v-slot="{ errors }">
<input v-model="purchaseCode" placeholder="Paste your purchase code" type="text" class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground" :class="{ 'border-red': errors[0] }" />
<ValidationObserver
@submit.prevent="verifyPurchaseCode"
ref="verifyPurchaseCode"
v-slot="{ invalid }"
tag="form"
class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
>
<ValidationProvider
tag="div"
mode="passive"
class="w-full text-left"
name="Purchase Code"
rules="required"
v-slot="{ errors }"
>
<input
v-model="purchaseCode"
placeholder="Paste your purchase code"
type="text"
class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
:class="{ 'border-red': errors[0] }"
/>
<span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" text="Verify" class="w-full justify-center md:w-min" :loading="isLoading" :disabled="isLoading" />
<AuthButton
icon="chevron-right"
text="Verify"
class="w-full justify-center md:w-min"
:loading="isLoading"
:disabled="isLoading"
/>
</ValidationObserver>
<p class="block">
<a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank" class="text-theme font-bold">Where I can find purchase code? </a>
<a class="black-link" href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank">Don’t have purchase code? </a>
<a
href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-"
target="_blank"
class="text-theme font-bold"
>Where I can find purchase code?
</a>
<a
class="black-link"
href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986"
target="_blank"
>Don’t have purchase code?
</a>
</p>
</AuthContent>
</AuthContentWrapper>
@@ -55,9 +96,9 @@ export default {
},
methods: {
async verifyPurchaseCode() {
if (this.$root.$data.config.isSetupWizardDemo) {
this.$router.push({name: 'Database'})
}
if (this.$root.$data.config.isSetupWizardDemo) {
this.$router.push({ name: 'Database' })
}
// Validate fields
const isValid = await this.$refs.verifyPurchaseCode.validate()
@@ -76,15 +117,15 @@ export default {
// End loading
this.isLoading = false
console.log(response);
console.log(response)
if (response.data === 'b6896a44017217c36f4a6fdc56699728') {
this.isExtended = true
localStorage.setItem('license', 'Extended')
} else {
this.isExtended = false
localStorage.setItem('license', 'Regular')
}
if (response.data === 'b6896a44017217c36f4a6fdc56699728') {
this.isExtended = true
localStorage.setItem('license', 'Extended')
} else {
this.isExtended = false
localStorage.setItem('license', 'Regular')
}
localStorage.setItem('purchase_code', this.purchaseCode)
@@ -101,7 +142,9 @@ export default {
})
} else if (error.response.status === 404) {
this.$refs.verifyPurchaseCode.setErrors({
'Purchase Code': ['You may have misconfigured the app, please read the readme file and try it again.'],
'Purchase Code': [
'You may have misconfigured the app, please read the readme file and try it again.',
],
})
} else {
this.$refs.verifyPurchaseCode.setErrors({

219
resources/js/views/SetupWizard/StatusCheck.vue
View File

@@ -1,119 +1,146 @@
<template>
<AuthContentWrapper ref="auth">
<!--Server Check-->
<AuthContent :visible="true" class="!max-w-2xl mt-6 mb-12">
<AuthContent :visible="true" class="mt-6 mb-12 !max-w-2xl">
<Headline
class="mx-auto max-w-screen-sm !mb-10"
class="mx-auto !mb-10 max-w-screen-sm"
title="Server Check"
description="At first, we have to check if all modules and setup is ready for running VueFileManager"
>
<settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
<settings-icon
size="40"
class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
/>
</Headline>
<!--PHP version and ini check-->
<div class="card shadow-card">
<FormLabel>
PHP Setup
</FormLabel>
<InfoBox class="!mb-2">
<p>Those PHP settings are needed for accurate running VueFileManager on your server, please check and tweak in your php.ini if needed.</p>
</InfoBox>
<div class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
<div class="text-left">
<b class="text-sm font-bold block">PHP Version</b>
<small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
You need PHP version at least {{ phpVersion.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600" />
<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600' : 'text-red-600'">
{{ phpVersion.current }}
</span>
</div>
</div>
<div v-for="(values, setting, i) in ini" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
<div class="text-left">
<b class="text-sm font-bold block">{{ setting }}</b>
<small v-if="!values.status" class="text-xs text-gray-600">
We recommend set this value at least {{ values.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon v-if="values.status" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600" />
<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600' : 'text-red-600'">
{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
</span>
</div>
</div>
</div>
<!--PHP Extension info-->
<!--PHP version and ini check-->
<div class="card shadow-card">
<FormLabel>
Required PHP Extensions
</FormLabel>
<FormLabel> PHP Setup </FormLabel>
<InfoBox class="!mb-2">
<p>Those PHP modules are needed for accurate running VueFileManager on your server, please check and install if some is missing.</p>
<p>
Those PHP settings are needed for accurate running VueFileManager on your server, please check
and tweak in your php.ini if needed.
</p>
</InfoBox>
<div v-if="modules" v-for="(value, module, i) in modules" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
<b class="text-sm font-bold">
{{ module }}
</b>
<div class="flex items-center">
<check-icon v-if="value" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!value" size="16" class="vue-feather text-red-600"/>
<div
class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
>
<div class="text-left">
<b class="block text-sm font-bold">PHP Version</b>
<small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
You need PHP version at least {{ phpVersion.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-theme" />
<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600" />
<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600' : 'text-red-600'">
{{ value ? 'Module Installed' : 'Missing Module' }}
</span>
</div>
</div>
</div>
<span
class="ml-3 text-sm font-bold"
:class="phpVersion.acceptable ? 'text-green-600' : 'text-red-600'"
>
{{ phpVersion.current }}
</span>
</div>
</div>
<!--API check-->
<div class="card shadow-card">
<FormLabel>
API
</FormLabel>
<div
v-for="(values, setting, i) in ini"
:key="i"
class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
>
<div class="text-left">
<b class="block text-sm font-bold">{{ setting }}</b>
<small v-if="!values.status" class="text-xs text-gray-600">
We recommend set this value at least {{ values.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon v-if="values.status" size="16" class="vue-feather text-theme" />
<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600" />
<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600' : 'text-red-600'">
{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
</span>
</div>
</div>
</div>
<!--PHP Extension info-->
<div class="card shadow-card">
<FormLabel> Required PHP Extensions </FormLabel>
<InfoBox class="!mb-2">
<p>
Those PHP modules are needed for accurate running VueFileManager on your server, please check
and install if some is missing.
</p>
</InfoBox>
<div
v-if="modules"
v-for="(value, module, i) in modules"
:key="i"
class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
>
<b class="text-sm font-bold">
{{ module }}
</b>
<div class="flex items-center">
<check-icon v-if="value" size="16" class="vue-feather text-theme" />
<x-icon v-if="!value" size="16" class="vue-feather text-red-600" />
<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600' : 'text-red-600'">
{{ value ? 'Module Installed' : 'Missing Module' }}
</span>
</div>
</div>
</div>
<!--API check-->
<div class="card shadow-card">
<FormLabel> API </FormLabel>
<InfoBox class="!mb-2">
<p>The check, if your domain is set correctly.</p>
</InfoBox>
<div class="pt-3 flex items-center justify-between">
<div class="text-left">
<b class="text-sm font-bold block">API</b>
<small v-if="isCheckedAPI && !apiRunning" class="text-xs text-gray-600">
We detect, your domain root is not set correctly, please check it.
</small>
</div>
<div v-if="isCheckedAPI" class="flex items-center">
<check-icon v-if="apiRunning" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!apiRunning" size="16" class="vue-feather text-red-600" />
<div class="flex items-center justify-between pt-3">
<div class="text-left">
<b class="block text-sm font-bold">API</b>
<small v-if="isCheckedAPI && !apiRunning" class="text-xs text-gray-600">
We detect, your domain root is not set correctly, please check it.
</small>
</div>
<div v-if="isCheckedAPI" class="flex items-center">
<check-icon v-if="apiRunning" size="16" class="vue-feather text-theme" />
<x-icon v-if="!apiRunning" size="16" class="vue-feather text-red-600" />
<span class="ml-3 text-sm font-bold" :class="apiRunning ? 'text-green-600' : 'text-red-600'">
{{ apiRunning ? 'Working correctly' : "Doesn't work" }}
</span>
</div>
<span v-if="!isCheckedAPI" class="ml-3 text-sm font-bold text-gray-600">Checking your API...</span>
</div>
<span class="ml-3 text-sm font-bold" :class="apiRunning ? 'text-green-600' : 'text-red-600'">
{{ apiRunning ? 'Working correctly' : "Doesn't work" }}
</span>
</div>
<span v-if="!isCheckedAPI" class="ml-3 text-sm font-bold text-gray-600">Checking your API...</span>
</div>
<InfoBox v-if="isError" type="error" class="!mb-2">
<p>We can't proceed to the next step because there are unresolved issues. Please solve it at first and next continue.</p>
<p>
We can't proceed to the next step because there are unresolved issues. Please solve it at first
and next continue.
</p>
</InfoBox>
</div>
</div>
<AuthButton @click.native="lastCheckBeforeNextPage" class="w-full justify-center" icon="chevron-right" text="Awesome, I'm done!" :loading="isLoading" :disabled="isLoading" />
<AuthButton
@click.native="lastCheckBeforeNextPage"
class="w-full justify-center"
icon="chevron-right"
text="Awesome, I'm done!"
:loading="isLoading"
:disabled="isLoading"
/>
</AuthContent>
</AuthContentWrapper>
</template>
@@ -172,9 +199,13 @@ export default {
},
methods: {
lastCheckBeforeNextPage() {
let modulesCheck = Object.values(this.$root.$data.config.statusCheck.modules).every((module) => module === true)
let modulesCheck = Object.values(this.$root.$data.config.statusCheck.modules).every(
(module) => module === true
)
let iniCheck = Object.values(this.$root.$data.config.statusCheck.ini).every((setting) => setting.status === true)
let iniCheck = Object.values(this.$root.$data.config.statusCheck.ini).every(
(setting) => setting.status === true
)
if (modulesCheck && iniCheck && this.apiRunning && this.phpVersion.acceptable) {
this.$router.push({ name: 'PurchaseCode' })
@@ -186,7 +217,7 @@ export default {
axios
.get('/api/ping')
.then((response) => {
this.apiRunning = response.data === 'pong';
this.apiRunning = response.data === 'pong'
})
.catch(() => {
this.apiRunning = false
@@ -198,4 +229,4 @@ export default {
this.pingAPI()
},
}
</script>
</script>