Merge pull request #8073 from nextcloud/bugfix/7997/fix-disappearing-conversation-settings

Fix disappearing conversation settings

src/components/AdminSettings/GeneralSettings.vue

@@ -41,17 +41,15 @@
 
 		<h3>{{ t('spreed', 'Integration into other apps') }}</h3>
 
-		<NcCheckboxRadioSwitch :checked.sync="conversationsFiles"
-			name="conversations_files"
+		<NcCheckboxRadioSwitch :checked="isConversationsFilesChecked"
 			:disabled="loading || loadingConversationsFiles"
-			@change="saveConversationsFiles">
+			@update:checked="saveConversationsFiles">
 			{{ t('spreed', 'Allow conversations on files') }}
 		</NcCheckboxRadioSwitch>
 
-		<NcCheckboxRadioSwitch :checked.sync="conversationsFilesPublicShares"
-			name="conversations_files_public_shares"
-			:disabled="loading || loadingConversationsFiles || !conversationsFiles"
-			@change="saveConversationsFilesPublicShares">
+		<NcCheckboxRadioSwitch :checked="isConversationsFilesPublicSharesChecked"
+			:disabled="loading || loadingConversationsFiles || !isConversationsFilesChecked"
+			@update:checked="saveConversationsFilesPublicShares">
 			{{ t('spreed', 'Allow conversations on public shares for files') }}
 		</NcCheckboxRadioSwitch>
 	</div>
@@ -84,16 +82,23 @@ export default {
 			defaultGroupNotificationOptions,
 			defaultGroupNotification: defaultGroupNotificationOptions[1],
 
-			conversationsFiles: true,
-			conversationsFilesPublicShares: true,
+			conversationsFiles: parseInt(loadState('spreed', 'conversations_files')) === 1,
+			conversationsFilesPublicShares: parseInt(loadState('spreed', 'conversations_files_public_shares')) === 1,
 		}
 	},
 
+	computed: {
+		isConversationsFilesChecked() {
+			return this.conversationsFiles
+		},
+		isConversationsFilesPublicSharesChecked() {
+			return this.conversationsFilesPublicShares
+		},
+	},
+
 	mounted() {
 		this.loading = true
-		this.conversationsFiles = parseInt(loadState('spreed', 'conversations_files')) === 1
 		this.defaultGroupNotification = defaultGroupNotificationOptions[parseInt(loadState('spreed', 'default_group_notification')) - 1]
-		this.conversationsFilesPublicShares = parseInt(loadState('spreed', 'conversations_files_public_shares')) === 1
 		this.loading = false
 	},
 
@@ -107,8 +112,9 @@ export default {
 				}.bind(this),
 			})
 		},
