feat(files_sharing): show Account menu on public pages

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

apps/files_sharing/lib/DefaultPublicShareTemplateProvider.php

@@ -104,13 +104,12 @@ public function renderPage(IShare $share, string $token, string $path): Template
 		Util::addInitScript(Application::APP_ID, 'init');
 		Util::addInitScript(Application::APP_ID, 'init-public');
 		Util::addScript('files', 'main');
+		Util::addScript(Application::APP_ID, 'public-file-request');
 
 		// Add file-request script if needed
 		$attributes = $share->getAttributes();
 		$isFileRequest = $attributes?->getAttribute('fileRequest', 'enabled') === true;
-		if ($isFileRequest) {
-			Util::addScript(Application::APP_ID, 'public-file-request');
-		}
+		$this->initialState->provideInitialState('isFileRequest', $isFileRequest);
 
 		// Load Viewer scripts
 		if (class_exists(LoadViewer::class)) {

apps/files_sharing/lib/Listener/LoadPublicFileRequestAuthListener.php

@@ -10,6 +10,7 @@
 use OCA\Files_Sharing\AppInfo\Application;
 use OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\EventDispatcher\Event;
 use OCP\EventDispatcher\IEventListener;
 use OCP\Share\IManager;
@@ -19,6 +20,7 @@
 class LoadPublicFileRequestAuthListener implements IEventListener {
 	public function __construct(
 		private IManager $shareManager,
+		private IInitialState $initialState,
 	) {
 	}
 
@@ -51,9 +53,10 @@ public function handle(Event $event): void {
 			// Ignore, this is not a file request or the share does not exist
 		}
 
-		if ($isFileRequest) {
-			// Add the script to the public page
-			Util::addScript(Application::APP_ID, 'public-file-request');
-		}
+		Util::addScript(Application::APP_ID, 'public-file-request');
+
+		// Add file-request script if needed
+		$attributes = $share->getAttributes();
+		$this->initialState->provideInitialState('isFileRequest', $isFileRequest);
 	}
 }

apps/files_sharing/src/public-file-request.ts

@@ -3,55 +3,84 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { defineAsyncComponent } from 'vue'
 import { getBuilder } from '@nextcloud/browser-storage'
-import { getGuestNickname, setGuestNickname } from '@nextcloud/auth'
+import { getGuestNickname, type NextcloudUser } from '@nextcloud/auth'
 import { getUploader } from '@nextcloud/upload'
-import { spawnDialog } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
+import { showGuestUserPrompt } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
 
 import logger from './services/logger'
+import { subscribe } from '@nextcloud/event-bus'
 
 const storage = getBuilder('files_sharing').build()
 
