fix: migrate Nc* components to v-model usage

src/components/AdminSettings/RecordingServers.vue

@@ -43,15 +43,15 @@
 				{{ t('spreed', 'Add a new recording backend server') }}
 			</NcButton>
 
-			<NcPasswordField class="form__textfield additional-top-margin"
-				:value="secret"
+			<NcPasswordField v-model="secret"
+				class="form__textfield additional-top-margin"
 				name="recording_secret"
 				as-text
 				:disabled="loading"
 				:placeholder="t('spreed', 'Shared secret')"
 				:label="t('spreed', 'Shared secret')"
 				label-visible
-				@update:value="updateSecret" />
+				@update:model-value="debounceUpdateServers" />
 
 			<template v-if="servers.length && recordingConsentCapability">
 				<h3>{{ t('spreed', 'Recording consent') }}</h3>
@@ -203,11 +203,6 @@ export default {
 			})
 		},
 
-		updateSecret(value) {
-			this.secret = value
-			this.debounceUpdateServers()
-		},
-
 		async updateServers() {
 			this.loading = true
 

src/components/AdminSettings/SIPBridge.vue

@@ -46,7 +46,7 @@
 				{{ t('spreed', 'Shared secret') }}
 			</label>
 			<NcPasswordField id="sip-shared-secret"
-				:value.sync="sharedSecret"
+				v-model="sharedSecret"
 				class="form"
 				name="sip-shared-secret"
 				as-text
@@ -58,7 +58,7 @@
 				{{ t('spreed', 'Dial-in information') }}
 			</label>
 			<NcTextArea id="dial-in-info"
-				:value.sync="dialInInfo"
+				v-model="dialInInfo"
 				name="message"
 				class="form form__textarea"
 				rows="4"

src/components/AdminSettings/SignalingServers.vue

@@ -54,15 +54,15 @@
 			</NcCheckboxRadioSwitch>
 		</template>
 
-		<NcPasswordField class="form__textfield additional-top-margin"
-			:value="secret"
+		<NcPasswordField v-model="secret"
+			class="form__textfield additional-top-margin"
 			name="signaling_secret"
 			as-text
 			:disabled="loading"
 			:placeholder="t('spreed', 'Shared secret')"
 			:label="t('spreed', 'Shared secret')"
 			label-visible
-			@update:value="updateSecret" />
+			@update:model-value="debounceUpdateServers" />
 	</section>
 </template>
 
@@ -150,11 +150,6 @@ export default {
 			})
 		},
 
