mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon text-theme"/>
|
||||
<settings-icon size="40" class="title-icon text-theme" />
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Create your admin account.</h2>
|
||||
</div>
|
||||
@@ -22,7 +21,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Full Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required" v-slot="{ errors }">
|
||||
<input v-model="admin.name" placeholder="Type your full name" type="text" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="admin.name" placeholder="Type your full name" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -30,7 +29,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Email:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" rules="required" v-slot="{ errors }">
|
||||
<input v-model="admin.email" placeholder="Type your email" type="email" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="admin.email" placeholder="Type your email" type="email" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -38,7 +37,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Password:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Password" rules="required|confirmed:confirmation" v-slot="{ errors }">
|
||||
<input v-model="admin.password" placeholder="Type your password" type="password" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="admin.password" placeholder="Type your password" type="password" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -46,166 +45,156 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Password Confirmation:</label>
|
||||
<ValidationProvider tag="div" class="input-wrapper" name="confirmation" rules="required" vid="confirmation" v-slot="{ errors }">
|
||||
<input v-model="admin.password_confirmation" placeholder="Confirm your password" type="password" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="admin.password_confirmation" placeholder="Confirm your password" type="password" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Create Admin and Login" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" text="Create Admin and Login" :loading="isLoading" :disabled="isLoading" />
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import SwitchInput from "../../components/Others/Forms/SwitchInput";
|
||||
import ImageInput from "../../components/Others/Forms/ImageInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {events} from '../../bus'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import SwitchInput from '../../components/Others/Forms/SwitchInput'
|
||||
import ImageInput from '../../components/Others/Forms/ImageInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { events } from '../../bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
SwitchInput,
|
||||
AuthContent,
|
||||
ImageInput,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
admin: {
|
||||
name: '',
|
||||
email: '',
|
||||
avatar: undefined,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async adminAccountSubmit() {
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
SwitchInput,
|
||||
AuthContent,
|
||||
ImageInput,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
admin: {
|
||||
name: '',
|
||||
email: '',
|
||||
avatar: undefined,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async adminAccountSubmit() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.adminAccount.validate()
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.adminAccount.validate();
|
||||
if (!isValid) return
|
||||
|
||||
if (!isValid) return;
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
// Create form
|
||||
let formData = new FormData()
|
||||
|
||||
// Create form
|
||||
let formData = new FormData()
|
||||
// Add image to form
|
||||
formData.append('name', this.admin.name)
|
||||
formData.append('email', this.admin.email)
|
||||
formData.append('password', this.admin.password)
|
||||
formData.append('password_confirmation', this.admin.password_confirmation)
|
||||
|
||||
// Add image to form
|
||||
formData.append('name', this.admin.name)
|
||||
formData.append('email', this.admin.email)
|
||||
formData.append('password', this.admin.password)
|
||||
formData.append('password_confirmation', this.admin.password_confirmation)
|
||||
formData.append('license', localStorage.getItem('license'))
|
||||
formData.append('purchase_code', localStorage.getItem('purchase_code'))
|
||||
|
||||
formData.append('license', localStorage.getItem('license'))
|
||||
formData.append('purchase_code', localStorage.getItem('purchase_code'))
|
||||
if (this.admin.avatar) formData.append('avatar', this.admin.avatar)
|
||||
|
||||
if (this.admin.avatar)
|
||||
formData.append('avatar', this.admin.avatar)
|
||||
axios
|
||||
.post('/api/setup/admin-setup', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
axios
|
||||
.post('/api/setup/admin-setup', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
// Set login state
|
||||
this.$store.commit('SET_AUTHORIZED', true)
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
if (localStorage.getItem('license') === 'Extended') {
|
||||
this.$store.commit('SET_SAAS', true)
|
||||
}
|
||||
|
||||
// Set login state
|
||||
this.$store.commit('SET_AUTHORIZED', true)
|
||||
|
||||
if (localStorage.getItem('license') === 'Extended') {
|
||||
this.$store.commit('SET_SAAS', true)
|
||||
}
|
||||
|
||||
// Go to files page
|
||||
this.$router.push({name: 'Dashboard'})
|
||||
|
||||
// Remove license from localStorage
|
||||
localStorage.removeItem('purchase_code')
|
||||
localStorage.removeItem('license')
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
if (error.response.status == 401) {
|
||||
|
||||
if (error.response.data.error === 'invalid_client') {
|
||||
events.$emit('alert:open', {
|
||||
emoji: '🤔',
|
||||
title: this.$t('popup_passport_error.title'),
|
||||
message: this.$t('popup_passport_error.message')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (error.response.status == 500) {
|
||||
// Go to files page
|
||||
this.$router.push({ name: 'Dashboard' })
|
||||
|
||||
// Remove license from localStorage
|
||||
localStorage.removeItem('purchase_code')
|
||||
localStorage.removeItem('license')
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status == 401) {
|
||||
if (error.response.data.error === 'invalid_client') {
|
||||
events.$emit('alert:open', {
|
||||
emoji: '🤔',
|
||||
title: this.$t('popup_signup_error.title'),
|
||||
message: this.$t('popup_signup_error.message')
|
||||
title: this.$t('popup_passport_error.title'),
|
||||
message: this.$t('popup_passport_error.message'),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (error.response.status == 500) {
|
||||
events.$emit('alert:open', {
|
||||
emoji: '🤔',
|
||||
title: this.$t('popup_signup_error.title'),
|
||||
message: this.$t('popup_signup_error.message'),
|
||||
})
|
||||
}
|
||||
|
||||
if (error.response.status == 422) {
|
||||
if (error.response.data.errors['email']) {
|
||||
this.$refs.adminAccount.setErrors({
|
||||
Email: error.response.data.errors['email'],
|
||||
})
|
||||
}
|
||||
|
||||
if (error.response.status == 422) {
|
||||
|
||||
if (error.response.data.errors['email']) {
|
||||
|
||||
this.$refs.adminAccount.setErrors({
|
||||
'Email': error.response.data.errors['email']
|
||||
});
|
||||
}
|
||||
|
||||
if (error.response.data.errors['password']) {
|
||||
|
||||
this.$refs.adminAccount.setErrors({
|
||||
'Password': error.response.data.errors['password']
|
||||
});
|
||||
}
|
||||
if (error.response.data.errors['password']) {
|
||||
this.$refs.adminAccount.setErrors({
|
||||
Password: error.response.data.errors['password'],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,18 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Set up your application appearance, analytics, etc."
|
||||
>
|
||||
<Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Set up your application appearance, analytics, etc.">
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
|
||||
<ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form"
|
||||
class="form block-form">
|
||||
<ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<FormLabel>General Settings</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>App Title:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
|
||||
<input v-model="app.title" placeholder="Type your app title" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="app.title" placeholder="Type your app title" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -26,7 +20,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>App Description:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
|
||||
<input v-model="app.description" placeholder="Type your app description" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="app.description" placeholder="Type your app description" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -34,28 +28,28 @@
|
||||
<div class="block-wrapper">
|
||||
<label>App Logo (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
|
||||
<ImageInput v-model="app.logo" :error="errors[0]"/>
|
||||
<ImageInput v-model="app.logo" :error="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>App Logo Horizontal (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
|
||||
<ImageInput v-model="app.logo_horizontal" :error="errors[0]"/>
|
||||
<ImageInput v-model="app.logo_horizontal" :error="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>App Favicon (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
|
||||
<ImageInput v-model="app.favicon" :error="errors[0]"/>
|
||||
<ImageInput v-model="app.favicon" :error="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>OG Image (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
|
||||
<ImageInput v-model="app.og_image" :error="errors[0]"/>
|
||||
<ImageInput v-model="app.og_image" :error="errors[0]" />
|
||||
<small class="input-help">Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627</small>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -63,7 +57,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>App Touch Icon (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
|
||||
<ImageInput v-model="app.touch_icon" :error="errors[0]"/>
|
||||
<ImageInput v-model="app.touch_icon" :error="errors[0]" />
|
||||
<small class="input-help">If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156</small>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -72,19 +66,16 @@
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Contact Email:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Contact Email"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="app.contactMail" placeholder="Type your contact email" type="email" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Contact Email" rules="required" v-slot="{ errors }">
|
||||
<input v-model="app.contactMail" placeholder="Type your contact email" type="email" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Google Analytics Code (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Google Analytics Code"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="app.googleAnalytics" placeholder="Paste your Google Analytics Code"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Google Analytics Code" v-slot="{ errors }">
|
||||
<input v-model="app.googleAnalytics" placeholder="Paste your Google Analytics Code" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -94,9 +85,11 @@
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">Storage Limitation:</label>
|
||||
<small class="input-help">If this value is off, all users will have infinity storage capacity and you won't be able to charge your users for storage plan.</small>
|
||||
<small class="input-help"
|
||||
>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.</small
|
||||
>
|
||||
</div>
|
||||
<SwitchInput v-model="app.storageLimitation" class="switch" :state="app.storageLimitation"/>
|
||||
<SwitchInput v-model="app.storageLimitation" class="switch" :state="app.storageLimitation" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,12 +97,13 @@
|
||||
<div class="block-wrapper" v-if="app.storageLimitation">
|
||||
<label>Default Storage Space for Accounts:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Default Storage Space" rules="required" v-slot="{ errors }">
|
||||
<input v-model="app.defaultStorage"
|
||||
min="1"
|
||||
max="999999999"
|
||||
placeholder="Set default storage space in GB"
|
||||
type="number"
|
||||
:class="{'border-red': errors[0]}"
|
||||
<input
|
||||
v-model="app.defaultStorage"
|
||||
min="1"
|
||||
max="999999999"
|
||||
placeholder="Set default storage space in GB"
|
||||
type="number"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
@@ -120,146 +114,137 @@
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">Allow User Registration:</label>
|
||||
<small class="input-help">You can disable public registration for new users. You will still able to create new users in administration panel.</small>
|
||||
<small class="input-help"
|
||||
>You can disable public registration for new users. You will still able to create new users in administration panel.</small
|
||||
>
|
||||
</div>
|
||||
<SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration"/>
|
||||
<SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Create Admin" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" text="Save and Create Admin" :loading="isLoading" :disabled="isLoading" />
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import SwitchInput from "../../components/Others/Forms/SwitchInput";
|
||||
import ImageInput from "../../components/Others/Forms/ImageInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import {SettingsIcon} from 'vue-feather-icons'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import SwitchInput from '../../components/Others/Forms/SwitchInput'
|
||||
import ImageInput from '../../components/Others/Forms/ImageInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
SwitchInput,
|
||||
AuthContent,
|
||||
ImageInput,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
app: {
|
||||
title: '',
|
||||
description: '',
|
||||
logo: undefined,
|
||||
logo_horizontal: undefined,
|
||||
favicon: undefined,
|
||||
og_image: undefined,
|
||||
touch_icon: undefined,
|
||||
contactMail: '',
|
||||
googleAnalytics: '',
|
||||
defaultStorage: '5',
|
||||
userRegistration: 1,
|
||||
storageLimitation: 1,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async appSetupSubmit() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.appSetup.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Create form
|
||||
let formData = new FormData()
|
||||
|
||||
// Add image to form
|
||||
formData.append('title', this.app.title)
|
||||
formData.append('description', this.app.description)
|
||||
formData.append('contactMail', this.app.contactMail)
|
||||
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.defaultStorage)
|
||||
formData.append('defaultStorage', this.app.defaultStorage)
|
||||
|
||||
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.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.favicon)
|
||||
formData.append('favicon', this.app.favicon)
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/app-setup', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'AdminAccount'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
SwitchInput,
|
||||
AuthContent,
|
||||
ImageInput,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
app: {
|
||||
title: '',
|
||||
description: '',
|
||||
logo: undefined,
|
||||
logo_horizontal: undefined,
|
||||
favicon: undefined,
|
||||
og_image: undefined,
|
||||
touch_icon: undefined,
|
||||
contactMail: '',
|
||||
googleAnalytics: '',
|
||||
defaultStorage: '5',
|
||||
userRegistration: 1,
|
||||
storageLimitation: 1,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async appSetupSubmit() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.appSetup.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Create form
|
||||
let formData = new FormData()
|
||||
|
||||
// Add image to form
|
||||
formData.append('title', this.app.title)
|
||||
formData.append('description', this.app.description)
|
||||
formData.append('contactMail', this.app.contactMail)
|
||||
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.defaultStorage) formData.append('defaultStorage', this.app.defaultStorage)
|
||||
|
||||
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.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.favicon) formData.append('favicon', this.app.favicon)
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/app-setup', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({ name: 'AdminAccount' })
|
||||
})
|
||||
.catch((error) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
</style>
|
||||
|
||||
@@ -1,35 +1,25 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Set up your billing information."
|
||||
>
|
||||
<Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Set up your billing information.">
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
<ValidationObserver @submit.prevent="billingInformationSubmit" ref="billingInformation" v-slot="{ invalid }"
|
||||
tag="form" class="form block-form">
|
||||
</Headline>
|
||||
<ValidationObserver @submit.prevent="billingInformationSubmit" ref="billingInformation" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<FormLabel>Company Information</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Company Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_name" placeholder="Type your company name"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name" rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_name" placeholder="Type your company name" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>VAT Number:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_vat_number" placeholder="Type your VAT number"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number" rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_vat_number" placeholder="Type your VAT number" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -38,19 +28,16 @@
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Billing Country:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Country"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="billingInformation.billing_country" :options="countries" placeholder="Select your billing country" :isError="errors[0]"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Country" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="billingInformation.billing_country" :options="countries" placeholder="Select your billing country" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Billing Address:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_address" placeholder="Type your billing address"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address" rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_address" placeholder="Type your billing address" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -58,19 +45,15 @@
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>Billing City:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_city" placeholder="Type your billing city"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City" rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_city" placeholder="Type your billing city" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Billing Postal Code:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_postal_code"
|
||||
placeholder="Type your billing postal code" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code" rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_postal_code" placeholder="Type your billing postal code" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -78,116 +61,106 @@
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Billing State:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_state" placeholder="Type your billing state"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State" rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_state" placeholder="Type your billing state" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Billing Phone Number (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_phone_number" placeholder="Type your billing phone number"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_phone_number" placeholder="Type your billing phone number" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Create Plans" :loading="isLoading"
|
||||
:disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" text="Save and Create Plans" :loading="isLoading" :disabled="isLoading" />
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import {SettingsIcon} from 'vue-feather-icons'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'BillingsDetail',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['countries']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
billingInformation: {
|
||||
billing_phone_number: '',
|
||||
billing_postal_code: '',
|
||||
billing_vat_number: '',
|
||||
billing_address: '',
|
||||
billing_country: '',
|
||||
billing_state: '',
|
||||
billing_city: '',
|
||||
billing_name: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async billingInformationSubmit() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.billingInformation.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/stripe-billings', this.billingInformation)
|
||||
.then(() => {
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'SubscriptionPlans'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
export default {
|
||||
name: 'BillingsDetail',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['countries']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
billingInformation: {
|
||||
billing_phone_number: '',
|
||||
billing_postal_code: '',
|
||||
billing_vat_number: '',
|
||||
billing_address: '',
|
||||
billing_country: '',
|
||||
billing_state: '',
|
||||
billing_city: '',
|
||||
billing_name: '',
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async billingInformationSubmit() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.billingInformation.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/stripe-billings', this.billingInformation)
|
||||
.then(() => {
|
||||
// Redirect to next step
|
||||
this.$router.push({ name: 'SubscriptionPlans' })
|
||||
})
|
||||
.catch((error) => {})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Set up your database connection to install application database."
|
||||
>
|
||||
<Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Set up your database connection to install application database.">
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
|
||||
<ValidationObserver @submit.prevent="databaseCredentialsSubmit" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<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:</p>
|
||||
<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:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.inmotionhosting.com/support/edu/cpanel/create-database-2/" target="_blank">1. cPanel - MySQL Database Wizard</a>
|
||||
@@ -26,7 +24,13 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Connection:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Connection" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="databaseCredentials.connection" :options="connectionList" default="mysql" placeholder="Select your database connection" :isError="errors[0]"/>
|
||||
<SelectInput
|
||||
v-model="databaseCredentials.connection"
|
||||
:options="connectionList"
|
||||
default="mysql"
|
||||
placeholder="Select your database connection"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -34,7 +38,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Host:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Host" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.host" placeholder="Type your database host" type="text" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="databaseCredentials.host" placeholder="Type your database host" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -42,7 +46,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Port:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Port" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.port" placeholder="Type your database port" type="text" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="databaseCredentials.port" placeholder="Type your database port" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -50,7 +54,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Database Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Database Name" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.name" placeholder="Select your database name" type="text" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="databaseCredentials.name" placeholder="Select your database name" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -58,7 +62,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Database Username:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Database Username" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.username" placeholder="Select your database name" type="text" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="databaseCredentials.username" placeholder="Select your database name" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -66,124 +70,120 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Database Password:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Database Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.password" placeholder="Select your database password" type="text" :class="{'border-red': errors[0]}" />
|
||||
<input v-model="databaseCredentials.password" placeholder="Select your database password" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<br />
|
||||
<p>Detailed error: {{ errorMessage }}</p>
|
||||
</InfoBox>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading" />
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Database',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
export default {
|
||||
name: 'Database',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
computed: {
|
||||
submitButtonText() {
|
||||
return this.isLoading ? 'Testing and Installing Database' : 'Test Connection and Install Database'
|
||||
},
|
||||
computed: {
|
||||
submitButtonText() {
|
||||
return this.isLoading ? 'Testing and Installing Database' : 'Test Connection and Install Database'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
connectionList: [
|
||||
{
|
||||
label: 'MySQL',
|
||||
value: 'mysql',
|
||||
},
|
||||
],
|
||||
databaseCredentials: {
|
||||
connection: 'mysql',
|
||||
host: '',
|
||||
port: '',
|
||||
name: '',
|
||||
username: '',
|
||||
password: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async databaseCredentialsSubmit() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.verifyPurchaseCode.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
this.isError = false
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/database', this.databaseCredentials)
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'InstallationDisclaimer'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
if (error.response.status = 500) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
connectionList: [
|
||||
{
|
||||
label: 'MySQL',
|
||||
value: 'mysql',
|
||||
},
|
||||
],
|
||||
databaseCredentials: {
|
||||
connection: 'mysql',
|
||||
host: '',
|
||||
port: '',
|
||||
name: '',
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async databaseCredentialsSubmit() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.verifyPurchaseCode.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
this.isError = false
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/database', this.databaseCredentials)
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({ name: 'InstallationDisclaimer' })
|
||||
})
|
||||
.catch((error) => {
|
||||
if ((error.response.status = 500)) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Set up your storage driver and email client."
|
||||
>
|
||||
<Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Set up your storage driver and email client.">
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
<ValidationObserver @submit.prevent="EnvironmentSetupSubmit" ref="environmentSetup" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<InfoBox>
|
||||
<p>If you don’t know which storage driver set, keep selected <b>'Local Driver'</b>. For more info, where
|
||||
you can host your files <a href="https://vuefilemanager.com/docs/guide/storage.html#introduction" target="_blank">visit our guide</a>.</p>
|
||||
<p>
|
||||
If you don’t know which storage driver set, keep selected <b>'Local Driver'</b>. For more info, where you can host your files
|
||||
<a href="https://vuefilemanager.com/docs/guide/storage.html#introduction" target="_blank">visit our guide</a>.
|
||||
</p>
|
||||
</InfoBox>
|
||||
|
||||
<FormLabel>Storage Setup</FormLabel>
|
||||
@@ -21,7 +18,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Storage Service:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage Service" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="storage.driver" :options="storageServiceList" default="local" placeholder="Select your storage service" :isError="errors[0]"/>
|
||||
<SelectInput v-model="storage.driver" :options="storageServiceList" default="local" placeholder="Select your storage service" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -30,47 +27,46 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Key:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Key" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.key" placeholder="Paste your key" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="storage.key" placeholder="Paste your key" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Secret:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.secret" placeholder="Paste your secret" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="storage.secret" placeholder="Paste your secret" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Region:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Region" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="storage.region" :options="regionList" :key="storage.driver" placeholder="Select your region" :isError="errors[0]"/>
|
||||
<SelectInput v-model="storage.region" :options="regionList" :key="storage.driver" placeholder="Select your region" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<small class="input-help">
|
||||
Select your region where is your bucket/space created.
|
||||
</small>
|
||||
<small class="input-help"> Select your region where is your bucket/space created. </small>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper" v-if="storage.driver !== 's3'">
|
||||
<label>Endpoint URL:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Endpoint" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.endpoint" placeholder="Type your endpoint" type="text" :class="{'border-red': errors[0]}" readonly/>
|
||||
<input v-model="storage.endpoint" placeholder="Type your endpoint" type="text" :class="{ 'border-red': errors[0] }" readonly />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Bucket:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Bucket" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.bucket" placeholder="Type your bucket name" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="storage.bucket" placeholder="Type your bucket name" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<small class="input-help">
|
||||
Provide your created unique bucket name
|
||||
</small>
|
||||
<small class="input-help"> Provide your created unique bucket name </small>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<InfoBox>
|
||||
<p>Later, you can edit these data in your <b>.env</b> file which is located in app root folder.</p>
|
||||
<p>
|
||||
Later, you can edit these data in your
|
||||
<b>.env</b> file which is located in app root folder.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
|
||||
@@ -79,7 +75,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Driver:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="mail.driver" :options="mailDriverList" default="smtp" placeholder="Select your mail driver" :isError="errors[0]"/>
|
||||
<SelectInput v-model="mail.driver" :options="mailDriverList" default="smtp" placeholder="Select your mail driver" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -87,7 +83,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Host:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.host" placeholder="Type your mail host" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="mail.host" placeholder="Type your mail host" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -95,7 +91,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Port:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.port" placeholder="Type your mail port" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="mail.port" placeholder="Type your mail port" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -103,7 +99,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Username:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.username" placeholder="Type your mail username" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="mail.username" placeholder="Type your mail username" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -111,7 +107,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Password:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.password" placeholder="Type your mail password" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="mail.password" placeholder="Type your mail password" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -119,32 +115,31 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Encryption:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Encryption" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="mail.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]"/>
|
||||
<SelectInput v-model="mail.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Set General Settings" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" text="Save and Set General Settings" :loading="isLoading" :disabled="isLoading" />
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import {SettingsIcon} from 'vue-feather-icons'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
@@ -160,24 +155,20 @@ export default {
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
Headline,
|
||||
},
|
||||
watch: {
|
||||
'storage.driver': function () {
|
||||
this.storage.region = ''
|
||||
},
|
||||
'storage.region': function (val) {
|
||||
if (this.storage.driver === 'spaces')
|
||||
this.storage.endpoint = 'https://' + val + '.digitaloceanspaces.com'
|
||||
if (this.storage.driver === 'spaces') this.storage.endpoint = 'https://' + val + '.digitaloceanspaces.com'
|
||||
|
||||
if (this.storage.driver === 'wasabi')
|
||||
this.storage.endpoint = 'https://s3.' + val + '.wasabisys.com'
|
||||
if (this.storage.driver === 'wasabi') this.storage.endpoint = 'https://s3.' + val + '.wasabisys.com'
|
||||
|
||||
if (this.storage.driver === 'backblaze')
|
||||
this.storage.endpoint = 'https://s3.' + val + '.backblazeb2.com'
|
||||
if (this.storage.driver === 'backblaze') this.storage.endpoint = 'https://s3.' + val + '.backblazeb2.com'
|
||||
|
||||
if (this.storage.driver === 'oss')
|
||||
this.storage.endpoint = 'https://' + val + '.aliyuncs.com'
|
||||
if (this.storage.driver === 'oss') this.storage.endpoint = 'https://' + val + '.aliyuncs.com'
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
@@ -195,65 +186,65 @@ export default {
|
||||
case 'backblaze':
|
||||
return this.backblazeRegions
|
||||
break
|
||||
case 'oss':
|
||||
return this.ossRegions
|
||||
break
|
||||
case 'oss':
|
||||
return this.ossRegions
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
ossRegions: [
|
||||
{
|
||||
label: 'China (Hangzhou)',
|
||||
value: 'oss-cn-hangzhou',
|
||||
},
|
||||
{
|
||||
label: 'China (Shanghai)',
|
||||
value: 'oss-cn-shanghai',
|
||||
},
|
||||
{
|
||||
label: 'China (Qingdao)',
|
||||
value: 'oss-cn-qingdao',
|
||||
},
|
||||
{
|
||||
label: 'China (Beijing)',
|
||||
value: 'oss-cn-beijing',
|
||||
},
|
||||
{
|
||||
label: 'China (Zhangjiakou)',
|
||||
value: 'oss-cn-zhangjiakou',
|
||||
},
|
||||
{
|
||||
label: 'China (Hohhot)',
|
||||
value: 'oss-cn-huhehaote',
|
||||
},
|
||||
{
|
||||
label: 'China (Ulanqab)',
|
||||
value: 'oss-cn-wulanchabu',
|
||||
},
|
||||
{
|
||||
label: 'China (Shenzhen)',
|
||||
value: 'oss-cn-shenzhen',
|
||||
},
|
||||
{
|
||||
label: 'China (Heyuan)',
|
||||
value: 'oss-cn-heyuan',
|
||||
},
|
||||
{
|
||||
label: 'China (Guangzhou)',
|
||||
value: 'oss-cn-guangzhou',
|
||||
},
|
||||
{
|
||||
label: 'China (Chengdu)',
|
||||
value: 'oss-cn-chengdu',
|
||||
},
|
||||
{
|
||||
label: 'China (Hong Kong)',
|
||||
value: 'oss-cn-hongkong',
|
||||
},
|
||||
],
|
||||
ossRegions: [
|
||||
{
|
||||
label: 'China (Hangzhou)',
|
||||
value: 'oss-cn-hangzhou',
|
||||
},
|
||||
{
|
||||
label: 'China (Shanghai)',
|
||||
value: 'oss-cn-shanghai',
|
||||
},
|
||||
{
|
||||
label: 'China (Qingdao)',
|
||||
value: 'oss-cn-qingdao',
|
||||
},
|
||||
{
|
||||
label: 'China (Beijing)',
|
||||
value: 'oss-cn-beijing',
|
||||
},
|
||||
{
|
||||
label: 'China (Zhangjiakou)',
|
||||
value: 'oss-cn-zhangjiakou',
|
||||
},
|
||||
{
|
||||
label: 'China (Hohhot)',
|
||||
value: 'oss-cn-huhehaote',
|
||||
},
|
||||
{
|
||||
label: 'China (Ulanqab)',
|
||||
value: 'oss-cn-wulanchabu',
|
||||
},
|
||||
{
|
||||
label: 'China (Shenzhen)',
|
||||
value: 'oss-cn-shenzhen',
|
||||
},
|
||||
{
|
||||
label: 'China (Heyuan)',
|
||||
value: 'oss-cn-heyuan',
|
||||
},
|
||||
{
|
||||
label: 'China (Guangzhou)',
|
||||
value: 'oss-cn-guangzhou',
|
||||
},
|
||||
{
|
||||
label: 'China (Chengdu)',
|
||||
value: 'oss-cn-chengdu',
|
||||
},
|
||||
{
|
||||
label: 'China (Hong Kong)',
|
||||
value: 'oss-cn-hongkong',
|
||||
},
|
||||
],
|
||||
wasabiRegions: [
|
||||
{
|
||||
label: 'US East 1 (N. Virginia)',
|
||||
@@ -411,10 +402,10 @@ export default {
|
||||
label: 'Backblaze B2 Cloud Storage',
|
||||
value: 'backblaze',
|
||||
},
|
||||
{
|
||||
label: 'Alibaba Cloud OSS',
|
||||
value: 'oss',
|
||||
},
|
||||
{
|
||||
label: 'Alibaba Cloud OSS',
|
||||
value: 'oss',
|
||||
},
|
||||
],
|
||||
encryptionList: [
|
||||
{
|
||||
@@ -471,16 +462,15 @@ export default {
|
||||
username: '',
|
||||
password: '',
|
||||
encryption: '',
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async EnvironmentSetupSubmit() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.environmentSetup.validate();
|
||||
const isValid = await this.$refs.environmentSetup.validate()
|
||||
|
||||
if (!isValid) return;
|
||||
if (!isValid) return
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
@@ -491,16 +481,14 @@ export default {
|
||||
storage: this.storage,
|
||||
mail: this.mail,
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'AppSetup'})
|
||||
this.$router.push({ name: 'AppSetup' })
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
.catch((error) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
@@ -508,7 +496,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,66 +1,43 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Database was installed successfully. Let's set up application, Make sure you have these informations before continue:"
|
||||
>
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Database was installed successfully. Let's set up application, Make sure you have these informations before continue:"
|
||||
>
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
|
||||
<div class="form block-form" v-if="! isLoading">
|
||||
<div class="form block-form" v-if="!isLoading">
|
||||
<InfoBox>
|
||||
<ul v-if="isExtended" style="margin-top: 0" class="information-list">
|
||||
<li>
|
||||
1. Stripe API Credentials
|
||||
</li>
|
||||
<li>
|
||||
2. Billing details for Stripe Subscription Service
|
||||
</li>
|
||||
<li>
|
||||
3. You will create your subscription plans
|
||||
</li>
|
||||
<li>
|
||||
4. Email Account Credentials for sending emails to your users
|
||||
</li>
|
||||
<li>
|
||||
5. If you use external storage service, then you will need set your API credentials
|
||||
</li>
|
||||
<li>
|
||||
6. Some general settings for VueFileManager like Google Analytics, logo, favicon and application name
|
||||
</li>
|
||||
<li>
|
||||
7. You will create admin account
|
||||
</li>
|
||||
<li>1. Stripe API Credentials</li>
|
||||
<li>2. Billing details for Stripe Subscription Service</li>
|
||||
<li>3. You will create your subscription plans</li>
|
||||
<li>4. Email Account Credentials for sending emails to your users</li>
|
||||
<li>5. If you use external storage service, then you will need set your API credentials</li>
|
||||
<li>6. Some general settings for VueFileManager like Google Analytics, logo, favicon and application name</li>
|
||||
<li>7. You will create admin account</li>
|
||||
</ul>
|
||||
<ul v-else style="margin-top: 0" class="information-list">
|
||||
<li>
|
||||
1. Email Account Credentials for sending emails to your users
|
||||
</li>
|
||||
<li>
|
||||
2. If you use external storage service, then you will need set your API credentials
|
||||
</li>
|
||||
<li>
|
||||
3. Some general settings for VueFileManager like Google Analytics, logo, favicon and application name
|
||||
</li>
|
||||
<li>
|
||||
4. You will create admin account
|
||||
</li>
|
||||
<li>1. Email Account Credentials for sending emails to your users</li>
|
||||
<li>2. If you use external storage service, then you will need set your API credentials</li>
|
||||
<li>3. Some general settings for VueFileManager like Google Analytics, logo, favicon and application name</li>
|
||||
<li>4. You will create admin account</li>
|
||||
</ul>
|
||||
</InfoBox>
|
||||
|
||||
<router-link v-if="isExtended" :to="{name: 'SubscriptionService'}" tag="div" class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="I Get It! Let's Set Up Application" :loading="isLoading" :disabled="isLoading"/>
|
||||
<router-link v-if="isExtended" :to="{ name: 'SubscriptionService' }" tag="div" class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="I Get It! Let's Set Up Application" :loading="isLoading" :disabled="isLoading" />
|
||||
</router-link>
|
||||
|
||||
<router-link v-if="! isExtended" :to="{name: 'EnvironmentSetup'}" tag="div" class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="I Get It! Let's Set Up Application" :loading="isLoading" :disabled="isLoading"/>
|
||||
<router-link v-if="!isExtended" :to="{ name: 'EnvironmentSetup' }" tag="div" class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="I Get It! Let's Set Up Application" :loading="isLoading" :disabled="isLoading" />
|
||||
</router-link>
|
||||
</div>
|
||||
</AuthContent>
|
||||
@@ -68,101 +45,98 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import Spinner from "../../components/FilesView/Spinner";
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import Spinner from '../../components/FilesView/Spinner'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'InstallationDisclaimer',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
Spinner,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
isError: false,
|
||||
isExtended: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/purchase-code', {
|
||||
purchaseCode: localStorage.getItem('purchase_code'),
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
this.$scrollTop()
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
if (response.data === 'b6896a44017217c36f4a6fdc56699728') {
|
||||
this.isExtended = true
|
||||
localStorage.setItem('license', 'Extended')
|
||||
} else {
|
||||
this.isExtended = false
|
||||
localStorage.setItem('license', 'Regular')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
if (error.response.status == 400) {
|
||||
this.$router.push({name: 'PurchaseCode'})
|
||||
}
|
||||
})
|
||||
export default {
|
||||
name: 'InstallationDisclaimer',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
Spinner,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
isError: false,
|
||||
isExtended: undefined,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/purchase-code', {
|
||||
purchaseCode: localStorage.getItem('purchase_code'),
|
||||
})
|
||||
.then((response) => {
|
||||
this.$scrollTop()
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
if (response.data === 'b6896a44017217c36f4a6fdc56699728') {
|
||||
this.isExtended = true
|
||||
localStorage.setItem('license', 'Extended')
|
||||
} else {
|
||||
this.isExtended = false
|
||||
localStorage.setItem('license', 'Regular')
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
if (error.response.status == 400) {
|
||||
this.$router.push({ name: 'PurchaseCode' })
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
|
||||
#loader {
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
}
|
||||
#loader {
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.information-list {
|
||||
li {
|
||||
padding: 8px 0;
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
.information-list {
|
||||
li {
|
||||
padding: 8px 0;
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,139 +1,124 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Licence Verify-->
|
||||
<AuthContent name="licence-verify" :visible="true">
|
||||
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Please set your purchase code before continue to set up your application."
|
||||
>
|
||||
<Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Please set your purchase code before continue to set up your application.">
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
|
||||
<ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form inline-form">
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Purchase Code" rules="required" v-slot="{ errors }">
|
||||
<input v-model="purchaseCode" placeholder="Paste your purchase code" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="purchaseCode" placeholder="Paste your purchase code" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
<AuthButton icon="chevron-right" text="Verify" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" text="Verify" :loading="isLoading" :disabled="isLoading" />
|
||||
</ValidationObserver>
|
||||
|
||||
<p class="additional-link">
|
||||
<a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank">
|
||||
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"> 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'PurchaseCode',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
export default {
|
||||
name: 'PurchaseCode',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
purchaseCode: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async verifyPurchaseCode() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.verifyPurchaseCode.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/purchase-code', {
|
||||
purchaseCode: this.purchaseCode,
|
||||
})
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
localStorage.setItem('purchase_code', this.purchaseCode)
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({ name: 'Database' })
|
||||
})
|
||||
.catch((error) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
if (error.response.status == 400) {
|
||||
this.$refs.verifyPurchaseCode.setErrors({
|
||||
'Purchase Code': ['Purchase code is invalid.'],
|
||||
})
|
||||
} 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.'],
|
||||
})
|
||||
} else {
|
||||
this.$refs.verifyPurchaseCode.setErrors({
|
||||
'Purchase Code': ['Something is wrong. Please try again.'],
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
purchaseCode: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async verifyPurchaseCode() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.verifyPurchaseCode.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/purchase-code', {
|
||||
purchaseCode: this.purchaseCode,
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
localStorage.setItem('purchase_code', this.purchaseCode)
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'Database'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
if (error.response.status == 400) {
|
||||
this.$refs.verifyPurchaseCode.setErrors({
|
||||
'Purchase Code': ['Purchase code is invalid.']
|
||||
});
|
||||
} 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.']
|
||||
});
|
||||
} else {
|
||||
this.$refs.verifyPurchaseCode.setErrors({
|
||||
'Purchase Code': ['Something is wrong. Please try again.']
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
|
||||
.additional-link {
|
||||
.black-link {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-form input {
|
||||
min-width: 380px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
.additional-link {
|
||||
|
||||
.black-link {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-form input {
|
||||
min-width: 380px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
.additional-link {
|
||||
|
||||
.black-link {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,95 +1,92 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Server Check"
|
||||
description="At first, we have to check if all modules and setup is ready for running VueFileManager"
|
||||
>
|
||||
<Headline
|
||||
class="container mx-auto 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="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
|
||||
<div class="form block-form">
|
||||
|
||||
<!--PHP Extension info-->
|
||||
<!--PHP Extension info-->
|
||||
<FormLabel>Required PHP Extensions</FormLabel>
|
||||
<InfoBox>
|
||||
<p>Those PHP modules are needed for accurate running VueFileManager on your server, please check and install if some is missing.</p>
|
||||
</InfoBox>
|
||||
|
||||
<ul v-if="modules" class="check-list">
|
||||
<li v-for="(value, module, i) in modules" :key="i" class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter capitalize">{{ module }}</b>
|
||||
</div>
|
||||
<div class="status" :class="value ? 'success' : 'danger'">
|
||||
<check-icon v-if="value" size="16" />
|
||||
<x-icon v-if="! value" size="16" />
|
||||
<span class="note">{{ value ? 'Module Installed' : 'Missing Module' }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="modules" class="check-list">
|
||||
<li v-for="(value, module, i) in modules" :key="i" class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter capitalize">{{ module }}</b>
|
||||
</div>
|
||||
<div class="status" :class="value ? 'success' : 'danger'">
|
||||
<check-icon v-if="value" size="16" />
|
||||
<x-icon v-if="!value" size="16" />
|
||||
<span class="note">{{ value ? 'Module Installed' : 'Missing Module' }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--PHP version and ini check-->
|
||||
<!--PHP version and ini check-->
|
||||
<FormLabel>PHP Version and php.ini</FormLabel>
|
||||
<InfoBox>
|
||||
<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>
|
||||
|
||||
<ul class="check-list">
|
||||
<li class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter">PHP Version</b>
|
||||
<small v-if="! phpVersion.acceptable" class="help">You need PHP version at least {{ phpVersion.minimal }}.</small>
|
||||
</div>
|
||||
<div class="status" :class="phpVersion.acceptable ? 'success' : 'danger'">
|
||||
<check-icon v-if="phpVersion.acceptable" size="16" />
|
||||
<x-icon v-if="! phpVersion.acceptable" size="16" />
|
||||
<span class="note">{{ phpVersion.current }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<ul class="check-list">
|
||||
<li class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter">PHP Version</b>
|
||||
<small v-if="!phpVersion.acceptable" class="help">You need PHP version at least {{ phpVersion.minimal }}.</small>
|
||||
</div>
|
||||
<div class="status" :class="phpVersion.acceptable ? 'success' : 'danger'">
|
||||
<check-icon v-if="phpVersion.acceptable" size="16" />
|
||||
<x-icon v-if="!phpVersion.acceptable" size="16" />
|
||||
<span class="note">{{ phpVersion.current }}</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li v-for="(values, setting, i) in ini" :key="i" class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter">{{ setting }}</b>
|
||||
<small v-if="! values.status" class="help">We recommend set this value at least {{ values.minimal }}.</small>
|
||||
</div>
|
||||
<div class="status" :class="values.status ? 'success' : 'danger'">
|
||||
<check-icon v-if="values.status" size="16" />
|
||||
<x-icon v-if="! values.status" size="16" />
|
||||
<span class="note">{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<li v-for="(values, setting, i) in ini" :key="i" class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter">{{ setting }}</b>
|
||||
<small v-if="!values.status" class="help">We recommend set this value at least {{ values.minimal }}.</small>
|
||||
</div>
|
||||
<div class="status" :class="values.status ? 'success' : 'danger'">
|
||||
<check-icon v-if="values.status" size="16" />
|
||||
<x-icon v-if="!values.status" size="16" />
|
||||
<span class="note">{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--API check-->
|
||||
<FormLabel>API</FormLabel>
|
||||
<!--API check-->
|
||||
<FormLabel>API</FormLabel>
|
||||
<InfoBox>
|
||||
<p>The check, if your domain is set correctly.</p>
|
||||
</InfoBox>
|
||||
|
||||
<ul class="check-list">
|
||||
<li class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter">API</b>
|
||||
<small v-if="isCheckedAPI && ! apiRunning" class="help">We detect, your domain root is not set correctly, please check it.</small>
|
||||
</div>
|
||||
<div v-if="isCheckedAPI" class="status" :class="apiRunning ? 'success' : 'danger'">
|
||||
<check-icon v-if="apiRunning" size="16" />
|
||||
<x-icon v-if="! apiRunning" size="16" />
|
||||
<span class="note">{{ apiRunning ? 'Working correctly' : "Doesn't work" }}</span>
|
||||
</div>
|
||||
<div v-if="! isCheckedAPI" class="status">
|
||||
<span class="note">Checking your API...</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="check-list">
|
||||
<li class="check-item">
|
||||
<div class="content">
|
||||
<b class="parameter">API</b>
|
||||
<small v-if="isCheckedAPI && !apiRunning" class="help">We detect, your domain root is not set correctly, please check it.</small>
|
||||
</div>
|
||||
<div v-if="isCheckedAPI" class="status" :class="apiRunning ? 'success' : 'danger'">
|
||||
<check-icon v-if="apiRunning" size="16" />
|
||||
<x-icon v-if="!apiRunning" size="16" />
|
||||
<span class="note">{{ apiRunning ? 'Working correctly' : "Doesn't work" }}</span>
|
||||
</div>
|
||||
<div v-if="!isCheckedAPI" class="status">
|
||||
<span class="note">Checking your API...</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<InfoBox v-if="isError" type="error" style="margin-bottom: 10px">
|
||||
<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 class="submit-wrapper">
|
||||
@@ -101,162 +98,156 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import {SettingsIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import {
|
||||
CheckIcon,
|
||||
XIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { CheckIcon, XIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'StatusCheck',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
CheckIcon,
|
||||
Headline,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
modules() {
|
||||
return this.$root.$data.config.statusCheck.modules
|
||||
},
|
||||
ini() {
|
||||
return this.$root.$data.config.statusCheck.ini
|
||||
},
|
||||
phpVersion() {
|
||||
return this.$root.$data.config.statusCheck.php_version
|
||||
},
|
||||
isCheckedAPI() {
|
||||
return typeof this.apiRunning !== 'undefined'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
apiRunning: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
lastCheckBeforeNextPage() {
|
||||
let modulesCheck = Object
|
||||
.values(this.$root.$data.config.statusCheck.modules)
|
||||
.every(module => module === true)
|
||||
export default {
|
||||
name: 'StatusCheck',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
CheckIcon,
|
||||
Headline,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
modules() {
|
||||
return this.$root.$data.config.statusCheck.modules
|
||||
},
|
||||
ini() {
|
||||
return this.$root.$data.config.statusCheck.ini
|
||||
},
|
||||
phpVersion() {
|
||||
return this.$root.$data.config.statusCheck.php_version
|
||||
},
|
||||
isCheckedAPI() {
|
||||
return typeof this.apiRunning !== 'undefined'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
apiRunning: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
lastCheckBeforeNextPage() {
|
||||
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'})
|
||||
} else {
|
||||
this.isError = true
|
||||
}
|
||||
},
|
||||
pingAPI() {
|
||||
axios.get('/api/setup/ping')
|
||||
.then(response => {
|
||||
if (response.data === 'pong') {
|
||||
this.apiRunning = true
|
||||
} else {
|
||||
this.apiRunning = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.apiRunning = false
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
this.pingAPI()
|
||||
}
|
||||
}
|
||||
if (modulesCheck && iniCheck && this.apiRunning && this.phpVersion.acceptable) {
|
||||
this.$router.push({ name: 'PurchaseCode' })
|
||||
} else {
|
||||
this.isError = true
|
||||
}
|
||||
},
|
||||
pingAPI() {
|
||||
axios
|
||||
.get('/api/setup/ping')
|
||||
.then((response) => {
|
||||
if (response.data === 'pong') {
|
||||
this.apiRunning = true
|
||||
} else {
|
||||
this.apiRunning = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.apiRunning = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
this.pingAPI()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
|
||||
.check-list {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
padding: 5px 20px;
|
||||
margin-bottom: 50px;
|
||||
.check-list {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
padding: 5px 20px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
.check-item {
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
.check-item {
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.note {
|
||||
margin-left: 10px;
|
||||
@include font-size(12);
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
}
|
||||
.note {
|
||||
margin-left: 10px;
|
||||
@include font-size(12);
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
&.success {
|
||||
.note {
|
||||
color: #00BC7E;
|
||||
}
|
||||
&.success {
|
||||
.note {
|
||||
color: #00bc7e;
|
||||
}
|
||||
|
||||
polyline {
|
||||
color: #00BC7E;
|
||||
}
|
||||
}
|
||||
polyline {
|
||||
color: #00bc7e;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
.note {
|
||||
color: #fd397a;
|
||||
}
|
||||
&.danger {
|
||||
.note {
|
||||
color: #fd397a;
|
||||
}
|
||||
|
||||
line {
|
||||
color: #fd397a;
|
||||
}
|
||||
}
|
||||
}
|
||||
line {
|
||||
color: #fd397a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parameter {
|
||||
@include font-size(14);
|
||||
}
|
||||
.parameter {
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.help {
|
||||
@include font-size(12);
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.help {
|
||||
@include font-size(12);
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Set up your database credentials."
|
||||
>
|
||||
<Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Set up your database credentials.">
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
|
||||
<ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<InfoBox>
|
||||
<p>If you don’t have stripe account, please <a href="https://dashboard.stripe.com/register" target="_blank">register here</a> and get your Publishable Key, Secret Key and create your webhook.</p>
|
||||
<p>
|
||||
If you don’t have stripe account, please
|
||||
<a href="https://dashboard.stripe.com/register" target="_blank">register here</a>
|
||||
and get your Publishable Key, Secret Key and create your webhook.
|
||||
</p>
|
||||
</InfoBox>
|
||||
|
||||
<FormLabel>Stripe Setup</FormLabel>
|
||||
@@ -22,7 +20,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Currency:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Currency" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="stripeCredentials.currency" :options="currencyList" placeholder="Select your Stripe currency" :isError="errors[0]"/>
|
||||
<SelectInput v-model="stripeCredentials.currency" :options="currencyList" placeholder="Select your Stripe currency" :isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -32,7 +30,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Publishable Key:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Publishable Key" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.key" placeholder="Paste your publishable key" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="stripeCredentials.key" placeholder="Paste your publishable key" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -40,22 +38,24 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Secret Key:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret Key" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.secret" placeholder="Paste your secret key" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="stripeCredentials.secret" placeholder="Paste your secret key" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<FormLabel class="mt-70">Stripe Webhook</FormLabel>
|
||||
<InfoBox>
|
||||
<p>You have to create webhook endpoint in your Stripe Dashboard. You can find it in <b>Dashboard -> Developers -> Webhooks -> Add Endpoint</b>. In Endpoint URL
|
||||
please copy and paste url bellow. Make sure, this url is your public domain, not localhost. In events section, please click on <b>receive all events</b>.
|
||||
That's all.</p>
|
||||
<p>
|
||||
You have to create webhook endpoint in your Stripe Dashboard. You can find it in
|
||||
<b>Dashboard -> Developers -> Webhooks -> Add Endpoint</b>. In Endpoint URL please copy and paste url bellow. Make sure, this url is your public domain, not
|
||||
localhost. In events section, please click on <b>receive all events</b>. That's all.
|
||||
</p>
|
||||
</InfoBox>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Endpoint URL:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook URL" rules="required" v-slot="{ errors }">
|
||||
<input :value="stripeWebhookEndpoint" type="text" disabled/>
|
||||
<input :value="stripeWebhookEndpoint" type="text" disabled />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Webhook Secret:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook Secret" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.webhookSecret" placeholder="Type your stripe webhook secret" type="text" :class="{'border-red': errors[0]}"/>
|
||||
<input v-model="stripeCredentials.webhookSecret" placeholder="Type your stripe webhook secret" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -73,110 +73,106 @@
|
||||
</InfoBox>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading" />
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
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 {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
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 { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'StripeCredentials',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
export default {
|
||||
name: 'StripeCredentials',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
Headline,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'currencyList']),
|
||||
stripeWebhookEndpoint() {
|
||||
return this.config.host + '/stripe/webhook'
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'currencyList']),
|
||||
stripeWebhookEndpoint() {
|
||||
return this.config.host + '/stripe/webhook'
|
||||
submitButtonText() {
|
||||
return this.isLoading ? 'Testing Stripe Connection' : 'Save and Set Billings'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
stripeCredentials: {
|
||||
key: '',
|
||||
secret: '',
|
||||
webhookSecret: '',
|
||||
currency: '',
|
||||
},
|
||||
submitButtonText() {
|
||||
return this.isLoading ? 'Testing Stripe Connection' : 'Save and Set Billings'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
stripeCredentials: {
|
||||
key: '',
|
||||
secret: '',
|
||||
webhookSecret: '',
|
||||
currency: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async stripeCredentialsSubmit() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.stripeCredentials.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/stripe-credentials', this.stripeCredentials)
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Store Stripe Public
|
||||
this.$store.commit('SET_STRIPE_PUBLIC_KEY', this.stripeCredentials.key)
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'BillingsDetail'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
if (error.response.status = 401) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async stripeCredentialsSubmit() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.stripeCredentials.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/stripe-credentials', this.stripeCredentials)
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Store Stripe Public
|
||||
this.$store.commit('SET_STRIPE_PUBLIC_KEY', this.stripeCredentials.key)
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({ name: 'BillingsDetail' })
|
||||
})
|
||||
.catch((error) => {
|
||||
if ((error.response.status = 401)) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="Set up plans for your customers."
|
||||
>
|
||||
<Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Set up plans for your customers.">
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
|
||||
<ValidationObserver @submit.prevent="subscriptionPlansSubmit" ref="subscriptionPlans" v-slot="{ invalid }"
|
||||
tag="form" class="form block-form">
|
||||
<ValidationObserver @submit.prevent="subscriptionPlansSubmit" ref="subscriptionPlans" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<FormLabel>Create your plans</FormLabel>
|
||||
<InfoBox>
|
||||
<p>Your plans will be <b>sorted automatically</b> in ascent order by plan price. All plans is automatically created as monthly plans.</p>
|
||||
@@ -25,56 +18,53 @@
|
||||
<b class="duplicator-title">{{ index }}. Plan</b>
|
||||
<div class="block-wrapper">
|
||||
<label>Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.attributes.name" placeholder="Type your plan name"
|
||||
type="text" :class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.attributes.name" placeholder="Type your plan name" type="text" :class="{ 'border-red': errors[0] }" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Description (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description"
|
||||
v-slot="{ errors }">
|
||||
<textarea v-model="plan.attributes.description"
|
||||
placeholder="Type your plan description" :class="{'border-red': errors[0]}"></textarea>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
|
||||
<textarea v-model="plan.attributes.description" placeholder="Type your plan description" :class="{ 'border-red': errors[0] }"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Price:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Price"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.attributes.price" placeholder="Type your plan price" type="number"
|
||||
step="0.01" min="1" max="999999999999"
|
||||
:class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Price" rules="required" v-slot="{ errors }">
|
||||
<input
|
||||
v-model="plan.attributes.price"
|
||||
placeholder="Type your plan price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="1"
|
||||
max="999999999999"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Storage Capacity:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage Capacity"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.attributes.capacity"
|
||||
min="1"
|
||||
max="999999999"
|
||||
placeholder="Type storage capacity in GB"
|
||||
type="number"
|
||||
:class="{'border-red': errors[0]}"/>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage Capacity" rules="required" v-slot="{ errors }">
|
||||
<input
|
||||
v-model="plan.attributes.capacity"
|
||||
min="1"
|
||||
max="999999999"
|
||||
placeholder="Type storage capacity in GB"
|
||||
type="number"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ButtonBase
|
||||
@click.native="addRow"
|
||||
class="duplicator-add-button"
|
||||
button-style="theme-solid"
|
||||
>Add New Plan
|
||||
</ButtonBase>
|
||||
<ButtonBase @click.native="addRow" class="duplicator-add-button" button-style="theme-solid">Add New Plan </ButtonBase>
|
||||
</div>
|
||||
|
||||
<InfoBox v-if="isError" type="error" style="margin-top: 40px">
|
||||
@@ -82,8 +72,7 @@
|
||||
</InfoBox>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" :text="submitButtonText" :loading="isLoading"
|
||||
:disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading" />
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
@@ -91,120 +80,116 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import SelectInput from "../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../components/Others/Forms/FormLabel";
|
||||
import ButtonBase from "../../components/FilesView/ButtonBase";
|
||||
import InfoBox from "../../components/Others/Forms/InfoBox";
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import {SettingsIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {XIcon} from 'vue-feather-icons'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '../../components/FilesView/ButtonBase'
|
||||
import InfoBox from '../../components/Others/Forms/InfoBox'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { XIcon } from 'vue-feather-icons'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'subscriptionPlans',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
ButtonBase,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
XIcon,
|
||||
Headline,
|
||||
export default {
|
||||
name: 'subscriptionPlans',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
ButtonBase,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
XIcon,
|
||||
Headline,
|
||||
},
|
||||
computed: {
|
||||
submitButtonText() {
|
||||
return this.isLoading ? 'Creating Subscription Stripe Plans' : 'Save and Go Next'
|
||||
},
|
||||
computed: {
|
||||
submitButtonText() {
|
||||
return this.isLoading ? 'Creating Subscription Stripe Plans' : 'Save and Go Next'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
subscriptionPlans: [
|
||||
{
|
||||
id: 1,
|
||||
type: 'plan',
|
||||
attributes: {
|
||||
name: '',
|
||||
description: '',
|
||||
price: '',
|
||||
capacity: '',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async subscriptionPlansSubmit() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.subscriptionPlans.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
this.isError = false
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/stripe-plans', {
|
||||
plans: this.subscriptionPlans
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'EnvironmentSetup'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
if (error.response.status = 500) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
addRow() {
|
||||
this.subscriptionPlans.push({
|
||||
id: Math.floor(Math.random() * 10000000),
|
||||
type: 'plans',
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
subscriptionPlans: [
|
||||
{
|
||||
id: 1,
|
||||
type: 'plan',
|
||||
attributes: {
|
||||
name: '',
|
||||
description: '',
|
||||
price: '',
|
||||
capacity: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async subscriptionPlansSubmit() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.subscriptionPlans.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
this.isError = false
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/stripe-plans', {
|
||||
plans: this.subscriptionPlans,
|
||||
})
|
||||
.then(() => {
|
||||
// Redirect to next step
|
||||
this.$router.push({ name: 'EnvironmentSetup' })
|
||||
})
|
||||
.catch((error) => {
|
||||
if ((error.response.status = 500)) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
})
|
||||
},
|
||||
removeRow(plan) {
|
||||
this.subscriptionPlans = this.subscriptionPlans.filter(item => item.id !== plan.id)
|
||||
},
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
addRow() {
|
||||
this.subscriptionPlans.push({
|
||||
id: Math.floor(Math.random() * 10000000),
|
||||
type: 'plans',
|
||||
attributes: {
|
||||
name: '',
|
||||
description: '',
|
||||
price: '',
|
||||
capacity: '',
|
||||
},
|
||||
})
|
||||
},
|
||||
removeRow(plan) {
|
||||
this.subscriptionPlans = this.subscriptionPlans.filter((item) => item.id !== plan.id)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
</style>
|
||||
|
||||
@@ -1,27 +1,25 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Licence Verify-->
|
||||
<AuthContent name="subscription-service" :visible="true">
|
||||
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="You can charge users for storage space by monthly billing plans. Please, select your charging service or skip this step if you don't want charge users:"
|
||||
>
|
||||
<Headline
|
||||
class="container mx-auto max-w-screen-sm"
|
||||
title="Setup Wizard"
|
||||
description="You can charge users for storage space by monthly billing plans. Please, select your charging service or skip this step if you don't want charge users:"
|
||||
>
|
||||
<settings-icon size="40" class="title-icon text-theme mx-auto" />
|
||||
</Headline>
|
||||
</Headline>
|
||||
|
||||
<div class="services">
|
||||
<router-link :to="{name: 'StripeCredentials'}" tag="div" class="service-card">
|
||||
<img src="/assets/icons/stripe-service.svg" alt="Stripe" class="service-logo">
|
||||
<router-link :to="{ name: 'StripeCredentials' }" tag="div" class="service-card">
|
||||
<img src="/assets/icons/stripe-service.svg" alt="Stripe" class="service-logo" />
|
||||
|
||||
<div class="service-content">
|
||||
<b class="service-title">Charging with Stripe</b>
|
||||
<p class="service-description">You can create custom storage plans and charge your users with monthly subscription.</p>
|
||||
</div>
|
||||
|
||||
<router-link :to="{name: 'StripeCredentials'}" class="service-link">
|
||||
<router-link :to="{ name: 'StripeCredentials' }" class="service-link">
|
||||
<span>Set Up Billing and Plans With Stripe</span>
|
||||
<chevron-right-icon size="22" class="icon"></chevron-right-icon>
|
||||
</router-link>
|
||||
@@ -29,8 +27,8 @@
|
||||
</div>
|
||||
|
||||
<p class="additional-link">
|
||||
<router-link :to="{name: 'EnvironmentSetup'}">
|
||||
<AuthButton class="skip-subscription-setup" icon="chevron-right" text="I will set up Stripe later" />
|
||||
<router-link :to="{ name: 'EnvironmentSetup' }">
|
||||
<AuthButton class="skip-subscription-setup" icon="chevron-right" text="I will set up Stripe later" />
|
||||
</router-link>
|
||||
</p>
|
||||
</AuthContent>
|
||||
@@ -38,114 +36,114 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthContentWrapper from "../../components/Auth/AuthContentWrapper";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContent from "../../components/Auth/AuthContent";
|
||||
import AuthButton from "../../components/Auth/AuthButton";
|
||||
import { SettingsIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import Headline from "../Auth/Headline"
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContent from '../../components/Auth/AuthContent'
|
||||
import AuthButton from '../../components/Auth/AuthButton'
|
||||
import { SettingsIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import Headline from '../Auth/Headline'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'SubscriptionService',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ChevronRightIcon,
|
||||
SettingsIcon,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
required,
|
||||
Headline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
export default {
|
||||
name: 'SubscriptionService',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ChevronRightIcon,
|
||||
SettingsIcon,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
required,
|
||||
Headline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
@import '../../../sass/vuefilemanager/auth';
|
||||
@import '../../../sass/vuefilemanager/setup_wizard';
|
||||
|
||||
.services {
|
||||
margin: 0 auto;
|
||||
.services {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 30px 5px rgba(#3d4efd, 0.25);
|
||||
border-radius: 20px;
|
||||
max-width: 415px;
|
||||
display: inline-block;
|
||||
padding: 30px;
|
||||
background: rgb(58, 75, 255);
|
||||
background: linear-gradient(135deg, rgba(58, 75, 255, 1) 0%, rgba(103, 114, 229, 1) 100%);
|
||||
@include transition(200ms);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 35px 5px rgba(#3d4efd, 0.4);
|
||||
@include transform(scale(1.02));
|
||||
}
|
||||
|
||||
.service-card {
|
||||
text-align: left;
|
||||
box-shadow: 0 5px 30px 5px rgba(#3D4EFD, 0.25);
|
||||
border-radius: 20px;
|
||||
max-width: 415px;
|
||||
display: inline-block;
|
||||
padding: 30px;
|
||||
background: rgb(58,75,255);
|
||||
background: linear-gradient(135deg, rgba(58,75,255,1) 0%, rgba(103,114,229,1) 100%);
|
||||
@include transition(200ms);
|
||||
.service-logo {
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 35px 5px rgba(#3D4EFD, 0.4);
|
||||
@include transform(scale(1.02));
|
||||
}
|
||||
.service-content {
|
||||
margin-bottom: 65px;
|
||||
|
||||
.service-logo {
|
||||
margin-bottom: 30px;
|
||||
.service-title {
|
||||
@include font-size(18);
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
margin-bottom: 65px;
|
||||
|
||||
.service-title {
|
||||
@include font-size(18);
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-description {
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.service-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-left: 5px;
|
||||
|
||||
polyline {
|
||||
stroke: white
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(16);
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
.service-description {
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.skip-subscription-setup {
|
||||
border: none !important;
|
||||
}
|
||||
.service-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.auth-form input {
|
||||
min-width: 380px;
|
||||
.icon {
|
||||
margin-left: 5px;
|
||||
|
||||
polyline {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(16);
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skip-subscription-setup {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.auth-form input {
|
||||
min-width: 380px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user