From 1ad982dda9c522dba0ca825a2368c5e21bb9887d Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Fri, 2 May 2025 18:00:43 +0200
Subject: [PATCH 1/2] feat: add guest auth prompt component

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

[skip ci]
---
 l10n/messages.pot                   |  24 +++
 lib/components/PublicAuthPrompt.vue | 223 ++++++++++++++++++++++++++++
 lib/public-auth.ts                  |  28 ++++
 package-lock.json                   |   8 +
 package.json                        |   1 +
 5 files changed, 284 insertions(+)
 create mode 100644 lib/components/PublicAuthPrompt.vue
 create mode 100644 lib/public-auth.ts

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/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 6ae5346c9..ddabb13f1 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",
@@ -12059,6 +12060,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "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": "10.1.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.1.3.tgz",
diff --git a/package.json b/package.json
index 20d524d68..b94981dda 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,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",

From 4453fd229acc2e556e261087eeb6db4bf1af8dec Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Sun, 11 May 2025 16:52:05 +0200
Subject: [PATCH 2/2] refactor(PublicAuthPrompt): adjust code style to match
 the library (script-setup)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/PublicAuthPrompt.vue | 295 ++++++++++++----------------
 lib/public-auth.ts                  |   7 +-
 package-lock.json                   |   7 -
 tsconfig.json                       |   3 +-
 4 files changed, 131 insertions(+), 181 deletions(-)

diff --git a/lib/components/PublicAuthPrompt.vue b/lib/components/PublicAuthPrompt.vue
index 1d3ee5748..48bc7306d 100644
--- a/lib/components/PublicAuthPrompt.vue
+++ b/lib/components/PublicAuthPrompt.vue
@@ -3,8 +3,134 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { getBuilder } from '@nextcloud/browser-storage'
+import { setGuestNickname } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+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'
+
+export interface PublicAuthPromptProps {
+	/**
+	 * Preselected nickname.
+	 * No name preselected by default.
+	 */
+	nickname?: string,
+
+	/**
+	 * Dialog title
+	 */
+	title?: string
+
+	/**
+	 * Dialog text under the dialog title.
+	 * e.g 'Enter your name to access the file'.
+	 * Not shown by default.
+	 */
+	text?: string
+
+	/**
+	 * Dialog notice
+	 */
+	notice?: string
+
+	/**
+	 * Dialog submit button label
+	 */
+	submitLabel?: string
+
+	/**
+	 * Whether the dialog is cancellable
+	 */
+	cancellable?: boolean
+}
+
+const props = withDefaults(defineProps<PublicAuthPromptProps>(), {
+	title: t('Guest identification'),
+	nickname: '',
+	notice: t('You are currently not identified.'),
+	submitLabel: t('Submit name'),
+})
+
+const emit = defineEmits<{
+	close: [nickname?: string]
+}>()
+
+const inputElement = useTemplateRef('input')
+const storage = getBuilder('public').build()
+
+const name = ref(props.nickname)
+watch(() => props.nickname, () => {
+	// Reset name to pre-selected nickname (e.g. Talk / Collabora)
+	name.value = props.nickname
+})
+
+const buttons = computed(() => {
+	const cancelButton = {
+		label: t('Cancel'),
+		variant: 'tertiary',
+		callback: () => emit('close'),
+	} as const
+
+	const submitButton = {
+		label: props.submitLabel,
+		type: 'submit',
+		variant: 'primary',
+	} as const
+
+	// If the dialog is cancellable, add a cancel button
+	if (props.cancellable) {
+		return [cancelButton, submitButton]
+	}
+
+	return [submitButton]
+})
+
+function onSubmit() {
+	const nickname = name.value.trim()
+
+	if (nickname === '') {
+		// Show error if the nickname is empty
+		inputElement.value.setCustomValidity(t('You cannot leave the name empty.'))
+		inputElement.value.reportValidity()
+		inputElement.value.focus()
+		return
+	}
+
+	if (nickname.length < 2) {
+		// Show error if the nickname is too short
+		inputElement.value.setCustomValidity(t('Please enter a name with at least 2 characters.'))
+		inputElement.value.reportValidity()
+		inputElement.value.focus()
+		return
+	}
+
+	try {
+		// Set the nickname
+		setGuestNickname(nickname)
+	} catch (e) {
+		showError(t('Failed to set nickname.'))
+		console.error('Failed to set nickname', e)
+		inputElement.value.focus()
+		return
+	}
+
+	// Set the dialog as shown
+	storage.setItem('public-auth-prompt-shown', 'true')
+
+	// Close the dialog
+	emit('close', name.value)
+}
+</script>
+
 <template>
-	<NcDialog :buttons="dialogButtons"
+	<NcDialog
+		:buttons
 		class="public-auth-prompt"
 		data-cy-public-auth-prompt-dialog
 		is-form
@@ -33,173 +159,6 @@
 	</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 {
diff --git a/lib/public-auth.ts b/lib/public-auth.ts
index 31c128d9a..14301ec25 100644
--- a/lib/public-auth.ts
+++ b/lib/public-auth.ts
@@ -3,14 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { ComponentProps } from 'vue-component-type-helpers'
+import type { PublicAuthPromptProps } from './components/PublicAuthPrompt.vue'
+
 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
diff --git a/package-lock.json b/package-lock.json
index ddabb13f1..d1f9b8af4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12060,13 +12060,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "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": "10.1.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.1.3.tgz",
diff --git a/tsconfig.json b/tsconfig.json
index 7ccc3a7ce..cb93faf4a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +1,14 @@
 {
   "extends": "@vue/tsconfig",
   "compilerOptions": {
+    "allowImportingTsExtensions": true,
     "declaration": true,
     "esModuleInterop": true,
     "lib": ["DOM", "ESNext"],
     "outDir": "./dist",
     "rootDir": "lib/",
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
     "target": "ESNext",
     "plugins": [
       { "name": "typescript-plugin-css-modules" }