fixup! feat(files_sharing): show Account menu on public pages

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

Author: skjnldsv

apps/files_sharing/src/views/PublicAuthPrompt.vue

@@ -26,10 +26,10 @@
 			data-cy-public-auth-prompt-dialog-name
 			:label="t('files_sharing', 'Name')"
 			:placeholder="t('files_sharing', 'Enter your name')"
+			:required="!cancellable"
+			:value.sync="name"
 			minlength="2"
-			name="name"
-			required
-			:value.sync="name" />
+			name="name" />
 	</NcDialog>
 </template>
 
@@ -42,9 +42,11 @@ import { t } from '@nextcloud/l10n'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
+import { showError } from '@nextcloud/dialogs'
 
 const storage = getBuilder('files_sharing').build()
 
+// TODO: move to @nextcloud/auth
 export default defineComponent({
 	name: 'PublicAuthPrompt',
 
@@ -89,6 +91,24 @@ export default defineComponent({
 			type: String,
 			default: t('files_sharing', 'You are currently not identified.'),
 		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('files_sharing', 'Submit name'),
+		},
+
+		/**
+		 * Whether the dialog is cancellable
+		 * @default false
+		 */
+		cancellable: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {
@@ -105,11 +125,24 @@ export default defineComponent({
 
 	computed: {
 		dialogButtons() {
-			return [{
-				label: t('files_sharing', 'Submit name'),
+			const cancelButton = {
+				label: t('files_sharing', 'Cancel'),
+				type: 'tertiary',
+				callback: () => this.$emit('close'),
+			}
+
+			const submitButton = {
+				label: this.submitLabel,
 				type: 'primary',
 				nativeType: 'submit',
-			}]
+			}
+
+			// If the dialog is cancellable, add a cancel button
+			if (this.cancellable) {
+				return [cancelButton, submitButton]
+			}
+
+			 return [submitButton]
 		},
 	},
 
@@ -127,8 +160,24 @@ export default defineComponent({
 		onSubmit() {
 			const nickname = this.name.trim()
 
-			// Set the nickname
-			setGuestNickname(nickname)
+			if (nickname === '') {
+				// Show error if the nickname is empty
+				showError(t('files_sharing', 'You cannot leave the name empty.'))
+				return
+			}
+
+			if (nickname.length < 2) {
+				// Show error if the nickname is too short
+				showError(t('files_sharing', 'Please enter a name with at least 2 characters.'))
+				return
+			}
+
+			try {
+				// Set the nickname
+				setGuestNickname(nickname)
+			} catch (e) {
+				showError(t('files_sharing', 'Failed to set nickname.'))
+			}
 
 			// Set the dialog as shown
 			storage.setItem('public-auth-prompt-shown', 'true')

core/src/components/AccountMenu/AccountMenuEntry.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/views/PublicPageUserMenu.vue

@@ -13,7 +13,7 @@
 				disable-menu
 				disable-tooltip
 				is-guest
-				:user="currentUser || '?'" />
+				:user="displayName || '?'" />
 		</template>
 		<ul class="public-page-user-menu__list">
 			<!-- Privacy notice -->
@@ -25,7 +25,7 @@
 			<AccountMenuEntry id="set-nickname"
 				:name="!currentUser ? t('core', 'Set public name') : t('core', 'Change public name')"
 				href="#"
-				@click.capture.prevent.stop="setNickname">
+				@click.prevent.stop="setNickname">
 				<template #icon>
 					<IconAccount />
 				</template>
@@ -35,9 +35,8 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue'
-import { getGuestNickname } from '@nextcloud/auth'
-import { spawnDialog } from '@nextcloud/dialogs'
+import { defineComponent } from 'vue'
+import { getGuestUser, showGuestUserPrompt } from '@nextcloud/auth'
 import { t } from '@nextcloud/l10n'
 
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
@@ -65,7 +64,8 @@ export default defineComponent({
 
 	data() {
 		return {
-			currentUser: getGuestNickname(),
+			currentUser: getGuestUser(),
+			displayName: getGuestUser().displayName,
 		}
 	},
 
@@ -75,21 +75,24 @@ export default defineComponent({
 		},
 
 		privacyNotice(): string {
-			return this.currentUser
-				? t('core', 'You will be identified as {user} by the account owner.', { user: this.currentUser })
+			return this.displayName
+				? t('core', 'You will be identified as {user} by the account owner.', { user: this.displayName })
 				: t('core', 'You are currently not identified.')
 		},
 	},
 
+	mounted() {
+		this.currentUser.addEventListener('updateDisplayName', () => {
+			this.displayName = getGuestUser().displayName || ''
+		})
+	},
+
 	methods: {
 		setNickname() {
-			spawnDialog(
-				defineAsyncComponent(() => import('../../../apps/files_sharing/src/views/PublicAuthPrompt.vue')),
-				{
-					nickname: this.currentUser,
-				},
-				((newName: string) => { this.currentUser = newName }) as (...rest: unknown[]) => void,
-			)
+			showGuestUserPrompt({
+				nickname: this.displayName,
+				cancellable: true,
+			})
 		},
 	},
 })