Merge pull request #4331 from nextcloud/feature/1647/ui-for-readonly-conversation

Add checkbox for locking conversation

src/components/ChatView.vue

@@ -84,7 +84,7 @@ export default {
 			if (this.isGuest) {
 				return t('spreed', 'You need to be logged in to upload files')
 			} else if (this.isReadOnly) {
-				return t('spreed', 'This conversation is read only')
+				return t('spreed', 'This conversation is read-only')
 			} else {
 				return t('spreed', 'Drop your files to upload')
 			}

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -86,7 +86,7 @@ import RichText from '@juliushaertl/vue-richtext'
 import Quote from '../../../Quote'
 import { EventBus } from '../../../../services/EventBus'
 import emojiRegex from 'emoji-regex'
-import { PARTICIPANT } from '../../../../constants'
+import { PARTICIPANT, CONVERSATION } from '../../../../constants'
 import moment from '@nextcloud/moment'
 
 export default {
@@ -217,7 +217,12 @@ export default {
 
 	computed: {
 		hasActions() {
-			return this.isReplyable
+			return this.isReplyable && !this.isConversationReadOnly
+		},
+
+		isConversationReadOnly() {
+			const conversation = this.$store.getters.conversation(this.token)
+			return conversation.readOnly === CONVERSATION.STATE.READ_ONLY
 		},
 
 		isSystemMessage() {

src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue

@@ -175,7 +175,7 @@ export default {
 		 */
 		placeholderText: {
 			type: String,
-			default: t('spreed', 'Write message, @ to mention someone …'),
+			default: '',
 		},
 
 		/**

src/components/NewMessageForm/NewMessageForm.vue

@@ -58,6 +58,7 @@
 					</Actions>
 				</div>
 				<div
+					v-if="!isReadOnly"
 					class="new-message-form__button">
 					<EmojiPicker @select="addEmoji">
 						<button
@@ -80,11 +81,14 @@
 						ref="advancedInput"
 						v-model="text"
 						:token="token"
+						:active-input="!isReadOnly"
+						:placeholder-text="placeholderText"
 						@update:contentEditable="contentEditableToParsed"
 						@submit="handleSubmit"
 						@files-pasted="handleFiles" />
 				</div>
 				<button
+					:disabled="isReadOnly"
 					type="submit"
 					:aria-label="t('spreed', 'Send message')"
 					class="new-message-form__button submit icon-confirm-fade"
@@ -96,7 +100,7 @@
 
 <script>
 import AdvancedInput from './AdvancedInput/AdvancedInput'
-import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 import { postNewMessage } from '../../services/messagesService'
 import Quote from '../Quote'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
@@ -149,6 +153,16 @@ export default {
 			}
 		},
 
+		isReadOnly() {
+			return this.conversation.readOnly === CONVERSATION.STATE.READ_ONLY
+		},
+
+		placeholderText() {
+			return this.isReadOnly
+				? t('spreed', 'This conversation has been locked')
+				: t('spreed', 'Write message, @ to mention someone …')
+		},
+
 		messageToBeReplied() {
 			return this.$store.getters.getMessageToBeReplied(this.token)
 		},
@@ -158,7 +172,7 @@ export default {
 		},
 
 		canShareAndUploadFiles() {
-			return !this.currentUserIsGuest && this.conversation.readOnly === CONVERSATION.STATE.READ_WRITE
+			return !this.currentUserIsGuest && !this.isReadOnly
 		},
 
 		attachmentFolder() {
@@ -238,8 +252,8 @@ export default {
 		 * Sends the new message
 		 */
 		async handleSubmit() {
-
 			if (this.parsedText !== '') {
+				const oldMessage = this.parsedText
 				const temporaryMessage = createTemporaryMessage(this.parsedText, this.token)
 				this.$store.dispatch('addTemporaryMessage', temporaryMessage)
 				this.text = ''
@@ -270,7 +284,22 @@ export default {
 						})
 					}
 				} catch (error) {
-					console.debug(`error while submitting message ${error}`)
+					let statusCode = null
+					console.debug(`error while submitting message ${error}`, error)
+					if (error.isAxiosError) {
+						statusCode = error.response.status
+					}
+					// 403 when room is read-only, 412 when switched to lobby mode
+					if (statusCode === 403 || statusCode === 412) {
+						showError(t('spreed', 'No permission to post messages in this conversation'))
+					} else {
+						showError(t('spreed', 'Could not post message: {errorMessage}', { errorMessage: error.message || error }))
+					}
+
+					// restore message to allow re-sending
+					this.$store.dispatch('deleteMessage', temporaryMessage)
+					this.text = oldMessage
+					this.parsedText = oldMessage
 				}
 			}
 		},

src/components/TopBar/CallButton.vue

@@ -117,6 +117,7 @@ export default {
 			return (!this.conversation.canStartCall
 					&& !this.conversation.hasCall)
 				|| this.isBlockedByLobby
+				|| this.conversation.readOnly
 				|| this.isNextcloudTalkHashDirty
 		},
 

src/components/TopBar/TopBar.vue

@@ -118,6 +118,12 @@
 					{{ t('spreed', 'Enter a password') }}
 				</ActionInput>
 				<ActionSeparator />
+				<ActionCheckbox
+					:checked="isReadOnly"
+					:disabled="readOnlyStateLoading"
+					@change="toggleReadOnly">
+					{{ t('spreed', 'Lock conversation') }}
+				</ActionCheckbox>
 				<ActionCheckbox
 					:checked="hasLobbyEnabled"
 					@change="toggleLobby">
@@ -204,6 +210,7 @@ export default {
 			// Switch for the password-editing operation
 			isEditingPassword: false,
 			lobbyTimerLoading: false,
+			readOnlyStateLoading: false,
 		}
 	},
 
@@ -317,6 +324,9 @@ export default {
 		hasLobbyEnabled() {
 			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
 		},
+		isReadOnly() {
+			return this.conversation.readOnly === CONVERSATION.STATE.READ_ONLY
+		},
 		isPasswordProtected() {
 			return this.conversation.hasPassword
 		},
@@ -457,6 +467,16 @@ export default {
 
 			this.lobbyTimerLoading = false
 		},
+
+		async toggleReadOnly() {
+			this.readOnlyStateLoading = true
+			await this.$store.dispatch('setReadOnlyState', {
+				token: this.token,
+				readOnly: this.isReadOnly ? CONVERSATION.STATE.READ_WRITE : CONVERSATION.STATE.READ_ONLY,
+			})
+			this.readOnlyStateLoading = false
+		},
+
 		async handlePasswordDisable() {
 			// disable the password protection for the current conversation
 			if (this.conversation.hasPassword) {

src/services/conversationsService.js

@@ -297,6 +297,22 @@ const changeLobbyState = async function(token, newState, timestamp) {
 	}
 }
 
+/**
+ * Change the read-only state
+ * @param {string} token The token of the conversation to be modified
+ * @param {int} readOnly The new read-only state to set
+ */
+const changeReadOnlyState = async function(token, readOnly) {
+	try {
+		const response = await axios.put(generateOcsUrl('apps/spreed/api/v2', 2) + `room/${token}/read-only`, {
+			state: readOnly,
+		})
+		return response
+	} catch (error) {
+		console.debug('Error while updating read-only state: ', error)
+	}
+}
+
 export {
 	fetchConversations,
 	fetchConversation,
@@ -312,6 +328,7 @@ export {
 	makePublic,
 	makePrivate,
 	changeLobbyState,
+	changeReadOnlyState,
 	setConversationPassword,
 	setConversationName,
 }

src/store/conversationsStore.js

@@ -24,6 +24,7 @@ import {
 	makePublic,
 	makePrivate,
 	changeLobbyState,
+	changeReadOnlyState,
 	addToFavorites,
 	removeFromFavorites,
 	setConversationName,
@@ -206,6 +207,18 @@ const actions = {
 		commit('addConversation', conversation)
 	},
 
+	async setReadOnlyState({ commit, getters }, { token, readOnly }) {
+		const conversation = Object.assign({}, getters.conversations[token])
+		if (!conversation) {
+			return
+		}
+
+		await changeReadOnlyState(token, readOnly)
+		conversation.readOnly = readOnly
+
+		commit('addConversation', conversation)
+	},
+
 	async setLobbyTimer({ commit, getters }, { token, timestamp }) {
 		const conversation = Object.assign({}, getters.conversations[token])
 		if (!conversation) {