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

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

(cherry picked from commit a350dcd)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

[skip ci]

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">
@@ -91,7 +92,10 @@ export default {
 	},
 
 	setup() {
-		return { supportsAvatar }
+		return {
+			supportsAvatar,
+			CONVERSATION,
+		}
 	},
 
 	data() {

src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue

@@ -37,12 +37,17 @@
 						v-model="conversationName"
 						:placeholder="t('spreed', 'Enter a name for this conversation')"
 						:label="t('spreed', 'Name')"
+						:error="!!nameErrorLabel"
 						label-visible
 						@keydown.enter="handleEnter" />
 					<NcTextField v-model="conversationDescription"
 						:placeholder="t('spreed', 'Enter a description for this conversation')"
 						:label="t('spreed', 'Description')"
+						:error="!!descriptionErrorLabel"
 						label-visible />
+					<span v-if="descriptionErrorLabel" class="new-group-conversation__error">
+						{{ descriptionErrorLabel }}
+					</span>
 
 					<template v-if="supportsAvatar">
 						<label class="avatar-editor__label">
@@ -259,9 +264,20 @@ export default {
 		// Controls the disabled/enabled state of the first page's button.
 		disabled() {
 			return this.conversationNameTrimmed === '' || (this.passwordProtect && this.password === '')
+				|| this.conversationNameTrimmed.length > CONVERSATION.MAX_NAME_LENGTH
+				|| this.conversationDescription.length > CONVERSATION.MAX_DESCRIPTION_LENGTH
 		},
-		selectedParticipants() {
-			return this.$store.getters.selectedParticipants
+		nameErrorLabel() {
+			if (this.conversationNameTrimmed.length <= CONVERSATION.MAX_NAME_LENGTH) {
+				return
+			}
+			return t('spreed', 'Maximum length exceeded ({maxlength} characters)', { maxlength: CONVERSATION.MAX_NAME_LENGTH })
+		},
+		descriptionErrorLabel() {
+			if (this.conversationDescription.length <= CONVERSATION.MAX_DESCRIPTION_LENGTH) {
+				return
+			}
+			return t('spreed', 'Maximum length exceeded ({maxlength} characters)', { maxlength: CONVERSATION.MAX_DESCRIPTION_LENGTH })
 		},
 	},
 
@@ -526,6 +542,10 @@ export default {
 	&__button {
 		margin-left: auto;
 	}
+
+	&__error {
+		color: var(--color-error);
+	}
 }
 
 :deep(.modal-wrapper .modal-container) {