-		updateSecret(value) {
-			this.secret = value
-			this.debounceUpdateServers()
-		},
-
 		async updateServers() {
 			this.loading = true
 

src/components/AdminSettings/TurnServer.vue

@@ -30,14 +30,13 @@
 			@update:value="updateServer" />
 
 		<NcPasswordField ref="turn_secret"
+			v-model="turnSecret"
 			name="turn_secret"
 			as-text
 			placeholder="secret"
 			class="turn-server__textfield"
-			:value="secret"
 			:disabled="loading"
-			:label="t('spreed', 'TURN server secret')"
-			@update:value="updateSecret" />
+			:label="t('spreed', 'TURN server secret')" />
 
 		<NcSelect class="turn-server__select"
 			name="turn_protocols"
@@ -153,6 +152,14 @@ export default {
 	},
 
 	computed: {
+		turnSecret: {
+			get() {
+				return this.secret
+			},
+			set(value) {
+				this.updateSecret(value)
+			},
+		},
 		turnServerError() {
 			if (this.schemes.includes('turns') && /^(?:\d{1,3}\.){3}\d{1,3}(?::\d{1,5})?$/.test(this.server.trim())) {
 				return t('spreed', '{schema} scheme must be used with a domain', { schema: 'turns:' })

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -20,7 +20,7 @@
 					</p>
 					<NcInputField id="room-number"
 						ref="inputField"
-						:value.sync="amount"
+						v-model="amount"
 						class="breakout-rooms-editor__number-input"
 						type="number"
 						min="1"

src/components/ConversationSettings/LinkShareSettings.vue

@@ -45,7 +45,7 @@
 
 				<form v-if="showPasswordField" class="password-form" @submit.prevent="handleSetNewPassword">
 					<NcPasswordField ref="passwordField"
-						:value.sync="password"
+						v-model="password"
 						autocomplete="new-password"
 						check-password-strength
 						:disabled="isSaving"

src/components/ConversationSettings/LobbySettings.vue

@@ -24,8 +24,8 @@
 					<label for="moderation_settings_lobby_timer_field">{{ t('spreed', 'Meeting start time') }}</label>
 				</div>
 				<NcDateTimePicker id="moderation_settings_lobby_timer_field"
+					v-model="lobbyTimer"
 					aria-describedby="moderation_settings_lobby_timer_hint"
-					:model-value="lobbyTimer"
 					:default-value="defaultLobbyTimer"
 					:placeholder="t('spreed', 'Start time (optional)')"
 					:disabled="lobbyTimerFieldDisabled"
@@ -36,8 +36,7 @@
 					:input-class="['mx-input', { focusable: !lobbyTimerFieldDisabled }]"
 					v-bind="dateTimePickerAttrs"
 					confirm
-					clearable
-					@change="saveLobbyTimer" />
+					clearable />
 				<div class="lobby_timer--timezone">
 					{{ getTimeZone }}
 				</div>
@@ -143,16 +142,21 @@ export default {
 			return new Date(date.getTime() + 3600000)
 		},
 
-		lobbyTimer() {
-			// A timestamp of 0 means that there is no lobby, but it would be
-			// interpreted as the Unix epoch by the DateTimePicker.
-			if (this.conversation.lobbyTimer === 0) {
-				return undefined
-			}
+		lobbyTimer: {
+			get() {
+				// A timestamp of 0 means that there is no lobby, but it would be
+				// interpreted as the Unix epoch by the DateTimePicker.
+				if (this.conversation.lobbyTimer === 0) {
+					return undefined
+				}
 
-			// PHP timestamp is second-based; JavaScript timestamp is
-			// millisecond based.
-			return this.conversation.lobbyTimer * 1000
+				// PHP timestamp is second-based; JavaScript timestamp is
+				// millisecond based.
+				return this.conversation.lobbyTimer * 1000
+			},
+			set(value) {
+				this.saveLobbyTimer(value)
+			}
 		},
 
 		dateTimePickerAttrs() {

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -55,7 +55,7 @@
 						size="normal"
 						container=".matterbridge-settings"
 						close-on-click-outside>
-						<NcTextArea :value="processLog"
+						<NcTextArea :model-value="processLog"
 							class="log-content"
 							:label="t('spreed', 'Log content')"
 							:rows="29"

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

@@ -204,19 +204,18 @@
 					<!-- Custom DateTime picker for the reminder -->
 					<NcActionSeparator />
 
-					<NcActionInput type="datetime-local"
+					<NcActionInput v-model="customReminderDateTime"
+						type="datetime-local"
 						is-native-picker
-						:value="customReminderDateTime"
-						:min="new Date()"
-						@change="setCustomReminderDateTime">
+						:min="new Date()">
 						<template #icon>
 							<CalendarClock :size="20" />
 						</template>
 					</NcActionInput>
 
 					<NcActionButton :aria-label="t('spreed', 'Set custom reminder')"
 						close-after-click
-						@click.stop="setCustomReminder(customReminderDateTime)">
+						@click.stop="setReminder(customReminderTimestamp)">
 						<template #icon>
 							<Check :size="20" />
 						</template>
@@ -437,7 +436,7 @@ export default {
 			frequentlyUsedEmojis: [],
 			submenu: null,
 			currentReminder: null,
-			customReminderDateTime: new Date(moment().add(2, 'hours').minute(0).second(0).valueOf()),
+			customReminderTimestamp: moment().add(2, 'hours').minute(0).second(0).valueOf(),
 		}
 	},
 
@@ -502,6 +501,17 @@ export default {
 			return moment(this.message.lastEditTimestamp * 1000).format('lll')
 		},
 
+		customReminderDateTime: {
+			get() {
+				return new Date(this.customReminderTimestamp)
+			},
+			set(value) {
+				if (value !== null) {
+					this.customReminderTimestamp = value.valueOf()
+				}
+			},
+		},
+
 		reminderOptions() {
 			const currentDateTime = moment()
 
@@ -734,14 +744,6 @@ export default {
 			}
 		},
 
-		setCustomReminderDateTime(event) {
-			this.customReminderDateTime = new Date(event.target.value)
-		},
-
-		setCustomReminder() {
-			this.setReminder(this.customReminderDateTime.valueOf())
-		},
-
 		editMessage() {
 			if (!this.isEditable) {
 				return

src/components/NewMessage/NewMessage.vue

@@ -74,7 +74,7 @@
 					:text="t('spreed','Adding a mention will only notify users who did not read the message.')" />
 				<NcRichContenteditable ref="richContenteditable"
 					:key="container"
-					:value.sync="text"
+					v-model="text"
 					:auto-complete="autoComplete"
 					:disabled="disabled"
 					:user-data="userData"

src/components/RightSidebar/Participants/Participant.vue

@@ -285,12 +285,12 @@
 					</NcCheckboxRadioSwitch>
 					<template v-if="isBanParticipant">
 						<NcTextArea v-if="isBanParticipant"
+							v-model="internalNote"
 							class="participant-dialog__input"
 							resize="vertical"
 							:label="t('spreed', 'Internal note (reason to ban)')"
 							:error="!!maxLengthWarning"
-							:helper-text="maxLengthWarning"
-							:value.sync="internalNote" />
+							:helper-text="maxLengthWarning" />
 					</template>
 				</template>
 				<template #actions>

src/components/UIShared/EditableTextField.vue

@@ -13,8 +13,8 @@
 			:use-extended-markdown="useMarkdown" />
 		<NcRichContenteditable v-else
 			ref="richContenteditable"
+			v-model="text"
 			dir="auto"
-			:value.sync="text"
 			:auto-complete="()=>{}"
 			:maxlength="maxLength"
 			:multiline="multiline"