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

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

2 files changed, 26 insertions, 11 deletions

diff --git a/apps/files/src/utils/filenameValidity.ts b/apps/files/src/utils/filenameValidity.ts
index 2666d530052..975e60050ad 100644
--- a/apps/files/src/utils/filenameValidity.ts
+++ b/apps/files/src/utils/filenameValidity.ts
@@ -8,16 +8,16 @@ 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 input The filename
  * @param escape Escape the matched string in the error (only set when used in HTML)
  */
-export function getFilenameValidity(name: string, escape = false): string {
-	if (name.trim() === '') {
-		return t('files', 'Filename must not be empty.')
+export function getFilenameValidity(input: string, escape = false): string {
+	if (input.trim() === '') {
+		return t('files', 'This field must not be empty.')
 	}
 
 	try {
-		validateFilename(name)
+		validateFilename(input)
 		return ''
 	} catch (error) {
 		if (!(error instanceof InvalidFilenameError)) {
@@ -26,16 +26,16 @@ export function getFilenameValidity(name: string, escape = false): string {
 
 		switch (error.reason) {
 		case InvalidFilenameErrorReason.Character:
-			return t('files', '"{char}" is not allowed inside a filename.', { char: error.segment }, undefined, { escape })
+			return t('files', 'The character "{char}" is not allowed.', { char: error.segment }, undefined, { escape })
 		case InvalidFilenameErrorReason.ReservedName:
-			return t('files', '"{segment}" is a reserved name and not allowed for filenames.', { segment: error.segment }, undefined, { escape: false })
+			return t('files', '"{segment}" is reserved and cannot be used.', { segment: error.segment }, undefined, { escape: false })
 		case InvalidFilenameErrorReason.Extension:
 			if (error.segment.match(/\.[a-z]/i)) {
-				return t('files', '"{extension}" is not an allowed filetype.', { extension: error.segment }, undefined, { escape: false })
+				return t('files', '"{extension}" is not a supported type.', { extension: error.segment }, undefined, { escape: false })
 			}
-			return t('files', 'Filenames must not end with "{extension}".', { extension: error.segment }, undefined, { escape: false })
+			return t('files', 'Cannot end with "{extension}".', { extension: error.segment }, undefined, { escape: false })
 		default:
-			return t('files', 'Invalid filename.')
+			return t('files', 'This value is not allowed.')
 		}
 	}
 }
diff --git a/apps/files_sharing/src/views/PublicAuthPrompt.vue b/apps/files_sharing/src/views/PublicAuthPrompt.vue
index 39f5adc4650..124d88b52ed 100644
--- a/apps/files_sharing/src/views/PublicAuthPrompt.vue
+++ b/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/components/NcDialog'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import { loadState } from '@nextcloud/initial-state'
+
+import { getFilenameValidity } from '../../../files/src/utils/filenameValidity'
 
 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 = getFilenameValidity(newName)
+			input.setCustomValidity(validity)
+			input.reportValidity()
+		},
 	},
 })
 </script>