From f04c0574908703c6a3d1036a46bdebf2a7d86dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Tue, 8 Feb 2022 10:01:38 +0100
Subject: [PATCH] Shared pages refactoring part 1

---
 config/content.php                            |  8 ++
 .../FilesView/FileIconThumbnail.vue           |  2 +-
 .../js/components/FilesView/ItemGrid.vue      | 24 +++---
 .../js/components/FilesView/ItemHandler.vue   |  1 +
 .../Mobile}/MobileNavigationToolbar.vue       |  0
 resources/js/helpers/functionHelpers.js       |  5 +-
 resources/js/helpers/itemHelpers.js           |  2 +-
 resources/js/routes/routesShared.js           | 34 ++++----
 resources/js/store/modules/sharing.js         |  5 --
 resources/js/views/Admin.vue                  |  2 +-
 resources/js/views/NotFound.vue               |  4 +-
 resources/js/views/Profile.vue                |  2 +-
 resources/js/views/Shared.vue                 | 80 +++++--------------
 .../js/views/Shared/SharedSingleFile.vue      | 45 -----------
 .../{Shared => }/SharedAuthentication.vue     | 31 ++++---
 resources/js/views/SharedSingleFile.vue       | 48 +++++++++++
 resources/js/views/Teams/Invitation.vue       |  2 +-
 resources/js/views/TemporaryUnavailable.vue   | 12 +--
 resources/views/index.blade.php               |  4 +-
 .../Homepage/Controllers/IndexController.php  |  6 +-
 .../SharePublicIndexController.php            | 35 ++++----
 .../Restrictions/DefaultRestrictionsTest.php  |  2 +-
 .../FixedBillingRestrictionsTest.php          |  2 +-
 .../Sharing/VisitorAccessToItemsTest.php      |  2 +-
 tests/Domain/Sharing/VisitorBrowseTest.php    |  3 +-
 25 files changed, 170 insertions(+), 191 deletions(-)
 rename resources/js/{views => components/Mobile}/MobileNavigationToolbar.vue (100%)
 delete mode 100644 resources/js/views/Shared/SharedSingleFile.vue
 rename resources/js/views/{Shared => }/SharedAuthentication.vue (76%)
 create mode 100644 resources/js/views/SharedSingleFile.vue

diff --git a/config/content.php b/config/content.php
index 9008087d..7900fbf3 100644
--- a/config/content.php
+++ b/config/content.php
@@ -95,6 +95,10 @@ return [
                 'name'  => 'app_color',
                 'value' => '#00BC7E',
             ],
