[stable29] Validate album names

src/components/Albums/AlbumForm.vue

@@ -26,6 +26,8 @@
 				:value.sync="albumName"
 				type="text"
 				name="name"
+				:helper-text="albumNameValidationError"
+				:error="albumNameValidationError !== undefined"
 				:required="true"
 				:label="t('photos', 'Name of the album')" />
 			<NcTextField :value.sync="albumLocation"
@@ -48,15 +50,15 @@
 			<span class="right-buttons">
 				<NcButton v-if="sharingEnabled && !editMode"
 					type="secondary"
-					:disabled="albumName.trim() === '' || loading"
+					:disabled="!canSubmit"
 					@click="showCollaboratorView = true">
 					<template #icon>
 						<AccountMultiplePlus :size="20" />
 					</template>
 					{{ t('photos', 'Add collaborators') }}
 				</NcButton>
 				<NcButton type="primary"
-					:disabled="albumName === '' || loading"
+					:disabled="!canSubmit"
 					@click="submit()">
 					<template #icon>
 						<NcLoadingIcon v-if="loading" :size="20" />
@@ -99,6 +101,7 @@
 import Send from 'vue-material-design-icons/Send.vue'
 
 import { NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import { InvalidFilenameError, InvalidFilenameErrorReason, validateFilename } from '@nextcloud/files'
 import moment from '@nextcloud/moment'
 import { translate } from '@nextcloud/l10n'
 
@@ -159,6 +162,41 @@
 		albumFileName() {
 			return this.$store.getters.getAlbumName(this.albumName)
 		},
+
+		albumNameValidationError() {
+			// If loading is true, it means that the album is being created
+			// so this condition will eventually become true
+			// but we don't want to show the error message while loading
+			const existingAlbum = this.$store.getters.albums[this.albumFileName]
+			if (existingAlbum !== undefined && this.album !== existingAlbum && !this.loading) {
+				return t('files', 'This name is already in use.')
+			}
+
+			try {
+				validateFilename(this.albumName)
+			} catch (error) {
+				if (!(error instanceof InvalidFilenameError)) {
+					throw error
+				}
+
+				switch (error.reason) {
+				case InvalidFilenameErrorReason.Character:
+					return t('files', '"{char}" is not allowed inside a filename.', { char: error.segment })
+				case InvalidFilenameErrorReason.ReservedName:
+					return undefined // We don't need to enforce that for albums.
+				case InvalidFilenameErrorReason.Extension:
+					return undefined // We don't need to enforce that for albums.
+				default:
+					return t('files', 'Invalid filename.')
+				}
+			}
+
+			return undefined
+		},
+
+		canSubmit() {
+			return this.albumName !== '' && this.albumNameValidationError === undefined && !this.loading
+		},
 	},
 
 	mounted() {
@@ -175,9 +213,9 @@
 	methods: {
 		...mapActions(['createCollection', 'renameCollection', 'updateCollection']),
 
 		/** @param {import('../../store/albums.js').Collaborator[]} collaborators */
 		submit(collaborators = []) {
-			if (this.albumName === '' || this.loading) {
+			if (!this.canSubmit) {
 				return
 			}
 
@@ -188,7 +226,7 @@
 			}
 		},
 
 		/** @param {import('../../store/albums.js').Collaborator[]} collaborators */
 		async handleCreateAlbum(collaborators = []) {
 			try {
 				this.loading = true
@@ -276,7 +314,8 @@
 		justify-content: space-between;
 		flex-direction: column;
 
-		.left-buttons, .right-buttons {
+		.left-buttons,
+		.right-buttons {
 			display: flex;
 			gap: calc(var(--default-grid-baseline) * 4);
 		}

src/components/Collection/CollectionCover.vue

@@ -42,37 +42,19 @@
 		</router-link>
 	</li>
 </template>
-<script>
+<script setup>
+import { computed, ref } from 'vue'
 import ImageMultiple from 'vue-material-design-icons/ImageMultiple.vue'
 
-export default {
-	name: 'CollectionCover',
+const props = defineProps({
+	coverUrl: String,
+	altImg: String,
+	parentRoute: String,
+	collectionName: String
+})
 
-	components: {
-		ImageMultiple,
-	},
-
-	props: {
-		coverUrl: {
-			type: String,
-			required: true,
-		},
-		altImg: {
-			type: String,
-			required: true,
-		},
-		link: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			coverLoadingError: false,
-		}
-	},
-}
+const coverLoadingError = ref(false)
+const link = computed(() => `${props.parentRoute}/${encodeURIComponent(props.collectionName)}`)
 </script>
 <style lang="scss" scoped>
 .collection-cover {

src/views/Albums.vue

@@ -44,7 +44,8 @@
 
 			<CollectionCover :key="collection.basename"
 				slot-scope="{collection}"
-				:link="`/albums/${collection.basename}`"
+				parent-route="/albums"
+				:collection-name="collection.basename"
 				:alt-img="t('photos', 'Cover photo for album {albumName}', { albumName: collection.basename })"
 				:cover-url="collection.lastPhoto | coverUrl">
 				<span class="album__name">

src/views/Places.vue

@@ -34,7 +34,8 @@
 
 			<CollectionCover :key="collection.basename"
 				slot-scope="{collection}"
-				:link="`/places/${collection.basename}`"
+				parent-route="/places"
+				:collection-name="collection.basename"
 				:alt-img="t('photos', 'Cover photo for place {placeName}', { placeName: collection.basename })"
 				:cover-url="collection.lastPhoto | coverUrl">
 				<span class="place__name">

src/views/SharedAlbums.vue

@@ -33,7 +33,8 @@
 
 		<CollectionCover :key="collection.basename"
 			slot-scope="{collection}"
-			:link="`/sharedalbums/${collection.basename}`"
+			parent-route="/sharedalbums"
+			:collection-name="collection.basename"
 			:alt-img="t('photos', 'Cover photo for shared album {albumName}', { albumName: collection.basename })"
 			:data-test="collection.basename"
 			:cover-url="collection.lastPhoto | coverUrl">