diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue index e64dd30a7fe..aff3dade0a6 100644 --- a/src/components/ConversationSettings/LinkShareSettings.vue +++ b/src/components/ConversationSettings/LinkShareSettings.vue @@ -38,8 +38,13 @@ :disabled="isSaving" class="password-form__input-field" label-visible - :label="t('spreed', 'Enter new password')" /> - + :label="t('spreed', 'Enter new password')" + @valid="isValid = true" + @invalid="isValid = false" /> + @@ -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,6 +188,7 @@ export default { } this.password = '' this.showPasswordField = false + this.isValid = true }, async handlePasswordEnable() { @@ -203,9 +196,11 @@ export default { }, 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 { diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue index 3d9d880200e..8509f732f90 100644 --- a/src/components/NewConversationDialog/NewConversationDialog.vue +++ b/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" /> 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 + }, }, } diff --git a/src/components/NewConversationDialog/NewConversationSetupPage.vue b/src/components/NewConversationDialog/NewConversationSetupPage.vue index 98a42c69a4b..5af7254b5ea 100644 --- a/src/components/NewConversationDialog/NewConversationSetupPage.vue +++ b/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)" /> @@ -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 { diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js index 6f5a403bd55..2a16c8465d5 100644 --- a/src/store/conversationsStore.js +++ b/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')) + } + } },