Repository: nextcloud-libraries/nextcloud-dialogs
Pull request #1759: [stable6] feat: add guest auth prompt component
Author: login: skjnldsv
Labels: name: enhancement
description: New feature or request
name: backport-request
name: 3. to review
Created: 2025-05-07T08:16:51Z | Merged: 2025-05-11T14:34:58Z

- [x] Needs https://github.com/nextcloud-libraries/nextcloud-auth/pull/795 (to bump afterwards)


Diff:
diff --git a/l10n/messages.pot b/l10n/messages.pot
index 685520ecd..d4f84560c 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -14,6 +14,9 @@ msgstr ""
 msgid "All files"
 msgstr ""
 
+msgid "Cancel"
+msgstr ""
+
 msgid "Choose"
 msgstr ""
 
@@ -46,6 +49,12 @@ msgstr ""
 msgid "Current view selector"
 msgstr ""
 
+msgid "Enter your name"
+msgstr ""
+
+msgid "Failed to set nickname."
+msgstr ""
+
 msgid "Favorites"
 msgstr ""
 
@@ -61,6 +70,9 @@ msgstr ""
 msgid "Folder name cannot be empty."
 msgstr ""
 
+msgid "Guest identification"
+msgstr ""
+
 msgid "Home"
 msgstr ""
 
@@ -94,6 +106,9 @@ msgstr ""
 msgid "No matching files"
 msgstr ""
 
+msgid "Please enter a name with at least 2 characters."
+msgstr ""
+
 msgid "Recent"
 msgstr ""
 
@@ -109,8 +124,17 @@ msgstr ""
 msgid "Size"
 msgstr ""
 
+msgid "Submit name"
+msgstr ""
+
 msgid "Undo"
 msgstr ""
 
 msgid "Upload some content or sync with your devices!"
 msgstr ""
