Merge remote-tracking branch 'origin/master' into filepreview

# Conflicts: # .env.example # package-lock.json # package.json # public/js/main.js # public/mix-manifest.json # resources/js/App.vue # resources/js/helpers.js # resources/js/i18n/lang/en.json # resources/js/i18n/lang/sk.json # resources/js/store/modules/fileFunctions.js # resources/js/views/Shared/SharedPage.vue
2026-04-28 11:00:39 +00:00 · 2020-08-28 16:14:28 +02:00
parent 82b43eb996 0d5df91d2d
commit be08c8487a
181 changed files with 9905 additions and 149203 deletions
@@ -1,216 +1,211 @@
 <template>
-  <div id="vue-file-manager" v-cloak>
-    <!--System alerts-->
-    <Alert />
+    <div id="vue-file-manager" v-cloak>

-    <div id="application-wrapper" v-if="layout === 'authorized'">
-      <!-- Full File Preview -->
-      <FileFullPreview />
+        <!--System alerts-->
+        <Alert/>

-      <!--Mobile Navigation-->
-      <MobileNavigation />
+        <div id="application-wrapper" v-if="! isGuestLayout">
+            <!-- Full File Preview -->
+            <FileFullPreview />
+            <!--Mobile Navigation-->
+            <MobileNavigation />

-      <!--Confirm Popup-->
-      <Confirm />
+            <!--Confirm Popup-->
+            <Confirm />

-      <!--Share Item setup-->
-      <ShareCreate />
-      <ShareEdit />
+            <!--Share Item setup-->
+            <ShareCreate/>
+            <ShareEdit/>

-      <!--Move item setup-->
-      <MoveItem />
+            <!--Move item setup-->
+            <MoveItem/>

-      <!--Mobile Menu-->
-      <MobileMenu />
+            <!--Mobile Menu-->
+            <MobileMenu/>

-      <!--Navigation Sidebar-->
-      <MenuBar />
+            <!--Navigation Sidebar-->
+            <MenuBar/>

-      <!--Toastr-->
-      <ToastrWrapper />
+            <!--Toastr-->
+            <ToastrWrapper/>

-      <!--File page-->
-      <keep-alive :include="['Admin', 'Users']">
-        <router-view :class="{ 'is-scaled-down': isScaledDown }" />
-      </keep-alive>
+            <!--File page-->
+            <keep-alive :include="['Admin', 'Users']">
+                <router-view :class="{'is-scaled-down': isScaledDown}"/>
+            </keep-alive>
+        </div>
+
+        <router-view v-if="isGuestLayout"/>
+
+        <CookieDisclaimer />
+
+        <!--Background vignette-->
+        <Vignette/>
    </div>
-
-    <router-view v-if="layout === 'unauthorized'" />
-
-    <CookieDisclaimer />
-
-    <!--Background vignette-->
-    <Vignette />
-  </div>
 </template>

 <script>
-import ToastrWrapper from "@/components/Others/Notifications/ToastrWrapper";
-import MobileNavigation from "@/components/Others/MobileNavigation";
-import CookieDisclaimer from "@/components/Others/CookieDisclaimer";
-import FileFullPreview from "@/components/FilesView/FileFullPreview";
-import MobileMenu from "@/components/FilesView/MobileMenu";
-import ShareCreate from "@/components/Others/ShareCreate";
-import Confirm from "@/components/Others/Popup/Confirm";
-import ShareEdit from "@/components/Others/ShareEdit";
-import MoveItem from "@/components/Others/MoveItem";
-import Vignette from "@/components/Others/Vignette";
-import MenuBar from "@/components/Sidebar/MenuBar";
-import Alert from "@/components/FilesView/Alert";
-import { includes } from "lodash";
-import { mapGetters } from "vuex";
-import { events } from "./bus";
+    import ToastrWrapper from '@/components/Others/Notifications/ToastrWrapper'
+    import FileFullPreview from '@/components/FilesView/FileFullPreview'
+    import MobileNavigation from '@/components/Others/MobileNavigation'
+    import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
+    import MobileMenu from '@/components/FilesView/MobileMenu'
+    import ShareCreate from '@/components/Others/ShareCreate'
+    import Confirm from '@/components/Others/Popup/Confirm'
+    import ShareEdit from '@/components/Others/ShareEdit'
+    import MoveItem from '@/components/Others/MoveItem'
+    import Vignette from '@/components/Others/Vignette'
+    import MenuBar from '@/components/Sidebar/MenuBar'
+    import Alert from '@/components/FilesView/Alert'
+    import {includes} from 'lodash'
+    import {mapGetters} from 'vuex'
+    import {events} from "./bus"

-export default {
-  name: "app",
-  components: {
-    MobileNavigation,
-    CookieDisclaimer,
-    ToastrWrapper,
-    ShareCreate,
-    FileFullPreview,
-    MobileMenu,
-    ShareEdit,
-    MoveItem,
-    Vignette,
-    Confirm,
-    MenuBar,
-    Alert,
-  },
-  computed: {
-    ...mapGetters(["isLogged", "isGuest", "config"]),
-    layout() {
-      if (
-        includes(
-          [
-            "InstallationDisclaimer",
-            "SubscriptionService",
-            "StripeCredentials",
-            "SubscriptionPlans",
-            "ForgottenPassword",
-            "CreateNewPassword",
-            "EnvironmentSetup",
-            "VerifyByPassword",
-            "SaaSLandingPage",
-            "BillingsDetail",
-            "NotFoundShared",
-            "AdminAccount",
-            "PurchaseCode",
-            "DynamicPage",
-            "SharedPage",
-            "ContactUs",
-            "AppSetup",
-            "Database",
-            "Upgrade",
-            "SignIn",
-            "SignUp",
-          ],
-          this.$route.name
-        )
-      ) {
-        return "unauthorized";
-      }
+    export default {
+        name: 'app',
+        components: {
+            MobileNavigation,
+            CookieDisclaimer,
+            ToastrWrapper,
+            ShareCreate,
+            MobileMenu,
+            ShareEdit,
+            MoveItem,
+            Vignette,
+            Confirm,
+            MenuBar,
+            Alert,
+        },
+        computed: {
+            ...mapGetters([
+                'isLogged', 'isGuest', 'config'
+            ]),
+            isGuestLayout() {
+                return (includes([
+                        'InstallationDisclaimer',
+                        'SubscriptionService',
+                        'StripeCredentials',
+                        'SubscriptionPlans',
+                        'ForgottenPassword',
+                        'CreateNewPassword',
+                        'EnvironmentSetup',
+                        'VerifyByPassword',
+                        'SaaSLandingPage',
+                        'BillingsDetail',
+                        'NotFoundShared',
+                        'AdminAccount',
+                        'PurchaseCode',
+                        'DynamicPage',
+                        'SharedPage',
+                        'ContactUs',
+                        'AppSetup',
+                        'Database',
+                        'Upgrade',
+                        'SignIn',
+                        'SignUp',
+                    ], this.$route.name)
+                )
+            }
+        },
+        data() {
+            return {
+                isScaledDown: false,
+            }
+        },
+        beforeMount() {

-      return "authorized";
-    },
-  },
-  data() {
-    return {
-      isScaledDown: false,
-    };
-  },
-  beforeMount() {
-    // Store config to vuex
-    this.$store.commit("INIT", {
-      authCookie: this.$root.$data.config.hasAuthCookie,
-      config: this.$root.$data.config,
-      rootDirectory: {
-        name: this.$t("locations.home"),
-        location: "base",
-        unique_id: 0,
-      },
-    });
+            // Store config to vuex
+            this.$store.commit('INIT', {
+                authCookie: this.$root.$data.config.hasAuthCookie,
+                config: this.$root.$data.config,
+                rootDirectory: {
+                    name: this.$t('locations.home'),
+                    location: 'base',
+                    unique_id: 0,
+                }
+            })

-    // Get installation state
-    let installation = this.$root.$data.config.installation;
+            // Get installation state
+            let installation = this.$root.$data.config.installation

-    // Redirect to database verify code
-    if (installation === "setup-database") {
-      this.$router.push({ name: "PurchaseCode" });
+            // Redirect to database verify code
+            if ( installation === 'setup-database') {
+                this.$router.push({name: 'PurchaseCode'})
+            }
+
+            // Redirect to starting installation process
+            if ( installation === 'setup-disclaimer' ) {
+                this.$router.push({name: 'InstallationDisclaimer'})
+            }
+        },
+        mounted() {
+            // Handle mobile navigation scale animation
+            events.$on('show:mobile-navigation', () => this.isScaledDown = true)
+            events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
+            events.$on('mobileMenu:show', () => this.isScaledDown = true)
+            events.$on('fileItem:deselect', () => this.isScaledDown = false)
+        }
    }
-
-    // Redirect to starting installation process
-    if (installation === "setup-disclaimer") {
-      this.$router.push({ name: "InstallationDisclaimer" });
-    }
-  },
-  mounted() {
-    // Handle mobile navigation scale animation
-    events.$on("show:mobile-navigation", () => (this.isScaledDown = true));
-    events.$on("hide:mobile-navigation", () => (this.isScaledDown = false));
-    events.$on("mobileMenu:show", () => (this.isScaledDown = true));
-    events.$on("fileItem:deselect", () => (this.isScaledDown = false));
-  },
-};
 </script>

 <style lang="scss">
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap");
-@import "@assets/vue-file-manager/_variables";
-@import "@assets/vue-file-manager/_mixins";
+    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';

-[v-cloak],
-[v-cloak] > * {
-  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;
-}
-
-#auth {
-  width: 100%;
-  height: 100%;
-}
-
-#vue-file-manager {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  scroll-behavior: smooth;
-}
-
-@media only screen and (max-width: 690px) {
-  .is-scaled-down {
-    @include transform(scale(0.95));
-  }
-}
-
-// Dark mode support
-@media (prefers-color-scheme: dark) {
-  * {
-    color: $dark_mode_text_primary;
-  }
-
-  body,
-  html {
-    background: $dark_mode_background;
-    color: $dark_mode_text_primary;
-
-    img {
-      opacity: 0.95;
+    [v-cloak],
+    [v-cloak] > * {
+        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;
+    }
+
+    #auth {
+        width: 100%;
+        height: 100%;
+    }
+
+    #vue-file-manager {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        scroll-behavior:smooth;
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .is-scaled-down {
+            @include transform(scale(0.95));
+        }
+    }
+
+    // Dark mode support
+    @media (prefers-color-scheme: dark) {
+
+        * {
+            color: $dark_mode_text_primary;
+        }
+
+        body, html {
+            background: $dark_mode_background;
+            color: $dark_mode_text_primary;
+
+            img {
+                opacity: .95;
+            }
+        }
    }
-  }
-}
 </style>
@@ -1,7 +1,7 @@
 <template>
    <WidgetWrapper :icon="icon" :title="title">
-        <DatatableWrapper v-if="users" :paginator="false" :columns="columns" :data="users" class="table table-users">
-            <template scope="{ row }">
+        <DatatableWrapper  @init="isLoading = false" api="/api/dashboard/new-users" :paginator="false" :columns="columns" class="table table-users">
+            <template slot-scope="{ row }">
                <tr>
                    <td style="width: 300px">
                        <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
@@ -65,27 +65,26 @@
        data() {
            return {
                isLoading: false,
-                users: undefined,
                columns: [
                    {
                        label: this.$t('admin_page_user.table.name'),
-                        field: 'data.attributes.name',
-                        sortable: true
+                        field: 'name',
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.role'),
-                        field: 'data.attributes.role',
-                        sortable: true
+                        field: 'role',
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.storage_used'),
-                        field: 'relationships.storage.data.attributes.used',
-                        sortable: true
+                        field: 'used',
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.created_at'),
-                        field: 'data.attributes.created_at_formatted',
-                        sortable: true
+                        field: 'created_at',
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
@@ -107,13 +106,6 @@
                }
            }
        },
-        created() {
-            axios.get('/api/dashboard/new-users')
-                .then(response => {
-                    this.users = response.data.data
-                    this.isLoading = false
-                })
-        }
    }
 </script>

@@ -1,6 +1,7 @@
 <template>
    <div class="action-button">
-        <FontAwesomeIcon class="icon" :icon="icon" />
+        <x-icon size="12" class="icon" v-if="icon === 'x'"></x-icon>
+        <edit-2-icon size="12" class="icon" v-if="icon === 'pencil-alt'"></edit-2-icon>
        <span class="label">
            <slot></slot>
        </span>
@@ -8,9 +9,15 @@
 </template>

 <script>
+    import { Edit2Icon, XIcon } from 'vue-feather-icons'
+
    export default {
        name: 'ActionButton',
        props: ['icon'],
+        components: {
+            Edit2Icon,
+            XIcon,
+        }
    }
 </script>

@@ -23,18 +30,17 @@

        .label {
            @include font-size(12);
-            color: $theme;
            font-weight: 600;
-            text-decoration: underline;
        }

        .icon {
            @include font-size(10);
+            vertical-align: middle;
            display: inline-block;
            margin-right: 2px;

-            path {
-                fill: $theme;
+            path, circle, line {
+                stroke: $theme;
            }
        }
    }
