Shared pages refactoring part 1

This commit is contained in:
Čarodej
2022-02-08 10:01:38 +01:00
parent 09774b1d48
commit f04c057490
25 changed files with 170 additions and 191 deletions

View File

@@ -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
[

View File

@@ -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>

View File

@@ -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'])
},

View File

@@ -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()"

View File

@@ -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)

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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,

View File

@@ -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>

View File

@@ -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',

View File

@@ -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>

View File

@@ -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>

View File

@@ -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' })
}
})

View File

@@ -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>

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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";

View File

@@ -181,6 +181,6 @@ class DefaultRestrictionsTest extends TestCase
]);
$this->get("/share/$share->token")
->assertViewIs('index');
->assertRedirect("/share/$share->token/files/$share->item_id");
}
}

View File

@@ -220,6 +220,6 @@ class FixedBillingRestrictionsTest extends TestCase
]);
$this->get("/share/$share->token")
->assertViewIs('index');
->assertRedirect("/share/$share->token/files/$share->item_id");
}
}

View File

@@ -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) {

View File

@@ -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");
}
/**