-		saveConversationsFiles() {
+		saveConversationsFiles(checked) {
 			this.loadingConversationsFiles = true
+			this.conversationsFiles = checked
 
 			OCP.AppConfig.setValue('spreed', 'conversations_files', this.conversationsFiles ? '1' : '0', {
 				success: function() {
@@ -126,8 +132,9 @@ export default {
 				}.bind(this),
 			})
 		},
-		saveConversationsFilesPublicShares() {
+		saveConversationsFilesPublicShares(checked) {
 			this.loadingConversationsFiles = true
+			this.conversationsFilesPublicShares = checked
 
 			OCP.AppConfig.setValue('spreed', 'conversations_files_public_shares', this.conversationsFilesPublicShares ? '1' : '0', {
 				success: function() {

src/components/AdminSettings/MatterbridgeIntegration.vue

@@ -35,13 +35,10 @@
 			</p>
 
 			<p v-if="matterbridgeVersion">
-				<input id="enable_matterbridge"
-					v-model="matterbridgeEnabled"
-					type="checkbox"
-					name="enable_matterbridge"
-					class="checkbox"
-					@change="saveMatterbridgeEnabled">
-				<label for="enable_matterbridge">{{ t('spreed', 'Enable Matterbridge integration') }}</label>
+				<NcCheckboxRadioSwitch :checked="isEnabled"
+					@update:checked="saveMatterbridgeEnabled">
+					{{ t('spreed', 'Enable Matterbridge integration') }}
+				</NcCheckboxRadioSwitch>
 			</p>
 		</template>
 
@@ -74,6 +71,7 @@
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import {
@@ -87,6 +85,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
@@ -99,6 +98,10 @@ export default {
 	},
 
 	computed: {
+		isEnabled() {
+			return this.matterbridgeEnabled
+		},
+
 		installedVersion() {
 			return t('spreed', 'Installed version: {version}', {
 				version: this.matterbridgeVersion,
@@ -128,6 +131,7 @@ export default {
 
 	methods: {
 		saveMatterbridgeEnabled() {
+			this.matterbridgeEnabled = !this.matterbridgeEnabled
 			OCP.AppConfig.setValue('spreed', 'enable_matterbridge', this.matterbridgeEnabled ? '1' : '0', {
 				success: function() {
 					if (!this.matterbridgeEnabled) {

src/components/AdminSettings/SignalingServer.vue

@@ -30,13 +30,11 @@
 			:disabled="loading"
 			:aria-label="t('spreed', 'High-performance backend URL')"
 			@input="updateServer">
-		<input :id="'verify' + index"
-			type="checkbox"
-			:name="'verify' + index"
-			class="checkbox verify"
-			:checked="verify"
-			@change="updateVerify">
-		<label :for="'verify' + index">{{ t('spreed', 'Validate SSL certificate') }}</label>
+
+		<NcCheckboxRadioSwitch :checked="verify"
+			@update:checked="updateVerify">
+			{{ t('spreed', 'Validate SSL certificate') }}
+		</NcCheckboxRadioSwitch>
 
 		<NcButton v-show="!loading"
 			type="tertiary-no-background"
@@ -62,6 +60,7 @@
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -73,6 +72,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
 		AlertCircle,
 		Check,
@@ -144,8 +144,8 @@ export default {
 		updateServer(event) {
 			this.$emit('update:server', event.target.value)
 		},
-		updateVerify(event) {
-			this.$emit('update:verify', event.target.checked)
+		updateVerify(checked) {
+			this.$emit('update:verify', checked)
 		},
 
 		async checkServerVersion() {

src/components/ConversationSettings/LinkShareSettings.vue

@@ -26,16 +26,12 @@
 				{{ t('spreed', 'Allow guests to use a public link to join this conversation.') }}
 			</div>
 			<div>
-				<input id="link_share_settings_toggle_guests"
-					ref="toggleGuests"
-					aria-describedby="link_share_settings_hint"
-					type="checkbox"
-					class="checkbox"
-					name="link_share_settings_toggle_guests"
-					:checked="isSharedPublicly"
+				<NcCheckboxRadioSwitch :checked="isSharedPublicly"
 					:disabled="isSaving"
-					@change="toggleGuests">
-				<label for="link_share_settings_toggle_guests">{{ t('spreed', 'Allow guests') }}</label>
+					aria-describedby="link_share_settings_hint"
+					@update:checked="toggleGuests">
+					{{ t('spreed', 'Allow guests') }}
+				</NcCheckboxRadioSwitch>
 			</div>
 		</div>
 		<div v-show="isSharedPublicly" class="app-settings-subsection">
@@ -43,16 +39,12 @@
 				{{ t('spreed', 'Set a password to restrict who can use the public link.') }}
 			</div>
 			<div>
-				<input id="link_share_settings_toggle_password"
-					ref="togglePassword"
-					aria-describedby="link_share_settings_password_hint"
-					type="checkbox"
-					class="checkbox"
-					:checked="conversation.hasPassword"
-					name="link_share_settings_toggle_password"
+				<NcCheckboxRadioSwitch :checked="conversation.hasPassword"
 					:disabled="isSaving"
-					@change="togglePassword">
-				<label for="link_share_settings_toggle_password">{{ t('spreed', 'Password protection') }}</label>
+					aria-describedby="link_share_settings_password_hint"
+					@update:checked="togglePassword">
+					{{ t('spreed', 'Password protection') }}
+				</NcCheckboxRadioSwitch>
 			</div>
 		</div>
 		<div class="app-settings-subsection">
@@ -107,11 +99,9 @@
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { CONVERSATION } from '../../constants.js'
-import {
-	setConversationPassword,
-} from '../../services/conversationsService.js'
 import { generateUrl } from '@nextcloud/router'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import ClipboardTextOutline from 'vue-material-design-icons/ClipboardTextOutline.vue'
@@ -122,6 +112,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcCheckboxRadioSwitch,
 		ArrowRight,
 		ClipboardTextOutline,
 		Email,
@@ -166,7 +157,10 @@ export default {
 		async setConversationPassword(newPassword) {
 			this.isSaving = true
 			try {
-				await setConversationPassword(this.token, newPassword)
+				await this.$store.dispatch('setConversationPassword', {
+					token: this.token,
+					newPassword,
+				})
 				if (newPassword !== '') {
 					showSuccess(t('spreed', 'Conversation password has been saved'))
 				} else {
@@ -208,8 +202,8 @@ export default {
 			this.isSaving = false
 		},
 
-		async togglePassword() {
-			if (this.$refs.togglePassword.checked) {
+		async togglePassword(checked) {
+			if (checked) {
 				this.showPasswordField = true
 				await this.handlePasswordEnable()
 				this.$nextTick(() => {

src/components/ConversationSettings/LobbySettings.vue

@@ -29,15 +29,12 @@
 				{{ t('spreed', 'This will also remove non-moderators from the ongoing call.') }}
 			</div>
 			<div>
-				<input id="moderation_settings_enable_lobby_checkbox"
-					aria-describedby="moderation_settings_enable_lobby_hint"
-					type="checkbox"
-					class="checkbox"
-					name="moderation_settings_enable_lobby_checkbox"
-					:checked="hasLobbyEnabled"
+				<NcCheckboxRadioSwitch :checked="hasLobbyEnabled"
+					type="switch"
 					:disabled="isLobbyStateLoading"
-					@change="toggleLobby">
-				<label for="moderation_settings_enable_lobby_checkbox">{{ t('spreed', 'Enable lobby') }}</label>
+					@update:checked="toggleLobby">
+					{{ t('spreed', 'Enable lobby') }}
+				</NcCheckboxRadioSwitch>
 			</div>
 		</div>
 		<div class="app-settings-subsection">
@@ -70,12 +67,14 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { WEBINAR } from '../../constants.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
 
 export default {
 	name: 'LobbySettings',
 
 	components: {
+		NcCheckboxRadioSwitch,
 		NcDatetimePicker,
 	},
 

src/components/ConversationSettings/LockingSettings.vue

@@ -28,15 +28,13 @@
 			{{ t('spreed', 'This will also terminate the ongoing call.') }}
 		</div>
 		<div>
-			<input id="moderation_settings_lock_conversation_checkbox"
+			<NcCheckboxRadioSwitch :checked="isReadOnly"
+				type="switch"
 				aria-describedby="moderation_settings_lock_conversation_hint"
-				type="checkbox"
-				class="checkbox"
-				name="moderation_settings_lock_conversation_checkbox"
-				:checked="isReadOnly"
 				:disabled="isReadOnlyStateLoading"
-				@change="toggleReadOnly">
-			<label for="moderation_settings_lock_conversation_checkbox">{{ t('spreed', 'Lock conversation') }}</label>
+				@update:checked="toggleReadOnly">
+				{{ t('spreed', 'Lock conversation') }}
+			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
@@ -44,10 +42,15 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { CONVERSATION } from '../../constants.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 export default {
 	name: 'LockingSettings',
 
+	components: {
+		NcCheckboxRadioSwitch,
+	},
+
 	props: {
 		token: {
 			type: String,

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -55,16 +55,11 @@
 				</div>
 				<div v-show="parts.length > 0"
 					class="enable-switch-line">
-					<input id="enable-checkbox"
-						type="checkbox"
-						class="checkbox"
-						:token="token"
-						:checked="enabled"
-						@change="onEnabled">
-					<label for="enable-checkbox">
+					<NcCheckboxRadioSwitch :checked="enabled"
+						@update:checked="onEnabled">
 						{{ t('spreed', 'Enable bridge') }}
 						({{ processStateText }})
-					</label>
+					</NcCheckboxRadioSwitch>
 					<NcButton v-if="enabled"
 						v-tooltip.top="{ content: t('spreed', 'Show Matterbridge log') }"
 						type="tertiary"
@@ -107,6 +102,7 @@ import {
 import { showSuccess } from '@nextcloud/dialogs'
 import { imagePath } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import Message from 'vue-material-design-icons/Message.vue'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
@@ -120,9 +116,10 @@ Vue.directive('tooltip', Tooltip)
 export default {
 	name: 'MatterbridgeSettings',
 	components: {
+		NcButton,
+		NcCheckboxRadioSwitch,
 		NcMultiselect,
 		BridgePart,
-		NcButton,
 		Message,
 		NcModal,
 		Plus,
@@ -578,8 +575,8 @@ export default {
 				this.save()
 			}
 		},
-		onEnabled(e) {
-			this.enabled = e.target.checked
+		onEnabled(checked) {
+			this.enabled = checked
 			this.save()
 		},
 		save() {

src/components/ConversationSettings/SipSettings.vue

@@ -25,37 +25,37 @@
 			{{ t('spreed', 'Allow participants to join from a phone.') }}
 		</div>
 		<div>
-			<input id="sip_settings_checkbox"
+			<NcCheckboxRadioSwitch :checked="hasSIPEnabled"
+				type="switch"
 				aria-describedby="sip_settings_hint"
-				type="checkbox"
-				class="checkbox"
-				name="sip_settings_checkbox"
-				:checked="hasSIPEnabled"
 				:disabled="isSipLoading"
-				@change="toggleSetting('enable')">
-			<label for="sip_settings_checkbox">{{ t('spreed', 'Enable SIP dial-in') }}</label>
+				@update:checked="toggleSetting('enable')">
+				{{ t('spreed', 'Enable SIP dial-in') }}
+			</NcCheckboxRadioSwitch>
 		</div>
 		<div v-if="hasSIPEnabled">
-			<input id="sip_nopin_checkbox"
-				aria-describedby="sip_nopin_checkbox"
-				type="checkbox"
-				class="checkbox"
-				name="sip_nopin_checkbox"
-				:checked="noPinRequired"
+			<NcCheckboxRadioSwitch :checked="noPinRequired"
+				type="switch"
 				:disabled="isSipLoading || !hasSIPEnabled"
-				@change="toggleSetting('nopin')">
-			<label for="sip_nopin_checkbox">{{ t('spreed', 'Allow to dial-in without a PIN') }}</label>
+				@update:checked="toggleSetting('nopin')">
+				{{ t('spreed', 'Allow to dial-in without a PIN') }}
+			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import { WEBINAR } from '../../constants.js'
 
 export default {
 	name: 'SipSettings',
 
+	components: {
+		NcCheckboxRadioSwitch,
+	},
+
 	data() {
 		return {
 			isSipLoading: false,

src/store/conversationsStore.js

@@ -41,6 +41,7 @@ import {
 	setConversationPermissions,
 	setCallPermissions,
 	setMessageExpiration,
+	setConversationPassword,
 } from '../services/conversationsService.js'
 import { getCurrentUser } from '@nextcloud/auth'
 // eslint-disable-next-line import/extensions
@@ -165,6 +166,10 @@ const mutations = {
 	setMessageExpiration(state, { token, seconds }) {
 		Vue.set(state.conversations[token], 'messageExpiration', seconds)
 	},
+
+	setConversationHasPassword(state, { token, hasPassword }) {
+		Vue.set(state.conversations[token], 'hasPassword', hasPassword)
+	},
 }
 
 const actions = {
@@ -327,6 +332,15 @@ const actions = {
 		commit('setConversationDescription', { token, description })
 	},
 
+	async setConversationPassword({ commit }, { token, newPassword }) {
+		await setConversationPassword(token, newPassword)
+
+		commit('setConversationHasPassword', {
+			token,
+			hasPassword: !!newPassword,
+		})
+	},
+
 	async setReadOnlyState({ commit, getters }, { token, readOnly }) {
 		const conversation = Object.assign({}, getters.conversations[token])
 		if (!conversation) {