-/**
- * Setup file-request nickname header for the uploader
- * @param nickname The nickname
- */
-function registerFileRequestHeader(nickname: string) {
+// Setup file-request nickname header for the uploader
+const registerFileRequestHeader = (nickname: string) => {
 	const uploader = getUploader()
 	uploader.setCustomHeader('X-NC-Nickname', encodeURIComponent(nickname))
 	logger.debug('Nickname header registered for uploader', { headers: uploader.customHeaders })
 }
 
-/**
- * Callback when a nickname was chosen
- * @param nickname The chosen nickname
- */
-function onSetNickname(nickname: string): void {
-	// Set the nickname
-	setGuestNickname(nickname)
-	// Set the dialog as shown
-	storage.setItem('public-auth-prompt-shown', 'true')
-	// Register header for uploader
-	registerFileRequestHeader(nickname)
+// Callback when a nickname was chosen
+const onUserInfoChanged = (guest: NextcloudUser) => {
+	logger.debug('User info changed', { guest })
+	registerFileRequestHeader(guest.displayName ?? '')
 }
 
+// Monitor nickname changes
+subscribe('user:info:changed', onUserInfoChanged)
+
 window.addEventListener('DOMContentLoaded', () => {
 	const nickname = getGuestNickname() ?? ''
 	const dialogShown = storage.getItem('public-auth-prompt-shown') !== null
 
-	// If we don't have a nickname or the public auth prompt hasn't been shown yet, show it
-	// We still show the prompt if the user has a nickname to double check
-	if (!nickname || !dialogShown) {
-		spawnDialog(
-			defineAsyncComponent(() => import('./views/PublicAuthPrompt.vue')),
-			{
-				nickname,
-			},
-			onSetNickname as (...rest: unknown[]) => void,
-		)
-	} else {
-		logger.debug('Public auth prompt already shown.', { nickname })
-		registerFileRequestHeader(nickname)
+	// Check if a nickname is mandatory
+	const isFileRequest = loadState('files_sharing', 'isFileRequest', false)
+
+	const owner = loadState('files_sharing', 'owner', '')
+	const ownerDisplayName = loadState('files_sharing', 'ownerDisplayName', '')
+	const label = loadState('files_sharing', 'label', '')
+	const filename = loadState('files_sharing', 'filename', '')
+
+	// If the owner provided a custom label, use it instead of the filename
+	const folder = label || filename
+
+	const options = {
+		nickname,
+		notice: t('files_sharing', 'To upload files to {folder}, you need to provide your name first.', { folder }),
+		subtitle: undefined as string | undefined,
+		title: t('files_sharing', 'Upload files to {folder}', { folder }),
 	}
+
+	// If the guest already has a nickname, we just make them double check
+	if (nickname) {
+		options.notice = t('files_sharing', 'Please confirm your name to upload files to {folder}', { folder })
+	}
+
+	// If the account owner set their name as public,
+	// we show it in the subtitle
+	if (owner) {
+		options.subtitle = t('files_sharing', '{ownerDisplayName} shared a folder with you.', { ownerDisplayName })
+	}
+
+	// If this is a file request, then we need a nickname
+	if (isFileRequest) {
+		// If we don't have a nickname or the public auth prompt hasn't been shown yet, show it
+		// We still show the prompt if the user has a nickname to double check
+		if (!nickname || !dialogShown) {
+			logger.debug('Showing public auth prompt.', { nickname })
+			showGuestUserPrompt(options)
+		}
+		return
+	}
+
+	if (!dialogShown && !nickname) {
+		logger.debug('Public auth prompt not shown yet but nickname is not mandatory.', { nickname })
+		return
+	}
+
+	// Else, we just register the nickname header if any.
+	logger.debug('Public auth prompt already shown.', { nickname })
+	registerFileRequestHeader(nickname)
 })

apps/files_sharing/src/views/PublicAuthPrompt.vue

@@ -332,6 +332,7 @@ public function testShowShare(): void {
 			'fileId' => 111,
 			'owner' => 'ownerUID',
 			'ownerDisplayName' => 'ownerDisplay',
+			'isFileRequest' => false,
 		];
 
 		$response = $this->shareController->showShare();
@@ -474,6 +475,7 @@ public function testShowFileDropShare(): void {
 			'disclaimer' => 'My disclaimer text',
 			'owner' => 'ownerUID',
 			'ownerDisplayName' => 'ownerDisplay',
+			'isFileRequest' => false,
 		];
 
 		$response = $this->shareController->showShare();

apps/files_sharing/tests/Controller/ShareControllerTest.php

@@ -78,9 +78,14 @@ export default defineComponent({
 	},
 
 	methods: {
-		onClick(e) {
-			this.loading = true
+		onClick(e: MouseEvent) {
 			this.$emit('click', e)
+
+			// Allow to not show the loading indicator
+			// in case the click event was already handled
+			if (!e.defaultPrevented) {
+				this.loading = true
+			}
 		},
 	},
 })

core/src/components/AccountMenu/AccountMenuEntry.vue

@@ -11,22 +11,24 @@
 		role="presentation"
 		@click="$emit('click')">
 		<template #icon>
-			<div role="presentation" :class="['icon', icon, 'public-page-menu-entry__icon']" />
+			<slot v-if="$scopedSlots.icon" name="icon" />
+			<div v-else role="presentation" :class="['icon', icon, 'public-page-menu-entry__icon']" />
 		</template>
 	</NcListItem>
 </template>
 
 <script setup lang="ts">
-import NcListItem from '@nextcloud/vue/components/NcListItem'
 import { onMounted } from 'vue'
 
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+
 const props = defineProps<{
 	/** Only emit click event but do not open href */
 	clickOnly?: boolean
 	// menu entry props
 	id: string
 	label: string
-	icon: string
+	icon?: string
 	href: string
 	details?: string
 }>()

core/src/components/PublicPageMenu/PublicPageMenuEntry.vue

@@ -0,0 +1,15 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getCSPNonce } from '@nextcloud/auth'
+import Vue from 'vue'
+
+import PublicPageUserMenu from './views/PublicPageUserMenu.vue'
+
+__webpack_nonce__ = getCSPNonce()
+
+const View = Vue.extend(PublicPageUserMenu)
+const instance = new View()
+instance.$mount('#public-page-user-menu')

core/src/public-page-user-menu.ts

@@ -211,7 +211,7 @@ export default defineComponent({
 		}
 	}
 
-	// Ensure we do not wast space, as the header menu sets a default width of 350px
+	// Ensure we do not waste space, as the header menu sets a default width of 350px
 	:deep(.header-menu__content) {
 		width: fit-content !important;
 	}