+            [
+                'name'  => 'allowed_adsense',
+                'value' => 0,
+            ],
         ],
         'extended' => [
             [
@@ -177,6 +181,10 @@ return [
                 'name'  => 'app_color',
                 'value' => '#00BC7E',
             ],
+            [
+                'name'  => 'allowed_adsense',
+                'value' => 0,
+            ],
 
             // Subscription
             [
diff --git a/resources/js/components/FilesView/FileIconThumbnail.vue b/resources/js/components/FilesView/FileIconThumbnail.vue
index c2deec25..4ab8eb4f 100644
--- a/resources/js/components/FilesView/FileIconThumbnail.vue
+++ b/resources/js/components/FilesView/FileIconThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex items-center justify-center">
-        <span class="text-theme dark-text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-tiny font-semibold lg:text-xs">
+        <span class="text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center font-semibold text-[9px]">
             {{ entry.data.attributes.mimetype }}
         </span>
 
diff --git a/resources/js/components/FilesView/ItemGrid.vue b/resources/js/components/FilesView/ItemGrid.vue
index 9e83307e..20bbf839 100644
--- a/resources/js/components/FilesView/ItemGrid.vue
+++ b/resources/js/components/FilesView/ItemGrid.vue
@@ -1,7 +1,10 @@
 <template>
     <div
-        :class="{ 'bg-light-background dark:bg-dark-foreground': isClicked }"
-        class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center dark:hover:bg-dark-foreground sm:h-56 lg:h-60 lg:hover:bg-light-background"
+        :class="{
+			'bg-light-background dark:bg-dark-foreground': isClicked,
+			'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover
+		}"
+        class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center sm:h-56 lg:h-60"
         :draggable="canDrag"
         spellcheck="false"
     >
@@ -50,7 +53,8 @@
             <div class="text-center">
                 <!--Item Title-->
                 <b
-                    class="tracking-tigh inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 hover:underline md:px-6"
+                    class="tracking-tight inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 md:px-6"
+					:class="{'hover:underline': canEditName}"
                     ref="name"
                     @input="renameItem"
                     @keydown.delete.stop
@@ -63,7 +67,7 @@
                 <!--Item sub line-->
                 <div class="flex items-center justify-center">
                     <!--Shared Icon-->
-                    <div v-if="$checkPermission('master') && entry.data.relationships.shared">
+                    <div v-if="canShowLinkIcon">
                         <link-icon size="12" class="text-theme dark-text-theme vue-feather mr-1.5" />
                     </div>
 
@@ -106,7 +110,7 @@ import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
 export default {
-    name: 'ItemList',
+    name: 'ItemGrid',
     components: {
         FileIconThumbnail,
         MoreHorizontalIcon,
@@ -117,7 +121,7 @@ export default {
         EyeIcon,
         Emoji,
     },
-    props: ['mobileHandler', 'entry'],
+    props: ['mobileHandler', 'entry', 'canHover'],
     data() {
         return {
             mobileMultiSelect: false,
@@ -154,9 +158,8 @@ export default {
         canEditName() {
             return (
                 !this.$isMobile() &&
-                !this.$isThisRoute(this.$route, ['Trash']) &&
-                !this.$checkPermission('visitor') &&
-                !(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
+                !this.$isThisRoute(this.$route, ['Trash', 'SharedSingleFile']) &&
+                !this.$checkPermission('visitor')
             )
         },
         folderItems() {
@@ -165,6 +168,9 @@ export default {
         canShowAuthor() {
             return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) && !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
         },
+		canShowLinkIcon() {
+			return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
+		},
         canDrag() {
             return !this.isDeleted && this.$checkPermission(['master', 'editor'])
         },
diff --git a/resources/js/components/FilesView/ItemHandler.vue b/resources/js/components/FilesView/ItemHandler.vue
index 19387251..0b63d8cb 100644
--- a/resources/js/components/FilesView/ItemHandler.vue
+++ b/resources/js/components/FilesView/ItemHandler.vue
@@ -18,6 +18,7 @@
             :entry="item"
             :highlight="true"
             :mobile-handler="true"
+			:can-hover="true"
             @mouseup.stop.native="clickFilter"
             @dragstart.native="$emit('dragstart')"
             @drop.native="drop()"
diff --git a/resources/js/views/MobileNavigationToolbar.vue b/resources/js/components/Mobile/MobileNavigationToolbar.vue
similarity index 100%
rename from resources/js/views/MobileNavigationToolbar.vue
rename to resources/js/components/Mobile/MobileNavigationToolbar.vue
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 6053bb27..45a3c14d 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -267,16 +267,15 @@ const FunctionHelpers = {
 
         Vue.prototype.$downloadFile = function (url, filename) {
             // Show alert message when download is disabled
-            if (!store.getters.user.data.meta.restrictions.canDownload) {
+            if (store.getters.user && !store.getters.user.data.meta.restrictions.canDownload) {
                 Vue.prototype.$temporarilyDisabledDownload()
 
                 return
             }
 
-            var anchor = document.createElement('a')
+            let anchor = document.createElement('a')
 
             anchor.href = url
-
             anchor.download = filename
 
             document.body.appendChild(anchor)
diff --git a/resources/js/helpers/itemHelpers.js b/resources/js/helpers/itemHelpers.js
index 80320964..97ced2b9 100644
--- a/resources/js/helpers/itemHelpers.js
+++ b/resources/js/helpers/itemHelpers.js
@@ -38,7 +38,7 @@ const itemHelpers = {
 
         Vue.prototype.$downloadSelection = function (item = undefined) {
             // Show alert message when download is disabled
-            if (!store.getters.user.data.meta.restrictions.canDownload) {
+            if (store.getters.user && !store.getters.user.data.meta.restrictions.canDownload) {
                 Vue.prototype.$temporarilyDisabledDownload()
 
                 return
diff --git a/resources/js/routes/routesShared.js b/resources/js/routes/routesShared.js
index e847bf52..75d34b35 100644
--- a/resources/js/routes/routesShared.js
+++ b/resources/js/routes/routesShared.js
@@ -10,29 +10,29 @@ const routesShared = [
             {
                 name: 'Public',
                 path: '/share/:token/files/:id?',
-                component: () => import(/* webpackChunkName: "chunks/shared/files" */ '../views/FileView/Public'),
-                meta: {
-                    requiresAuth: false,
-                },
-            },
-            {
-                name: 'SharedSingleFile',
-                path: '/share/:token/file',
-                component: () => import(/* webpackChunkName: "chunks/shared/single-file" */ '../views/Shared/SharedSingleFile'),
-                meta: {
-                    requiresAuth: false,
-                },
-            },
-            {
-                name: 'SharedAuthentication',
-                path: '/share/:token/authenticate',
-                component: () => import(/* webpackChunkName: "chunks/shared/authenticate" */ '../views/Shared/SharedAuthentication'),
+                component: () => import(/* webpackChunkName: "chunks/shared/browser" */ '../views/FileView/Public'),
                 meta: {
                     requiresAuth: false,
                 },
             },
         ],
     },
+    {
+        name: 'SharedSingleFile',
+        path: '/share/:token/file',
+        component: () => import(/* webpackChunkName: "chunks/shared/single-file" */ '../views/SharedSingleFile'),
+        meta: {
+            requiresAuth: false,
+        },
+    },
+    {
+        name: 'SharedAuthentication',
+        path: '/share/:token/authenticate',
+        component: () => import(/* webpackChunkName: "chunks/shared/authenticate" */ '../views/SharedAuthentication'),
+        meta: {
+            requiresAuth: false,
+        },
+    },
 ]
 
 export default routesShared
diff --git a/resources/js/store/modules/sharing.js b/resources/js/store/modules/sharing.js
index b1ba1094..dc8d6fdc 100644
--- a/resources/js/store/modules/sharing.js
+++ b/resources/js/store/modules/sharing.js
@@ -47,11 +47,6 @@ const actions = {
                 })
         })
     },
-    getSingleFile: ({ commit }) => {
-        axios.get(`/api/browse/file/${router.currentRoute.params.token}`).then((response) => {
-            commit('STORE_SHARED_FILE', response.data)
-        })
-    },
     getShareDetail: ({ commit, state }, token) => {
         return new Promise((resolve, reject) => {
             axios
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index c5a31099..a3f01f14 100644
--- a/resources/js/views/Admin.vue
+++ b/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,
diff --git a/resources/js/views/NotFound.vue b/resources/js/views/NotFound.vue
index 01477926..4ba38e6e 100644
--- a/resources/js/views/NotFound.vue
+++ b/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>
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 9564044c..f0674999 100644
--- a/resources/js/views/Profile.vue
+++ b/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',
diff --git a/resources/js/views/Shared.vue b/resources/js/views/Shared.vue
index ddcb0589..3de656a6 100644
--- a/resources/js/views/Shared.vue
+++ b/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>
diff --git a/resources/js/views/Shared/SharedSingleFile.vue b/resources/js/views/Shared/SharedSingleFile.vue
deleted file mode 100644
index cb5d29e3..00000000
--- a/resources/js/views/Shared/SharedSingleFile.vue
+++ /dev/null
@@ -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>
diff --git a/resources/js/views/Shared/SharedAuthentication.vue b/resources/js/views/SharedAuthentication.vue
similarity index 76%
rename from resources/js/views/Shared/SharedAuthentication.vue
rename to resources/js/views/SharedAuthentication.vue
index 11bd9b8d..e98f90df 100644
--- a/resources/js/views/Shared/SharedAuthentication.vue
+++ b/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' })
                     }
                 })
diff --git a/resources/js/views/SharedSingleFile.vue b/resources/js/views/SharedSingleFile.vue
new file mode 100644
index 00000000..0e65c03c
--- /dev/null
+++ b/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>
diff --git a/resources/js/views/Teams/Invitation.vue b/resources/js/views/Teams/Invitation.vue
index 7bc80299..8237e41a 100644
--- a/resources/js/views/Teams/Invitation.vue
+++ b/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
diff --git a/resources/js/views/TemporaryUnavailable.vue b/resources/js/views/TemporaryUnavailable.vue
index c216e3dd..81c4b0a2 100644
--- a/resources/js/views/TemporaryUnavailable.vue
+++ b/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>
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 9a0a2de4..daf77f3a 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -144,7 +144,7 @@
 			isGithubLoginConfigured: {{ env('GITHUB_CLIENT_ID') ? 1 : 0 }},
 
             // Adsense
-            allowedAdsense: {{ $settings->allowed_adsense ?? 0 }},
+            allowedAdsense: {{ $settings?->allowed_adsense ?? 0 }},
             adsenseClientId: '{{ $settings->adsense_client_id ?? '' }}',
 			adsenseBanner01: `{!! $settings->adsense_banner_01 ?? '' !!}`,
 			adsenseBanner02: `{!! $settings->adsense_banner_02 ?? '' !!}`,
@@ -182,7 +182,7 @@
     @endif
 
     {{--Adsense code--}}
-    @if($settings->allowed_adsense)
+    @if(optional($settings)->allowed_adsense)
         <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ $settings->adsense_client_id }}" crossorigin="anonymous"></script>
 
         <script>
diff --git a/src/Domain/Homepage/Controllers/IndexController.php b/src/Domain/Homepage/Controllers/IndexController.php
index de6d897f..db91ebc0 100644
--- a/src/Domain/Homepage/Controllers/IndexController.php
+++ b/src/Domain/Homepage/Controllers/IndexController.php
@@ -1,16 +1,18 @@
 <?php
 namespace Domain\Homepage\Controllers;
 
-use Illuminate\View\View;
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\View\Factory;
 use Domain\Pages\Models\Page;
 use Doctrine\DBAL\Driver\PDOException;
+use Illuminate\Contracts\View\View;
 
 class IndexController
 {
     /**
      * Show index page
      */
-    public function __invoke(): View
+    public function __invoke(): Application|Factory|View
     {
         try {
             // Try to connect to database
diff --git a/src/Domain/Sharing/Controllers/SharePublicIndexController.php b/src/Domain/Sharing/Controllers/SharePublicIndexController.php
index b2f57602..24699107 100644
--- a/src/Domain/Sharing/Controllers/SharePublicIndexController.php
+++ b/src/Domain/Sharing/Controllers/SharePublicIndexController.php
@@ -23,6 +23,7 @@ class SharePublicIndexController extends Controller
     public function __invoke(
         Share $share,
     ): View | StreamedResponse | RedirectResponse {
+
         // Check if user can see shared record
         if (! $share->user->canVisitShared()) {
             return redirect('/temporary-unavailable');
@@ -31,30 +32,29 @@ class SharePublicIndexController extends Controller
         // Delete share_session if exist
         if ($share->is_protected) {
             cookie()->queue('share_session', '', -1);
+
+            return redirect("/share/$share->token/authenticate");
         }
 
         // Check if shared is image file and then show it
-        if ($share->type === 'file' && ! $share->is_protected) {
-            $image = File::whereUserId($share->user_id)
-                ->whereType('image')
-                ->whereId($share->item_id)
-                ->first();
+        if ($share->type === 'file') {
 
-            if ($image) {
-                // Get image filesize
-                $fileSize = (int) $image->getRawOriginal('filesize');
+            // Get file
+            $file = File::whereUserId($share->user_id)
+                ->where('type', 'image')
+                ->where('id', $share->item_id);
 
-                // Store user download size
-                ($this->recordDownload)($fileSize, $share->user->id);
-
-                return $this->get_single_image($image, $share->user_id);
+            // Return raw image
+            if ($file->exists()) {
+                return $this->get_single_image($file->first(), $share->user_id);
             }
+
+            // Return file download page
+            return redirect("/share/$share->token/file");
         }
 
-        return view('index')
-            ->with('status_check', [])
-            ->with('installation', 'setup-done')
-            ->with('settings', get_settings_in_json() ?? null);
+        // Return folder items
+        return redirect("/share/$share->token/files/$share->item_id");
     }
 
     /**
@@ -62,6 +62,9 @@ class SharePublicIndexController extends Controller
      */
     private function get_single_image(File $file, string $user_id): StreamedResponse
     {
+        // Store user download size
+        ($this->recordDownload)($file->getRawOriginal('filesize'), $user_id);
+
         // Get file path
         $path = "/files/$user_id/$file->basename";
 
diff --git a/tests/App/Restrictions/DefaultRestrictionsTest.php b/tests/App/Restrictions/DefaultRestrictionsTest.php
index d1068193..583b14b9 100644
--- a/tests/App/Restrictions/DefaultRestrictionsTest.php
+++ b/tests/App/Restrictions/DefaultRestrictionsTest.php
@@ -181,6 +181,6 @@ class DefaultRestrictionsTest extends TestCase
             ]);
 
         $this->get("/share/$share->token")
-            ->assertViewIs('index');
+            ->assertRedirect("/share/$share->token/files/$share->item_id");
     }
 }
diff --git a/tests/App/Restrictions/FixedBillingRestrictionsTest.php b/tests/App/Restrictions/FixedBillingRestrictionsTest.php
index 7989f408..8aeb6ed5 100644
--- a/tests/App/Restrictions/FixedBillingRestrictionsTest.php
+++ b/tests/App/Restrictions/FixedBillingRestrictionsTest.php
@@ -220,6 +220,6 @@ class FixedBillingRestrictionsTest extends TestCase
             ]);
 
         $this->get("/share/$share->token")
-            ->assertViewIs('index');
+            ->assertRedirect("/share/$share->token/files/$share->item_id");
     }
 }
diff --git a/tests/Domain/Sharing/VisitorAccessToItemsTest.php b/tests/Domain/Sharing/VisitorAccessToItemsTest.php
index b58c9e2d..00e91712 100644
--- a/tests/Domain/Sharing/VisitorAccessToItemsTest.php
+++ b/tests/Domain/Sharing/VisitorAccessToItemsTest.php
@@ -133,7 +133,7 @@ class VisitorAccessToItemsTest extends TestCase
 
                     $this->withCookies($cookie)
                         ->get("/share/$share->token")
-                        ->assertStatus(200);
+                        ->assertRedirect("/share/$share->token/authenticate");
                 }
 
                 if (! $is_protected) {
diff --git a/tests/Domain/Sharing/VisitorBrowseTest.php b/tests/Domain/Sharing/VisitorBrowseTest.php
index 6bd47e48..710f56c9 100644
--- a/tests/Domain/Sharing/VisitorBrowseTest.php
+++ b/tests/Domain/Sharing/VisitorBrowseTest.php
@@ -55,8 +55,7 @@ class VisitorBrowseTest extends TestCase
             ]);
 
         $this->get("/share/$share->token")
-            ->assertViewIs('index')
-            ->assertStatus(200);
+            ->assertRedirect("/share/$share->token/files/$share->item_id");
     }
 
     /**