fix(conversation): set warnings on name/description max length

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Mar 20, 2024 · b09573d · b09573d
1 parent edb0a9b
commit b09573d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/src/components/ConversationSettings/BasicInfo.vue b/src/components/ConversationSettings/BasicInfo.vue
@@ -30,6 +30,7 @@
 			:loading="isNameLoading"
 			:placeholder="t('spreed', 'Enter a name for this conversation')"
 			:edit-button-aria-label="t('spreed', 'Edit conversation name')"
+			:max-length="CONVERSATION.MAX_NAME_LENGTH"
 			@submit-text="handleUpdateName"
 			@update:editing="handleEditName" />
 		<template v-if="!isOneToOne">
@@ -42,6 +43,7 @@
 				:loading="isDescriptionLoading"
 				:edit-button-aria-label="t('spreed', 'Edit conversation description')"
 				:placeholder="t('spreed', 'Enter a description for this conversation')"
+				:max-length="CONVERSATION.MAX_DESCRIPTION_LENGTH"
 				multiline
 				use-markdown
 				@submit-text="handleUpdateDescription"
@@ -92,7 +94,10 @@ export default {
 	},
 
 	setup() {
-		return { supportsAvatar }
+		return {
+			supportsAvatar,
+			CONVERSATION,
+		}
 	},
 
 	data() {

diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue
@@ -224,6 +224,8 @@ export default {
 		// Controls the disabled/enabled state of the first page's button.
 		disabled() {
 			return this.conversationName === '' || (this.newConversation.hasPassword && this.password === '')
+				|| this.conversationName.length > CONVERSATION.MAX_NAME_LENGTH
+				|| this.newConversation.description.length > CONVERSATION.MAX_DESCRIPTION_LENGTH
 		},
 	},
 

diff --git a/src/components/NewConversationDialog/NewConversationSetupPage.vue b/src/components/NewConversationDialog/NewConversationSetupPage.vue
@@ -26,12 +26,20 @@
 			v-model="conversationName"
 			:placeholder="t('spreed', 'Enter a name for this conversation')"
 			:label="t('spreed', 'Name')"
+			:error="conversationNameLengthExceeded"
 			label-visible
 			@keydown.enter="$emit('handle-enter')" />
+		<span v-if="conversationNameLengthExceeded" class="new-group-conversation__error">
+			{{ t('spreed', 'Maximum length exceeded') }}
+		</span>
 		<NcTextArea v-model="conversationDescription"
 			:placeholder="t('spreed', 'Enter a description for this conversation')"
 			:label="t('spreed', 'Description')"
+			:error="conversationDescriptionLengthExceeded"
 			label-visible />
+		<span v-if="conversationDescriptionLengthExceeded" class="new-group-conversation__error">
+			{{ t('spreed', 'Maximum length exceeded') }}
+		</span>
 
 		<template v-if="supportsAvatar">
 			<label class="avatar-editor__label">
@@ -127,6 +135,10 @@ export default {
 			},
 		},
 
+		conversationNameLengthExceeded() {
+			return this.conversationName.length > CONVERSATION.MAX_NAME_LENGTH
+		},
+
 		conversationDescription: {
 			get() {
 				return this.newConversation.description
@@ -136,6 +148,10 @@ export default {
 			},
 		},
 
+		conversationDescriptionLengthExceeded() {
+			return this.conversationDescription.length > CONVERSATION.MAX_DESCRIPTION_LENGTH
+		},
+
 		isPublic: {
 			get() {
 				return this.newConversation.type === CONVERSATION.TYPE.PUBLIC
@@ -206,5 +222,9 @@ export default {
 		margin-top: 10px;
 		padding: 4px 0;
 	}
+
+	&__error {
+		color: var(--color-error);
+	}
 }
 </style>
diff --git a/src/constants.js b/src/constants.js
@@ -104,7 +104,10 @@ export const CONVERSATION = {
 		VIDEO_VERIFICATION: 'share:password',
 		BREAKOUT_ROOM: 'room',
 		DEFAULT: '',
-	}
+	},
+
+	MAX_NAME_LENGTH: 255,
+	MAX_DESCRIPTION_LENGTH: 500,
 }
 export const ATTENDEE = {
 	ACTOR_TYPE: {

diff --git a/src/services/conversationsService.js b/src/services/conversationsService.js
@@ -176,7 +176,7 @@ const setConversationPassword = async function(token, password) {
  * Set a conversation's name
  *
  * @param {string} token the conversation's token
- * @param {string} name the name to be set
+ * @param {string} name the name to be set (max 255 characters)
  */
 const setConversationName = async function(token, name) {
 	return axios.put(generateOcsUrl('apps/spreed/api/v4/room/{token}', { token }), {
@@ -188,7 +188,7 @@ const setConversationName = async function(token, name) {
  * Set a conversation's description
  *
  * @param {string} token the conversation's token
- * @param {string} description the description to be set
+ * @param {string} description the description to be set (max 500 characters)
  */
 const setConversationDescription = async function(token, description) {
 	return axios.put(generateOcsUrl('apps/spreed/api/v4/room/{token}/description', { token }), {