+
+msgid "You are currently not identified."
+msgstr ""
+
+msgid "You cannot leave the name empty."
+msgstr ""
diff --git a/lib/components/PublicAuthPrompt.vue b/lib/components/PublicAuthPrompt.vue
new file mode 100644
index 000000000..1d3ee5748
--- /dev/null
+++ b/lib/components/PublicAuthPrompt.vue
@@ -0,0 +1,223 @@
+<!--
+  - 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
+		no-close
+		:name="title"
+		@submit="onSubmit">
+		<p v-if="text" class="public-auth-prompt__text">
+			{{ text }}
+		</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('Name')"
+			:placeholder="t('Enter your name')"
+			:required="!cancellable"
+			v-model="name"
+			minlength="2"
+			name="name" />
+	</NcDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { getBuilder } from '@nextcloud/browser-storage'
+import { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+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('Guest identification'),
+		},
+
+		/**
+		 * Dialog text under the dialog title
+		 * e.g 'Enter your name to access the file'
+		 * @default '' Not shown by default
+		 */
+		 text: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Dialog notice
+		 * @default 'You are currently not identified.'
+		 */
+		notice: {
+			type: String,
+			default: t('You are currently not identified.'),
+		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('Submit name'),
+		},
+
+		/**
+		 * Whether the dialog is cancellable
+		 * @default false
+		 */
+		cancellable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup() {
+		return {
+			t,
+		}
+	},
+
+	emits: ['close'],
+
+	data() {
+		return {
+			name: '',
+		}
+	},
+
+	computed: {
+		dialogButtons() {
+			const cancelButton = {
+				label: t('Cancel'),
+				variant: 'tertiary',
+				callback: () => this.$emit('close'),
+			}
+
+			const submitButton = {
+				label: this.submitLabel,
+				type: 'submit',
+				variant: 'primary',
+			}
+
+			// 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 input = this.$refs.input as HTMLInputElement
+			const nickname = this.name.trim()
+
+			if (nickname === '') {
+				// Show error if the nickname is empty
+				input.setCustomValidity(t('You cannot leave the name empty.'))
+				input.reportValidity()
+				input.focus()
+				return
+			}
+
+			if (nickname.length < 2) {
+				// Show error if the nickname is too short
+				input.setCustomValidity(t('Please enter a name with at least 2 characters.'))
+				input.reportValidity()
+				input.focus()
+				return
+			}
+
+			try {
+				// Set the nickname
+				setGuestNickname(nickname)
+			} catch (e) {
+				showError(t('Failed to set nickname.'))
+				console.error('Failed to set nickname', e)
+				input.focus()
+				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 {
+	&__text {
+		// 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>
diff --git a/lib/index.ts b/lib/index.ts
index 9e6ed6d9a..86ed09b4f 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -47,3 +47,5 @@ export type {
 	IFilePickerButton,
 	IFilePickerFilter,
 } from './components/types.js'
+
+export { showGuestUserPrompt } from './public-auth.js'
diff --git a/lib/public-auth.ts b/lib/public-auth.ts
new file mode 100644
index 000000000..31c128d9a
--- /dev/null
+++ b/lib/public-auth.ts
@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { defineAsyncComponent } from 'vue'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
+
+import type PublicAuthPrompt from './components/PublicAuthPrompt.vue'
+
+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) {
+	return new Promise((resolve) => {
+		spawnDialog(
+			defineAsyncComponent(() => import('./components/PublicAuthPrompt.vue')),
+			props,
+			resolve,
+		)
+	})
+}
diff --git a/package-lock.json b/package-lock.json
index f36e5e13b..f3375e88c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@mdi/js": "^7.4.47",
         "@nextcloud/auth": "^2.4.0",
         "@nextcloud/axios": "^2.5.1",
+        "@nextcloud/browser-storage": "^0.4.0",
         "@nextcloud/event-bus": "^3.3.2",
         "@nextcloud/files": "^3.10.2",
         "@nextcloud/initial-state": "^2.2.0",
@@ -51,6 +52,7 @@
         "typescript-plugin-css-modules": "^5.1.0",
         "vite": "^6.3.3",
         "vitest": "^3.0.3",
+        "vue-component-type-helpers": "^2.2.10",
         "vue-material-design-icons": "^5.3.1",
         "vue-template-compiler": "^2.7.16"
       },
@@ -1451,6 +1453,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/browser-storage/-/browser-storage-0.4.0.tgz",
       "integrity": "sha512-D6XxznxCYmJ3oBCC3p0JB6GZJ2RZ9dgbB1UqtTePXrIvHUMBAeF/YkiGKYxLAVZCZb+NSNZXgAYHm/3LnIUbDg==",
+      "license": "GPL-3.0-or-later",
       "dependencies": {
         "core-js": "3.37.0"
       },
@@ -13914,6 +13917,13 @@
         "tinycolor2": "^1.1.2"
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.10.tgz",
+      "integrity": "sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.2",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",
diff --git a/package.json b/package.json
index 6d0dbb14f..9a8bdb86f 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@mdi/js": "^7.4.47",
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.1",
+    "@nextcloud/browser-storage": "^0.4.0",
     "@nextcloud/event-bus": "^3.3.2",
     "@nextcloud/files": "^3.10.2",
     "@nextcloud/initial-state": "^2.2.0",
@@ -97,6 +98,7 @@
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^6.3.3",
     "vitest": "^3.0.3",
+    "vue-component-type-helpers": "^2.2.10",
     "vue-material-design-icons": "^5.3.1",
     "vue-template-compiler": "^2.7.16"
   },


Reviews:
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T08:24:36Z
user: login: skjnldsv
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T08:55:44Z
user: login: skjnldsv
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T08:56:50Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T14:44:21Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T14:45:19Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T14:54:08Z
user: login: skjnldsv
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:04:21Z
user: login: skjnldsv
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:05:06Z
user: login: skjnldsv
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:07:38Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:12:09Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:24:01Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:24:20Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:25:14Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:25:43Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:26:26Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:26:43Z
user: login: susnux
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:26:51Z
user: login: susnux
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-11T14:34:56Z

Review comments:
diff_hunk: @@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { defineAsyncComponent } from 'vue'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
+
+import type PublicAuthPrompt from './components/PublicAuthPrompt.vue'
+
+type PublicAuthPromptProps = ComponentProps<typeof PublicAuthPrompt>
path: lib/public-auth.ts
user: login: susnux
body: IMHO define the props type here export them as an interface and then just use them for the component like `defineProps<PublicAuthPromptProps>()`
created_at: 2025-05-07T08:24:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { defineAsyncComponent } from 'vue'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
+
+import type PublicAuthPrompt from './components/PublicAuthPrompt.vue'
+
+type PublicAuthPromptProps = ComponentProps<typeof PublicAuthPrompt>
path: lib/public-auth.ts
user: login: skjnldsv
body: Is there an advantage/inconvenient to it ?

created_at: 2025-05-07T08:55:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { defineAsyncComponent } from 'vue'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
+
+import type PublicAuthPrompt from './components/PublicAuthPrompt.vue'
+
+type PublicAuthPromptProps = ComponentProps<typeof PublicAuthPrompt>
path: lib/public-auth.ts
user: login: skjnldsv
body: Because that seems far less clean that just using the vue-component-type-helpers :see_no_evil:  
created_at: 2025-05-07T08:56:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,223 @@
+<!--
+  - 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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('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('You are currently not identified.'),
+		},
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: Why should you need to customize this? This should be automatically calculated based on the `getGuestUser` output?
created_at: 2025-05-07T14:44:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,223 @@
+<!--
+  - 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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('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('You are currently not identified.'),
+		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('Submit name'),
+		},
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: Same here, this seems to make no sense to customize and should rather be a sane default
created_at: 2025-05-07T14:45:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,223 @@
+<!--
+  - 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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('Guest identification'),
+		},
+
+		/**
+		 * Dialog subtitle
+		 * @default 'Enter your name to access the file'
+		 */
+		subtitle: {
+			type: String,
+			default: '',
+		},
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: This is not really a subtitle but its the dialog text (its a `<p>` not a `<h#>`), we also call it *text* on the other dialogs, so would make sense to keep it consistent.

Also not sure if customization is needed (could also be generic "resource") but maybe makes sense :)
created_at: 2025-05-07T14:54:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,223 @@
+<!--
+  - 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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('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('You are currently not identified.'),
+		},
path: lib/components/PublicAuthPrompt.vue
user: login: skjnldsv
body: Because other apps want to show different notices.
Like Talk that shows a different message to give more context
created_at: 2025-05-07T15:04:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,223 @@
+<!--
+  - 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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('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('You are currently not identified.'),
+		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('Submit name'),
+		},
path: lib/components/PublicAuthPrompt.vue
user: login: skjnldsv
body: Same answer: `Submit name and join`
![image](https://github.com/user-attachments/assets/47d71108-819c-44a6-a8c1-f2eaf055f81d)

created_at: 2025-05-07T15:05:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,223 @@
+<!--
+  - 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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('Guest identification'),
+		},
+
+		/**
+		 * Dialog subtitle
+		 * @default 'Enter your name to access the file'
+		 */
+		subtitle: {
+			type: String,
+			default: '',
+		},
path: lib/components/PublicAuthPrompt.vue
user: login: skjnldsv
body: Done
created_at: 2025-05-07T15:07:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,223 @@
+<!--
+  - 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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('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('You are currently not identified.'),
+		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('Submit name'),
+		},
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: I see, makes sense :) 
created_at: 2025-05-07T15:12:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,224 @@
+<!--
+  - 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"
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: deprecated and removed in v9

