fix: handle password policy validation

src/components/ConversationSettings/LinkShareSettings.vue

@@ -38,8 +38,13 @@
 					:disabled="isSaving"
 					class="password-form__input-field"
 					label-visible
-					:label="t('spreed', 'Enter new password')" />
-				<NcButton :disabled="isSaving" type="primary" native-type="submit">
+					:label="t('spreed', 'Enter new password')"
+					@valid="isValid = true"
+					@invalid="isValid = false" />
+				<NcButton :disabled="isSaving || !isValid"
+					type="primary"
+					native-type="submit"
+					class="password-form__button">
 					<template #icon>
 						<ArrowRight />
 					</template>
@@ -123,6 +128,7 @@ export default {
 			showPasswordField: false,
 			isSaving: false,
 			isSendingInvitations: false,
+			isValid: true,
 		}
 	},
 
@@ -148,24 +154,10 @@ export default {
 		t,
 		async setConversationPassword(newPassword) {
 			this.isSaving = true
-			try {
-				await this.$store.dispatch('setConversationPassword', {
-					token: this.token,
-					newPassword,
-				})
-				if (newPassword !== '') {
-					showSuccess(t('spreed', 'Conversation password has been saved'))
-				} else {
-					showSuccess(t('spreed', 'Conversation password has been removed'))
-				}
-			} catch (error) {
-				console.error('Error saving conversation password', error)
-				if (error?.response?.data?.ocs?.data?.message) {
-					showError(error.response.data.ocs.data.message)
-				} else {
-					showError(t('spreed', 'Error occurred while saving conversation password'))
-				}
-			}
+			await this.$store.dispatch('setConversationPassword', {
+				token: this.token,
+				newPassword,
+			})
 			this.isSaving = false
 		},
 
@@ -196,16 +188,19 @@ export default {
 			}
 			this.password = ''
 			this.showPasswordField = false
+			this.isValid = true
 		},
 
 		async handlePasswordEnable() {
 			this.showPasswordField = true
 		},
 
 		async handleSetNewPassword() {
-			await this.setConversationPassword(this.password)
-			this.password = ''
-			this.showPasswordField = false
+			if (this.isValid) {
+				await this.setConversationPassword(this.password)
+				this.password = ''
+				this.showPasswordField = false
+			}
 		},
 
 		handleCopyLink() {
@@ -235,11 +230,15 @@ button > .material-design-icon {
 .password-form {
 	display: flex;
 	gap: 8px;
-	align-items: flex-end;
+	align-items: flex-start;
 
 	&__input-field {
 		width: 200px;
 	}
+
+	&__button {
+		margin-top: 6px;
+	}
 }
 
 .app-settings-subsection__buttons {

src/components/NewConversationDialog/NewConversationDialog.vue

@@ -24,7 +24,8 @@
 					:listable.sync="listable"
 					class="new-group-conversation__content"
 					@handle-enter="handleEnter"
-					@avatar-edited="setIsAvatarEdited" />
+					@avatar-edited="setIsAvatarEdited"
+					@is-password-valid="setIsPasswordValid" />
 
 				<!-- Second page -->
 				<NewConversationContactsPage v-if="page === 1"
@@ -186,6 +187,7 @@ export default {
 			password: '',
 			listable: CONVERSATION.LISTABLE.NONE,
 			isAvatarEdited: false,
+			isPasswordValid: true,
 		}
 	},
 
@@ -200,7 +202,7 @@ export default {
 
 		// Controls the disabled/enabled state of the first page's button.
 		disabled() {
-			return this.conversationName === '' || (this.newConversation.hasPassword && this.password === '')
+			return this.conversationName === '' || (this.newConversation.hasPassword && (this.password === '' || !this.isPasswordValid))
 				|| this.conversationName.length > CONVERSATION.MAX_NAME_LENGTH
 				|| this.newConversation.description.length > CONVERSATION.MAX_DESCRIPTION_LENGTH
 		},
@@ -364,6 +366,10 @@ export default {
 		onClickCopyLink() {
 			copyConversationLinkToClipboard(this.newConversation.token)
 		},
+
+		setIsPasswordValid(value) {
+			this.isPasswordValid = value
+		},
 	},
 
 }

src/components/NewConversationDialog/NewConversationSetupPage.vue

@@ -54,7 +54,9 @@
 				autocomplete="new-password"
 				check-password-strength
 				:placeholder="t('spreed', 'Enter password')"
-				:aria-label="t('spreed', 'Enter password')" />
+				:aria-label="t('spreed', 'Enter password')"
+				@valid="$emit('is-password-valid', true)"
+				@invalid="$emit('is-password-valid', false)" />
 		</div>
 		<ListableSettings v-model="listableValue" />
 	</div>
@@ -104,7 +106,7 @@ export default {
 		}
 	},
 
-	emits: ['update:newConversation', 'update:password', 'update:listable', 'avatar-edited', 'handle-enter'],
+	emits: ['update:newConversation', 'update:password', 'update:listable', 'avatar-edited', 'handle-enter', 'is-password-valid'],
 
 	setup() {
 		return { supportsAvatar }
@@ -202,11 +204,15 @@ export default {
 	&__wrapper {
 		display: flex;
 		gap: var(--default-grid-baseline);
-		align-items: center;
+		align-items: flex-start;
 
 		.checkbox__label {
 			white-space: nowrap;
 		}
+
+		:deep(.input-field) {
+			margin-top: 6px;
+		}
 	}
 
 	&__label {

src/store/conversationsStore.js

@@ -600,8 +600,20 @@ const actions = {
 		try {
 			await setConversationPassword(token, newPassword)
 			commit('setConversationHasPassword', { token, hasPassword: !!newPassword })
+			if (newPassword !== '') {
+				showSuccess(t('spreed', 'Conversation password has been saved'))
+			} else {
+				showSuccess(t('spreed', 'Conversation password has been removed'))
+			}
+
 		} catch (error) {
 			console.error('Error while setting a password for conversation: ', error)
+			if (error?.response?.data?.ocs?.data?.message) {
+				showError(error.response.data.ocs.data.message)
+			} else {
+				showError(t('spreed', 'Error occurred while saving conversation password'))
+			}
+
 		}
 	},