mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 11:00:39 +00:00
setup wizard funcionality upgrade for v2
This commit is contained in:
Čarodej
+118
-121
@@ -5,16 +5,16 @@
|
||||
<ToasterWrapper />
|
||||
<CookieDisclaimer />
|
||||
|
||||
<!--Show spinner before translations is loaded-->
|
||||
<!--Show spinner before translations is loaded-->
|
||||
<Spinner v-if="!isLoaded" />
|
||||
|
||||
<!--Show warning bar when user functionality is restricted-->
|
||||
<!--Show warning bar when user functionality is restricted-->
|
||||
<RestrictionWarningBar />
|
||||
|
||||
<!--App view-->
|
||||
<!--App view-->
|
||||
<router-view v-if="isLoaded" />
|
||||
|
||||
<!--Background under popups-->
|
||||
<!--Background under popups-->
|
||||
<Vignette />
|
||||
</div>
|
||||
</template>
|
||||
@@ -26,92 +26,94 @@ import Spinner from './components/FilesView/Spinner'
|
||||
import Vignette from './components/Others/Vignette'
|
||||
import Alert from './components/FilesView/Alert'
|
||||
import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from './bus'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from './bus'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
RestrictionWarningBar,
|
||||
CookieDisclaimer,
|
||||
ToasterWrapper,
|
||||
Vignette,
|
||||
Spinner,
|
||||
Alert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaded: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'user']),
|
||||
},
|
||||
watch: {
|
||||
'config.defaultThemeMode': function () {
|
||||
this.handleDarkMode()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
spotlightListener(e) {
|
||||
if (e.key === 'k' && e.metaKey) {
|
||||
events.$emit('spotlight:show')
|
||||
}
|
||||
},
|
||||
handleDarkMode() {
|
||||
const app = document.getElementsByTagName('html')[0]
|
||||
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
name: 'App',
|
||||
components: {
|
||||
RestrictionWarningBar,
|
||||
CookieDisclaimer,
|
||||
ToasterWrapper,
|
||||
Vignette,
|
||||
Spinner,
|
||||
Alert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaded: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'user']),
|
||||
},
|
||||
watch: {
|
||||
'config.defaultThemeMode': function () {
|
||||
this.handleDarkMode()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
spotlightListener(e) {
|
||||
if (e.key === 'k' && e.metaKey) {
|
||||
events.$emit('spotlight:show')
|
||||
}
|
||||
},
|
||||
handleDarkMode() {
|
||||
const app = document.getElementsByTagName('html')[0]
|
||||
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
|
||||
if (this.config.defaultThemeMode === 'dark') {
|
||||
app.classList.add('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
|
||||
} else if (this.config.defaultThemeMode === 'light') {
|
||||
app.classList.remove('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
|
||||
} else if (this.config.defaultThemeMode === 'system' && prefersDarkScheme.matches) {
|
||||
app.classList.add('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
|
||||
} else if (this.config.defaultThemeMode === 'system' && !prefersDarkScheme.matches) {
|
||||
app.classList.remove('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
this.handleDarkMode()
|
||||
})
|
||||
if (this.config.defaultThemeMode === 'dark') {
|
||||
app.classList.add('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
|
||||
} else if (this.config.defaultThemeMode === 'light') {
|
||||
app.classList.remove('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
|
||||
} else if (this.config.defaultThemeMode === 'system' && prefersDarkScheme.matches) {
|
||||
app.classList.add('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
|
||||
} else if (this.config.defaultThemeMode === 'system' && !prefersDarkScheme.matches) {
|
||||
app.classList.remove('dark')
|
||||
this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
this.handleDarkMode()
|
||||
})
|
||||
|
||||
// Get installation state
|
||||
let installation = this.$root.$data.config.installation
|
||||
// Commit config
|
||||
this.$store.commit('INIT', {
|
||||
config: this.$root.$data.config,
|
||||
})
|
||||
|
||||
if (['setup-disclaimer', 'setup-database'].includes(installation))
|
||||
// Get installation state
|
||||
let installation = this.$root.$data.config.installation
|
||||
|
||||
// Redirect to setup wizard
|
||||
if (installation === 'installation-needed') {
|
||||
this.isLoaded = true
|
||||
|
||||
// Redirect to database verify code
|
||||
//if (installation === 'setup-database')
|
||||
//this.$router.push({ name: 'StatusCheck' })
|
||||
if (window.location.pathname.split('/')[1] !== 'setup-wizard') {
|
||||
this.$router.push({name: 'StatusCheck'})
|
||||
}
|
||||
} else {
|
||||
this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.locale)
|
||||
.then(() => {
|
||||
this.isLoaded = true
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$isWindows()) {
|
||||
document.body.classList.add('windows')
|
||||
}
|
||||
|
||||
if (installation === 'setup-done')
|
||||
this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.locale).then(() => {
|
||||
this.isLoaded = true
|
||||
|
||||
// Store config to vuex
|
||||
this.$store.commit('INIT', {
|
||||
config: this.$root.$data.config,
|
||||
})
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
if (this.$isWindows()) {
|
||||
document.body.classList.add('windows')
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', this.spotlightListener)
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('keydown', this.spotlightListener)
|
||||
},
|
||||
window.addEventListener('keydown', this.spotlightListener)
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('keydown', this.spotlightListener)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -121,59 +123,54 @@ export default {
|
||||
@import '../sass/vuefilemanager/mixins';
|
||||
|
||||
input:-webkit-autofill {
|
||||
transition-delay: 999999999999s;
|
||||
transition-delay: 999999999999s;
|
||||
}
|
||||
|
||||
[v-cloak],
|
||||
[v-cloak] > * {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: $text;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.vue-feather {
|
||||
path,
|
||||
circle,
|
||||
line,
|
||||
rect,
|
||||
polyline,
|
||||
ellipse,
|
||||
polygon {
|
||||
color: inherit;
|
||||
}
|
||||
path,
|
||||
circle,
|
||||
line,
|
||||
rect,
|
||||
polyline,
|
||||
ellipse,
|
||||
polygon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#auth {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Dark mode support
|
||||
// Dark mode
|
||||
.dark {
|
||||
* {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
* {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
background: $dark_mode_background;
|
||||
color: $dark_mode_text_primary;
|
||||
body,
|
||||
html {
|
||||
background: $dark_mode_background;
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
img {
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
img {
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex h-full items-center justify-center" v-if="isLoading || isEmpty">
|
||||
<div class="flex h-screen items-center justify-center" v-if="isLoading || isEmpty">
|
||||
<!--Show message for user-->
|
||||
<div v-if="!isLoading" class="text-content text-center">
|
||||
<slot></slot>
|
||||
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.isVisibleDisclaimer = !localStorage.getItem('isHiddenDisclaimer')
|
||||
this.isVisibleDisclaimer = this.config.installation === 'installation-done' && !localStorage.getItem('isHiddenDisclaimer')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -25,10 +25,10 @@
|
||||
<image-icon size="34" class="vue-feather text-theme inline-block mb-4" />
|
||||
|
||||
<b class="font-bold text-base block leading-3">
|
||||
{{ $t('input_image.title') }}
|
||||
{{ $te('input_image.title') || 'Upload Image' }}
|
||||
</b>
|
||||
<small class="text-xs text-gray-500">
|
||||
{{ $t('input_image.supported') }}
|
||||
{{ $te('input_image.supported') || 'Supported formats are .png, .jpg, .jpeg.' }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -91,7 +91,7 @@ export default {
|
||||
openMenu() {
|
||||
this.isOpen = !this.isOpen
|
||||
|
||||
if (this.isOpen) {
|
||||
if (this.$refs.search && this.isOpen) {
|
||||
this.$nextTick(() => this.$refs.search.focus())
|
||||
}
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<UserHeadline v-if="!clickedSubmenu" class="p-5 pb-3" />
|
||||
|
||||
<!--User estimate-->
|
||||
<div v-if="config.subscriptionType === 'metered' && user && !clickedSubmenu" class="block px-5 pt-2">
|
||||
<div v-if="config.subscriptionType === 'metered' && user && user.data.meta.usages && !clickedSubmenu" class="block px-5 pt-2">
|
||||
<div class="rounded-lg bg-light-background px-3 py-1.5 dark:bg-4x-dark-foreground">
|
||||
<span class="text-sm font-semibold">
|
||||
{{ $t('Your current estimated usage:') }}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<MemberAvatar class="mx-auto inline-block" :size="44" :is-border="false" :member="user" />
|
||||
|
||||
<!--Usage-->
|
||||
<div v-if="config.subscriptionType === 'metered'" class="mt-1 text-center leading-3">
|
||||
<div v-if="config.subscriptionType === 'metered' && user.data.meta.usages" class="mt-1 text-center leading-3">
|
||||
<b class="text-theme block text-xs font-bold leading-3">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
|
||||
Vendored
+163
-157
@@ -4,185 +4,191 @@ import Vue from 'vue'
|
||||
import router from "../../router";
|
||||
|
||||
const defaultState = {
|
||||
isVisibleNavigationBars: localStorage.getItem('is_navigation_bars') !== 'false',
|
||||
isDarkMode: false,
|
||||
isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false,
|
||||
itemViewType: localStorage.getItem('preview_type') || 'list',
|
||||
config: undefined,
|
||||
index: undefined,
|
||||
requestedPlan: undefined,
|
||||
emojis: undefined,
|
||||
sorting: {
|
||||
sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
|
||||
field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
|
||||
},
|
||||
isVisibleNavigationBars: localStorage.getItem('is_navigation_bars') !== 'false',
|
||||
isDarkMode: false,
|
||||
isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false,
|
||||
itemViewType: localStorage.getItem('preview_type') || 'list',
|
||||
config: undefined,
|
||||
index: undefined,
|
||||
requestedPlan: undefined,
|
||||
emojis: undefined,
|
||||
sorting: {
|
||||
sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
|
||||
field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
|
||||
},
|
||||
}
|
||||
const actions = {
|
||||
toggleThemeMode: ({ commit }, mode = undefined) => {
|
||||
const app = document.getElementsByTagName('html')[0]
|
||||
toggleThemeMode: ({commit}, mode = undefined) => {
|
||||
const app = document.getElementsByTagName('html')[0]
|
||||
|
||||
if (!mode) {
|
||||
mode = app.classList.contains('dark') ? 'light' : 'dark'
|
||||
}
|
||||
if (!mode) {
|
||||
mode = app.classList.contains('dark') ? 'light' : 'dark'
|
||||
}
|
||||
|
||||
commit('REPLACE_CONFIG_VALUE', {
|
||||
key: 'defaultThemeMode',
|
||||
value: mode,
|
||||
})
|
||||
commit('REPLACE_CONFIG_VALUE', {
|
||||
key: 'defaultThemeMode',
|
||||
value: mode,
|
||||
})
|
||||
|
||||
// Update user settings
|
||||
if (! Vue.prototype.$isThisRoute(router.currentRoute, ['Public'])) {
|
||||
Vue.prototype.$updateText('/user/settings', 'theme_mode', mode)
|
||||
}
|
||||
},
|
||||
toggleNavigationBars: ({ commit, state }) => {
|
||||
// Store dark mode into localStorage
|
||||
localStorage.setItem('is_navigation_bars', !state.isVisibleNavigationBars)
|
||||
// Update user settings
|
||||
if (!Vue.prototype.$isThisRoute(router.currentRoute, ['Public'])) {
|
||||
Vue.prototype.$updateText('/user/settings', 'theme_mode', mode)
|
||||
}
|
||||
},
|
||||
toggleNavigationBars: ({commit, state}) => {
|
||||
// Store dark mode into localStorage
|
||||
localStorage.setItem('is_navigation_bars', !state.isVisibleNavigationBars)
|
||||
|
||||
// Change preview
|
||||
commit('TOGGLE_NAVIGATION_BARS')
|
||||
},
|
||||
togglePreviewType: ({ commit, state }, preview) => {
|
||||
// Get preview type
|
||||
let previewType = preview ? preview : state.itemViewType === 'list' ? 'grid' : 'list'
|
||||
// Change preview
|
||||
commit('TOGGLE_NAVIGATION_BARS')
|
||||
},
|
||||
togglePreviewType: ({commit, state}, preview) => {
|
||||
// Get preview type
|
||||
let previewType = preview ? preview : state.itemViewType === 'list' ? 'grid' : 'list'
|
||||
|
||||
// Store preview type to localStorage
|
||||
localStorage.setItem('preview_type', previewType)
|
||||
// Store preview type to localStorage
|
||||
localStorage.setItem('preview_type', previewType)
|
||||
|
||||
// Change preview
|
||||
commit('CHANGE_PREVIEW', previewType)
|
||||
},
|
||||
toggleEmojiType: ({ commit, getters }, type = undefined) => {
|
||||
let newType = type ? type : getters.config.defaultEmoji === 'twemoji' ? 'applemoji' : 'twemoji'
|
||||
// Change preview
|
||||
commit('CHANGE_PREVIEW', previewType)
|
||||
},
|
||||
toggleEmojiType: ({commit, getters}, type = undefined) => {
|
||||
let newType = type ? type : getters.config.defaultEmoji === 'twemoji' ? 'applemoji' : 'twemoji'
|
||||
|
||||
// Update config
|
||||
commit('REPLACE_CONFIG_VALUE', {
|
||||
key: 'defaultEmoji',
|
||||
value: newType,
|
||||
})
|
||||
// Update config
|
||||
commit('REPLACE_CONFIG_VALUE', {
|
||||
key: 'defaultEmoji',
|
||||
value: newType,
|
||||
})
|
||||
|
||||
// Update user settings
|
||||
Vue.prototype.$updateText('/user/settings', 'emoji_type', newType)
|
||||
},
|
||||
fileInfoToggle: (context, visibility = undefined) => {
|
||||
if (!visibility) {
|
||||
if (context.state.isVisibleSidebar) {
|
||||
context.commit('FILE_INFO_TOGGLE', false)
|
||||
} else {
|
||||
context.commit('FILE_INFO_TOGGLE', true)
|
||||
}
|
||||
} else {
|
||||
context.commit('FILE_INFO_TOGGLE', visibility)
|
||||
}
|
||||
},
|
||||
getLanguageTranslations: ({ commit, state }, lang) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(`/translations/${lang}`).then((response) => {
|
||||
i18n.setLocaleMessage(lang, response.data)
|
||||
i18n.locale = lang
|
||||
// Update user settings
|
||||
Vue.prototype.$updateText('/user/settings', 'emoji_type', newType)
|
||||
},
|
||||
fileInfoToggle: (context, visibility = undefined) => {
|
||||
if (!visibility) {
|
||||
if (context.state.isVisibleSidebar) {
|
||||
context.commit('FILE_INFO_TOGGLE', false)
|
||||
} else {
|
||||
context.commit('FILE_INFO_TOGGLE', true)
|
||||
}
|
||||
} else {
|
||||
context.commit('FILE_INFO_TOGGLE', visibility)
|
||||
}
|
||||
},
|
||||
getLanguageTranslations: ({commit, state}, lang) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(`/translations/${lang}`)
|
||||
.then((response) => {
|
||||
i18n.setLocaleMessage(lang, response.data)
|
||||
i18n.locale = lang
|
||||
|
||||
resolve(response)
|
||||
})
|
||||
})
|
||||
},
|
||||
resolve(response)
|
||||
})
|
||||
.catch((error) => {
|
||||
if (!error.response) {
|
||||
location.reload()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
LOAD_EMOJIS_LIST(state, data) {
|
||||
state.emojis = data
|
||||
},
|
||||
UPDATE_SORTING(state) {
|
||||
state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
|
||||
state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
|
||||
},
|
||||
INIT(state, data) {
|
||||
state.config = data.config
|
||||
},
|
||||
SET_SAAS(state, data) {
|
||||
state.config.isSaaS = data
|
||||
},
|
||||
FILE_INFO_TOGGLE(state, isVisible) {
|
||||
state.isVisibleSidebar = isVisible
|
||||
LOAD_EMOJIS_LIST(state, data) {
|
||||
state.emojis = data
|
||||
},
|
||||
UPDATE_SORTING(state) {
|
||||
state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
|
||||
state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
|
||||
},
|
||||
INIT(state, data) {
|
||||
state.config = data.config
|
||||
},
|
||||
SET_SAAS(state, data) {
|
||||
state.config.isSaaS = data
|
||||
},
|
||||
FILE_INFO_TOGGLE(state, isVisible) {
|
||||
state.isVisibleSidebar = isVisible
|
||||
|
||||
localStorage.setItem('file_info_visibility', isVisible)
|
||||
},
|
||||
SET_AUTHORIZED(state, value) {
|
||||
state.config.isAuthenticated = value
|
||||
},
|
||||
SET_INDEX_CONTENT(state, data) {
|
||||
state.index = data
|
||||
},
|
||||
CHANGE_PREVIEW(state, type) {
|
||||
state.itemViewType = type
|
||||
},
|
||||
TOGGLE_NAVIGATION_BARS(state) {
|
||||
state.isVisibleNavigationBars = !state.isVisibleNavigationBars
|
||||
},
|
||||
STORE_REQUESTED_PLAN(state, plan) {
|
||||
state.requestedPlan = plan
|
||||
},
|
||||
REPLACE_CONFIG_VALUE(state, { key, value }) {
|
||||
state.config[key] = value
|
||||
},
|
||||
SET_SOCIAL_LOGIN_CONFIGURED(state, service) {
|
||||
if (service === 'facebook') {
|
||||
state.config.allowedFacebookLogin = true
|
||||
state.config.isFacebookLoginConfigured = true
|
||||
}
|
||||
localStorage.setItem('file_info_visibility', isVisible)
|
||||
},
|
||||
SET_AUTHORIZED(state, value) {
|
||||
state.config.isAuthenticated = value
|
||||
},
|
||||
SET_INDEX_CONTENT(state, data) {
|
||||
state.index = data
|
||||
},
|
||||
CHANGE_PREVIEW(state, type) {
|
||||
state.itemViewType = type
|
||||
},
|
||||
TOGGLE_NAVIGATION_BARS(state) {
|
||||
state.isVisibleNavigationBars = !state.isVisibleNavigationBars
|
||||
},
|
||||
STORE_REQUESTED_PLAN(state, plan) {
|
||||
state.requestedPlan = plan
|
||||
},
|
||||
REPLACE_CONFIG_VALUE(state, {key, value}) {
|
||||
state.config[key] = value
|
||||
},
|
||||
SET_SOCIAL_LOGIN_CONFIGURED(state, service) {
|
||||
if (service === 'facebook') {
|
||||
state.config.allowedFacebookLogin = true
|
||||
state.config.isFacebookLoginConfigured = true
|
||||
}
|
||||
|
||||
if (service === 'google') {
|
||||
state.config.allowedGoogleLogin = true
|
||||
state.config.isGoogleLoginConfigured = true
|
||||
}
|
||||
if (service === 'google') {
|
||||
state.config.allowedGoogleLogin = true
|
||||
state.config.isGoogleLoginConfigured = true
|
||||
}
|
||||
|
||||
if (service === 'github') {
|
||||
state.config.allowedGithubLogin = true
|
||||
state.config.isGithubLoginConfigured = true
|
||||
}
|
||||
if (service === 'github') {
|
||||
state.config.allowedGithubLogin = true
|
||||
state.config.isGithubLoginConfigured = true
|
||||
}
|
||||
|
||||
if (service === 'recaptcha') {
|
||||
state.config.allowedRecaptcha = true
|
||||
state.config.isRecaptchaConfigured = true
|
||||
}
|
||||
},
|
||||
SET_STRIPE_CREDENTIALS(state, data) {
|
||||
state.config.stripe_public_key = data.key
|
||||
state.config.isStripe = true
|
||||
},
|
||||
SET_PAYSTACK_CREDENTIALS(state, data) {
|
||||
state.config.paystack_public_key = data.key
|
||||
state.config.isPaystack = true
|
||||
},
|
||||
SET_PAYPAL_CREDENTIALS(state, data) {
|
||||
state.config.paypal_client_id = data.key
|
||||
state.config.isPayPal = true
|
||||
},
|
||||
UPDATE_DARK_MODE_STATUS(state, val) {
|
||||
state.isDarkMode = val
|
||||
},
|
||||
if (service === 'recaptcha') {
|
||||
state.config.allowedRecaptcha = true
|
||||
state.config.isRecaptchaConfigured = true
|
||||
}
|
||||
},
|
||||
SET_STRIPE_CREDENTIALS(state, data) {
|
||||
state.config.stripe_public_key = data.key
|
||||
state.config.isStripe = true
|
||||
},
|
||||
SET_PAYSTACK_CREDENTIALS(state, data) {
|
||||
state.config.paystack_public_key = data.key
|
||||
state.config.isPaystack = true
|
||||
},
|
||||
SET_PAYPAL_CREDENTIALS(state, data) {
|
||||
state.config.paypal_client_id = data.key
|
||||
state.config.isPayPal = true
|
||||
},
|
||||
UPDATE_DARK_MODE_STATUS(state, val) {
|
||||
state.isDarkMode = val
|
||||
},
|
||||
}
|
||||
|
||||
const getters = {
|
||||
isVisibleNavigationBars: (state) => state.isVisibleNavigationBars,
|
||||
isVisibleSidebar: (state) => state.isVisibleSidebar,
|
||||
itemViewType: (state) => state.itemViewType,
|
||||
requestedPlan: (state) => state.requestedPlan,
|
||||
api: (state) => state.config.api,
|
||||
config: (state) => state.config,
|
||||
emojis: (state) => state.emojis,
|
||||
index: (state) => state.index,
|
||||
isDarkMode: (state) => state.isDarkMode,
|
||||
sorting: (state) => {
|
||||
return {
|
||||
sorting: state.sorting,
|
||||
URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort,
|
||||
}
|
||||
},
|
||||
isVisibleNavigationBars: (state) => state.isVisibleNavigationBars,
|
||||
isVisibleSidebar: (state) => state.isVisibleSidebar,
|
||||
itemViewType: (state) => state.itemViewType,
|
||||
requestedPlan: (state) => state.requestedPlan,
|
||||
api: (state) => state.config.api,
|
||||
config: (state) => state.config,
|
||||
emojis: (state) => state.emojis,
|
||||
index: (state) => state.index,
|
||||
isDarkMode: (state) => state.isDarkMode,
|
||||
sorting: (state) => {
|
||||
return {
|
||||
sorting: state.sorting,
|
||||
URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
state: defaultState,
|
||||
getters,
|
||||
actions,
|
||||
mutations,
|
||||
state: defaultState,
|
||||
getters,
|
||||
actions,
|
||||
mutations,
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup v-if="navigation" :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true">
|
||||
<small v-if="tree.length === 0" class="text-xs font-bold text-gray-500">
|
||||
<small v-if="tree.length === 0" class="text-xs text-gray-500 dark:text-gray-500">
|
||||
{{ $t("There isn't any folder.") }}
|
||||
</small>
|
||||
<TreeMenuNavigator :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id" />
|
||||
@@ -39,7 +39,7 @@
|
||||
class="border-2 border-dashed border-transparent"
|
||||
>
|
||||
<!--Empty message-->
|
||||
<small v-if="favourites.length === 0" class="favourites text-xs font-bold text-gray-500" :key="0">
|
||||
<small v-if="favourites.length === 0" class="text-xs text-gray-500 dark:text-gray-500" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</small>
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
mounted() {
|
||||
let status = this.$root.$data.config.installation
|
||||
|
||||
//if (status && status === 'setup-done') this.$router.push({ name: 'SignIn' })
|
||||
if (status && status === 'installation-done')
|
||||
this.$router.push({ name: 'SignIn' })
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -119,41 +119,19 @@ export default {
|
||||
if (this.admin.avatar) formData.append('avatar', this.admin.avatar)
|
||||
|
||||
axios
|
||||
.post('/api/setup/admin-setup', formData, {
|
||||
.post('/admin-setup', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// 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')
|
||||
// Go to sign page
|
||||
window.location = '/sign-in'
|
||||
})
|
||||
.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) {
|
||||
if (error.response.status === 500) {
|
||||
events.$emit('alert:open', {
|
||||
emoji: '🤔',
|
||||
title: this.$t('popup_signup_error.title'),
|
||||
@@ -161,7 +139,7 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
if (error.response.status == 422) {
|
||||
if (error.response.status === 422) {
|
||||
if (error.response.data.errors['email']) {
|
||||
this.$refs.adminAccount.setErrors({
|
||||
Email: error.response.data.errors['email'],
|
||||
@@ -175,13 +153,21 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
}).finally(() => this.isLoading = false)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
|
||||
if (this.$root.$data.config.isSetupWizardDebug) {
|
||||
this.admin = {
|
||||
name: 'Jane Doe',
|
||||
email: 'howdy@hi5ve.digital',
|
||||
avatar: undefined,
|
||||
password: 'vuefilemanager',
|
||||
password_confirmation: 'vuefilemanager',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -106,12 +106,12 @@
|
||||
</AppInputSwitch>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card text-left">
|
||||
<div v-if="isExtended" class="card shadow-card text-left">
|
||||
<FormLabel>Subscription</FormLabel>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Contact Email" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Subscription Type')" description="Choose your preferred subscription system in advance. After installation and any other user registration, you can't change this setting later.">
|
||||
<SelectInput v-model="app.subscriptionType" :options="$store.getters.subscriptionTypes" :placeholder="$t('Select your subscription type')" />
|
||||
<SelectInput v-model="app.subscriptionType" :default="app.subscriptionType" :options="$store.getters.subscriptionTypes" :placeholder="$t('Select your subscription type')" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
@@ -165,6 +165,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isExtended: undefined,
|
||||
app: {
|
||||
color: '#00BC7E',
|
||||
subscriptionType: undefined,
|
||||
@@ -254,6 +255,20 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
|
||||
this.isExtended = localStorage.getItem('license') === 'Extended'
|
||||
|
||||
if (this.$root.$data.config.isSetupWizardDebug) {
|
||||
this.app.subscriptionType = 'metered'
|
||||
this.app.title = 'VueFileManager'
|
||||
this.app.description = 'Your private cloud storage software build on Laravel & Vue.js.'
|
||||
this.app.contactMail = 'howdy@hi5ve.digital'
|
||||
this.app.googleAnalytics = 'UA-123456789'
|
||||
this.app.defaultStorage = '5'
|
||||
this.app.userRegistration = 1
|
||||
this.app.storageLimitation = 1
|
||||
this.app.userVerification = 0
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -139,6 +139,7 @@ export default {
|
||||
async databaseCredentialsSubmit() {
|
||||
if (this.$root.$data.config.isSetupWizardDemo) {
|
||||
this.$router.push({name: 'EnvironmentSetup'})
|
||||
return
|
||||
}
|
||||
|
||||
// Validate fields
|
||||
@@ -158,7 +159,7 @@ export default {
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({ name: 'InstallationDisclaimer' })
|
||||
this.$router.push({ name: 'EnvironmentSetup' })
|
||||
})
|
||||
.catch((error) => {
|
||||
if ((error.response.status = 500)) {
|
||||
@@ -173,6 +174,17 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
|
||||
if (this.$root.$data.config.isSetupWizardDebug) {
|
||||
this.databaseCredentials = {
|
||||
connection: 'mysql',
|
||||
host: '127.0.0.1',
|
||||
port: '3306',
|
||||
name: 'vuefilemanager-v2',
|
||||
username: 'root',
|
||||
password: 'secret',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Storage Service" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Storage Service" :error="errors[0]" :is-last="storage.driver === 'local'">
|
||||
<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="storage.driver" placeholder="Select your storage service" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Region" description="Select your region where is your bucket/space created." :error="errors[0]">
|
||||
<SelectInput v-model="storage.region" :options="regionList" :key="storage.driver" placeholder="Select your region" :isError="errors[0]" />
|
||||
<SelectInput v-model="storage.region" :options="regionList" :default="storage.region" placeholder="Select your region" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Driver" :error="errors[0]" :is-last="!mailDriver || mailDriver === 'log'">
|
||||
<SelectInput v-model="mailDriver" :options="mailDriverList" placeholder="Select your mail driver" :isError="errors[0]" />
|
||||
<SelectInput v-model="mailDriver" :default="mailDriver" :options="mailDriverList" placeholder="Select your mail driver" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Encryption" :error="errors[0]" :is-last="true">
|
||||
<SelectInput v-model="smtp.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]" />
|
||||
<SelectInput v-model="smtp.encryption" :default="smtp.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -147,8 +147,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card text-left">
|
||||
<FormLabel>Environment Setup</FormLabel>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Environment" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Environment" :error="errors[0]" :is-last="true">
|
||||
<SelectInput v-model="environment" :options="environmentSetupList" default="production" placeholder="Select your environment setup" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<InfoBox v-if="isError" type="error" class="!mb-5">
|
||||
<p>Something went wrong, please try it again.</p>
|
||||
<p>Whooops, something went wrong, please try it again.</p>
|
||||
</InfoBox>
|
||||
|
||||
<AuthButton class="w-full justify-center" icon="chevron-right" text="Save and Set General Settings" :loading="isLoading" :disabled="isLoading" />
|
||||
@@ -217,6 +227,17 @@ export default {
|
||||
return {
|
||||
isError: false,
|
||||
isLoading: false,
|
||||
environment: 'production',
|
||||
environmentSetupList: [
|
||||
{
|
||||
label: 'Production',
|
||||
value: 'production',
|
||||
},
|
||||
{
|
||||
label: 'Dev',
|
||||
value: 'local',
|
||||
},
|
||||
],
|
||||
ossRegions: [
|
||||
{
|
||||
label: 'China (Hangzhou)',
|
||||
@@ -529,6 +550,7 @@ export default {
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/environment-setup', {
|
||||
environment: this.environment,
|
||||
storage: this.storage,
|
||||
mailDriver: this.mailDriver,
|
||||
smtp: this.smtp,
|
||||
@@ -537,22 +559,41 @@ export default {
|
||||
postmark: this.postmark,
|
||||
})
|
||||
.then(() => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'AppSetup'})
|
||||
})
|
||||
.catch((error) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
this.isError = true
|
||||
|
||||
if (error.response.status === 500) {
|
||||
this.isError = true
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
if (this.$root.$data.config.isSetupWizardDebug) {
|
||||
this.mailDriver = 'smtp'
|
||||
|
||||
this.smtp = {
|
||||
host: 'test.mail.com',
|
||||
port: 445,
|
||||
username: 'howdy@hi5ve.digital',
|
||||
password: 'root',
|
||||
encryption: 'ssl',
|
||||
}
|
||||
|
||||
this.environment = 'local'
|
||||
|
||||
this.storage.driver = 'local'
|
||||
//this.storage.key = '51oLNVBaNKcxHG0lFucxBbJyhxmTwmF3WnzVLRqMZj0'
|
||||
//this.storage.secret = 'sC1YuKsbWv7MdWugb9ZsYBqv2QZJ+QOuHZHEddOsAao'
|
||||
//this.storage.endpoint = 'https://nyc3.digitaloceanspaces.com'
|
||||
//this.storage.bucket = 'cloud'
|
||||
//this.storage.region = 'nyc3'
|
||||
setTimeout(() => this.storage.region = 'nyc3', 100)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth" class="h-screen bg-white">
|
||||
<AuthContentWrapper ref="auth" class="h-screen dark:bg-dark-background bg-white">
|
||||
<!--Licence Verify-->
|
||||
<AuthContent name="licence-verify" :visible="true">
|
||||
<Headline title="Setup Wizard" description="Please set your purchase code before continue to set up your application.">
|
||||
@@ -49,6 +49,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isExtended: undefined,
|
||||
purchaseCode: '',
|
||||
}
|
||||
},
|
||||
@@ -71,10 +72,20 @@ export default {
|
||||
.post('/api/setup/purchase-code', {
|
||||
purchaseCode: this.purchaseCode,
|
||||
})
|
||||
.then(() => {
|
||||
.then((response) => {
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
console.log(response);
|
||||
|
||||
if (response.data === 'b6896a44017217c36f4a6fdc56699728') {
|
||||
this.isExtended = true
|
||||
localStorage.setItem('license', 'Extended')
|
||||
} else {
|
||||
this.isExtended = false
|
||||
localStorage.setItem('license', 'Regular')
|
||||
}
|
||||
|
||||
localStorage.setItem('purchase_code', this.purchaseCode)
|
||||
|
||||
// Redirect to next step
|
||||
|
||||
Reference in New Issue
Block a user