fix(files_sharing): Bring back "custom disclaimer" feature for public…

… file drops

Signed-off-by: Ferdinand Thiessen <[email protected]>

apps/files_sharing/lib/DefaultPublicShareTemplateProvider.php

@@ -75,10 +75,13 @@ public function renderPage(IShare $share, string $token, string $path): Template
 		} else if (($share->getPermissions() & \OCP\Constants::PERMISSION_CREATE) && !($share->getPermissions() & \OCP\Constants::PERMISSION_READ)) {
 			// share is a folder with create but no read permissions -> file drop only
 			$view = 'public-file-drop';
+			// Only needed for file drops
+			$this->initialState->provideInitialState('disclaimer', $this->config->getAppValue('core', 'shareapi_public_link_disclaimertext', ''));
 		}
 		// Set up initial state
 		$this->initialState->provideInitialState('isPublic', true);
 		$this->initialState->provideInitialState('sharingToken', $token);
+		$this->initialState->provideInitialState('filename', $shareNode->getName());
 		$this->initialState->provideInitialState('view', $view);
 
 		// Load scripts and styles for UI

apps/files_sharing/src/files_views/publicFileDrop.ts

@@ -2,22 +2,43 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import type { VueConstructor } from 'vue'
+
 import { Folder, Permission, View, davRemoteURL, davRootPath, getNavigation } from '@nextcloud/files'
+import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
-import LinkSvg from '@mdi/svg/svg/link.svg?raw'
+import svgCloudUpload from '@mdi/svg/svg/cloud-upload.svg?raw'
+import Vue from 'vue'
 
 export default () => {
+	const foldername = loadState<string>('files_sharing', 'filename')
+
+	let FilesViewFileDropEmptyContent: VueConstructor
+	let fileDropEmptyContentInstance: Vue
+
 	const view = new View({
 		id: 'public-file-drop',
 		name: t('files_sharing', 'File drop'),
-		caption: t('files_sharing', 'Upload your files to share.'),
-
-		emptyTitle: t('files_sharing', 'File drop'),
-		emptyCaption: t('files_sharing', 'You can upload your files to share'),
-
-		icon: LinkSvg,
+		caption: t('files_sharing', 'Upload files to {foldername}', { foldername }),
+		icon: svgCloudUpload,
 		order: 1,
 
+		emptyView: async (div: HTMLDivElement) => {
+			if (FilesViewFileDropEmptyContent === undefined) {
+				const { default: component } = await import('../views/FilesViewFileDropEmptyContent.vue')
+				FilesViewFileDropEmptyContent = Vue.extend(component)
+			}
+			if (fileDropEmptyContentInstance) {
+				fileDropEmptyContentInstance.$destroy()
+			}
+			fileDropEmptyContentInstance = new FilesViewFileDropEmptyContent({
+				propsData: {
+					foldername,
+				},
+			})
+			fileDropEmptyContentInstance.$mount(div)
+		},
+
 		getContents: async () => {
 			return {
 				contents: [],

apps/files_sharing/src/views/FilesViewFileDropEmptyContent.vue

@@ -0,0 +1,46 @@
+<template>
+	<NcEmptyContent :name="t('files_sharing', 'File drop')">
+		<template #icon>
+			<NcIconSvgWrapper :svg="svgCloudUpload" />
+		</template>
+		<template #description>
+			{{ t('files_sharing', 'Upload files to {foldername}.', { foldername }) }}
+			{{ disclaimer === '' ? '' : t('files_sharing', 'By uploading files, you agree to the terms of service.') }}
+		</template>
+		<template v-if="disclaimer" #action>
+			<NcButton type="primary" @click="showDialog = true">
+				{{ t('files_sharing', 'View terms of service') }}
+			</NcButton>
+			<NcDialog close-on-click-outside
+				content-classes="terms-of-service-dialog"
+				:open.sync="showDialog"
+				:name="t('files_sharing', 'Terms of service')"
+				:message="disclaimer" />
+		</template>
+	</NcEmptyContent>
+</template>
+
+<script setup lang="ts">
+import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { ref } from 'vue'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import svgCloudUpload from '@mdi/svg/svg/cloud-upload.svg?raw'
+
+defineProps<{
+	foldername: string
+}>()
+
+const disclaimer = loadState<string>('files_sharing', 'disclaimer', '')
+const showDialog = ref(false)
+</script>
+
+<style scoped>
+:deep(.terms-of-service-dialog) {
+	min-height: min(100px, 20vh);
+}
+</style>