fix(files_sharing): show message when nickname is not valid

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

Author: skjnldsv

apps/files_sharing/src/services/GuestNameValidity.ts

@@ -0,0 +1,45 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { InvalidFilenameError, InvalidFilenameErrorReason, validateFilename } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
+
+/**
+ * Get the validity of a filename (empty if valid).
+ * This can be used for `setCustomValidity` on input elements
+ * @param name The filename
+ * @param escape Escape the matched string in the error (only set when used in HTML)
+ */
+export function getGuestNameValidity(name: string, escape = false): string {
+	if (name.trim() === '') {
+		return t('files', 'Filename must not be empty.')
+	}
+
+	if (name.startsWith('.')) {
+		return t('files', 'Names must not start with a dot.')
+	}
+
+	try {
+		validateFilename(name)
+		return ''
+	} catch (error) {
+		if (!(error instanceof InvalidFilenameError)) {
+			throw error
+		}
+
+		switch (error.reason) {
+		case InvalidFilenameErrorReason.Character:
+			return t('files', '"{char}" is not allowed inside a name.', { char: error.segment }, undefined, { escape })
+		case InvalidFilenameErrorReason.ReservedName:
+			return t('files', '"{segment}" is a reserved name and not allowed.', { segment: error.segment }, undefined, { escape: false })
+		case InvalidFilenameErrorReason.Extension:
+			if (error.segment.match(/\.[a-z]/i)) {
+				return t('files', '"{extension}" is not an allowed name.', { extension: error.segment }, undefined, { escape: false })
+			}
+			return t('files', 'Names must not end with "{extension}".', { extension: error.segment }, undefined, { escape: false })
+		default:
+			return t('files', 'Invalid name.')
+		}
+	}
+}

apps/files_sharing/src/views/PublicAuthPrompt.vue

@@ -35,12 +35,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
-import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-import { loadState } from '@nextcloud/initial-state'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+
+import { getGuestNameValidity } from '../services/GuestNameValidity'
 
 export default defineComponent({
 	name: 'PublicAuthPrompt',
@@ -101,6 +103,19 @@ export default defineComponent({
 			},
 			immediate: true,
 		},
+
+		name() {
+			// Check validity of the new name
+			const newName = this.name.trim?.() || ''
+			const input = (this.$refs.input as Vue|undefined)?.$el.querySelector('input')
+			if (!input) {
+				return
+			}
+
+			const validity = getGuestNameValidity(newName)
+			input.setCustomValidity(validity)
+			input.reportValidity()
+		},
 	},
 })
 </script>