feat(files_sharing): show Account menu on public pages

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

Author: skjnldsv

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

@@ -3,13 +3,15 @@
  * 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, getGuestUser } 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()
 
@@ -25,31 +27,47 @@ function registerFileRequestHeader(nickname: string) {
 
 /**
  * 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')
+function onUpdatedNickname(): void {
 	// Register header for uploader
-	registerFileRequestHeader(nickname)
+	registerFileRequestHeader(getGuestUser().displayName ?? '')
 }
+subscribe('user:info:changed', onUpdatedNickname)
 
 window.addEventListener('DOMContentLoaded', () => {
 	const nickname = getGuestNickname() ?? ''
 	const dialogShown = storage.getItem('public-auth-prompt-shown') !== null
 
+	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 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,
-		)
+		showGuestUserPrompt(options)
 	} else {
 		logger.debug('Public auth prompt already shown.', { nickname })
 		registerFileRequestHeader(nickname)

apps/files_sharing/src/views/PublicAuthPrompt.vue

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