@@ -0,0 +1,101 @@
+<template>
+    <div class="select-box">
+        <div class="box-item"
+             :class="{'selected': item.value === input}"
+             @click="getSelectedValue(item)"
+             v-for="(item, i) in data" :key="i"
+        >
+            <span class="box-value">{{ item.label }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'SelectBoxInput',
+        props: [
+            'data',
+            'value',
+        ],
+        data() {
+            return {
+                input: undefined,
+            }
+        },
+        methods: {
+            getSelectedValue(item) {
+                if (! this.input || this.input !== item.value)
+                    this.input = item.value
+                else
+                    this.input = undefined
+
+                this.$emit('input', this.input)
+            }
+        },
+        created() {
+            if (this.value)
+                this.input = this.value
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import "@assets/vue-file-manager/_forms.scss";
+
+    .select-box {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        flex-direction: row;
+        margin-bottom: 10px;
+
+        .box-item {
+            margin-bottom: 10px;
+            padding: 12px 4px;
+            text-align: center;
+            background: $light_background;
+            border-radius: 8px;
+            font-weight: 700;
+            border: 2px solid $light_background;
+            cursor: pointer;
+            flex-direction: column;
+            flex-basis: 55px;
+
+            .box-value {
+                @include font-size(15);
+            }
+
+            &.selected {
+                background: rgba($theme, .1);
+                border-color: $theme;
+
+                .box-value {
+                    color: $theme;
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+        .select-box {
+
+            .box-item {
+                flex-basis: calc(34% - 10px);
+            }
+        }
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+        .select-box {
+
+            .box-item {
+                border-color: $dark_mode_border_color;
+                background: $dark_mode_foreground;
+            }
+        }
+    }
+</style>
@@ -1,9 +1,9 @@
 <template>
    <div class="page-tab">
-        <div id="loader" v-if="isLoading">
+        <div id="loader" v-show="isLoading">
            <Spinner></Spinner>
        </div>
-        <slot v-if="! isLoading"></slot>
+        <slot v-show="! isLoading"></slot>
    </div>
 </template>

@@ -32,6 +32,18 @@
                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                </ValidationProvider>
+
+                <!--More options-->
+                <div class="more-options" v-if="isMoreOptions">
+
+                    <!--Set expiration-->
+                    <div class="input-wrapper">
+                        <label class="input-label">{{ $t('shared_form.label_expiration') }}:</label>
+                        <SelectBoxInput v-model="shareOptions.expiration" :data="expirationList" class="box"/>
+                    </div>
+                </div>
+
+                <ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
            </ValidationObserver>

            <!--Copy generated link-->
@@ -66,6 +78,7 @@

 <script>
    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import SelectBoxInput from '@/components/Others/Forms/SelectBoxInput'
    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
    import PopupActions from '@/components/Others/Popup/PopupActions'
    import PopupContent from '@/components/Others/Popup/PopupContent'
@@ -73,6 +86,7 @@
    import SwitchInput from '@/components/Others/Forms/SwitchInput'
    import SelectInput from '@/components/Others/Forms/SelectInput'
    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import ActionButton from '@/components/Others/ActionButton'
    import CopyInput from '@/components/Others/Forms/CopyInput'
    import ButtonBase from '@/components/FilesView/ButtonBase'
    import {required} from 'vee-validate/dist/rules'
@@ -85,7 +99,9 @@
        components: {
            ValidationProvider,
            ValidationObserver,
+            SelectBoxInput,
            ThumbnailItem,
+            ActionButton,
            PopupWrapper,
            PopupActions,
            PopupContent,
@@ -97,7 +113,10 @@
            required,
        },
        computed: {
-            ...mapGetters(['permissionOptions']),
+            ...mapGetters([
+                'permissionOptions',
+                'expirationList',
+            ]),
            itemTypeTitle() {
                return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
            },
@@ -106,12 +125,16 @@
            },
            submitButtonText() {
                return this.isGeneratedShared ? this.$t('shared_form.button_done') : this.$t('shared_form.button_generate')
+            },
+            moreOptionsTitle() {
+                return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_more_options')
            }
        },
        data() {
            return {
                shareOptions: {
                    isPassword: false,
+                    expiration: undefined,
                    password: undefined,
                    permission: undefined,
                    type: undefined,
@@ -121,9 +144,16 @@
                shareLink: undefined,
                isGeneratedShared: false,
                isLoading: false,
+                isMoreOptions: false,
            }
        },
        methods: {
+            moreOptions() {
+                this.isMoreOptions = ! this.isMoreOptions
+
+                if (! this.isMoreOptions)
+                    this.shareOptions.expiration = undefined
+            },
            async submitShareOptions() {

                // If shared was generated, then close popup
@@ -185,10 +215,12 @@
                        permission: undefined,
                        password: undefined,
                        isPassword: false,
+                        expiration: undefined,
                        type: undefined,
                        unique_id: undefined,
                    }
                    this.isGeneratedShared = false
+                    this.isMoreOptions = false
                    this.shareLink = undefined
                }, 150)
            })
@@ -200,6 +232,10 @@
    @import "@assets/vue-file-manager/_inapp-forms.scss";
    @import '@assets/vue-file-manager/_forms';

+    .more-options {
+        margin-bottom: 10px;
+    }
+
    .input-wrapper {

        &.password {
@@ -31,7 +31,7 @@
                        <label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
                        <SwitchInput v-model="shareOptions.isProtected" :state="shareOptions.isProtected" class="switch"/>
                    </div>
-                    <ActionButton v-if="(pickedItem.shared.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" icon="pencil-alt">{{ $t('popup_share_edit.change_pass') }}</ActionButton>
+                    <ActionButton v-if="(pickedItem.shared.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" class="change-password">{{ $t('popup_share_edit.change_pass') }}</ActionButton>
                </div>

                <!--Set password-->
@@ -40,6 +40,18 @@
                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                </ValidationProvider>

+                <!--More options-->
+                <div class="more-options" v-if="isMoreOptions">
+
+                    <!--Set expiration-->
+                    <div class="input-wrapper">
+                        <label class="input-label">{{ $t('shared_form.label_expiration') }}:</label>
+                        <SelectBoxInput v-model="shareOptions.expiration" :data="expirationList" :value="shareOptions.expiration" class="box"/>
+                    </div>
+                </div>
+
+                <ActionButton @click.native="moreOptions" :icon="isMoreOptions || shareOptions.expiration ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
+
            </ValidationObserver>

        </PopupContent>
@@ -68,6 +80,7 @@

 <script>
    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import SelectBoxInput from '@/components/Others/Forms/SelectBoxInput'
    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
    import PopupActions from '@/components/Others/Popup/PopupActions'
    import PopupContent from '@/components/Others/Popup/PopupContent'
@@ -88,6 +101,7 @@
        components: {
            ValidationProvider,
            ValidationObserver,
+            SelectBoxInput,
            ThumbnailItem,
            ActionButton,
            PopupWrapper,
@@ -101,7 +115,12 @@
            required,
        },
        computed: {
-            ...mapGetters(['user', 'permissionOptions', 'currentFolder']),
+            ...mapGetters([
+                'permissionOptions',
+                'expirationList',
+                'currentFolder',
+                'user',
+            ]),
            isFolder() {
                return this.pickedItem && this.pickedItem.type === 'folder'
            },
@@ -114,18 +133,28 @@
            isSharedLocation() {
                return this.currentFolder && this.currentFolder.location === 'shared'
            },
+            moreOptionsTitle() {
+                return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_more_options')
+            }
        },
        data() {
            return {
+                isConfirmedDestroy: false,
+                canChangePassword: false,
                shareOptions: undefined,
                pickedItem: undefined,
-                isLoading: false,
+                isMoreOptions: false,
                isDeleting: false,
-                canChangePassword: false,
-                isConfirmedDestroy: false,
+                isLoading: false,
            }
        },
        methods: {
+            moreOptions() {
+                this.isMoreOptions = ! this.isMoreOptions
+
+                if (! this.isMoreOptions)
+                    this.shareOptions.expiration = undefined
+            },
            changePassword() {
                this.canChangePassword = false
            },
@@ -142,7 +171,9 @@

                    // Send delete request
                    axios
-                        .delete('/api/share/' + this.pickedItem.shared.token)
+                        .post('/api/share/' + this.pickedItem.shared.token, {
+                            _method: 'delete'
+                        })
                        .then(() => {
                            // Remove item from file browser
                            if ( this.isSharedLocation ) {
@@ -182,24 +213,25 @@

                // Send request to get share link
                axios
-                    .patch('/api/share/' + this.shareOptions.token, {
+                    .post('/api/share/' + this.shareOptions.token, {
                        permission: this.shareOptions.permission,
                        protected: this.shareOptions.isProtected,
+                        expiration: this.shareOptions.expiration,
                        password: this.shareOptions.password ? this.shareOptions.password : undefined,
+                        _method: 'patch'
                    })
                    .then(response => {

-                        // End loading
-                        this.isLoading = false
-
                        // Update shared data
                        this.$store.commit('UPDATE_SHARED_ITEM', response.data.data.attributes)

                        events.$emit('popup:close')
                    })
-                    .catch(error => {
+                    .catch(() => {

-                        // todo: catch errors
+                        this.$isSomethingWrong()
+                    })
+                    .finally(() => {

                        // End loading
                        this.isLoading = false
@@ -219,11 +251,15 @@
                // Store shared options
                this.shareOptions = {
                    token: args.item.shared.token,
+                    expiration: args.item.shared.expire_in,
                    isProtected: args.item.shared.protected,
                    permission: args.item.shared.permission,
                    password: undefined,
                }

+                if (args.item.shared.expire_in)
+                    this.isMoreOptions = true
+
                this.canChangePassword = args.item.shared.protected
            })

@@ -253,6 +289,11 @@
        }
    }

+    .change-password {
+        opacity: 0.7;
+        text-decoration: underline;
+    }
+
    .item-thumbnail {
        margin-bottom: 20px;
    }
@@ -4,410 +4,489 @@
            <thead class="table-header">
            <tr>
                <th
-                        v-for="(column, index) in columns"
-                        @click="sort(column.field, column.sortable, index)"
-                        :key="index"
-                        :class="{ sortable: column.sortable }"
-                        v-if="! column.hidden"
+                    v-for="(column, index) in columns"
+                    @click="sort(column.field, column.sortable)"
+                    :key="index"
+                    :class="{ 'sortable': column.sortable }"
+                    v-if="! column.hidden"
                >
                    <span>{{ column.label }}</span>

-                    <chevron-up-icon v-if="false" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
+                    <chevron-up-icon v-if="column.sortable" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
                </th>
            </tr>
            </thead>

            <tbody class="table-body">
-            <slot v-for="row in visibleData" :row="row">
+            <slot v-for="row in data.data" :row="row">
                <DatatableCell :data="row" :key="row.id"/>
            </slot>
            </tbody>

        </table>
-        <div v-if="hasData && paginator" class="paginator-wrapper">
-            <ul v-if="chunks.length > 1" class="pagination">
-                <li class="page-item">
-                    <a
-                            @click="goToPage(pageIndex - 1)"
-                            class="page-link"
-                            :class="{ disabled: pageIndex == 0 }"
-                    >
+
+        <slot v-if="! isLoading  && ! hasData" name="empty-page"></slot>
+
+        <div v-if="paginator && hasData" class="paginator-wrapper">
+
+            <!--Show if there is only 6 pages-->
+            <ul v-if="data.meta.total > 20 && data.meta.last_page <= 6" class="pagination">
+
+                <!--Go previous icon-->
+                <li class="page-item previous">
+                    <a @click="goToPage(pageIndex - 1)" class="page-link" :class="{ disabled: pageIndex == 0 }">
                        <chevron-left-icon size="14" class="icon"></chevron-left-icon>
                    </a>
                </li>
-                <li
-                        v-for="(row, index) in chunks"
-                        :key="index"
-                        class="page-item"
-                        @click="goToPage(index)"
-                >
-                    <a
-                            class="page-link"
-                            :class="{ active: pageIndex == index }">
-                        {{ index + 1 }}
+
+                <li v-for="(page, index) in 6" :key="index" class="page-item" @click="goToPage(page)">
+                    <a class="page-link" :class="{ active: pageIndex === page }">
+                        {{ page }}
                    </a>
                </li>
-                <li class="page-item">
-                    <a
-                            @click="goToPage(pageIndex + 1)"
-                            class="page-link"
-                            :class="{ disabled: pageIndex + 1 == chunks.length }"
-                    >
+
+                <!--Go next icon-->
+                <li class="page-item next">
+                    <a @click="goToPage(pageIndex + 1)" class="page-link" :class="{ disabled: pageIndex + 1 == data.meta.last_page }">
                        <chevron-right-icon size="14" class="icon"></chevron-right-icon>
                    </a>
                </li>
            </ul>
-            <span class="paginator-info">{{ $t('datatable.paginate_info', {visible: visibleData.length, total: data.length}) }}</span>
+
+            <!--Show if there is more than 6 pages-->
+            <ul v-if="data.meta.total > 20 && data.meta.last_page > 6" class="pagination">
+
+                <!--Go previous icon-->
+                <li class="page-item previous">
+                    <a @click="goToPage(pageIndex - 1)" class="page-link" :class="{ disabled: pageIndex == 0 }">
+                        <chevron-left-icon size="14" class="icon"></chevron-left-icon>
+                    </a>
+                </li>
+
+                <!--Show first Page-->
+                <li class="page-item" v-if="pageIndex >= 5" @click="goToPage(1)">
+                    <a class="page-link">
+                        1
+                    </a>
+                </li>
+
+                <li v-if="pageIndex < 5" v-for="(page, index) in 5" :key="index" class="page-item" @click="goToPage(page)">
+                    <a class="page-link" :class="{ active: pageIndex === page }">
+                        {{ page }}
+                    </a>
+                </li>
+
+                <li class="page-item" v-if="pageIndex >= 5">
+                    <a class="page-link">...</a>
+                </li>
+
+                <!--Floated Pages-->
+                <li v-if="pageIndex >= 5 && pageIndex < (data.meta.last_page - 3)" v-for="(page, index) in floatPages" :key="index" class="page-item" @click="goToPage(page)">
+                    <a class="page-link" :class="{ active: pageIndex === page }">
+                        {{ page }}
+                    </a>
+                </li>
+
+                <li class="page-item" v-if="pageIndex < (data.meta.last_page - 3)">
+                    <a class="page-link">...</a>
+                </li>
+
+                <li v-if="pageIndex > (data.meta.last_page - 4)" v-for="(page, index) in 5" :key="index" class="page-item" @click="goToPage(data.meta.last_page - (4 - index))">
+                    <a class="page-link" :class="{ active: pageIndex === (data.meta.last_page - (4 - index)) }">
+                        {{ data.meta.last_page - (4 - index) }}
+                    </a>
+                </li>
+
+                <!--Show last page-->
+                <li class="page-item" v-if="pageIndex < (data.meta.last_page - 3)" @click="goToPage(data.meta.last_page)">
+                    <a class="page-link">
+                        {{ data.meta.last_page }}
+                    </a>
+                </li>
+
+                <!--Go next icon-->
+                <li class="page-item next">
+                    <a @click="goToPage(pageIndex + 1)" class="page-link" :class="{ disabled: pageIndex + 1 == data.meta.last_page }">
+                        <chevron-right-icon size="14" class="icon"></chevron-right-icon>
+                    </a>
+                </li>
+            </ul>
+
+
+            <span class="paginator-info">{{ $t('datatable.paginate_info', {visible: data.meta.per_page, total: data.meta.total}) }}</span>
        </div>
    </div>
 </template>

 <script>
-    import { ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
-    import DatatableCell from '@/components/Others/Tables/DatatableCell'
-    import {chunk, sortBy} from 'lodash'
+import {ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon} from 'vue-feather-icons'
+import DatatableCell from '@/components/Others/Tables/DatatableCell'
+import {chunk, sortBy} from 'lodash'
+import axios from "axios";

-    export default {
-        props: ['columns', 'data', 'scope', 'paginator'],
-        components: {
-            ChevronRightIcon,
-            ChevronLeftIcon,
-            DatatableCell,
-            ChevronUpIcon,
+export default {
+    name: 'DatatableWrapper',
+    props: [
+        'columns', 'scope', 'paginator', 'api', 'tableData'
+    ],
+    components: {
+        ChevronRightIcon,
+        ChevronLeftIcon,
+        DatatableCell,
+        ChevronUpIcon,
+    },
+    computed: {
+        hasData() {
+            return this.data && this.data.data && this.data.data.length > 0
        },
-        data() {
-            return {
-                items_per_view: 20,
-                pageIndex: 0,
-                paginatorVisible: true,
-                chunks: [],
-                filter: {
-                    sort: 'DESC',
-                    field: undefined,
-                    index: undefined,
-                }
-            }
-        },
-        methods: {
-            goToPage(index) {
-                if (index == this.chunks.length || index == -1) return
-
-                // Update page index
-                this.pageIndex = index
-            },
-            sort(field, sortable, index) {
-
-                // Prevent sortable if is disabled
-                if (!sortable) return
-
-                // Set filter
-                this.filter.field = field
-                this.filter.index = index
-
-                // Set sorting direction
-                if (this.filter.sort === 'DESC') {
-                    this.filter.sort = 'ASC'
-                } else if (this.filter.sort === 'ASC') {
-                    this.filter.sort = 'DESC'
-                }
-            }
-        },
-        computed: {
-            hasData() {
-
-                return this.data.length > 0 ? true : false
-            },
-            visibleData() {
-
-                // Prefent errors when data is empty
-                if (!this.hasData) return
-
-                // Reconfigure data
-                if (this.filter.field) {
-
-                    // Set chunks with sorting
-                    if (this.filter.sort === 'DESC') {
-
-                        // DESC
-                        this.chunks = chunk(sortBy(this.data, this.filter.field), this.items_per_view)
-                    } else {
-
-                        // ASC
-                        this.chunks = chunk(sortBy(this.data, this.filter.field).reverse(), this.items_per_view)
-                    }
-
-                } else {
-
-                    // Get data to chunks
-                    this.chunks = chunk(this.data, this.items_per_view)
-                }
-
-                // Return chunks
-                return this.chunks[this.pageIndex]
+        floatPages() {
+            return [(this.pageIndex - 1), this.pageIndex, (this.pageIndex + 1)];
+        }
+    },
+    data() {
+        return {
+            data: undefined,
+            isLoading: true,
+            pageIndex: 1,
+            filter: {
+                sort: 'DESC',
+                field: undefined,
            }
        }
+    },
+    methods: {
+        goToPage(index) {
+            if (index > this.data.meta.last_page || index === 0) return
+
+            this.pageIndex = index
+
+            this.getPage(index)
+        },
+        sort(field, sortable) {
+
+            // Prevent sortable if is disabled
+            if (!sortable) return
+
+            // Set filter
+            this.filter.field = field
+
+            // Set sorting direction
+            if (this.filter.sort === 'DESC') {
+                this.filter.sort = 'ASC'
+            } else if (this.filter.sort === 'ASC') {
+                this.filter.sort = 'DESC'
+            }
+
+            this.getPage(this.pageIndex)
+        },
+        getPage(page) {
+
+            // Get api URI
+            this.URI = this.api;
+
+            // Set page index
+            if (this.paginator)
+                this.URI = this.URI + '?page=' + page
+
+            // Add filder URI if is defined sorting
+            if (this.filter.field)
+
+                this.URI = this.URI + (this.paginator ? '&' : '?') + 'sort=' + this.filter.field + '&direction=' + this.filter.sort
+
+            this.isLoading = true
+
+            // Get data
+            axios.get(this.URI)
+                .then(response => {
+                    this.data = response.data
+                    this.$emit('data', response.data)
+
+                })
+                .catch(() => this.$isSomethingWrong())
+                .finally(() => {
+                    this.$emit('init', true)
+                    this.isLoading = false
+                }
+            )
+        },
+    },
+    created() {
+        if (this.api)
+            this.getPage(this.pageIndex)
+
+        if (this.tableData)
+            this.data = this.tableData,
+            this.isLoading = false
    }
+}
 </script>

 <style lang="scss" scoped>
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';

-    .datatable {
-        height: 100%;
-    }
+.datatable {
+    height: 100%;
+}

-    .table-row {
-        @include transition;
-    }
+.table-row {
+    @include transition;
+}

-    .table-row-enter,
-    .table-row-leave-to {
-        opacity: 0;
-        @include transform(translateY(-100%));
-    }
+.table-row-enter,
+.table-row-leave-to {
+    opacity: 0;
+    @include transform(translateY(-100%));
+}

-    .table-row-leave-active {
-        position: absolute;
-    }
+.table-row-leave-active {
+    position: absolute;
+}

-    .table {
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    overflow-x: auto;
+
+    tr {
        width: 100%;
-        border-collapse: collapse;
-        overflow-x: auto;
+
+        td, th {
+            &:first-child {
+                padding-left: 15px;
+            }
+
+            &:last-child {
+                padding-right: 15px;
+                text-align: right;
+            }
+        }
+    }
+
+    .table-header {
+        margin-bottom: 10px;

        tr {
-            width: 100%;
-
            td, th {
-                &:first-child {
-                    padding-left: 15px;
+                padding: 12px;
+                text-align: left;
+
+                span {
+                    color: $theme;
+                    font-weight: 700;
+                    @include font-size(12);
+                    white-space: nowrap;
+                }
+
+                &.sortable {
+                    cursor: pointer;
+
+                    &:hover {
+                        .filter-arrow {
+                            opacity: 1;
+                        }
+                    }
                }

                &:last-child {
-                    padding-right: 15px;
                    text-align: right;
                }
            }
        }

+        .filter-arrow {
+            vertical-align: middle;
+            margin-left: 8px;
+            @include transition;
+            opacity: 0;
+
+            path {
+                fill: $text-muted;
+            }
+
+            &.arrow-down {
+                @include transform(rotate(180deg));
+            }
+        }
+
+        span {
+            font-size: 13px;
+            color: $text-muted;
+            font-weight: bold;
+        }
+    }
+
+    .table-body {
+        tr {
+            border-radius: 8px;
+            //border-bottom: 1px solid #f5f5f5;
+
+            &:hover {
+                background: $light_background;
+            }
+
+            td, th {
+                padding: 12px;
+
+                &:last-child {
+                    button {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        span, a.page-link {
+            @include font-size(15);
+            font-weight: 700;
+            padding: 10px 35px 10px 0;
+            display: block;
+            white-space: nowrap;
+        }
+    }
+}
+
+.pagination {
+    .page-item {
+        padding: 3px;
+        display: inline-block;
+    }
+
+    .page-link {
+        width: 30px;
+        height: 30px;
+        display: block;
+        color: $text;
+        border-radius: 6px;
+        text-align: center;
+        line-height: 2.4;
+        font-weight: bold;
+        font-size: 13px;
+        cursor: pointer;
+        @include transition(0.15s);
+
+        .icon {
+            vertical-align: middle;
+            margin-top: -2px;
+        }
+
+        &:hover:not(.disabled) {
+            background: $light_background;
+            color: $text;
+        }
+
+        &.active {
+            color: $text;
+            background: $light_background;
+        }
+
+        &.disabled {
+            background: transparent;
+            cursor: default;
+
+            svg path {
+                fill: $text-muted;
+            }
+        }
+    }
+}
+
+.paginator-wrapper {
+    margin-top: 30px;
+    margin-bottom: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .paginator-info {
+        font-size: 13px;
+        color: $text-muted;
+    }
+}
+
+.user-preview {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    img {
+        width: 45px;
+        margin-right: 22px;
+    }
+}
+
+@media only screen and (max-width: 690px) {
+    .paginator-wrapper {
+        display: block;
+        text-align: center;
+
+        .paginator-info {
+            margin-top: 10px;
+            display: block;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    .table {
+
        .table-header {
-            margin-bottom: 10px;

            tr {
                td, th {
-                    padding: 12px;
-                    text-align: left;

                    span {
                        color: $theme;
-                        font-weight: 700;
-                        @include font-size(12);
-                        white-space: nowrap;
-                    }
-
-                    &.sortable {
-                        cursor: pointer;
-                    }
-
-                    &:last-child {
-                        text-align: right;
                    }
                }
            }
-
-            .filter-arrow {
-                vertical-align: middle;
-                margin-left: 8px;
-                @include transition;
-
-                path {
-                    fill: $text-muted;
-                }
-
-                &.arrow-down {
-                    @include transform(rotate(180deg));
-                }
-            }
-
-            span {
-                font-size: 13px;
-                color: $text-muted;
-                font-weight: bold;
-            }
        }

        .table-body {
-            tr {
-                border-radius: 8px;
-                //border-bottom: 1px solid #f5f5f5;
-
+            tr, th {
                &:hover {
-                    background: $light_background;
-                }
-
-                td, th {
-                    padding: 12px;
-
-                    &:last-child {
-                        button {
-                            margin-right: 0;
-                        }
-                    }
-                }
-            }
-
-            span, a.page-link {
-                @include font-size(15);
-                font-weight: 700;
-                padding: 10px 35px 10px 0;
-                display: block;
-                white-space: nowrap;
-            }
-        }
-    }
-
-    .pagination {
-        .page-item {
-            padding: 3px;
-            display: inline-block;
-        }
-
-        .page-link {
-            width: 30px;
-            height: 30px;
-            display: block;
-            color: $text;
-            border-radius: 6px;
-            text-align: center;
-            line-height: 2.4;
-            font-weight: bold;
-            font-size: 13px;
-            cursor: pointer;
-            @include transition(0.15s);
-
-            .icon {
-                vertical-align: middle;
-                margin-top: -2px;
-            }
-
-            &:hover:not(.disabled) {
-                background: $light_background;
-                color: $text;
-            }
-
-            &.active {
-                color: $text;
-                background: $light_background;
-            }
-
-            &.disabled {
-                background: transparent;
-                cursor: default;
-
-                svg path {
-                    fill: $text-muted;
+                    background: $dark_mode_foreground;
                }
            }
        }
    }

    .paginator-wrapper {
-        margin-top: 30px;
-        margin-bottom: 40px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;

        .paginator-info {
-            font-size: 13px;
-            color: $text-muted;
+            color: $dark_mode_text_secondary;
        }
    }

-    .user-preview {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
+    .pagination {

-        img {
-            width: 45px;
-            margin-right: 22px;
-        }
-    }
+        .page-link {
+            color: $dark_mode_text_secondary;

-    @media only screen and (max-width: 690px) {
-        .paginator-wrapper {
-            display: block;
-            text-align: center;
-
-            .paginator-info {
-                margin-top: 10px;
-                display: block;
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-        .table {
-
-            .table-header {
-
-                tr {
-                    td, th {
-
-                        span {
-                            color: $theme;
-                        }
-                    }
-                }
+            svg polyline {
+                stroke: $dark_mode_text_primary;
            }

-            .table-body {
-                tr, th {
-                    &:hover {
-                        background: $dark_mode_foreground;
-                    }
-                }
+            &:hover:not(.disabled) {
+                color: $theme;
+                background: rgba($theme, 0.1);
            }
-        }

-        .paginator-wrapper {
-
-            .paginator-info {
-                color: $dark_mode_text_secondary;
+            &.active {
+                color: $theme;
+                background: rgba($theme, 0.1);
            }
-        }

-        .pagination {
-
-            .page-link {
-                color: $dark_mode_text_secondary;
+            &.disabled {
+                background: transparent;
+                cursor: default;

                svg polyline {
-                    stroke: $dark_mode_text_primary;
-                }
-
-                &:hover:not(.disabled) {
-                    color: $theme;
-                    background: rgba($theme, 0.1);
-                }
-
-                &.active {
-                    color: $theme;
-                    background: rgba($theme, 0.1);
-                }
-
-                &.disabled {
-                    background: transparent;
-                    cursor: default;
-
-                    svg polyline {
-                        stroke: $dark_mode_text_secondary;
-                    }
+                    stroke: $dark_mode_text_secondary;
                }
            }
        }
    }
+}
 </style>
@@ -124,7 +124,6 @@
    @import '@assets/vue-file-manager/_mixins';

    .menu-bar {
-        //background: linear-gradient(180deg, rgba(246, 245, 241, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
        background: $light_background;
        user-select: none;
        padding-top: 25px;
@@ -1,284 +1,279 @@
-import store from "./store/index";
-import { debounce, includes, truncate } from "lodash";
-import { events } from "./bus";
-import axios from "axios";
-import router from "@/router";
+import store from './store/index'
+import {debounce, includes} from "lodash";
+import {events} from './bus'
+import axios from 'axios'
+import router from '@/router'

 const Helpers = {
-  install(Vue) {
-    Vue.prototype.$updateText = debounce(function(route, name, value) {
-      if (value === "") return;
+    install(Vue) {

-      axios
-        .patch(this.$store.getters.api + route, { name, value })
-        .catch((error) => {
-          events.$emit("alert:open", {
-            title: this.$t("popup_error.title"),
-            message: this.$t("popup_error.message"),
-          });
-        });
-    }, 150);
+        Vue.prototype.$updateText = debounce(function (route, name, value) {

-    Vue.prototype.$updateImage = function(route, name, image) {
-      // Create form
-      let formData = new FormData();
+            if (value === '') return

-      // Add image to form
-      formData.append("name", name);
-      formData.append(name, image);
-      formData.append("_method", "PATCH");
+            axios.post(this.$store.getters.api + route, {name, value, _method: 'patch'})
+                .catch(error => {
+                    events.$emit('alert:open', {
+                        title: this.$t('popup_error.title'),
+                        message: this.$t('popup_error.message'),
+                    })
+                })
+        }, 150)

-      axios
-        .post(this.$store.getters.api + route, formData, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-          },
-        })
-        .catch((error) => {
-          events.$emit("alert:open", {
-            title: this.$t("popup_error.title"),
-            message: this.$t("popup_error.message"),
-          });
-        });
-    };
+        Vue.prototype.$updateImage = function (route, name, image) {

-    Vue.prototype.$scrollTop = function() {
-      var container = document.getElementById("vue-file-manager");
+            // Create form
+            let formData = new FormData()

-      if (container) {
-        container.scrollTop = 0;
-      }
-    };
+            // Add image to form
+            formData.append('name', name)
+            formData.append(name, image)
+            formData.append('_method', 'PATCH')

-    Vue.prototype.$getImage = function(source) {
-      return source ? "/" + source : "";
-    };
-
-    Vue.prototype.$getCreditCardBrand = function(brand) {
-      return `/assets/icons/${brand}.svg`;
-    };
-
-    Vue.prototype.$getInvoiceLink = function(customer, id) {
-      return "/invoice/" + customer + "/" + id;
-    };
-
-    Vue.prototype.$openImageOnNewTab = function(source) {
-      let win = window.open(source, "_blank");
-
-      win.focus();
-    };
-
-    Vue.prototype.$createFolder = function(folderName) {
-      this.$store.dispatch("createFolder", folderName);
-    };
-
-    Vue.prototype.$handleUploading = async function(files, parent_id) {
-      let fileBuffer = [];
-
-      // Append the file list to fileBuffer array
-      Array.prototype.push.apply(fileBuffer, files);
-
-      let fileSucceed = 0;
-
-      // Update files count in progressbar
-      store.commit("UPDATE_FILE_COUNT_PROGRESS", {
-        current: fileSucceed,
-        total: files.length,
-      });
-
-      // Reset upload progress to 0
-      store.commit("UPLOADING_FILE_PROGRESS", 0);
-
-      // Get parent id
-      let parentFolder = this.$store.getters.currentFolder
-        ? this.$store.getters.currentFolder.unique_id
-        : 0;
-      let rootFolder = parent_id ? parent_id : parentFolder;
-
-      // Upload files
-      do {
-        let file = fileBuffer.shift(),
-          chunks = [];
-
-        // Calculate ceils
-        let size = this.$store.getters.config.chunkSize,
-          chunksCeil = Math.ceil(file.size / size);
-
-        // Create chunks
-        for (let i = 0; i < chunksCeil; i++) {
-          chunks.push(
-            file.slice(
-              i * size,
-              Math.min(i * size + size, file.size),
-              file.type
-            )
-          );
+            axios.post(this.$store.getters.api + route, formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                }
+            })
+                .catch(error => {
+                    events.$emit('alert:open', {
+                        title: this.$t('popup_error.title'),
+                        message: this.$t('popup_error.message'),
+                    })
+                })
        }

-        // Set Data
-        let formData = new FormData(),
-          uploadedSize = 0,
-          isNotGeneralError = true,
-          filename =
-            Array(16)
-              .fill(0)
-              .map((x) =>
-                Math.random()
-                  .toString(36)
-                  .charAt(2)
-              )
-              .join("") +
-            "-" +
-            file.name +
-            ".part";
+        Vue.prototype.$scrollTop = function () {
+            var container = document.getElementById('vue-file-manager')

-        do {
-          let isLast = chunks.length === 1,
-            chunk = chunks.shift(),
-            attempts = 0;
+            if (container) {
+                container.scrollTop = 0
+            }
+        }

-          // Set form data
-          formData.set("file", chunk, filename);
-          formData.set("parent_id", rootFolder);
-          formData.set("is_last", isLast);
+        Vue.prototype.$getImage = function (source) {
+            return source ? this.$store.getters.config.host + '/' + source : ''
+        }

-          // Upload chunks
-          do {
-            await store
-              .dispatch("uploadFiles", {
-                form: formData,
-                fileSize: file.size,
-                totalUploadedSize: uploadedSize,
-              })
-              .then(() => {
-                uploadedSize = uploadedSize + chunk.size;
-              })
-              .catch((error) => {
-                // Count attempts
-                attempts++;
+        Vue.prototype.$getCreditCardBrand = function (brand) {
+            return `/assets/icons/${brand}.svg`
+        }

-                // Break uploading proccess
-                if (error.response.status === 500) isNotGeneralError = false;
+        Vue.prototype.$getInvoiceLink = function (customer, id) {
+            return '/invoice/' + customer + '/' + id
+        }

-                // Show Error
-                if (attempts === 3) this.$isSomethingWrong();
-              });
-          } while (isNotGeneralError && attempts !== 0 && attempts !== 3);
-        } while (isNotGeneralError && chunks.length !== 0);
+        Vue.prototype.$openImageOnNewTab = function (source) {
+            let win = window.open(source, '_blank')

-        fileSucceed++;
+            win.focus()
+        }

-        // Progress file log
-        store.commit("UPDATE_FILE_COUNT_PROGRESS", {
-          current: fileSucceed,
-          total: files.length,
-        });
-      } while (fileBuffer.length !== 0);
+        Vue.prototype.$createFolder = function (folderName) {
+            this.$store.dispatch('createFolder', folderName)
+        }

-      store.commit("UPDATE_FILE_COUNT_PROGRESS", undefined);
-    };
+        Vue.prototype.$handleUploading = async function (files, parent_id) {

-    Vue.prototype.$uploadFiles = async function(files) {
-      this.$handleUploading(files, undefined);
-    };
+            let fileBuffer = []

-    Vue.prototype.$uploadExternalFiles = async function(event, parent_id) {
-      // Prevent submit empty files
-      if (event.dataTransfer.items.length == 0) return;
+            // Append the file list to fileBuffer array
+            Array.prototype.push.apply(fileBuffer, files);

-      // Get files
-      let files = [...event.dataTransfer.items].map((item) => item.getAsFile());
+            let fileSucceed = 0

-      this.$handleUploading(files, parent_id);
-    };
+            // Update files count in progressbar
+            store.commit('UPDATE_FILE_COUNT_PROGRESS', {
+                current: fileSucceed,
+                total: files.length
+            })

-    Vue.prototype.$downloadFile = function(url, filename) {
-      var anchor = document.createElement("a");
+            // Reset upload progress to 0
+            store.commit('UPLOADING_FILE_PROGRESS', 0)

-      anchor.href = url;
+            // Get parent id
+            let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
+            let rootFolder = parent_id ? parent_id : parentFolder

-      anchor.download = filename;
+            // Upload files
+            do {
+                let file = fileBuffer.shift(),
+                    chunks = []

-      document.body.appendChild(anchor);
+                // Calculate ceils
+                let size = this.$store.getters.config.chunkSize,
+                    chunksCeil = Math.ceil(file.size / size);

-      anchor.click();
-    };
+                // Create chunks
+                for (let i = 0; i < chunksCeil; i++) {
+                    chunks.push(file.slice(
+                        i * size, Math.min(i * size + size, file.size), file.type
+                    ));
+                }

-    Vue.prototype.$closePopup = function() {
-      events.$emit("popup:close");
-    };
+                // Set Data
+                let formData = new FormData(),
+                    uploadedSize = 0,
+                    isNotGeneralError = true,
+                    striped_name = file.name.replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, ''),
+                    filename = Array(16).fill(0).map(x => Math.random().toString(36).charAt(2)).join('') + '-' + striped_name + '.part'

-    Vue.prototype.$isThisRoute = function(route, locations) {
-      return includes(locations, route.name);
-    };
+                do {
+                    let isLast = chunks.length === 1,
+                        chunk = chunks.shift(),
+                        attempts = 0

-    Vue.prototype.$isThisLocation = function(location) {
-      // Get current location
-      let currentLocation =
-        store.getters.currentFolder && store.getters.currentFolder.location
-          ? store.getters.currentFolder.location
-          : undefined;
+                    // Set form data
+                    formData.set('file', chunk, filename);
+                    formData.set('parent_id', rootFolder)
+                    formData.set('is_last', isLast);

-      // Check if type is object
-      if (typeof location === "Object" || location instanceof Object) {
-        return includes(location, currentLocation);
-      } else {
-        return currentLocation === location;
-      }
-    };
+                    // Upload chunks
+                    do {
+                        await store.dispatch('uploadFiles', {
+                            form: formData,
+                            fileSize: file.size,
+                            totalUploadedSize: uploadedSize
+                        }).then(() => {
+                            uploadedSize = uploadedSize + chunk.size
+                        }).catch((error) => {

-    Vue.prototype.$checkPermission = function(type) {
-      let currentPermission = store.getters.permission;
+                            // Count attempts
+                            attempts++

-      // Check if type is object
-      if (typeof type === "Object" || type instanceof Object) {
-        return includes(type, currentPermission);
-      } else {
-        return currentPermission === type;
-      }
-    };
+                            // Break uploading proccess
+                            if (error.response.status === 500)
+                                isNotGeneralError = false

-    Vue.prototype.$isMobile = function() {
-      const toMatch = [
-        /Android/i,
-        /webOS/i,
-        /iPhone/i,
-        /iPad/i,
-        /iPod/i,
-        /BlackBerry/i,
-        /Windows Phone/i,
-      ];
+                            // Show Error
+                            if (attempts === 3)
+                                this.$isSomethingWrong()
+                        })
+                    } while (isNotGeneralError && attempts !== 0 && attempts !== 3)

-      return toMatch.some((toMatchItem) => {
-        return navigator.userAgent.match(toMatchItem);
-      });
-    };
+                } while (isNotGeneralError && chunks.length !== 0)

-    Vue.prototype.$isMinimalScale = function() {
-      let sizeType = store.getters.filesViewWidth;
+                fileSucceed++

-      return sizeType === "minimal-scale";
-    };
+                // Progress file log
+                store.commit('UPDATE_FILE_COUNT_PROGRESS', {
+                    current: fileSucceed,
+                    total: files.length
+                })

-    Vue.prototype.$isCompactScale = function() {
-      let sizeType = store.getters.filesViewWidth;
+            } while (fileBuffer.length !== 0)

-      return sizeType === "compact-scale";
-    };
+            store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+        }

-    Vue.prototype.$isFullScale = function() {
-      let sizeType = store.getters.filesViewWidth;
+        Vue.prototype.$uploadFiles = async function (files) {

-      return sizeType === "full-scale";
-    };
+            if (files.length == 0) return

-    Vue.prototype.$isSomethingWrong = function() {
-      events.$emit("alert:open", {
-        title: this.$t("popup_error.title"),
-        message: this.$t("popup_error.message"),
-      });
-    };
-  },
-};
+            this.$handleUploading(files, undefined)
+        }

-export default Helpers;
+        Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
+
+            // Prevent submit empty files
+            if (event.dataTransfer.items.length == 0) return
+
+            // Get files
+            let files = [...event.dataTransfer.items].map(item => item.getAsFile());
+
+            this.$handleUploading(files, parent_id)
+        }
+
+        Vue.prototype.$downloadFile = function (url, filename) {
+            var anchor = document.createElement('a')
+
+            anchor.href = url
+
+            anchor.download = filename
+
+            document.body.appendChild(anchor)
+
+            anchor.click()
+        }
+
+        Vue.prototype.$closePopup = function () {
+            events.$emit('popup:close')
+        }
+
+        Vue.prototype.$isThisRoute = function (route, locations) {
+
+            return includes(locations, route.name)
+        }
+
+        Vue.prototype.$isThisLocation = function (location) {
+
+            // Get current location
+            let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
+
+            // Check if type is object
+            if (typeof location === 'Object' || location instanceof Object) {
+                return includes(location, currentLocation)
+
+            } else {
+                return currentLocation === location
+            }
+        }
+
+        Vue.prototype.$checkPermission = function (type) {
+
+            let currentPermission = store.getters.permission
+
+            // Check if type is object
+            if (typeof type === 'Object' || type instanceof Object) {
+                return includes(type, currentPermission)
+
+            } else {
+                return currentPermission === type
+            }
+        }
+
+        Vue.prototype.$isMobile = function () {
+            const toMatch = [
+                /Android/i,
+                /webOS/i,
+                /iPhone/i,
+                /iPad/i,
+                /iPod/i,
+                /BlackBerry/i,
+                /Windows Phone/i
+            ]
+
+            return toMatch.some(toMatchItem => {
+                return navigator.userAgent.match(toMatchItem)
+            })
+        }
+
+        Vue.prototype.$isMinimalScale = function () {
+            let sizeType = store.getters.filesViewWidth
+
+            return sizeType === 'minimal-scale'
+        }
+
+        Vue.prototype.$isCompactScale = function () {
+            let sizeType = store.getters.filesViewWidth
+
+            return sizeType === 'compact-scale'
+        }
+
+        Vue.prototype.$isFullScale = function () {
+            let sizeType = store.getters.filesViewWidth
+
+            return sizeType === 'full-scale'
+        }
+
+        Vue.prototype.$isSomethingWrong = function () {
+
+            events.$emit('alert:open', {
+                title: this.$t('popup_error.title'),
+                message: this.$t('popup_error.message'),
+            })
+        }
+    }
+}
+
+export default Helpers
@@ -208,6 +208,9 @@
 			"username_plac": "输入您的邮件用户名"
 		},
 		"others": {
+			"section_cache": "Application Cache",
+			"cache_disclaimer": "Did you change anything in your .env file or change your stripe credentials? Then clear your cache.",
+			"cache_clear": "Clear Cache",
 			"allow_registration": "允许用户注册",
 			"allow_registration_help": "您可以为新用户禁用公共注册。您仍然可以在管理面板中 <br/>创建新用户。",
 			"contact_email": "联系电子邮件",
@@ -623,11 +626,16 @@
 		"visitor": "仅可以查看或下载文件"
 	},
 	"shared_form": {
+		"button_more_options": "More Options",
+		"button_close_options": "Close Options",
 		"button_done": "太好了！",
 		"button_generate": "生成分享链接",
 		"label_password_protection": "密码保护",
 		"label_permission": "权限",
 		"label_shared_url": "分享链接",
+		"label_expiration": "Link Expiration",
+		"expiration_hour": "{value}h.",
+		"expiration_day": "{value}d.",
 		"placeholder_permission": "请设置权限"
 	},
 	"sidebar": {
@@ -2,96 +2,17 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import i18n from '@/i18n/index'

-import Index from './views/Auth/SignIn'
-import SignUp from './views/Auth/SignUp'
-import SharedPage from './views/Shared/SharedPage'
-import NotFoundShared from './views/Shared/NotFoundShared'
-import ForgottenPassword from './views/Auth/ForgottenPassword'
-import CreateNewPassword from './views/Auth/CreateNewPassword'
-
-import Settings from './views/Profile'
-import Storage from './views/User/Storage'
-import Profile from './views/User/Settings'
-import Invoice from './views/User/Invoices'
-import Password from './views/User/Password'
-import Subscription from './views/User/Subscription'
-import PaymentMethods from './views/User/PaymentMethods'
-import CreatePaymentMethod from './views/User/CreatePaymentMethod'
-
-import Trash from './views/FilePages/Trash'
-import Files from './views/FilePages/Files'
-import SharedFiles from './views/FilePages/SharedFiles'
-
-import UpgradePlan from './views/Upgrade/UpgradePlan'
-import UpgradeBilling from './views/Upgrade/UpgradeBilling'
-
 import AdminMobileMenu from './views/Mobile/AdminMobileMenu'
 import UserProfileMobileMenu from './views/Mobile/UserProfileMobileMenu'

-import Admin from './views/Admin'
-import Invoices from './views/Admin/Invoices'
-import Dashboard from './views/Admin/Dashboard'
-import AppSettings from './views/Admin/AppSettings/AppSettings'
-
-// Pages
-import Pages from './views/Admin/Pages'
-import PageEdit from './views/Admin/Pages/PageEdit'
-
-// App Settings
-import AppEmail from './views/Admin/AppSettings/AppSettingsTabs/Email'
-import AppIndex from './views/Admin/AppSettings/AppSettingsTabs/Index'
-import AppOthers from './views/Admin/AppSettings/AppSettingsTabs/Others'
-import AppBillings from './views/Admin/AppSettings/AppSettingsTabs/Billings'
-import AppPayments from './views/Admin/AppSettings/AppSettingsTabs/Payments'
-import AppAppearance from './views/Admin/AppSettings/AppSettingsTabs/Appearance'
-
-// Plans
-import Plans from './views/Admin/Plans'
-import Plan from './views/Admin/Plans/Plan'
-import PlanCreate from './views/Admin/Plans/PlanCreate'
-import PlanDelete from './views/Admin/Plans/PlanTabs/PlanDelete'
-import PlanSettings from './views/Admin/Plans/PlanTabs/PlanSettings'
-import PlanSubscribers from './views/Admin/Plans/PlanTabs/PlanSubscribers'
-
-// Users
-import Users from './views/Admin/Users'
-import User from './views/Admin/Users/User'
-import UserCreate from './views/Admin/Users/UserCreate'
-import UserDetail from './views/Admin/Users/UserTabs/UserDetail'
-import UserDelete from './views/Admin/Users/UserTabs/UserDelete'
-import UserStorage from './views/Admin/Users/UserTabs/UserStorage'
-import UserPassword from './views/Admin/Users/UserTabs/UserPassword'
-import UserInvoices from './views/Admin/Users/UserTabs/UserInvoices'
-import UserSubscription from './views/Admin/Users/UserTabs/UserSubscription'
-
-// Upgrade
-import Upgrade from './views/Upgrade'
-
-// Setup Wizard
-import SetupWizard from './views/SetupWizard'
-import Database from './views/SetupWizard/Database'
-import AppSetup from './views/SetupWizard/AppSetup'
-import PurchaseCode from './views/SetupWizard/PurchaseCode'
-import AdminAccount from './views/SetupWizard/AdminAccount'
-import BillingsDetail from './views/SetupWizard/BillingsDetail'
-import EnvironmentSetup from './views/SetupWizard/EnvironmentSetup'
-import StripeCredentials from './views/SetupWizard/StripeCredentials'
-import SubscriptionPlans from './views/SetupWizard/SubscriptionPlans'
-import SubscriptionService from './views/SetupWizard/SubscriptionService'
-import InstallationDisclaimer from './views/SetupWizard/InstallationDisclaimer'
-
-// Index pages
-import ContactUs from './views/Index/ContactUs'
-import DynamicPage from './views/Index/DynamicPage'
-import SaaSLandingPage from './views/index/SaaSLandingPage'
-
 Vue.use(Router)

 const routesAdmin = [
    {
        name: 'Admin',
        path: '/admin',
-        component: Admin,
+        component: () =>
+            import(/* webpackChunkName: "chunks/admin" */ './views/Admin'),
        meta: {
            requiresAuth: true,
            title: 'Admin'
@@ -100,7 +21,8 @@ const routesAdmin = [
            {
                name: 'Dashboard',
                path: '/admin/dashboard',
-                component: Dashboard,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/dashboard" */ './views/Admin/Dashboard'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.dashboard')
@@ -109,7 +31,8 @@ const routesAdmin = [
            {
                name: 'Invoices',
                path: '/admin/invoices',
-                component: Invoices,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/invoices" */ './views/Admin/Invoices'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.invoices')
@@ -118,7 +41,8 @@ const routesAdmin = [
            {
                name: 'Pages',
                path: '/admin/pages',
-                component: Pages,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/pages" */ './views/Admin/Pages'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.pages')
@@ -127,7 +51,8 @@ const routesAdmin = [
            {
                name: 'PageEdit',
                path: '/admin/pages/:slug',
-                component: PageEdit,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/page-edit" */ './views/Admin/Pages/PageEdit'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.page_edit')
@@ -136,7 +61,8 @@ const routesAdmin = [
            {
                name: 'Plans',
                path: '/admin/plans',
-                component: Plans,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/plans" */ './views/Admin/Plans'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.pricing_plans')
@@ -145,7 +71,8 @@ const routesAdmin = [
            {
                name: 'Users',
                path: '/admin/users',
-                component: Users,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/users" */ './views/Admin/Users'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.users_list')
@@ -154,7 +81,8 @@ const routesAdmin = [
            {
                name: 'UserCreate',
                path: '/admin/user/create',
-                component: UserCreate,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/user-create" */ './views/Admin/Users/UserCreate'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.user_create')
@@ -163,7 +91,8 @@ const routesAdmin = [
            {
                name: 'PlanCreate',
                path: '/admin/plan/create',
-                component: PlanCreate,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/plan-create" */ './views/Admin/Plans/PlanCreate'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.plan_create')
@@ -172,7 +101,8 @@ const routesAdmin = [
            {
                name: 'User',
                path: '/admin/user/:id',
-                component: User,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/user" */ './views/Admin/Users/User'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.users_user')
@@ -181,7 +111,8 @@ const routesAdmin = [
                    {
                        name: 'UserDetail',
                        path: '/admin/user/:id/details',
-                        component: UserDetail,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/user-detail" */ './views/Admin/Users/UserTabs/UserDetail'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.users_detail')
@@ -190,7 +121,8 @@ const routesAdmin = [
                    {
                        name: 'UserStorage',
                        path: '/admin/user/:id/storage',
-                        component: UserStorage,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/user-storage" */ './views/Admin/Users/UserTabs/UserStorage'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.users_storage_usage')
@@ -199,7 +131,8 @@ const routesAdmin = [
                    {
                        name: 'UserSubscription',
                        path: '/admin/user/:id/subscription',
-                        component: UserSubscription,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/user-subscription" */ './views/Admin/Users/UserTabs/UserSubscription'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.subscription')
@@ -208,7 +141,8 @@ const routesAdmin = [
                    {
                        name: 'UserInvoices',
                        path: '/admin/user/:id/invoices',
-                        component: UserInvoices,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/user-invoices" */ './views/Admin/Users/UserTabs/UserInvoices'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.invoices')
@@ -217,7 +151,8 @@ const routesAdmin = [
                    {
                        name: 'UserPassword',
                        path: '/admin/user/:id/password',
-                        component: UserPassword,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/user-password" */ './views/Admin/Users/UserTabs/UserPassword'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.users_password')
@@ -226,7 +161,8 @@ const routesAdmin = [
                    {
                        name: 'UserDelete',
                        path: '/admin/user/:id/delete',
-                        component: UserDelete,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/user-delete" */ './views/Admin/Users/UserTabs/UserDelete'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.users_delete')
@@ -237,7 +173,8 @@ const routesAdmin = [
            {
                name: 'Plan',
                path: '/admin/plan/:id',
-                component: Plan,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/plan" */ './views/Admin/Plans/Plan'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.plan')
@@ -246,7 +183,8 @@ const routesAdmin = [
                    {
                        name: 'PlanSubscribers',
                        path: '/admin/plan/:id/subscribers',
-                        component: PlanSubscribers,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/plan-subscribers" */ './views/Admin/Plans/PlanTabs/PlanSubscribers'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.subscribers')
@@ -255,7 +193,8 @@ const routesAdmin = [
                    {
                        name: 'PlanSettings',
                        path: '/admin/plan/:id/settings',
-                        component: PlanSettings,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/plan-settings" */ './views/Admin/Plans/PlanTabs/PlanSettings'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.plan_settings'),
@@ -264,7 +203,8 @@ const routesAdmin = [
                    {
                        name: 'PlanDelete',
                        path: '/admin/plan/:id/delete',
-                        component: PlanDelete,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/plan-delete" */ './views/Admin/Plans/PlanTabs/PlanDelete'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.plan_delete'),
@@ -275,7 +215,8 @@ const routesAdmin = [
            {
                name: 'AppSettings',
                path: '/admin/settings',
-                component: AppSettings,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/app-settings" */ './views/Admin/AppSettings/AppSettings'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.settings')
@@ -284,7 +225,8 @@ const routesAdmin = [
                    {
                        name: 'AppAppearance',
                        path: '/admin/settings/appearance',
-                        component: AppAppearance,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/app-appearance" */ './views/Admin/AppSettings/AppSettingsTabs/Appearance'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.appearance')
@@ -293,7 +235,8 @@ const routesAdmin = [
                    {
                        name: 'AppIndex',
                        path: '/admin/settings/index',
-                        component: AppIndex,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/app-index" */ './views/Admin/AppSettings/AppSettingsTabs/Index'),
                        meta: {
                            requiresAuth: true,
                            title: 'Index'
@@ -302,7 +245,8 @@ const routesAdmin = [
                    {
                        name: 'AppBillings',
                        path: '/admin/settings/billings',
-                        component: AppBillings,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/app-billings" */ './views/Admin/AppSettings/AppSettingsTabs/Billings'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.billings')
@@ -311,7 +255,8 @@ const routesAdmin = [
                    {
                        name: 'AppEmail',
                        path: '/admin/settings/email',
-                        component: AppEmail,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/app-email" */ './views/Admin/AppSettings/AppSettingsTabs/Email'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.email')
@@ -320,7 +265,8 @@ const routesAdmin = [
                    {
                        name: 'AppPayments',
                        path: '/admin/settings/payments',
-                        component: AppPayments,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/app-payments" */ './views/Admin/AppSettings/AppSettingsTabs/Payments'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.payments')
@@ -329,7 +275,8 @@ const routesAdmin = [
                    {
                        name: 'AppOthers',
                        path: '/admin/settings/others',
-                        component: AppOthers,
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/app-others" */ './views/Admin/AppSettings/AppSettingsTabs/Others'),
                        meta: {
                            requiresAuth: true,
                            title: i18n.t('routes_title.others')
@@ -362,7 +309,8 @@ const routesShared = [
    {
        name: 'SharedPage',
        path: '/shared/:token',
-        component: SharedPage,
+        component: () =>
+            import(/* webpackChunkName: "chunks/shared-page" */ './views/Shared/SharedPage'),
        meta: {
            requiresAuth: false
        },
@@ -370,7 +318,8 @@ const routesShared = [
    {
        name: 'NotFoundShared',
        path: '/shared-not-found',
-        component: NotFoundShared,
+        component: () =>
+            import(/* webpackChunkName: "chunks/not-found-shared" */ './views/Shared/NotFoundShared'),
        meta: {
            requiresAuth: false
        },
@@ -380,7 +329,8 @@ const routesAuth = [
    {
        name: 'SignIn',
        path: '/sign-in',
-        component: Index,
+        component: () =>
+            import(/* webpackChunkName: "chunks/sign-in" */ './views/Auth/SignIn'),
        meta: {
            requiresAuth: false
        },
@@ -388,7 +338,8 @@ const routesAuth = [
    {
        name: 'SignUp',
        path: '/sign-up',
-        component: SignUp,
+        component: () =>
+            import(/* webpackChunkName: "chunks/sign-up" */ './views/Auth/SignUp'),
        meta: {
            requiresAuth: false
        },
@@ -396,7 +347,8 @@ const routesAuth = [
    {
        name: 'ForgottenPassword',
        path: '/forgotten-password',
-        component: ForgottenPassword,
+        component: () =>
+            import(/* webpackChunkName: "chunks/forgotten-password" */ './views/Auth/ForgottenPassword'),
        meta: {
            requiresAuth: false
        },
@@ -404,7 +356,8 @@ const routesAuth = [
    {
        name: 'CreateNewPassword',
        path: '/create-new-password',
-        component: CreateNewPassword,
+        component: () =>
+            import(/* webpackChunkName: "chunks/create-new-password" */ './views/Auth/CreateNewPassword'),
        meta: {
            requiresAuth: false
        },
@@ -414,7 +367,8 @@ const routesUser = [
    {
        name: 'Files',
        path: '/files',
-        component: Files,
+        component: () =>
+            import(/* webpackChunkName: "chunks/files" */ './views/FilePages/Files'),
        meta: {
            requiresAuth: true
        },
@@ -422,7 +376,8 @@ const routesUser = [
    {
        name: 'SharedFiles',
        path: '/shared-files',
-        component: SharedFiles,
+        component: () =>
+            import(/* webpackChunkName: "chunks/shared-files" */ './views/FilePages/SharedFiles'),
        meta: {
            requiresAuth: true
        },
@@ -430,7 +385,8 @@ const routesUser = [
    {
        name: 'Trash',
        path: '/trash',
-        component: Trash,
+        component: () =>
+            import(/* webpackChunkName: "chunks/trash" */ './views/FilePages/Trash'),
        meta: {
            requiresAuth: true
        },
@@ -438,7 +394,8 @@ const routesUser = [
    {
        name: 'Settings',
        path: '/settings',
-        component: Settings,
+        component: () =>
+            import(/* webpackChunkName: "chunks/settings" */ './views/Profile'),
        meta: {
            requiresAuth: true
        },
@@ -446,7 +403,8 @@ const routesUser = [
            {
                name: 'Profile',
                path: 'profile',
-                component: Profile,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/profile" */ './views/User/Settings'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.profile')
@@ -455,7 +413,8 @@ const routesUser = [
            {
                name: 'Password',
                path: '/settings/password',
-                component: Password,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/settings-password" */ './views/User/Password'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.settings_password')
@@ -464,7 +423,8 @@ const routesUser = [
            {
                name: 'Storage',
                path: '/settings/storage',
-                component: Storage,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/settings-storage" */ './views/User/Storage'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.settings_storage')
@@ -473,7 +433,8 @@ const routesUser = [
            {
                name: 'Invoice',
                path: '/settings/invoices',
-                component: Invoice,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/settings-invoices" */ './views/User/Invoices'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.invoices')
@@ -482,7 +443,8 @@ const routesUser = [
            {
                name: 'Subscription',
                path: '/settings/subscription',
-                component: Subscription,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/settings-subscription" */ './views/User/Subscription'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.subscription')
@@ -491,7 +453,8 @@ const routesUser = [
            {
                name: 'PaymentMethods',
                path: '/settings/payment-methods',
-                component: PaymentMethods,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/settings-payment-methods" */ './views/User/PaymentMethods'),
                meta: {
                    requiresAuth: true,
                    title: i18n.t('routes_title.payment_methods')
@@ -500,7 +463,8 @@ const routesUser = [
            {
                name: 'CreatePaymentMethod',
                path: '/settings/create-payment-method',
-                component: CreatePaymentMethod,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/settings-create-payment-methods" */ './views/User/CreatePaymentMethod'),
                meta: {
                    requiresAuth: true,
                    title: 'Create Payment Method'
@@ -511,7 +475,8 @@ const routesUser = [
    {
        name: 'UpgradePlan',
        path: '/upgrade/plan',
-        component: UpgradePlan,
+        component: () =>
+            import(/* webpackChunkName: "chunks/upgrade-plan" */ './views/Upgrade/UpgradePlan'),
        meta: {
            requiresAuth: true,
            title: i18n.t('routes_title.upgrade_plan')
@@ -520,7 +485,8 @@ const routesUser = [
    {
        name: 'UpgradeBilling',
        path: '/upgrade/billing',
-        component: UpgradeBilling,
+        component: () =>
+            import(/* webpackChunkName: "chunks/upgrade-billing" */ './views/Upgrade/UpgradeBilling'),
        meta: {
            requiresAuth: true,
            title: i18n.t('routes_title.upgrade_billing')
@@ -531,7 +497,8 @@ const routesMaintenance = [
    {
        name: 'Upgrade',
        path: '/upgrade',
-        component: Upgrade,
+        component: () =>
+            import(/* webpackChunkName: "chunks/upgrade" */ './views/Upgrade'),
        meta: {
            requiresAuth: false
        },
@@ -539,7 +506,8 @@ const routesMaintenance = [
    {
        name: 'SetupWizard',
        path: '/install',
-        component: SetupWizard,
+        component: () =>
+            import(/* webpackChunkName: "chunks/setup-wizard" */ './views/SetupWizard'),
        meta: {
            requiresAuth: false
        },
@@ -547,7 +515,8 @@ const routesMaintenance = [
            {
                name: 'PurchaseCode',
                path: '/setup-wizard/purchase-code',
-                component: PurchaseCode,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/purchase-code" */ './views/SetupWizard/PurchaseCode'),
                meta: {
                    requiresAuth: false,
                },
@@ -555,7 +524,8 @@ const routesMaintenance = [
            {
                name: 'Database',
                path: '/setup-wizard/database',
-                component: Database,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/database" */ './views/SetupWizard/Database'),
                meta: {
                    requiresAuth: false,
                },
@@ -563,7 +533,8 @@ const routesMaintenance = [
            {
                name: 'InstallationDisclaimer',
                path: '/setup-wizard/installation-disclaimer',
-                component: InstallationDisclaimer,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/installation-disclaimer" */ './views/SetupWizard/InstallationDisclaimer'),
                meta: {
                    requiresAuth: false,
                },
@@ -571,7 +542,8 @@ const routesMaintenance = [
            {
                name: 'SubscriptionService',
                path: '/setup-wizard/subscription-service',
-                component: SubscriptionService,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/subscription-service" */ './views/SetupWizard/SubscriptionService'),
                meta: {
                    requiresAuth: false,
                },
@@ -579,7 +551,8 @@ const routesMaintenance = [
            {
                name: 'StripeCredentials',
                path: '/setup-wizard/stripe-credentials',
-                component: StripeCredentials,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/stripe-credentials" */ './views/SetupWizard/StripeCredentials'),
                meta: {
                    requiresAuth: false,
                },
@@ -587,7 +560,8 @@ const routesMaintenance = [
            {
                name: 'BillingsDetail',
                path: '/setup-wizard/stripe-billings',
-                component: BillingsDetail,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/billings-detail" */ './views/SetupWizard/BillingsDetail'),
                meta: {
                    requiresAuth: false,
                },
@@ -595,7 +569,8 @@ const routesMaintenance = [
            {
                name: 'SubscriptionPlans',
                path: '/setup-wizard/stripe-plans',
-                component: SubscriptionPlans,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/subscription-plans" */ './views/SetupWizard/SubscriptionPlans'),
                meta: {
                    requiresAuth: false,
                },
@@ -603,7 +578,8 @@ const routesMaintenance = [
            {
                name: 'EnvironmentSetup',
                path: '/setup-wizard/environment-setup',
-                component: EnvironmentSetup,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/environment-setup" */ './views/SetupWizard/EnvironmentSetup'),
                meta: {
                    requiresAuth: false,
                },
@@ -611,7 +587,8 @@ const routesMaintenance = [
            {
                name: 'AppSetup',
                path: '/setup-wizard/app-setup',
-                component: AppSetup,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/app-setup" */ './views/SetupWizard/AppSetup'),
                meta: {
                    requiresAuth: false,
                },
@@ -619,7 +596,8 @@ const routesMaintenance = [
            {
                name: 'AdminAccount',
                path: '/setup-wizard/admin-setup',
-                component: AdminAccount,
+                component: () =>
+                    import(/* webpackChunkName: "chunks/admin-account" */ './views/SetupWizard/AdminAccount'),
                meta: {
                    requiresAuth: false,
                },
@@ -631,7 +609,8 @@ const routesIndex = [
    {
        name: 'SaaSLandingPage',
        path: '/',
-        component: SaaSLandingPage,
+        component: () =>
+            import(/* webpackChunkName: "chunks/landing-page" */ './views/index/SaaSLandingPage'),
        meta: {
            requiresAuth: false
        },
@@ -639,7 +618,8 @@ const routesIndex = [
    {
        name: 'DynamicPage',
        path: '/page/:slug',
-        component: DynamicPage,
+        component: () =>
+            import(/* webpackChunkName: "chunks/dynamic-page" */ './views/Index/DynamicPage'),
        meta: {
            requiresAuth: false
        },
@@ -647,7 +627,8 @@ const routesIndex = [
    {
        name: 'ContactUs',
        path: '/contact-us',
-        component: ContactUs,
+        component: () =>
+            import(/* webpackChunkName: "chunks/contact-us" */ './views/Index/ContactUs'),
        meta: {
            requiresAuth: false
        },
@@ -263,9 +263,39 @@ const defaultState = {
 		{label: 'Zambia', value: 'ZM'},
 		{label: 'Zimbabwe', value: 'ZW'}
 	],
+	expirationList: [
+		{
+			label: i18n.t('shared_form.expiration_hour', {value: 1}),
+			value: 1,
+		},
+		{
+			label: i18n.t('shared_form.expiration_hour', {value: 2}),
+			value: 2,
+		},
+		{
+			label: i18n.t('shared_form.expiration_hour', {value: 6}),
+			value: 6,
+		},
+		{
+			label: i18n.t('shared_form.expiration_hour', {value: 12}),
+			value: 12,
+		},
+		{
+			label: i18n.t('shared_form.expiration_day', {value: 1}),
+			value: 24,
+		},
+		{
+			label: i18n.t('shared_form.expiration_day', {value: 2}),
+			value: 48,
+		},
+		{
+			label: i18n.t('shared_form.expiration_day', {value: 7}),
+			value: 168,
+		},
+	],
 }
 const actions = {
-	changePreviewType: ({commit, dispatch, state, getters}) => {
+	changePreviewType: ({commit, state}) => {
 		// Get preview type
 		let previewType = state.FilePreviewType == 'grid' ? 'list' : 'grid'

@@ -320,6 +350,7 @@ const mutations = {
 const getters = {
 	fileInfoVisible: state => state.fileInfoPanelVisible,
 	FilePreviewType: state => state.FilePreviewType,
+	expirationList: state => state.expirationList,
 	homeDirectory: state => state.homeDirectory,
 	requestedPlan: state => state.requestedPlan,
 	countries: state => state.countries,
@@ -1,270 +1,251 @@
-import i18n from "@/i18n/index";
-import router from "@/router";
-import { events } from "@/bus";
-import { last } from "lodash";
-import axios from "axios";
+import i18n from '@/i18n/index'
+import router from '@/router'
+import {events} from '@/bus'
+import {last} from 'lodash'
+import axios from 'axios'

 const actions = {
-  moveItem: ({ commit, getters, dispatch }, [item_from, to_item]) => {
-    // Get route
-    let route =
-      getters.sharedDetail && !getters.sharedDetail.protected
-        ? "/api/move/" +
-          item_from.unique_id +
-          "/public/" +
-          router.currentRoute.params.token
-        : "/api/move/" + item_from.unique_id;
+    moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => {

-    axios
-      .patch(route, {
-        from_type: item_from.type,
-        to_unique_id: to_item.unique_id,
-      })
-      .then(() => {
-        commit("REMOVE_ITEM", item_from.unique_id);
-        commit("INCREASE_FOLDER_ITEM", to_item.unique_id);
+        // Get route
+        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+            ? '/api/move/' + item_from.unique_id + '/public/' + router.currentRoute.params.token
+            : '/api/move/' + item_from.unique_id

-        if (
-          item_from.type === "folder" &&
-          getters.currentFolder.location !== "public"
-        )
-          dispatch("getAppData");
-      })
-      .catch(() => isSomethingWrong());
-  },
-  createFolder: ({ commit, getters, dispatch }, folderName) => {
-    // Get route
-    let route =
-      getters.sharedDetail && !getters.sharedDetail.protected
-        ? "/api/create-folder/public/" + router.currentRoute.params.token
-        : "/api/create-folder";
+        axios
+            .post(route, {
+                from_type: item_from.type,
+                to_unique_id: to_item.unique_id,
+                _method: 'patch'
+            })
+            .then(() => {
+                commit('REMOVE_ITEM', item_from.unique_id)
+                commit('INCREASE_FOLDER_ITEM', to_item.unique_id)

-    axios
-      .post(route, {
-        parent_id: getters.currentFolder.unique_id,
-        name: folderName,
-      })
-      .then((response) => {
-        commit("ADD_NEW_FOLDER", response.data);
+                if (item_from.type === 'folder' && getters.currentFolder.location !== 'public')
+                    dispatch('getAppData')

-        events.$emit("scrollTop");
+            })
+            .catch(() => isSomethingWrong())
+    },
+    createFolder: ({commit, getters, dispatch}, folderName) => {

-        if (getters.currentFolder.location !== "public") {
-          dispatch("getAppData");
-        }
-      })
-      .catch(() => isSomethingWrong());
-  },
-  renameItem: ({ commit, getters, dispatch }, data) => {
-    // Updated name in favourites panel
-    if (getters.permission === "master" && data.type === "folder")
-      commit("UPDATE_NAME_IN_FAVOURITES", data);
+        // Get route
+        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+            ? '/api/create-folder/public/' + router.currentRoute.params.token
+            : '/api/create-folder'

-    // Get route
-    let route =
-      getters.sharedDetail && !getters.sharedDetail.protected
-        ? "/api/rename-item/" +
-          data.unique_id +
-          "/public/" +
-          router.currentRoute.params.token
-        : "/api/rename-item/" + data.unique_id;
+        axios
+            .post(route, {
+                parent_id: getters.currentFolder.unique_id,
+                name: folderName
+            })
+            .then(response => {
+                commit('ADD_NEW_FOLDER', response.data)

-    axios
-      .patch(route, {
-        name: data.name,
-        type: data.type,
-      })
-      .then((response) => {
-        commit("CHANGE_ITEM_NAME", response.data);
+                events.$emit('scrollTop')

-        if (
-          data.type === "folder" &&
-          getters.currentFolder.location !== "public"
-        )
-          dispatch("getAppData");
-      })
-      .catch(() => isSomethingWrong());
-  },
-  uploadFiles: ({ commit, getters }, { form, fileSize, totalUploadedSize }) => {
-    return new Promise((resolve, reject) => {
-      // Get route
-      let route =
-        getters.sharedDetail && !getters.sharedDetail.protected
-          ? "/api/upload/public/" + router.currentRoute.params.token
-          : "/api/upload";
+                if ( getters.currentFolder.location !== 'public' ) {
+                    dispatch('getAppData')
+                }
+            })
+            .catch(() => isSomethingWrong())
+    },
+    renameItem: ({commit, getters, dispatch}, data) => {

-      axios
-        .post(route, form, {
-          headers: {
-            "Content-Type": "application/octet-stream",
-          },
-          onUploadProgress: (event) => {
-            var percentCompleted = Math.floor(
-              ((totalUploadedSize + event.loaded) / fileSize) * 100
-            );
+        // Updated name in favourites panel
+        if (getters.permission === 'master' && data.type === 'folder')
+            commit('UPDATE_NAME_IN_FAVOURITES', data)

-            commit(
-              "UPLOADING_FILE_PROGRESS",
-              percentCompleted >= 100 ? 100 : percentCompleted
-            );
+        // Get route
+        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+            ? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
+            : '/api/rename-item/' + data.unique_id

-            if (percentCompleted >= 100) {
-              commit("PROCESSING_FILE", true);
-            }
-          },
+        axios
+            .post(route, {
+                name: data.name,
+                type: data.type,
+                _method: 'patch'
+            })
+            .then(response => {
+                commit('CHANGE_ITEM_NAME', response.data)
+
+                if (data.type === 'folder' && getters.currentFolder.location !== 'public')
+                    dispatch('getAppData')
+            })
+            .catch(() => isSomethingWrong())
+    },
+    uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
+        return new Promise((resolve, reject) => {
+
+            // Get route
+            let route = getters.sharedDetail && ! getters.sharedDetail.protected
+                ? '/api/upload/public/' + router.currentRoute.params.token
+                : '/api/upload'
+
+            axios
+                .post(route, form, {
+                    headers: {
+                        'Content-Type': 'application/octet-stream'
+                    },
+                    onUploadProgress: event => {
+
+                        var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
+
+                        commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
+
+                        if (percentCompleted >= 100) {
+                            commit('PROCESSING_FILE', true)
+                        }
+                    }
+                })
+                .then(response => {
+                    commit('PROCESSING_FILE', false)
+
+                    // Check if user is in uploading folder, if yes, than show new file
+                    if (response.data.folder_id == getters.currentFolder.unique_id)
+                        commit('ADD_NEW_ITEMS', response.data)
+
+                    resolve(response)
+                })
+                .catch(error => {
+                    commit('PROCESSING_FILE', false)
+
+                    reject(error)
+
+                    switch (error.response.status) {
+                        case 423:
+                            events.$emit('alert:open', {
+                                emoji: '😬',
+                                title: i18n.t('popup_exceed_limit.title'),
+                                message: i18n.t('popup_exceed_limit.message')
+                            })
+                            break;
+                        case 413:
+                            events.$emit('alert:open', {
+                                emoji: '😟',
+                                title: i18n.t('popup_paylod_error.title'),
+                                message: i18n.t('popup_paylod_error.message')
+                            })
+                            break;
+                        default:
+                            events.$emit('alert:open', {
+                                title: i18n.t('popup_error.title'),
+                                message: i18n.t('popup_error.message'),
+                            })
+                            break;
+                    }
+
+                    // Reset uploader
+                    commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+                })
        })
-        .then((response) => {
-          commit("PROCESSING_FILE", false);
+    },
+    restoreItem: ({commit, getters}, item) => {

-          // Check if user is in uploading folder, if yes, than show new file
-          if (response.data.folder_id == getters.currentFolder.unique_id)
-            commit("ADD_NEW_ITEMS", response.data);
+        let restoreToHome = false

-          resolve(response);
-        })
-        .catch((error) => {
-          commit("PROCESSING_FILE", false);
+        // Check if file can be restored to home directory
+        if (getters.currentFolder.location === 'trash')
+            restoreToHome = true

-          reject(error);
-
-          switch (error.response.status) {
-            case 423:
-              events.$emit("alert:open", {
-                emoji: "😬",
-                title: i18n.t("popup_exceed_limit.title"),
-                message: i18n.t("popup_exceed_limit.message"),
-              });
-              break;
-            case 413:
-              events.$emit("alert:open", {
-                emoji: "😟",
-                title: i18n.t("popup_paylod_error.title"),
-                message: i18n.t("popup_paylod_error.message"),
-              });
-              break;
-            default:
-              events.$emit("alert:open", {
-                title: i18n.t("popup_error.title"),
-                message: i18n.t("popup_error.message"),
-              });
-              break;
-          }
-
-          // Reset uploader
-          commit("UPDATE_FILE_COUNT_PROGRESS", undefined);
-        });
-    });
-  },
-  restoreItem: ({ commit, getters }, item) => {
-    let restoreToHome = false;
-
-    // Check if file can be restored to home directory
-    if (getters.currentFolder.location === "trash") restoreToHome = true;
-
-    // Remove file
-    commit("REMOVE_ITEM", item.unique_id);
-
-    // Remove file preview
-    commit("CLEAR_FILEINFO_DETAIL");
-
-    axios
-      .patch(getters.api + "/restore-item/" + item.unique_id, {
-        type: item.type,
-        to_home: restoreToHome,
-      })
-      .catch(() => isSomethingWrong());
-  },
-  deleteItem: ({ commit, getters, dispatch }, data) => {
-    if (data) {
-      //ADD BY M
-      // Remove file
-      commit("REMOVE_ITEM", data.unique_id);
-
-      // Remove item from sidebar
-      if (getters.permission === "master") {
-        if (data.type === "folder") commit("REMOVE_ITEM_FROM_FAVOURITES", data);
-      }
-
-      // Remove file preview
-      commit("CLEAR_FILEINFO_DETAIL");
-
-      // Get route
-      let route =
-        getters.sharedDetail && !getters.sharedDetail.protected
-          ? "/api/remove-item/" +
-            data.unique_id +
-            "/public/" +
-            router.currentRoute.params.token
-          : "/api/remove-item/" + data.unique_id;
-
-      axios
-        .delete(route, {
-          data: {
-            type: data.type,
-            force_delete: data.deleted_at ? true : false,
-          },
-        })
-        .then(() => {
-          // If is folder, update app data
-          if (data.type === "folder") {
-            if (data.unique_id === getters.currentFolder.unique_id) {
-              if (getters.currentFolder.location === "public") {
-                dispatch("browseShared", [
-                  {
-                    folder: last(getters.browseHistory),
-                    back: true,
-                    init: false,
-                  },
-                ]);
-              } else {
-                dispatch("getFolder", [
-                  {
-                    folder: last(getters.browseHistory),
-                    back: true,
-                    init: false,
-                  },
-                ]);
-              }
-            }
-
-            if (getters.currentFolder.location !== "public")
-              dispatch("getAppData");
-          }
-        })
-        .catch(() => isSomethingWrong());
-    }
-  },
-  emptyTrash: ({ commit, getters }) => {
-    // Clear file browser
-    commit("LOADING_STATE", { loading: true, data: [] });
-
-    axios
-      .delete(getters.api + "/empty-trash")
-      .then(() => {
-        commit("LOADING_STATE", { loading: false, data: [] });
-        events.$emit("scrollTop");
+        // Remove file
+        commit('REMOVE_ITEM', item.unique_id)

        // Remove file preview
-        commit("CLEAR_FILEINFO_DETAIL");
+        commit('CLEAR_FILEINFO_DETAIL')

-        // Show success message
-        events.$emit("success:open", {
-          title: i18n.t("popup_trashed.title"),
-          message: i18n.t("popup_trashed.message"),
-        });
-      })
-      .catch(() => isSomethingWrong());
-  },
-};
+        axios
+            .post(getters.api + '/restore-item/' + item.unique_id, {
+                type: item.type,
+                to_home: restoreToHome,
+                _method: 'patch'
+            })
+            .catch(() => isSomethingWrong())
+    },
+    deleteItem: ({commit, getters, dispatch}, data) => {
+
+        // Remove file
+        commit('REMOVE_ITEM', data.unique_id)
+
+        // Remove item from sidebar
+        if (getters.permission === 'master') {
+
+            if (data.type === 'folder')
+                commit('REMOVE_ITEM_FROM_FAVOURITES', data)
+        }
+
+        // Remove file preview
+        commit('CLEAR_FILEINFO_DETAIL')
+
+        // Get route
+        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+            ? '/api/remove-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
+            : '/api/remove-item/' + data.unique_id
+
+        axios
+            .post(route, {
+                _method: 'delete',
+                data: {
+                    type: data.type,
+                    force_delete: data.deleted_at ? true : false,
+                },
+            })
+            .then(() => {
+
+                // If is folder, update app data
+                if (data.type === 'folder') {
+
+                    if (data.unique_id === getters.currentFolder.unique_id) {
+
+                        if ( getters.currentFolder.location === 'public' ) {
+                            dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
+                        } else {
+                            dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
+                        }
+                    }
+
+                    if ( getters.currentFolder.location !== 'public' )
+                        dispatch('getAppData')
+                }
+            })
+            .catch(() => isSomethingWrong())
+    },
+    emptyTrash: ({commit, getters}) => {
+
+        // Clear file browser
+        commit('LOADING_STATE', {loading: true, data: []})
+
+        axios
+            .post(getters.api + '/empty-trash', {
+                _method: 'delete'
+            })
+            .then(() => {
+                commit('LOADING_STATE', {loading: false, data: []})
+                events.$emit('scrollTop')
+
+                // Remove file preview
+                commit('CLEAR_FILEINFO_DETAIL')
+
+                // Show success message
+                events.$emit('success:open', {
+                    title: i18n.t('popup_trashed.title'),
+                    message: i18n.t('popup_trashed.message'),
+                })
+            })
+            .catch(() => isSomethingWrong())
+    },
+}

 // Show error message
 function isSomethingWrong() {
-  events.$emit("alert:open", {
-    title: i18n.t("popup_error.title"),
-    message: i18n.t("popup_error.message"),
-  });
+    events.$emit('alert:open', {
+        title: i18n.t('popup_error.title'),
+        message: i18n.t('popup_error.message'),
+    })
 }

 export default {
-  actions,
-};
+    actions,
+}
@@ -17,6 +17,10 @@ const actions = {
                .then((response) => {
                    resolve(response)

+                    // Redirect user if is logged
+                    if (router.currentRoute.name === 'SignIn')
+                        router.push({ name: 'Files' })
+
                    commit('RETRIEVE_USER', response.data)

                }).catch((error) => {
@@ -26,7 +30,7 @@ const actions = {
                    if ([401, 403].includes(error.response.status)) {

                        commit('SET_AUTHORIZED', false)
-                        router.push({name: 'SignIn'})
+                        //router.push({name: 'SignIn'})
                    }
                }
            )
@@ -66,7 +70,9 @@ const actions = {
        context.commit('REMOVE_ITEM_FROM_FAVOURITES', folder)

        axios
-            .delete(context.getters.api + '/folders/favourites/' + folder.unique_id)
+            .post(context.getters.api + '/folders/favourites/' + folder.unique_id, {
+                _method: 'delete'
+            })
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
@@ -2,7 +2,7 @@
    <PageTab :is-loading="isLoading" class="form-fixed-width">

        <!--Personal Information-->
-        <PageTabGroup>
+        <PageTabGroup v-if="! isLoading">
            <div class="form block-form">
                <FormLabel>{{ $t('admin_settings.appearance.section_general') }}</FormLabel>

@@ -135,7 +135,7 @@

                // Send request to get verify account
                axios
-                    .put('/api/settings/email', this.mail)
+                    .post('/api/settings/email', this.mail)
                    .then(() => {

                        events.$emit('toaster', {
@@ -57,7 +57,9 @@
                    </div>
                </div>

-                <FormLabel class="mt-70">{{ $t('admin_settings.others.section_others') }}</FormLabel>
+                <FormLabel class="mt-70">
+                    {{ $t('admin_settings.others.section_others') }}
+                </FormLabel>
                <div class="block-wrapper">
                    <label>{{ $t('admin_settings.others.contact_email') }}:</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Contact Email"
@@ -77,6 +79,16 @@
                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                    </ValidationProvider>
                </div>
+
+                <FormLabel class="mt-70">
+                    {{ $t('admin_settings.others.section_cache') }}
+                </FormLabel>
+                <InfoBox>
+                    {{ $t('admin_settings.others.cache_disclaimer') }}
+                </InfoBox>
+                <ButtonBase @click.native="flushCache" :loading="isFlushingCache" :disabled="isFlushingCache" type="submit" button-style="theme" class="submit-button">
+                    {{ $t('admin_settings.others.cache_clear') }}
+                </ButtonBase>
            </div>
        </PageTabGroup>
    </PageTab>
@@ -95,6 +107,7 @@
    import PageTab from '@/components/Others/Layout/PageTab'
    import InfoBox from '@/components/Others/Forms/InfoBox'
    import {required} from 'vee-validate/dist/rules'
+    import {events} from '@/bus'
    import axios from 'axios'

    export default {
@@ -117,6 +130,7 @@
        data() {
            return {
                isLoading: true,
+                isFlushingCache: false,
                app: {
                    contactMail: '',
                    googleAnalytics: '',
@@ -126,6 +140,23 @@
                },
            }
        },
+        methods: {
+            flushCache() {
+
+                this.isFlushingCache = true
+
+                axios.get('/api/flush-cache')
+                    .then(() => {
+                        events.$emit('toaster', {
+                            type: 'success',
+                            message: 'Your cache was successfully deleted.',
+                        })
+                    })
+                    .finally(() => {
+                        this.isFlushingCache = false
+                    })
+            }
+        },
        mounted() {
            axios.get('/api/settings', {
                params: {
@@ -710,7 +710,7 @@

                // Send request to get verify account
                axios
-                    .post('/api/setup/stripe-credentials', this.stripeCredentials)
+                    .post('/api/settings/stripe', this.stripeCredentials)
                    .then(() => {

                        // End loading
@@ -7,7 +7,6 @@
                <div class="logo">
                    <a href="https://vuefilemanager.com" target="_blank">
                        <img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager" class="light-mode">
-                        <img src="/assets/images/vuefilemanager-horizontal-logo-dark.svg" alt="VueFileManager" class="dark-mode">
                    </a>
                </div>
                <div class="metadata">
@@ -276,16 +275,6 @@

    @media (prefers-color-scheme: dark) {

-        .logo {
-            .dark-mode {
-                display: block;
-            }
-
-            .light-mode {
-                display: none;
-            }
-        }
-
        .metadata {

            .meta-title {
@@ -2,13 +2,13 @@
    <div id="single-page">

        <!--Page Content-->
-        <div id="page-content" v-if="! isLoading && invoices.length > 0">
+        <div id="page-content" v-show="! isLoading && config.stripe_public_key">
            <MobileHeader :title="$router.currentRoute.meta.title"/>
            <PageHeader :title="$router.currentRoute.meta.title"/>

-            <div class="content-page">
-                <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
-                    <template scope="{ row }">
+            <div class="content-page" v-if="config.stripe_public_key">
+                <DatatableWrapper @data="invoices = $event" @init="isLoading = false" api="/api/invoices" :paginator="false" :columns="columns" class="table">
+                    <template slot-scope="{ row }">
                        <tr>
                            <td>
                                <a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank" class="cell-item">
@@ -126,27 +126,27 @@
                    {
                        label: this.$t('admin_page_invoices.table.number'),
                        field: 'data.attributes.order',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_invoices.table.total'),
                        field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_invoices.table.plan'),
                        field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_invoices.table.payed'),
                        field: 'data.attributes.created_at',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_invoices.table.user'),
                        field: 'relationships.user.data.attributes.name',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
@@ -156,15 +156,8 @@
            }
        },
        created() {
-            if (this.config.stripe_public_key) {
-                axios.get('/api/invoices')
-                    .then(response => {
-                        this.invoices = response.data.data
-                        this.isLoading = false
-                    })
-            } else {
+            if (! this.config.stripe_public_key)
                this.isLoading = false
-            }
        }
    }
 </script>
@@ -1,12 +1,12 @@
 <template>
    <div id="single-page">
-        <div id="page-content" v-if="! isLoading && pages.length > 0">
+        <div id="page-content" v-show="! isLoading">
            <MobileHeader :title="$router.currentRoute.meta.title"/>
            <PageHeader :title="$router.currentRoute.meta.title"/>

            <div class="content-page">
-                <DatatableWrapper :paginator="false" :columns="columns" :data="pages" class="table table-users">
-                    <template scope="{ row }">
+                <DatatableWrapper @init="isLoading = false" api="/api/pages" :paginator="false" :columns="columns" class="table table-users">
+                    <template slot-scope="{ row }">
                        <tr>
                            <td class="name" style="min-width: 200px">
                                <router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="cell-item" tag="div">
@@ -75,21 +75,20 @@
        data() {
            return {
                isLoading: true,
-                pages: undefined,
                columns: [
                    {
                        label: this.$t('admin_pages.table.page'),
-                        field: 'data.attributes.title',
+                        field: 'title',
                        sortable: true
                    },
                    {
                        label: this.$t('admin_pages.table.slug'),
-                        field: 'data.attributes.slug',
+                        field: 'slug',
                        sortable: true
                    },
                    {
                        label: this.$t('admin_pages.table.status'),
-                        field: 'data.attributes.visibility',
+                        field: 'visibility',
                        sortable: true
                    },
                    {
@@ -104,13 +103,6 @@
                this.$updateText('/pages/' + slug, 'visibility', val)
            }
        },
-        created() {
-            axios.get('/api/pages')
-                .then(response => {
-                    this.pages = response.data.data
-                    this.isLoading = false
-                })
-        }
    }
 </script>

@@ -1,12 +1,12 @@
 <template>
    <div id="single-page">

-        <!--Page Content-->
-        <div id="page-content" v-if="! isLoading && plans.length > 0">
+        <!--Stripe plans-->
+        <div id="page-content" v-show="stripeConfiguredWithPlans">
            <MobileHeader :title="$router.currentRoute.meta.title"/>
            <PageHeader :title="$router.currentRoute.meta.title"/>

-            <div class="content-page">
+            <div class="content-page" v-if="config.stripe_public_key">
                <div class="table-tools">
                    <div class="buttons">
                        <router-link :to="{name: 'PlanCreate'}">
@@ -19,8 +19,8 @@

                    </div>
                </div>
-                <DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
-                    <template scope="{ row }">
+                <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/plans" :paginator="false" :columns="columns" class="table table-users">
+                    <template slot-scope="{ row }">
                        <tr>
                            <td style="max-width: 80px">
                                <span class="cell-item">
@@ -64,9 +64,9 @@
            </div>
        </div>

-        <!--Empty plans-->
+        <!--Stripe configured but has empty plans-->
        <EmptyPageContent
-                v-if="! isLoading && plans.length === 0 && config.stripe_public_key"
+                v-if="isEmptyPlans"
                icon="file"
                :title="$t('admin_page_plans.empty.title')"
                :description="$t('admin_page_plans.empty.description')"
@@ -76,9 +76,9 @@
            </router-link>
        </EmptyPageContent>

-        <!--Stripe Not Configured-->
+        <!--Stripe is Not Configured-->
        <EmptyPageContent
-                v-if="! config.stripe_public_key"
+                v-if="stripeIsNotConfigured"
                icon="settings"
                :title="$t('activation.stripe.title')"
                :description="$t('activation.stripe.description')"
@@ -126,6 +126,18 @@
            Edit2Icon,
            Spinner,
        },
+        computed: {
+            ...mapGetters(['config']),
+            isEmptyPlans() {
+                return ! this.isLoading && this.plans.length === 0 && this.config.stripe_public_key
+            },
+            stripeIsNotConfigured() {
+                return ! this.config.stripe_public_key
+            },
+            stripeConfiguredWithPlans() {
+                return ! this.isLoading && this.config.stripe_public_key
+            }
+        },
        data() {
            return {
                isLoading: true,
@@ -134,27 +146,27 @@
                    {
                        label: this.$t('admin_page_plans.table.status'),
                        field: 'data.attributes.status',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_plans.table.name'),
                        field: 'data.attributes.name',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_plans.table.subscribers'),
                        field: 'data.attributes.subscribers',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_plans.table.price'),
                        field: 'data.attributes.price',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_plans.table.storage_capacity'),
                        field: 'data.attributes.capacity',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
@@ -163,24 +175,14 @@
                ],
            }
        },
-        computed: {
-            ...mapGetters(['config']),
-        },
        methods: {
            changeStatus(val, id) {
                this.$updateText('/plans/' + id + '/update', 'is_active', val)
            }
        },
        created() {
-            if (this.config.stripe_public_key) {
-                axios.get('/api/plans')
-                    .then(response => {
-                        this.plans = response.data.data
-                        this.isLoading = false
-                    })
-            } else {
+            if (! this.config.stripe_public_key)
                this.isLoading = false
-            }
        }
    }
 </script>
@@ -70,11 +70,12 @@
                this.isSendingRequest = true

                axios
-                    .delete(this.$store.getters.api + '/plans/' + this.$route.params.id,
+                    .post(this.$store.getters.api + '/plans/' + this.$route.params.id,
                        {
                            data: {
                                name: this.planName
-                            }
+                            },
+                            _method: 'delete'
                        }
                    )
                    .then(() => {
@@ -1,8 +1,10 @@
 <template>
    <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="subscribers && subscribers.length > 0">
-            <DatatableWrapper :paginator="true" :columns="columns" :data="subscribers" class="table">
-                <template scope="{ row }">
+        <PageTabGroup>
+            <DatatableWrapper @init="isLoading = false" :api="'/api/plans/' + this.$route.params.id + '/subscribers'" :paginator="false" :columns="columns" :data="subscribers" class="table">
+
+                <!--Table data content-->
+                <template slot-scope="{ row }">
                    <tr>
                        <td>
                            <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
@@ -30,11 +32,15 @@
                        </td>
                    </tr>
                </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
+                    </InfoBox>
+                </template>
            </DatatableWrapper>
        </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
-        </InfoBox>
    </PageTab>
 </template>

@@ -62,17 +68,17 @@
        data() {
            return {
                subscribers: undefined,
-                isLoading: false,
+                isLoading: true,
                columns: [
                    {
                        label: this.$t('admin_page_user.table.name'),
-                        field: 'data.attributes.name',
+                        field: 'name',
                        sortable: true
                    },
                    {
                        label: this.$t('admin_page_user.table.storage_used'),
-                        field: 'data.relationships.storage.data.attributes.used',
-                        sortable: true
+                        field: 'used',
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
@@ -81,13 +87,6 @@
                ],
            }
        },
-        created() {
-            axios.get('/api/plans/' + this.$route.params.id + '/subscribers')
-                .then(response => {
-                    this.subscribers = response.data.data
-                    this.isLoading = false
-                })
-        }
    }
 </script>

@@ -1,10 +1,12 @@
 <template>
    <div id="single-page">
-        <div id="page-content" v-if="! isLoading">
+        <div id="page-content">
            <MobileHeader :title="$router.currentRoute.meta.title"/>
            <PageHeader :title="$router.currentRoute.meta.title"/>

            <div class="content-page">
+
+                <!--Table tools-->
                <div class="table-tools">
                    <div class="buttons">
                        <router-link :to="{name: 'UserCreate'}">
@@ -13,12 +15,11 @@
                            </MobileActionButton>
                        </router-link>
                    </div>
-                    <div class="searching">
-
-                    </div>
                </div>
-                <DatatableWrapper :paginator="true" :columns="columns" :data="users" class="table table-users">
-                    <template scope="{ row }">
+
+                <!--Datatable-->
+                <DatatableWrapper @init="isLoading = false" api="/api/users" :paginator="true" :columns="columns" class="table table-users">
+                    <template slot-scope="{ row }">
                        <tr>
                            <td style="min-width: 320px">
                                <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
@@ -113,7 +114,6 @@
        data() {
            return {
                isLoading: true,
-                users: [],
                columns: undefined,
            }
        },
@@ -133,34 +133,34 @@
            this.columns = [
                {
                    label: this.$t('admin_page_user.table.name'),
-                    field: 'data.attributes.name',
+                    field: 'name',
                    sortable: true
                },
                {
                    label: this.$t('admin_page_user.table.role'),
-                    field: 'data.attributes.role',
+                    field: 'role',
                    sortable: true
                },
                {
                    label: this.$t('admin_page_user.table.plan'),
-                    field: 'data.attributes.subscription',
-                    sortable: true,
+                    field: 'subscription',
+                    sortable: false,
                    hidden: ! this.config.isSaaS,
                },
                {
                    label: this.$t('admin_page_user.table.storage_used'),
-                    field: 'relationships.storage.data.attributes.used',
+                    field: 'used',
                    sortable: true
                },
                {
                    label: this.$t('admin_page_user.table.storage_capacity'),
-                    field: 'relationships.storage.data.attributes.capacity',
+                    field: 'settings.storage_capacity',
                    sortable: true,
                    hidden: ! this.config.storageLimit,
                },
                {
                    label: this.$t('admin_page_user.table.created_at'),
-                    field: 'data.attributes.created_at_formatted',
+                    field: 'created_at',
                    sortable: true
                },
                {
@@ -169,12 +169,6 @@
                    sortable: false
                },
            ]
-
-            axios.get('/api/users')
-                .then(response => {
-                    this.users = response.data.data
-                    this.isLoading = false
-                })
        }
    }
 </script>
@@ -73,11 +73,12 @@
                this.isSendingRequest = true

                axios
-                    .delete(this.$store.getters.api + '/users/' + this.$route.params.id + '/delete',
+                    .post(this.$store.getters.api + '/users/' + this.$route.params.id + '/delete',
                        {
                            data: {
                                name: this.userName
-                            }
+                            },
+                            _method: 'delete'
                        }
                    )
                    .then((response) => {
@@ -188,10 +188,11 @@

                // Send request to get user reset link
                axios
-                    .patch(this.$store.getters.api + '/users/' + this.$route.params.id + '/role', {
+                    .post(this.$store.getters.api + '/users/' + this.$route.params.id + '/role', {
                        attributes: {
                            role: this.userRole,
-                        }
+                        },
+                        _method: 'patch'
                    })
                    .then(() => {

@@ -1,8 +1,16 @@
 <template>
-    <PageTab :is-loading="isLoading" :class="{'form-fixed-width': ! isLoading && invoices.length === 0}">
-        <PageTabGroup v-if="invoices && invoices.length > 0">
-            <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
-                <template scope="{ row }">
+    <PageTab :is-loading="isLoading">
+        <PageTabGroup>
+            <DatatableWrapper
+                @init="isLoading = false"
+                :api="'/api/users/' + this.$route.params.id + '/invoices'"
+                :paginator="false"
+                :columns="columns"
+                class="table"
+            >
+
+                <!--Table data content-->
+                <template slot-scope="{ row }">
                    <tr>
                        <td>
                            <a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank" class="cell-item">
@@ -33,11 +41,15 @@
                        </td>
                    </tr>
                </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox class="form-fixed-width">
+                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
+                    </InfoBox>
+                </template>
            </DatatableWrapper>
        </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('admin_page_user.invoices.empty') }}</p>
-        </InfoBox>
    </PageTab>
 </template>

@@ -63,27 +75,26 @@
        data() {
            return {
                isLoading: true,
-                invoices: undefined,
                columns: [
                    {
                        label: this.$t('admin_page_invoices.table.number'),
                        field: 'data.attributes.order',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_invoices.table.total'),
                        field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_invoices.table.plan'),
                        field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_invoices.table.payed'),
                        field: 'data.attributes.created_at',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
@@ -92,13 +103,6 @@
                ],
            }
        },
-        created() {
-            axios.get('/api/users/' + this.$route.params.id + '/invoices')
-                .then(response => {
-                    this.invoices = response.data.data
-                    this.isLoading = false
-                })
-        }
    }
 </script>

@@ -96,10 +96,11 @@

                // Send request to get user reset link
                axios
-                    .patch(this.$store.getters.api + '/users/' + this.$route.params.id + '/capacity', {
+                    .post(this.$store.getters.api + '/users/' + this.$route.params.id + '/capacity', {
                        attributes: {
                            storage_capacity: this.capacity
-                        }
+                        },
+                        _method: 'patch'
                    })
                    .then(() => {

@@ -1,6 +1,6 @@
 <template>
    <PageTab :is-loading="isLoading" class="form-fixed-width">
-        <PageTabGroup v-if="subscription">
+        <PageTabGroup v-if="subscription && !isLoading">
            <FormLabel>
                {{ $t('user_subscription.title') }}
            </FormLabel>
@@ -27,7 +27,7 @@
                </ListInfo>
            </div>
        </PageTabGroup>
-        <PageTabGroup v-if="! subscription">
+        <PageTabGroup v-if="! subscription && !isLoading">
            <InfoBox>
                <p>{{ $t('admin_page_user.subscription.empty') }}</p>
            </InfoBox>
@@ -3,7 +3,7 @@

        <!--Create new password-->
        <AuthContent name="create-new-password" :visible="true">
-            <img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
+            <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
            <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>

            <h1>{{ $t('page_create_password.title') }}</h1>
@@ -56,7 +56,9 @@

        <!--Password reset successfully-->
        <AuthContent name="password-reset-successfully" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
+            <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
+
            <h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
            <h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>

@@ -3,7 +3,7 @@

        <!--Forgotten your password?-->
        <AuthContent name="forgotten-password" :visible="true">
-            <img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
+            <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
            <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>

            <h1>{{ $t('page_forgotten_password.title') }}</h1>
@@ -30,7 +30,9 @@

        <!--Password reset link sended-->
        <AuthContent name="password-reset-link-sended" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
+            <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
+
            <h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
            <h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>

@@ -3,7 +3,7 @@

        <!--Log In by Email-->
        <AuthContent name="log-in" :visible="true">
-            <img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
+            <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
            <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>

            <h1>{{ $t('page_login.title') }}</h1>
@@ -3,7 +3,7 @@

        <!--Registration-->
        <AuthContent name="sign-up" :visible="true">
-            <img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
+            <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
            <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>

            <h1>{{ $t('page_registration.title') }}</h1>
@@ -92,7 +92,7 @@
                            </div>
                        </div>
                        <div v-if="config.storageLimit && config.isSaaS && config.app_payments_active && !canShowIncompletePayment" class="headline-actions">
-                            <router-link :to="{name: 'UpgradePlan'}" v-if="canShowUpgradeButton">
+                            <router-link :to="{name: 'UpgradePlan'}">
                                <ButtonBase class="upgrade-button" button-style="secondary" type="button">
                                    {{ $t('global.upgrade_plan') }}
                                </ButtonBase>
@@ -174,9 +174,6 @@
            canShowSubscriptionSettings() {
                return this.config.isSaaS
            },
-            canShowUpgradeButton() {
-                return this.config.isDemo || this.config.storageDefaultSpace === this.user.relationships.storage.data.attributes.capacity || this.config.storageLimit && this.user.relationships.storage.data.attributes.used > 95
-            },
            canShowUpgradeWarning() {
                return this.config.storageLimit && this.user.relationships.storage.data.attributes.used > 95
            },
@@ -1,291 +0,0 @@
-<template>
-    <AuthContentWrapper ref="auth">
-
-        <!--Database Credentials-->
-        <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
-                <settings-icon size="40" class="title-icon"></settings-icon>
-                <h1>Setup Wizard</h1>
-                <h2>Set up your storage driver and email client.</h2>
-            </div>
-
-            <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>
-                </InfoBox>
-
-                <FormLabel>Storage Setup</FormLabel>
-
-                <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]"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="storage-additionals" v-if="storage.driver !== 'local'">
-                    <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="{'is-error': 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="{'is-error': errors[0]}" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </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: true, regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }" v-slot="{ errors }">
-                            <input v-model="storage.endpoint" placeholder="Type your endpoint" type="text" :class="{'is-error': errors[0]}" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            <small class="input-help">
-                                Provide full URIs of your storage endpoint, for example 'https://ams3.digitaloceanspaces.com'.
-                            </small>
-                        </ValidationProvider>
-                    </div>
-                    <div class="block-wrapper">
-                        <label>Region:</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Region" rules="required" v-slot="{ errors }">
-                            <input v-model="storage.region" placeholder="Type your region" type="text" :class="{'is-error': errors[0]}" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            <small class="input-help">
-                                Provide your region, for example 'ams3', 'fra1', 'nyc1'...
-                            </small>
-                        </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="{'is-error': errors[0]}" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            <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>
-                    </InfoBox>
-                </div>
-
-                <FormLabel class="mt-70">Email Setup</FormLabel>
-
-                <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]"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <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="{'is-error': errors[0]}" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <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="{'is-error': errors[0]}" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <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="{'is-error': errors[0]}" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <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="{'is-error': errors[0]}" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <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]"/>
-                        <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"/>
-                </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 {mapGetters} from 'vuex'
-    import axios from 'axios'
-
-    export default {
-        name: 'EnvironmentSetup',
-        components: {
-            AuthContentWrapper,
-            ValidationProvider,
-            ValidationObserver,
-            SettingsIcon,
-            SelectInput,
-            AuthContent,
-            AuthButton,
-            FormLabel,
-            required,
-            InfoBox,
-        },
-        data() {
-            return {
-                isLoading: false,
-                storageServiceList: [
-                    {
-                        label: 'Local Driver',
-                        value: 'local',
-                    },
-                    {
-                        label: 'Amazon Web Services S3',
-                        value: 's3',
-                    },
-                    {
-                        label: 'Digital Ocean Spaces',
-                        value: 'spaces',
-                    },
-                    {
-                        label: 'Object Cloud Storage by Wasabi',
-                        value: 'wasabi',
-                    },
-                    {
-                        label: 'Backblaze B2 Cloud Storage',
-                        value: 'backblaze',
-                    },
-                ],
-                encryptionList: [
-                    {
-                        label: 'TLS',
-                        value: 'tls',
-                    },
-                    {
-                        label: 'SSL',
-                        value: 'ssl',
-                    },
-                ],
-                mailDriverList: [
-                    {
-                        label: 'smtp',
-                        value: 'smtp',
-                    },
-                    {
-                        label: 'sendmail',
-                        value: 'sendmail',
-                    },
-                    {
-                        label: 'mailgun',
-                        value: 'mailgun',
-                    },
-                    {
-                        label: 'ses',
-                        value: 'ses',
-                    },
-                    {
-                        label: 'postmark',
-                        value: 'postmark',
-                    },
-                    {
-                        label: 'log',
-                        value: 'log',
-                    },
-                    {
-                        label: 'array',
-                        value: 'array',
-                    },
-                ],
-                storage: {
-                    driver: 'local',
-                    key: '',
-                    secret: '',
-                    endpoint: '',
-                    region: '',
-                    bucket: '',
-                },
-                mail: {
-                    driver: 'smtp',
-                    host: '',
-                    port: '',
-                    username: '',
-                    password: '',
-                    encryption: '',
-                }
-            }
-        },
-        methods: {
-            async EnvironmentSetupSubmit() {
-
-                // Validate fields
-                const isValid = await this.$refs.environmentSetup.validate();
-
-                if (!isValid) return;
-
-                // Start loading
-                this.isLoading = true
-
-                // Send request to get verify account
-                axios
-                    .post('/api/setup/environment-setup', {
-                        storage: this.storage,
-                        mail: this.mail,
-                    })
-                    .then(response => {
-
-                        // End loading
-                        this.isLoading = false
-
-                        // Redirect to next step
-                        this.$router.push({name: 'AppSetup'})
-                    })
-                    .catch(error => {
-
-                        // End loading
-                        this.isLoading = false
-                    })
-            },
-        },
-        created() {
-            this.$scrollTop()
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    //@import '@assets/vue-file-manager/_auth-form';
-    @import '@assets/vue-file-manager/_forms';
-    @import '@assets/vue-file-manager/_auth';
-    @import '@assets/vue-file-manager/_setup_wizard';
-</style>
@@ -11,8 +11,8 @@
            ...mapGetters(['config']),
        },
        mounted() {
-            //if (this.config.installation === 'setup-done' || this.config.installation === 'quiet-update')
-                //this.$router.push({name: 'SignIn'})
+            if (this.config.installation === 'setup-done' || this.config.installation === 'quiet-update')
+                this.$router.push({name: 'SignIn'})
        }
    }
 </script>
@@ -0,0 +1,456 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Database Credentials-->
+        <AuthContent name="database-credentials" :visible="true">
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Set up your storage driver and email client.</h2>
+            </div>
+
+            <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>
+                </InfoBox>
+
+                <FormLabel>Storage Setup</FormLabel>
+
+                <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]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="storage-additionals" v-if="storage.driver !== 'local'">
+                    <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="{'is-error': 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="{'is-error': 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]"/>
+                            <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>
+                        </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="{'is-error': 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="{'is-error': errors[0]}"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            <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>
+                    </InfoBox>
+                </div>
+
+                <FormLabel class="mt-70">Email Setup</FormLabel>
+
+                <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]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <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="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <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="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <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="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <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="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <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]"/>
+                        <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"/>
+                </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 {mapGetters} from 'vuex'
+import axios from 'axios'
+
+export default {
+    name: 'EnvironmentSetup',
+    components: {
+        AuthContentWrapper,
+        ValidationProvider,
+        ValidationObserver,
+        SettingsIcon,
+        SelectInput,
+        AuthContent,
+        AuthButton,
+        FormLabel,
+        required,
+        InfoBox,
+    },
+    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 === 'wasabi')
+                this.storage.endpoint = 'https://s3.' + val + '.wasabisys.com'
+
+            if (this.storage.driver === 'backblaze')
+                this.storage.endpoint = 'https://s3.' + val + '.backblazeb2.com'
+        },
+    },
+    computed: {
+        regionList() {
+            switch (this.storage.driver) {
+                case 's3':
+                    return this.s3Regions
+                    break
+                case 'spaces':
+                    return this.digitalOceanRegions
+                    break
+                case 'wasabi':
+                    return this.wasabiRegions
+                    break
+                case 'backblaze':
+                    return this.backblazeRegions
+                    break
+            }
+        },
+    },
+    data() {
+        return {
+            isLoading: false,
+            wasabiRegions: [
+                {
+                    label: 'US East 1 (N. Virginia)',
+                    value: 'us-east-1',
+                },
+                {
+                    label: 'US East 2 (N. Virginia)',
+                    value: 'us-east-2',
+                },
+                {
+                    label: 'US West 1 (Oregon)',
+                    value: 'us-west-1',
+                },
+                {
+                    label: 'EU Central 1 (Amsterdam)',
+                    value: 'eu-central-1',
+                },
+            ],
+            backblazeRegions: [
+                {
+                    label: 'us-west-001',
+                    value: 'us-west-001',
+                },
+                {
+                    label: 'us-west-002',
+                    value: 'us-west-002',
+                },
+                {
+                    label: 'eu-central-003',
+                    value: 'eu-central-003',
+                },
+            ],
+            digitalOceanRegions: [
+                {
+                    label: 'New York',
+                    value: 'nyc3',
+                },
+                {
+                    label: 'San Francisco',
+                    value: 'sfo2',
+                },
+                {
+                    label: 'Amsterdam',
+                    value: 'ams3',
+                },
+                {
+                    label: 'Singapore',
+                    value: 'sgp1',
+                },
+                {
+                    label: 'Frankfurt',
+                    value: 'fra1',
+                },
+            ],
+            s3Regions: [
+                {
+                    label: 'us-east-1',
+                    value: 'us-east-1',
+                },
+                {
+                    label: 'us-east-2',
+                    value: 'us-east-2',
+                },
+                {
+                    label: 'us-west-1',
+                    value: 'us-west-1',
+                },
+                {
+                    label: 'us-west-2',
+                    value: 'us-west-2',
+                },
+                {
+                    label: 'af-south-1',
+                    value: 'af-south-1',
+                },
+                {
+                    label: 'ap-east-1',
+                    value: 'ap-east-1',
+                },
+                {
+                    label: 'ap-south-1',
+                    value: 'ap-south-1',
+                },
+                {
+                    label: 'ap-northeast-2',
+                    value: 'ap-northeast-2',
+                },
+                {
+                    label: 'ap-southeast-1',
+                    value: 'ap-southeast-1',
+                },
+                {
+                    label: 'ap-southeast-2',
+                    value: 'ap-southeast-2',
+                },
+                {
+                    label: 'ap-northeast-1',
+                    value: 'ap-northeast-1',
+                },
+                {
+                    label: 'ca-central-1',
+                    value: 'ca-central-1',
+                },
+                {
+                    label: 'eu-central-1',
+                    value: 'eu-central-1',
+                },
+                {
+                    label: 'eu-west-1',
+                    value: 'eu-west-1',
+                },
+                {
+                    label: 'eu-west-2',
+                    value: 'eu-west-2',
+                },
+                {
+                    label: 'eu-south-1',
+                    value: 'eu-south-1',
+                },
+                {
+                    label: 'eu-west-3',
+                    value: 'eu-west-3',
+                },
+                {
+                    label: 'eu-north-1',
+                    value: 'eu-north-1',
+                },
+                {
+                    label: 'me-south-1',
+                    value: 'me-south-1',
+                },
+                {
+                    label: 'sa-east-1',
+                    value: 'sa-east-1',
+                },
+            ],
+            storageServiceList: [
+                {
+                    label: 'Local Driver',
+                    value: 'local',
+                },
+                {
+                    label: 'Amazon Web Services S3',
+                    value: 's3',
+                },
+                {
+                    label: 'Digital Ocean Spaces',
+                    value: 'spaces',
+                },
+                {
+                    label: 'Object Cloud Storage by Wasabi',
+                    value: 'wasabi',
+                },
+                {
+                    label: 'Backblaze B2 Cloud Storage',
+                    value: 'backblaze',
+                },
+            ],
+            encryptionList: [
+                {
+                    label: 'TLS',
+                    value: 'tls',
+                },
+                {
+                    label: 'SSL',
+                    value: 'ssl',
+                },
+            ],
+            mailDriverList: [
+                {
+                    label: 'smtp',
+                    value: 'smtp',
+                },
+                {
+                    label: 'sendmail',
+                    value: 'sendmail',
+                },
+                {
+                    label: 'mailgun',
+                    value: 'mailgun',
+                },
+                {
+                    label: 'ses',
+                    value: 'ses',
+                },
+                {
+                    label: 'postmark',
+                    value: 'postmark',
+                },
+                {
+                    label: 'log',
+                    value: 'log',
+                },
+                {
+                    label: 'array',
+                    value: 'array',
+                },
+            ],
+            storage: {
+                driver: 'local',
+                key: '',
+                secret: '',
+                endpoint: '',
+                region: '',
+                bucket: '',
+            },
+            mail: {
+                driver: 'smtp',
+                host: '',
+                port: '',
+                username: '',
+                password: '',
+                encryption: '',
+            }
+        }
+    },
+    methods: {
+        async EnvironmentSetupSubmit() {
+
+            // Validate fields
+            const isValid = await this.$refs.environmentSetup.validate();
+
+            if (!isValid) return;
+
+            // Start loading
+            this.isLoading = true
+
+            // Send request to get verify account
+            axios
+                .post('/api/setup/environment-setup', {
+                    storage: this.storage,
+                    mail: this.mail,
+                })
+                .then(response => {
+
+                    // End loading
+                    this.isLoading = false
+
+                    // Redirect to next step
+                    this.$router.push({name: 'AppSetup'})
+                })
+                .catch(error => {
+
+                    // End loading
+                    this.isLoading = false
+                })
+        },
+    },
+    created() {
+        this.$scrollTop()
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@assets/vue-file-manager/_forms';
+@import '@assets/vue-file-manager/_auth';
+@import '@assets/vue-file-manager/_setup_wizard';
+</style>
@@ -3,7 +3,9 @@

        <!--Password reset link sended-->
        <AuthContent name="not-found" :visible="true">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
+            <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
+
            <h1>{{ $t('page_shared_404.title') }}</h1>
            <h2>{{ $t('page_shared_404.subtitle') }}</h2>

@@ -1,309 +1,278 @@
 <template>
-  <div id="shared">
-    <!-- File Preview -->
-    <FileFullPreview />
+    <div id="shared">
+        <!-- File Preview -->
+        <FileFullPreview />

-    <!--Loading Spinenr-->
-    <Spinner v-if="isPageLoading" />
+        <!--Loading Spinenr-->
+        <Spinner v-if="isPageLoading"/>

-    <!--Move item setup-->
-    <MoveItem />
+        <!--Move item setup-->
+        <MoveItem />

-    <!--Mobile Menu-->
-    <MobileMenu />
+        <!--Mobile Menu-->
+        <MobileMenu/>

-    <!--System alerts-->
-    <Alert />
+        <!--System alerts-->
+        <Alert />

-    <!--Background vignette-->
-    <Vignette />
+        <!--Background vignette-->
+        <Vignette/>

-    <!--Password verification-->
-    <div v-if="currentPage === 'page-password'" id="password-view">
-      <!--Verify share link by password-->
-      <AuthContent class="center" name="password" :visible="true">
-        <img class="logo" :src="config.app_logo" :alt="config.app_name" />
-        <h1>{{ $t("page_shared.title") }}</h1>
-        <h2>{{ $t("page_shared.subtitle") }}</h2>
+        <!--Password verification-->
+        <div v-if="currentPage === 'page-password'" id="password-view">

-        <ValidationObserver
-          @submit.prevent="authenticateProtected"
-          ref="authenticateProtected"
-          v-slot="{ invalid }"
-          tag="form"
-          class="form inline-form"
-        >
-          <ValidationProvider
-            tag="div"
-            mode="passive"
-            class="input-wrapper"
-            name="Password"
-            rules="required"
-            v-slot="{ errors }"
-          >
-            <input
-              v-model="password"
-              :placeholder="$t('page_shared.placeholder_pass')"
-              type="password"
-              :class="{ 'is-error': errors[0] }"
-            />
-            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-          </ValidationProvider>
+            <!--Verify share link by password-->
+            <AuthContent class="center" name="password" :visible="true">
+                <img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
+                <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>

-          <AuthButton
-            icon="chevron-right"
-            :text="$t('page_shared.submit')"
-            :loading="isLoading"
-            :disabled="isLoading"
-          />
-        </ValidationObserver>
-      </AuthContent>
-    </div>
+                <h1>{{ $t('page_shared.title') }}</h1>
+                <h2>{{ $t('page_shared.subtitle') }}</h2>

-    <!--File browser-->
-    <div v-if="currentPage === 'page-files'" id="files-view">
-      <div id="single-file" v-if="sharedDetail.type === 'file'">
-        <div class="single-file-wrapper">
-          <FileItemGrid
-            v-if="sharedFile"
-            :data="sharedFile"
-            :context-menu="false"
-          />
+                <ValidationObserver @submit.prevent="authenticateProtected" ref="authenticateProtected" v-slot="{ invalid }" tag="form" class="form inline-form">

-          <ButtonBase
-            @click.native="download"
-            class="download-button"
-            button-style="theme"
-          >
-            {{ $t("page_shared.download_file") }}
-          </ButtonBase>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Password" rules="required" v-slot="{ errors }">
+                        <input v-model="password" :placeholder="$t('page_shared.placeholder_pass')" type="password" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+
+                    <AuthButton icon="chevron-right" :text="$t('page_shared.submit')" :loading="isLoading" :disabled="isLoading" />
+                </ValidationObserver>
+            </AuthContent>
        </div>
-      </div>
-      <div
-        v-if="sharedDetail.type === 'folder'"
-        @contextmenu.prevent.capture="contextMenu($event, undefined)"
-        @click="fileViewClick"
-      >
-        <!--Context menu-->
-        <ContextMenu />
-
-        <!--Desktop Toolbar-->
-        <DesktopToolbar />

        <!--File browser-->
-        <FileBrowser />
-      </div>
+        <div v-if="currentPage === 'page-files'" id="files-view">
+            <div id="single-file" v-if="sharedDetail.type === 'file'">
+                <div class="single-file-wrapper">
+                    <FileItemGrid v-if="sharedFile" :data="sharedFile" :context-menu="false"/>
+
+                    <ButtonBase @click.native="download" class="download-button" button-style="theme">
+                        {{ $t('page_shared.download_file') }}
+                    </ButtonBase>
+                </div>
+            </div>
+            <div v-if="sharedDetail.type === 'folder'" @contextmenu.prevent.capture="contextMenu($event, undefined)" @click="fileViewClick">
+
+                <!--Context menu-->
+                <ContextMenu/>
+
+                <!--Desktop Toolbar-->
+                <DesktopToolbar/>
+
+                <!--File browser-->
+                <FileBrowser/>
+            </div>
+        </div>
    </div>
-  </div>
 </template>

 <script>
-import {
-  ValidationProvider,
-  ValidationObserver,
-} from "vee-validate/dist/vee-validate.full";
-import FileFullPreview from "@/components/FilesView/FileFullpreview";
-import DesktopToolbar from "@/components/FilesView/DesktopToolbar";
-import FileItemGrid from "@/components/FilesView/FileItemGrid";
-import FileBrowser from "@/components/FilesView/FileBrowser";
-import ContextMenu from "@/components/FilesView/ContextMenu";
-import ButtonBase from "@/components/FilesView/ButtonBase";
-import MobileMenu from "@/components/FilesView/MobileMenu";
-import AuthContent from "@/components/Auth/AuthContent";
-import AuthButton from "@/components/Auth/AuthButton";
-import Spinner from "@/components/FilesView/Spinner";
-import MoveItem from "@/components/Others/MoveItem";
-import Vignette from "@/components/Others/Vignette";
-import Alert from "@/components/FilesView/Alert";
-import { required } from "vee-validate/dist/rules";
-import { mapGetters } from "vuex";
-import { events } from "@/bus";
-import axios from "axios";
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
+    import FileFullPreview from "@/components/FilesView/FileFullpreview";
+    import FileItemGrid from '@/components/FilesView/FileItemGrid'
+    import FileBrowser from '@/components/FilesView/FileBrowser'
+    import ContextMenu from '@/components/FilesView/ContextMenu'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import MobileMenu from '@/components/FilesView/MobileMenu'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import Spinner from '@/components/FilesView/Spinner'
+    import MoveItem from '@/components/Others/MoveItem'
+    import Vignette from '@/components/Others/Vignette'
+    import Alert from '@/components/FilesView/Alert'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+    import axios from 'axios'

-export default {
-  name: "SharedPage",
-  components: {
-    ValidationProvider,
-    ValidationObserver,
-    FileFullPreview,
-    DesktopToolbar,
-    FileItemGrid,
-    AuthContent,
-    FileBrowser,
-    ContextMenu,
-    AuthButton,
-    MobileMenu,
-    ButtonBase,
-    MoveItem,
-    required,
-    Vignette,
-    Spinner,
-    Alert,
-  },
-  computed: {
-    ...mapGetters(["config", "sharedDetail", "sharedFile"]),
-  },
-  data() {
-    return {
-      checkedAccount: undefined,
-      password: "",
-      isLoading: false,
-      isPageLoading: true,
-      currentPage: undefined,
-    };
-  },
-  methods: {
-    async authenticateProtected() {
-      // Validate fields
-      const isValid = await this.$refs.authenticateProtected.validate();
+    export default {
+        name: 'SharedPage',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            FileFullPreview,
+            DesktopToolbar,
+            FileItemGrid,
+            AuthContent,
+            FileBrowser,
+            ContextMenu,
+            AuthButton,
+            MobileMenu,
+            ButtonBase,
+            MoveItem,
+            required,
+            Vignette,
+            Spinner,
+            Alert,
+        },
+        computed: {
+            ...mapGetters(['config', 'sharedDetail', 'sharedFile']),
+        },
+        data() {
+            return {
+                checkedAccount: undefined,
+                password: '',
+                isLoading: false,
+                isPageLoading: true,
+                currentPage: undefined
+            }
+        },
+        methods: {
+            async authenticateProtected() {

-      if (!isValid) return;
+                // Validate fields
+                const isValid = await this.$refs.authenticateProtected.validate();

-      // Start loading
-      this.isLoading = true;
+                if (!isValid) return;

-      // Send request to get verify account
-      axios
-        .post("/api/shared/authenticate/" + this.$route.params.token, {
-          password: this.password,
-        })
-        .then(() => {
-          // End loading
-          this.isLoading = false;
+                // Start loading
+                this.isLoading = true

-          // Redirect to file browser page
-          this.currentPage = "page-files";
+                // Send request to get verify account
+                axios
+                    .post('/api/shared/authenticate/' + this.$route.params.token, {
+                        password: this.password
+                    }).then(() => {

-          // Get protected files
-          this.getFiles();
-        })
-        .catch((error) => {
-          if (error.response.status == 401) {
-            this.$refs.authenticateProtected.setErrors({
-              Password: [error.response.data.message],
-            });
-          }
+                        // End loading
+                        this.isLoading = false

-          // End loading
-          this.isLoading = false;
-        });
-    },
-    getFiles() {
-      // Show folder
-      if (this.sharedDetail.type === "folder") {
-        let homeDirectory = {
-          unique_id: this.sharedDetail.item_id,
-          name: this.$t("locations.home"),
-          location: "public",
-        };
+                        // Redirect to file browser page
+                        this.currentPage = 'page-files'

-        // Load folder
-        this.$store.dispatch("browseShared", [
-          { folder: homeDirectory, back: false, init: true },
-        ]);
-      }
+                        // Get protected files
+                        this.getFiles();

-      // Get file
-      if (this.sharedDetail.type === "file") {
-        this.$store.dispatch("getSingleFile");
-      }
-    },
-    download() {
-      this.$downloadFile(
-        this.sharedFile.file_url,
-        this.sharedFile.name + "." + this.sharedFile.mimetype
-      );
-    },
-    fileViewClick() {
-      events.$emit("contextMenu:hide");
-    },
-    contextMenu(event, item) {
-      events.$emit("contextMenu:show", event, item);
-    },
-  },
-  created() {
-    axios
-      .get("/api/shared/" + this.$route.params.token)
-      .then((response) => {
-        // Commit shared item options
-        this.$store.commit("SET_SHARED_DETAIL", response.data.data.attributes);
-        this.$store.commit(
-          "SET_PERMISSION",
-          response.data.data.attributes.permission
-        );
+                    }).catch(error => {

-        // Hide page spinner
-        this.isPageLoading = false;
+                        if (error.response.status == 401) {

-        // Show password page
-        if (response.data.data.attributes.protected) {
-          this.currentPage = "page-password";
-        } else {
-          this.currentPage = "page-files";
-          this.getFiles();
+                            this.$refs.authenticateProtected.setErrors({
+                                'Password': [error.response.data.message]
+                            });
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+            getFiles() {
+
+                // Show folder
+                if (this.sharedDetail.type === 'folder') {
+
+                    let homeDirectory = {
+                        unique_id: this.sharedDetail.item_id,
+                        name: this.$t('locations.home'),
+                        location: 'public',
+                    }
+
+                    // Load folder
+                    this.$store.dispatch('browseShared', [{folder: homeDirectory, back: false, init: true}])
+                }
+
+                // Get file
+                if (this.sharedDetail.type === 'file') {
+                    this.$store.dispatch('getSingleFile')
+                }
+            },
+            download() {
+                this.$downloadFile(this.sharedFile.file_url, this.sharedFile.name + '.' + this.sharedFile.mimetype)
+            },
+            fileViewClick() {
+                events.$emit('contextMenu:hide')
+            },
+            contextMenu(event, item) {
+                events.$emit('contextMenu:show', event, item)
+            },
+        },
+        created() {
+
+            axios
+                .get('/api/shared/' + this.$route.params.token, )
+                .then(response => {
+
+                    // Commit shared item options
+                    this.$store.commit('SET_SHARED_DETAIL', response.data.data.attributes)
+                    this.$store.commit('SET_PERMISSION', response.data.data.attributes.permission)
+
+                    // Hide page spinner
+                    this.isPageLoading = false
+
+                    // Show password page
+                    if (response.data.data.attributes.protected) {
+                        this.currentPage = 'page-password'
+                    } else {
+                        this.currentPage = 'page-files'
+                        this.getFiles()
+                    }
+                })
+                .catch(error => {
+
+                    if (error.response.status == 404) {
+
+                        this.$router.push({name: 'NotFoundShared'})
+                    }
+                })
        }
-      })
-      .catch((error) => {
-        if (error.response.status == 404) {
-          this.$router.push({ name: "NotFoundShared" });
-        }
-      });
-  },
-};
+    }
 </script>

 <style lang="scss" scoped>
-@import "@assets/vue-file-manager/_variables";
-@import "@assets/vue-file-manager/_mixins";
-@import "@assets/vue-file-manager/_auth-form";
-@import "@assets/vue-file-manager/_auth";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_auth-form';
+    @import '@assets/vue-file-manager/_auth';

-#shared {
-  height: 100%;
-}
-
-#password-view {
-  display: grid;
-  height: inherit;
-
-  .center {
-    margin: auto;
-  }
-}
-
-#single-file {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  top: 0;
-  display: grid;
-  height: 100%;
-
-  .single-file-wrapper {
-    margin: auto;
-    text-align: center;
-
-    .download-button {
-      margin-top: 15px;
-      margin-left: auto;
-      margin-right: auto;
+    #shared {
+        height: 100%;
    }
-  }

-  /deep/ .file-wrapper {
-    .file-item {
-      width: 290px;
+    #password-view {
+        display: grid;
+        height: inherit;

-      &:hover,
-      &.is-clicked {
-        background: transparent;
-      }
-
-      .item-shared {
-        display: none;
-      }
+        .center {
+            margin: auto;
+        }
    }
-  }
-}
+
+    #single-file {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        top: 0;
+        display: grid;
+        height: 100%;
+
+        .single-file-wrapper {
+            margin: auto;
+            text-align: center;
+
+            .download-button {
+                margin-top: 15px;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+
+        /deep/ .file-wrapper {
+
+            .file-item {
+                width: 290px;
+
+                &:hover, &.is-clicked {
+                    background: transparent;
+                }
+
+                .item-shared {
+                    display: none;
+                }
+            }
+        }
+    }
+
 </style>
@@ -358,6 +358,7 @@
                    this.errorMessage = error.response.data.message
                }

+                // Show server error
                if (error.response.status === 500) {
                    this.isError = true
                    this.errorMessage = error.response.data.message
@@ -452,16 +453,22 @@

            // Get setup intent for stripe
            axios.get('/api/stripe/setup-intent')
-                .then(response => this.clientSecret = response.data.client_secret)
+                .then(response => {
+                    this.clientSecret = response.data.client_secret
+                })
+                .catch(() => this.$isSomethingWrong())

            axios.get('/api/user/payments')
                .then(response => {

                    this.defaultPaymentMethod = response.data.default
                    this.PaymentMethods = response.data.others
-
-                    this.isLoading = false
                })
+                .catch(() => this.$isSomethingWrong())
+                .finally(() => {
+                        this.isLoading = false
+                    }
+                )
        }
    }
 </script>
@@ -1,9 +1,11 @@
 <template>
    <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="invoices && invoices.length > 0">
+        <PageTabGroup v-show="! isLoading">
            <FormLabel>{{ $t('user_invoices.title') }}</FormLabel>
-            <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
-                <template scope="{ row }">
+            <DatatableWrapper @init="isLoading = false" api="/api/user/invoices" :paginator="false" :columns="columns" class="table">
+
+                <!--Table data content-->
+                <template slot-scope="{ row }">
                    <tr>
                        <td>
                            <a :href="'/invoice/' + row.data.attributes.customer + '/' + row.data.id" target="_blank" class="cell-item">
@@ -34,11 +36,15 @@
                        </td>
                    </tr>
                </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('user_invoices.empty') }}</p>
+                    </InfoBox>
+                </template>
            </DatatableWrapper>
        </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('user_invoices.empty') }}</p>
-        </InfoBox>
    </PageTab>
 </template>

@@ -69,22 +75,22 @@
                    {
                        label: this.$t('rows.invoice.number'),
                        field: 'data.attributes.order',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('rows.invoice.total'),
                        field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('rows.invoice.plan'),
                        field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('rows.invoice.payed'),
                        field: 'data.attributes.created_at',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
@@ -93,13 +99,6 @@
                ],
            }
        },
-        created() {
-            axios.get('/api/user/invoices')
-                .then(response => {
-                    this.invoices = response.data.data
-                    this.isLoading = false
-                })
-        }
    }
 </script>

@@ -48,7 +48,7 @@
    import axios from 'axios'

    export default {
-        name: 'Profile',
+        name: 'Password',
        components: {
            PageTabGroup,
            FormLabel,
@@ -1,16 +1,24 @@
 <template>
    <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
+        <PageTabGroup>
+
+            <!--Page title-->
            <FormLabel>{{ $t('user_payments.title') }}</FormLabel>
-            <div class="page-actions">
+
+            <!--Add payment method button-->
+            <div class="page-actions" v-if="PaymentMethods && PaymentMethods.length > 0">
                <router-link :to="{name: 'CreatePaymentMethod'}">
                    <MobileActionButton icon="credit-card">
                        {{ $t('user_payments.add_card') }}
                    </MobileActionButton>
                </router-link>
            </div>
-            <DatatableWrapper :paginator="false" :columns="columns" :data="PaymentMethods" class="table">
-                <template scope="{ row }">
+
+            <!--Payment methods table-->
+            <DatatableWrapper v-if="PaymentMethods" :table-data="{data: PaymentMethods}" :paginator="false" :columns="columns" class="table">
+
+                <!--Table data content-->
+                <template slot-scope="{ row }">
                    <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
                        <td style="width: 300px">
                            <span class="cell-item">
@@ -24,11 +32,6 @@
                                </div>
                            </span>
                        </td>
-                        <!--<td>
-                            <span class="cell-item">
-                                <ColorLabel :color="getCardStatusColor(row.data.attributes.status)">{{ getCardStatus(row.data.attributes.status) }}</ColorLabel>
-                            </span>
-                        </td>-->
                        <td>
                            <span class="cell-item">
                                {{ row.data.attributes.exp_month }} / {{ row.data.attributes.exp_year }}
@@ -46,11 +49,15 @@
                        </td>
                    </tr>
                </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
+                    </InfoBox>
+                </template>
            </DatatableWrapper>
        </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
-        </InfoBox>
    </PageTab>
 </template>

@@ -92,17 +99,12 @@
                    {
                        label: this.$t('rows.card.number'),
                        field: 'data.attributes.total',
-                        sortable: true
+                        sortable: false
                    },
-                    /*{
-                        label: this.$t('rows.card.status'),
-                        field: 'data.attributes.status',
-                        sortable: true
-                    },*/
                    {
                        label: this.$t('rows.card.expiration'),
                        field: 'data.attributes.total',
-                        sortable: true
+                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
@@ -127,19 +129,6 @@
                    break
                }
            },
-            getCardStatus(status) {
-                switch (status) {
-                    case 'active':
-                        return 'Active'
-                    break
-                    case 'card_declined':
-                        return 'Rejected'
-                    break
-                    case 'expired':
-                        return 'Expired'
-                    break
-                }
-            },
            setDefaultCard(card) {
                events.$emit('confirm:open', {
                    title: this.$t('popup_set_card.title'),
@@ -166,19 +155,19 @@
                    .then(response => {

                        if (response.status == 204) {
-                            this.PaymentMethods = []
+                            this.PaymentMethods = {}
                        }

                        if (response.status == 200) {
-
                            this.defaultPaymentCard = response.data.default

                            this.PaymentMethods = response.data.others.data
                            this.PaymentMethods.push(response.data.default)
                        }
-
+                    }).finally(() => {
                        this.isLoading = false
-                    })
+                    }
+                )
            }
        },
        created() {
@@ -193,7 +182,9 @@

                    this.deletingID = data.id

-                    axios.delete('/api/user/payment-cards/' + data.id)
+                    axios.post('/api/user/payment-cards/' + data.id, {
+                        _method: 'delete'
+                    })
                        .then(() => {

                            // Get payments card
@@ -215,8 +206,9 @@

                if (data.operation === 'set-as-default-credit-card') {

-                    axios.patch('/api/user/payment-cards/' + data.id, {
-                        default: 1
+                    axios.post('/api/user/payment-cards/' + data.id, {
+                        default: 1,
+                        _method: 'patch'
                    })
                        .then(() => {

@@ -1,6 +1,6 @@
 <template>
    <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="subscription">
+        <PageTabGroup v-if="subscription && !isLoading">
            <FormLabel>
                {{ $t('user_subscription.title') }}
            </FormLabel>
@@ -45,7 +45,7 @@
                </div>
            </div>
        </PageTabGroup>
-        <InfoBox v-else>
+        <InfoBox v-if="! subscription && !isLoading">
            <p>{{ $t('user_subscription.empty') }}</p>
        </InfoBox>
    </PageTab>