Shared pages refactoring part 1

resources/js/views/Admin.vue

@@ -59,7 +59,7 @@ import ContentGroup from '../components/Sidebar/ContentGroup'
 import ContentSidebar from '../components/Sidebar/ContentSidebar'
 import SidebarNavigation from '../components/Sidebar/SidebarNavigation'
 import Spotlight from '../components/Spotlight/Spotlight'
-import MobileNavigationToolbar from './MobileNavigationToolbar'
+import MobileNavigationToolbar from '../components/Mobile/MobileNavigationToolbar'
 import {
     BoxIcon,
     CreditCardIcon,

resources/js/views/MobileNavigationToolbar.vue

@@ -1,38 +0,0 @@
-<template>
-    <div class="z-20 block flex w-full items-center justify-between py-5 px-5 text-center lg:hidden">
-        <!--Location Title-->
-        <div
-            class="inline-block overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 dark:text-gray-100"
-            style="max-width: 200px"
-        >
-            {{ locationName }}
-        </div>
-
-        <!--More Actions-->
-        <div class="flex items-center">
-            <div @click="$openSpotlight()" class="mr-4 cursor-pointer px-2">
-                <search-icon size="17" class="vue-feather dark:text-gray-100" />
-            </div>
-            <div @click="$showMobileMenu('user-navigation')" class="cursor-pointer pr-1.5">
-                <menu-icon size="17" class="vue-feather dark:text-gray-100" />
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import { MenuIcon, ChevronLeftIcon, SearchIcon } from 'vue-feather-icons'
-
-export default {
-    name: 'MobileNavigationToolbar',
-    components: {
-        ChevronLeftIcon,
-        SearchIcon,
-        MenuIcon,
-    },
-    computed: {
-        locationName() {
-            return this.$t(this.$route.meta.title)
-        },
-    },
-}
-</script>

resources/js/views/NotFound.vue

@@ -1,10 +1,10 @@
 <template>
-    <AuthContentWrapper ref="auth">
+    <AuthContentWrapper ref="auth" class="h-screen">
         <AuthContent :visible="true">
             <Headline :title="$t('page_shared_404.title')" :description="$t('page_shared_404.subtitle')" />
             <span class="additional-link"
                 >{{ $t('page_registration.have_an_account') }}
-                <router-link :to="{ name: 'SignIn' }">
+                <router-link :to="{ name: 'SignIn' }" class="text-theme font-bold">
                     {{ $t('page_forgotten_password.password_remember_button') }}
                 </router-link>
             </span>

resources/js/views/Profile.vue

@@ -80,7 +80,7 @@ import Spinner from '../components/FilesView/Spinner'
 import { mapGetters } from 'vuex'
 import CardNavigation from '../components/Admin/CardNavigation'
 import ConfirmPassword from '../components/Others/ConfirmPassword'
-import MobileNavigationToolbar from './MobileNavigationToolbar'
+import MobileNavigationToolbar from '../components/Mobile/MobileNavigationToolbar'
 
 export default {
     name: 'Settings',

resources/js/views/Shared.vue

@@ -1,8 +1,5 @@
 <template>
-    <div class="sm:flex md:h-screen md:overflow-hidden">
-        <!--Loading Spinner-->
-        <Spinner v-if="isLoading" />
-
+    <div class="lg:flex lg:h-screen lg:overflow-hidden">
         <!--File preview window-->
         <FilePreview />
         <Spotlight />
@@ -23,54 +20,47 @@
         <DragUI />
         <Alert />
 
-        <NavigationSharePanel v-if="sharedDetail && $router.currentRoute.name === 'Public'" />
+        <NavigationSharePanel />
 
         <div
             @contextmenu.prevent.capture="contextMenu($event, undefined)"
-            class="transition-transform duration-300 sm:flex-grow sm:px-3.5 md:grid md:content-start"
-            :class="{ 'origin-center scale-97 transform': isScaledDown }"
+            class="transition-transform duration-200 lg:grid lg:flex-grow lg:content-start lg:px-3.5"
         >
             <DesktopToolbar />
 
             <MobileToolbar />
 
-            <!--File list & info sidebar-->
-            <div class="flex space-x-6 md:h-full md:overflow-hidden">
-                <router-view
-                    id="file-view"
-                    :class="{
-                        'w-full md:w-4/6 2xl:w-5/6': isVisibleSidebar,
-                        'w-full': !isVisibleSidebar,
-                    }"
-                    class="relative"
-                    :key="$route.fullPath"
-                />
+            <!--Google Adsense banner-->
+            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
 
-                <InfoSidebar v-if="isVisibleSidebar" class="hidden h-screen w-2/6 overflow-y-auto overflow-x-hidden md:block 2xl:w-72" />
+            <!--File list & info sidebar-->
+            <div class="flex space-x-3 lg:overflow-hidden">
+                <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
+
+                <InfoSidebar v-if="isVisibleSidebar" />
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import MobileToolbar from '../components/FilesView/MobileToolbar'
-import InfoSidebar from '../components/FilesView/InfoSidebar'
 import MobileMultiSelectToolbar from '../components/FilesView/MobileMultiSelectToolbar'
+import NavigationSharePanel from './FileView/Components/NavigationSharePanel'
 import FileSortingMobile from '../components/FilesView/FileSortingMobile'
 import CreateFolderPopup from '../components/Others/CreateFolderPopup'
 import ProcessingPopup from '../components/FilesView/ProcessingPopup'
-import NavigationSharePanel from './FileView/Components/NavigationSharePanel'
+import DesktopToolbar from '../components/FilesView/DesktopToolbar'
 import RenameItemPopup from '../components/Others/RenameItemPopup'
+import MobileToolbar from '../components/FilesView/MobileToolbar'
 import FilePreview from '../components/FilePreview/FilePreview'
 import MoveItemPopup from '../components/Others/MoveItemPopup'
-import DesktopToolbar from '../components/FilesView/DesktopToolbar'
-import Spinner from '../components/FilesView/Spinner'
+import InfoSidebar from '../components/FilesView/InfoSidebar'
+import Spotlight from '../components/Spotlight/Spotlight'
 import Vignette from '../components/Others/Vignette'
 import DragUI from '../components/FilesView/DragUI'
 import Alert from '../components/FilesView/Alert'
-import Spotlight from '../components/Spotlight/Spotlight'
-import { events } from '../bus'
 import { mapGetters } from 'vuex'
+import { events } from '../bus'
 
 export default {
     name: 'Shared',
@@ -88,7 +78,6 @@ export default {
         FilePreview,
         Spotlight,
         Vignette,
-        Spinner,
         DragUI,
         Alert,
     },
@@ -97,51 +86,18 @@ export default {
     },
     data() {
         return {
-            isLoading: true,
             isScaledDown: false,
         }
     },
     methods: {
-        spotlightListener(e) {
-            if (e.key === 'k' && e.metaKey) {
-                events.$emit('spotlight:show')
-            }
-        },
         contextMenu(event, item) {
             events.$emit('context-menu:show', event, item)
         },
     },
     mounted() {
+        // TODO: new scaledown effect
         events.$on('mobile-menu:show', () => (this.isScaledDown = true))
-
-        this.$store.dispatch('getShareDetail', this.$route.params.token).then((response) => {
-            this.isLoading = false
-
-            let type = response.data.data.attributes.type
-            let routeName = this.$router.currentRoute.name
-            let isProtected = response.data.data.attributes.protected
-
-            // Show public file browser
-            if (type === 'folder' && !isProtected && routeName !== 'Public') {
-                this.$router.replace({
-                    name: 'Public',
-                    params: {
-                        token: this.$route.params.token,
-                        id: response.data.data.attributes.item_id,
-                    },
-                })
-            }
-
-            // Show public single file
-            if (type !== 'folder' && !isProtected && routeName !== 'SharedSingleFile') {
-                this.$router.push({ name: 'SharedSingleFile' })
-            }
-
-            // Show authentication page
-            if (isProtected && routeName !== 'SharedAuthentication') {
-                this.$router.push({ name: 'SharedAuthentication' })
-            }
-        })
+        events.$on('mobile-menu:hide', () => (this.isScaledDown = false))
     },
 }
 </script>

resources/js/views/Shared/SharedSingleFile.vue

@@ -1,45 +0,0 @@
-<template>
-    <div class="flex h-screen items-center justify-center">
-        <div class="w-full text-center">
-            <ItemGrid v-if="sharedFile" :entry="sharedFile" :highlight="true" :mobile-handler="true" />
-
-            <ButtonBase @click.native="download" button-style="theme" class="mx-auto">
-                {{ $t('page_shared.download_file') }}
-            </ButtonBase>
-
-			<!--Google Adsense banner-->
-            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="min-h-[120px] mt-5"></div>
-        </div>
-    </div>
-</template>
-
-<script>
-import ButtonBase from '../../components/FilesView/ButtonBase'
-import ItemGrid from '../../components/FilesView/ItemGrid'
-import { mapGetters } from 'vuex'
-
-export default {
-    name: 'SharedSingleItem',
-    components: {
-        ButtonBase,
-        ItemGrid,
-    },
-    computed: {
-        ...mapGetters(['sharedDetail', 'sharedFile', 'config']),
-    },
-    methods: {
-        download() {
-            this.$downloadFile(this.sharedFile.data.attributes.file_url, this.sharedFile.data.attributes.name + '.' + this.sharedFile.data.attributes.mimetype)
-        },
-    },
-    mounted() {
-        if (!this.sharedDetail) {
-            this.$store.dispatch('getShareDetail', this.$route.params.token).then(() => {
-                this.$store.dispatch('getSingleFile')
-            })
-        } else {
-            this.$store.dispatch('getSingleFile')
-        }
-    },
-}
-</script>

resources/js/views/SharedAuthentication.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuthContentWrapper>
+    <AuthContentWrapper class="h-screen">
         <AuthContent name="password" :visible="true">
             <Headline :title="$t('page_shared.title')" :description="$t('page_shared.subtitle')" />
             <ValidationObserver
@@ -9,7 +9,14 @@
                 tag="form"
                 class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
             >
-                <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Password" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="w-full text-left"
+                    name="Password"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="password"
                         :placeholder="$t('page_shared.placeholder_pass')"
@@ -19,7 +26,13 @@
                     />
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
-                <AuthButton class="w-full justify-center md:w-min" icon="chevron-right" :text="$t('page_shared.submit')" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    class="w-full justify-center md:w-min"
+                    icon="chevron-right"
+                    :text="$t('page_shared.submit')"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
         </AuthContent>
     </AuthContentWrapper>
@@ -27,10 +40,10 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
-import Headline from '../Auth/Headline'
+import AuthContentWrapper from '../components/Auth/AuthContentWrapper'
+import AuthContent from '../components/Auth/AuthContent'
+import AuthButton from '../components/Auth/AuthButton'
+import Headline from './Auth/Headline'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
@@ -70,7 +83,7 @@ export default {
                 })
                 .then((response) => {
                     // Show file browser
-                    if (response.data.data.attributes.type === 'folder' && this.$router.currentRoute.name !== 'Public') {
+                    if ( response.data.data.attributes.type === 'folder' ) {
                         this.$router.replace({
                             name: 'Public',
                             params: {
@@ -81,7 +94,7 @@ export default {
                     }
 
                     // Show single file
-                    if (response.data.data.attributes.type !== 'folder' && this.$router.currentRoute.name !== 'SharedSingleFile') {
+                    if ( response.data.data.attributes.type !== 'folder' ) {
                         this.$router.push({ name: 'SharedSingleFile' })
                     }
                 })

resources/js/views/SharedSingleFile.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="flex h-screen items-center justify-center">
+        <div v-if="file" class="w-full text-center">
+            <ItemGrid :entry="file" :mobile-handler="false" />
+
+            <ButtonBase @click.native="$downloadSelection(file)" button-style="theme" class="mx-auto">
+                {{ $t('page_shared.download_file') }}
+            </ButtonBase>
+
+            <!--Google Adsense banner-->
+            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mt-5 min-h-[120px]"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ButtonBase from '../components/FilesView/ButtonBase'
+import ItemGrid from '../components/FilesView/ItemGrid'
+import { mapGetters } from 'vuex'
+import axios from 'axios'
+
+export default {
+    name: 'SharedSingleItem',
+    components: {
+        ButtonBase,
+        ItemGrid,
+    },
+    computed: {
+        ...mapGetters(['config']),
+    },
+    data() {
+        return {
+            file: undefined,
+        }
+    },
+    mounted() {
+        axios
+            .get(`/api/browse/file/${this.$router.currentRoute.params.token}`)
+            .then((response) => {
+                this.file = response.data
+            })
+            .catch((error) => {
+                if (error.response.status === 403)
+					this.$router.push({ name: 'SharedAuthentication' })
+            })
+    },
+}
+</script>

resources/js/views/Teams/Invitation.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuthContentWrapper ref="auth">
+    <AuthContentWrapper ref="auth" class="h-screen">
         <!--Invitation info-->
         <AuthContent name="invitation" :visible="false">
             <Headline

resources/js/views/TemporaryUnavailable.vue

@@ -1,11 +1,11 @@
 <template>
-    <AuthContentWrapper ref="auth">
+    <AuthContentWrapper ref="auth" class="h-screen">
         <AuthContent :visible="true">
             <Headline :title="$t('Temporary Unavailable')" :description="$t('Unfortunately, this shared link is temporary unavailable. Please try it later.')" />
 
             <span class="additional-link"
                 >{{ $t('page_registration.have_an_account') }}
-                <router-link :to="{ name: 'SignIn' }">
+                <router-link :to="{ name: 'SignIn' }" class="text-theme font-bold">
                     {{ $t('page_forgotten_password.password_remember_button') }}
                 </router-link>
             </span>
@@ -16,20 +16,14 @@
 <script>
 import AuthContentWrapper from '../components/Auth/AuthContentWrapper'
 import AuthContent from '../components/Auth/AuthContent'
-import AuthButton from '../components/Auth/AuthButton'
 import Headline from './Auth/Headline'
 
 export default {
-    name: 'NotFound',
+    name: 'TemporaryUnavailable',
     components: {
         AuthContentWrapper,
         AuthContent,
-        AuthButton,
         Headline,
     },
 }
 </script>
-
-<style scoped lang="scss">
-@import '../../sass/vuefilemanager/auth';
-</style>