```suggestion
		no-close
```
created_at: 2025-05-07T15:24:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,224 @@
+<!--
+  - 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="text" class="public-auth-prompt__text">
+			{{ text }}
+		</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('Name')"
+			:placeholder="t('Enter your name')"
+			:required="!cancellable"
+			:value.sync="name"
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: deprecated and removed in v9

```suggestion
			v-model="name"
```
created_at: 2025-05-07T15:24:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,224 @@
+<!--
+  - 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="text" class="public-auth-prompt__text">
+			{{ text }}
+		</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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: not needed / deprecated / wrong type (should be by the way the type from NcDialogButton)

```suggestion
```
created_at: 2025-05-07T15:25:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,224 @@
+<!--
+  - 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="text" class="public-auth-prompt__text">
+			{{ text }}
+		</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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('Guest identification'),
+		},
+
+		/**
+		 * Dialog text under the dialog title
+		 * e.g 'Enter your name to access the file'
+		 * @default '' Not shown by default
+		 */
+		 text: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Dialog notice
+		 * @default 'You are currently not identified.'
+		 */
+		notice: {
+			type: String,
+			default: t('You are currently not identified.'),
+		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('Submit name'),
+		},
+
+		/**
+		 * Whether the dialog is cancellable
+		 * @default false
+		 */
+		cancellable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup() {
+		return {
+			t,
+		}
+	},
+
+	data() {
+		return {
+			name: '',
+		}
+	},
+
+	computed: {
+		dialogButtons() {
+			const cancelButton = {
+				label: t('Cancel'),
+				type: 'tertiary' as ButtonType,
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: deprecated and removed in v9

```suggestion
				variant: 'tertiary',
```
created_at: 2025-05-07T15:25:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,224 @@
+<!--
+  - 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="text" class="public-auth-prompt__text">
+			{{ text }}
+		</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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('Guest identification'),
+		},
+
+		/**
+		 * Dialog text under the dialog title
+		 * e.g 'Enter your name to access the file'
+		 * @default '' Not shown by default
+		 */
+		 text: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Dialog notice
+		 * @default 'You are currently not identified.'
+		 */
+		notice: {
+			type: String,
+			default: t('You are currently not identified.'),
+		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('Submit name'),
+		},
+
+		/**
+		 * Whether the dialog is cancellable
+		 * @default false
+		 */
+		cancellable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup() {
+		return {
+			t,
+		}
+	},
+
+	data() {
+		return {
+			name: '',
+		}
+	},
+
+	computed: {
+		dialogButtons() {
+			const cancelButton = {
+				label: t('Cancel'),
+				type: 'tertiary' as ButtonType,
+				callback: () => this.$emit('close'),
+			}
+
+			const submitButton = {
+				label: this.submitLabel,
+				type: 'primary' as ButtonType,
+				nativeType: 'submit',
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: deprecated and removed in v9

```suggestion
				type: 'submit',
				variant: 'primary',
```
created_at: 2025-05-07T15:26:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,224 @@
+<!--
+  - 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="text" class="public-auth-prompt__text">
+			{{ text }}
+		</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('Name')"
+			:placeholder="t('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 { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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 { t } from '../utils/l10n.ts'
+
+const storage = getBuilder('public').build()
+
+// TODO: Remove this when the type export is fixed in the vue components library
+type ButtonType = InstanceType<typeof NcButton>['$props']['type']
+
+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('Guest identification'),
+		},
+
+		/**
+		 * Dialog text under the dialog title
+		 * e.g 'Enter your name to access the file'
+		 * @default '' Not shown by default
+		 */
+		 text: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Dialog notice
+		 * @default 'You are currently not identified.'
+		 */
+		notice: {
+			type: String,
+			default: t('You are currently not identified.'),
+		},
+
+		/**
+		 * Dialog submit button label
+		 * @default 'Submit name'
+		 */
+		submitLabel: {
+			type: String,
+			default: t('Submit name'),
+		},
+
+		/**
+		 * Whether the dialog is cancellable
+		 * @default false
+		 */
+		cancellable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup() {
+		return {
+			t,
+		}
+	},
+
+	data() {
+		return {
+			name: '',
+		}
+	},
+
+	computed: {
+		dialogButtons() {
+			const cancelButton = {
+				label: t('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]
path: lib/components/PublicAuthPrompt.vue
user: login: susnux
body: ```suggestion
			return [submitButton]
```
created_at: 2025-05-07T15:26:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { defineAsyncComponent } from 'vue'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
+
+import type PublicAuthPrompt from './components/PublicAuthPrompt.vue'
+
+type PublicAuthPromptProps = ComponentProps<typeof PublicAuthPrompt>
path: lib/public-auth.ts
user: login: susnux
body: Well first thing would be that it is one dependency less (this would be a runtime dependency as it ends up in the output).

But also its state of the art way to write vue components, I would not externalize the definition of the props, as they belong to the component, which is the whole reasons to have SFC, but it can be exported directly.

Also all Vue files in the library are already in script-setup for future proof (vue vapor mode), so it would be great to also have this dialog in the same format. Because then also the exporting interface is much easier and cleaner :) 
created_at: 2025-05-07T15:26:51Z
author_association: CONTRIBUTOR

PR comments:
user: login: skjnldsv
created_at: 2025-05-07T08:19:37Z
body: /backport! to main
author_association: CONTRIBUTOR
user: login: skjnldsv
created_at: 2025-05-07T15:37:00Z
body: I'm on mobile rn, will squash and adjust in a bit :)
author_association: CONTRIBUTOR
user: login: skjnldsv
created_at: 2025-05-08T09:04:21Z
body: Done!
author_association: CONTRIBUTOR
user: login: skjnldsv
created_at: 2025-05-08T09:14:11Z
body: /backport to main
author_association: CONTRIBUTOR
user: login: backportbot[bot]
created_at: 2025-05-11T14:35:06Z
body: The backport to `main` failed. Please do this backport manually.

```bash
# Switch to the target branch and update it
git checkout main
git pull origin main

# Create the new backport branch
git checkout -b backport/1759/main

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 0bcfbd36

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/1759/main
```

Error: Failed to create pull request: Validation Failed: {"resource":"PullRequest","code":"custom","message":"A pull request already exists for nextcloud-libraries:backport/1759/main."} - https://docs.github.com/rest/pulls/pulls#create-a-pull-request



---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.
author_association: NONE