feat: add guest auth prompt component

lib/components/PublicAuthPrompt.vue

@@ -0,0 +1,220 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcDialog :buttons="dialogButtons"
+		class="public-auth-prompt"
+		data-cy-public-auth-prompt-dialog
+		is-form
+		:can-close="false"
+		:name="title"
+		@submit="onSubmit">
+		<p v-if="subtitle" class="public-auth-prompt__subtitle">
+			{{ subtitle }}
+		</p>
+
+		<!-- Header -->
+		<NcNoteCard class="public-auth-prompt__header"
+			:text="notice"
+			type="info" />
+
+		<!-- Form -->
+		<NcTextField ref="input"
+			class="public-auth-prompt__input"
+			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" />
+	</NcDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { getBuilder } from '@nextcloud/browser-storage'
+import { t } from '@nextcloud/l10n'
+
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+
+import { setGuestNickname } from '../guest'
+
+const storage = getBuilder('files_sharing').build()
+
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+// TODO: move to @nextcloud/auth
+export default defineComponent({
+	name: 'PublicAuthPrompt',
+
+	components: {
+		NcDialog,
+		NcNoteCard,
+		NcTextField,
+	},
+	props: {
+		/**
+		 * Preselected nickname
+		 * @default '' No name preselected by default
+		 */
+		nickname: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Dialog title
+		 */
+		title: {
+			type: String,
+			default: t('files_sharing', 'Guest identification'),
+		},
+
+		/**
+		 * Dialog subtitle
+		 * @default 'Enter your name to access the file'
+		 */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Dialog notice
+		 * @default 'You are currently not identified.'
+		 */
+		notice: {
+			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,
+		},
+	},
+
+	emits: ['close'],
+
+	setup() {
+		return {
+			t,
+		}
+	},
+
+	data() {
+		return {
+			name: '',
+		}
+	},
+
+	computed: {
+		dialogButtons() {
+			const cancelButton = {
+				label: t('files_sharing', 'Cancel'),
+				type: 'tertiary' as ButtonType,
+				callback: () => this.$emit('close'),
+			}
+
+			const submitButton = {
+				label: this.submitLabel,
+				type: 'primary' as ButtonType,
+				nativeType: 'submit',
+			}
+
+			// If the dialog is cancellable, add a cancel button
+			if (this.cancellable) {
+				return [cancelButton, submitButton]
+			}
+
+			 return [submitButton]
+		},
+	},
+
+	watch: {
+		/** Reset name to pre-selected nickname (e.g. Talk / Collabora ) */
+		nickname: {
+			handler() {
+				this.name = this.nickname
+			},
+			immediate: true,
+		},
+	},
+
+	methods: {
+		onSubmit() {
+			const nickname = this.name.trim()
+			const input = this.$refs.input as HTMLInputElement
+
+			if (nickname === '') {
+				// Show error if the nickname is empty
+				input.setCustomValidity(t('files_sharing', 'You cannot leave the name empty.'))
+				input.reportValidity()
+				return
+			}
+
+			if (nickname.length < 2) {
+				// Show error if the nickname is too short
+				input.setCustomValidity(t('files_sharing', 'Please enter a name with at least 2 characters.'))
+				input.reportValidity()
+				return
+			}
+
+			try {
+				// Set the nickname
+				setGuestNickname(nickname)
+			} catch (e) {
+				input.setCustomValidity(t('files_sharing', 'Failed to set nickname.'))
+				input.reportValidity()
+				return
+			}
+
+			// Set the dialog as shown
+			storage.setItem('public-auth-prompt-shown', 'true')
+
+			// Close the dialog
+			this.$emit('close', this.name)
+		},
+	},
+})
+</script>
+<style scoped lang="scss">
+.public-auth-prompt {
+	&__subtitle {
+		// Smaller than dialog title
+		font-size: 1.25em;
+		margin-block: 0 calc(3 * var(--default-grid-baseline));
+	}
+
+	&__header {
+		margin-block: 0 calc(3 * var(--default-grid-baseline));
+		// No extra top margin for the first child
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
+	&__input {
+		margin-block: calc(4 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+	}
+}
+</style>

lib/guest.ts

@@ -2,21 +2,87 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { defineAsyncComponent } from 'vue'
 import { getBuilder } from '@nextcloud/browser-storage'
+import { spawnDialog } from '@nextcloud/vue'
+import { TypedEventTarget } from 'typescript-event-target'
+
+import PublicAuthPrompt from './components/PublicAuthPrompt.vue'
 
 const browserStorage = getBuilder('public').persist().build()
 
+/**
+ * This event is emitted when the list of registered views is changed
+ */
+interface UpdateGuestDisplayName extends CustomEvent<never> {
+	type: 'updateDisplayName'
+}
+
+class GuestUser extends TypedEventTarget<{ updateDisplayName: UpdateGuestDisplayName }> {
+
+	displayName: string | null
+	readonly uid: string
+	readonly isAdmin: boolean
+
+	constructor() {
+		super()
+		this.displayName = browserStorage.getItem('guestNickname') || ''
+		this.uid = browserStorage.getItem('guestUid') || self.crypto.randomUUID()
+		this.isAdmin = false
+	}
+
+	setDisplayName(displayName: string): void {
+		this.displayName = displayName
+		browserStorage.setItem('guestNickname', displayName)
+		this.dispatchTypedEvent('updateDisplayName', new CustomEvent('updateDisplayName') as UpdateGuestDisplayName)
+	}
+
+}
+
+let currentUser: GuestUser | null | undefined
+
+/**
+ * Get the currently Guest user or null if not logged in
+ */
+export function getGuestUser(): GuestUser {
+	if (!currentUser) {
+		currentUser = new GuestUser()
+	}
+
+	return currentUser
+}
+
 /**
  * Get the guest nickname for public pages
  */
 export function getGuestNickname(): string | null {
-	return browserStorage.getItem('guestNickname')
+	return getGuestUser()?.displayName || null
 }
 
 /**
  * Set the guest nickname for public pages
  * @param nickname The nickname to set
  */
 export function setGuestNickname(nickname: string): void {
-	browserStorage.setItem('guestNickname', nickname)
+	if (!nickname || nickname.trim().length === 0) {
+		throw new Error('Nickname cannot be empty')
+	}
+
+	getGuestUser().setDisplayName(nickname)
+}
+
+type PublicAuthPromptProps = ComponentProps<typeof PublicAuthPrompt>
+
+/**
+ * Show the public auth prompt dialog
+ * This is used to ask the current user their nickname
+ * as well as show some additional contextual information
+ * @param props The props to pass to the dialog, see PublicAuthPrompt.vue for details
+ */
+export function showGuestUserPrompt(props: PublicAuthPromptProps): void {
+	spawnDialog(
+		defineAsyncComponent(() => import('./components/PublicAuthPrompt.vue')),
+		props,
+	)
 }

lib/index.ts

@@ -6,6 +6,6 @@ export type { CsrfTokenObserver } from './requesttoken'
 export type { NextcloudUser } from './user'
 
 export { getCSPNonce } from './csp-nonce'
-export { getGuestNickname, setGuestNickname } from './guest'
+export { getGuestUser, getGuestNickname, setGuestNickname, showGuestUserPrompt } from './guest'
 export { getRequestToken, onRequestTokenUpdate } from './requesttoken'
 export { getCurrentUser } from './user'