wrap user status message input and buttons with native form

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

(cherry picked from commit bcb074a90d)

apps/user_status/src/components/CustomMessageInput.vue

@@ -38,9 +38,7 @@
 				:placeholder="$t('user_status', 'What is your status?')"
 				type="text"
 				:value="message"
-				@change="onChange"
-				@keyup="onKeyup"
-				@paste="onKeyup">
+				@input="onChange">
 		</div>
 	</div>
 </template>
@@ -100,12 +98,8 @@ export default {
 		 *
 		 * @param {Event} event The Change Event
 		 */
-		onKeyup(event) {
-			this.$emit('change', event.target.value)
-		},
-
 		onChange(event) {
-			this.$emit('submit', event.target.value)
+			this.$emit('change', event.target.value)
 		},
 
 		setIcon(icon) {

apps/user_status/src/components/SetStatusModal.vue

@@ -38,45 +38,46 @@
 					@select="changeStatus" />
 			</div>
 
-			<!-- Status message -->
-			<div class="set-status-modal__header">
-				<h2>{{ $t('user_status', 'Status message') }}</h2>
-			</div>
-			<div class="set-status-modal__custom-input">
-				<CustomMessageInput ref="customMessageInput"
-					:icon="icon"
-					:message="editedMessage"
-					@change="setMessage"
-					@submit="saveStatus"
-					@select-icon="setIcon" />
-			</div>
-			<div v-if="hasBackupStatus"
-				class="set-status-modal__automation-hint">
-				{{ $t('user_status', 'Your status was set automatically') }}
-			</div>
-			<PreviousStatus v-if="hasBackupStatus"
-				:icon="backupIcon"
-				:message="backupMessage"
-				@select="revertBackupFromServer" />
-			<PredefinedStatusesList :is-custom-status="isCustomStatus" @select-status="selectPredefinedMessage" />
-			<ClearAtSelect :clear-at="clearAt"
-				@select-clear-at="setClearAt" />
-			<div class="status-buttons">
-				<NcButton :wide="true"
-					type="tertiary"
-					:text="$t('user_status', 'Clear status message')"
-					:disabled="isSavingStatus"
-					@click="clearStatus">
-					{{ $t('user_status', 'Clear status message') }}
-				</NcButton>
-				<NcButton :wide="true"
-					type="primary"
-					:text="$t('user_status', 'Set status message')"
-					:disabled="isSavingStatus"
-					@click="saveStatus">
-					{{ $t('user_status', 'Set status message') }}
-				</NcButton>
-			</div>
+			<!-- Status message form -->
+			<form @submit.prevent="saveStatus" @reset="clearStatus">
+				<div class="set-status-modal__header">
+					<h2>{{ $t('user_status', 'Status message') }}</h2>
+				</div>
+				<div class="set-status-modal__custom-input">
+					<CustomMessageInput ref="customMessageInput"
+						:icon="icon"
+						:message="editedMessage"
+						@change="setMessage"
+						@select-icon="setIcon" />
+				</div>
+				<div v-if="hasBackupStatus"
+					class="set-status-modal__automation-hint">
+					{{ $t('user_status', 'Your status was set automatically') }}
+				</div>
+				<PreviousStatus v-if="hasBackupStatus"
+					:icon="backupIcon"
+					:message="backupMessage"
+					@select="revertBackupFromServer" />
+				<PredefinedStatusesList :is-custom-status="isCustomStatus" @select-status="selectPredefinedMessage" />
+				<ClearAtSelect :clear-at="clearAt"
+					@select-clear-at="setClearAt" />
+				<div class="status-buttons">
+					<NcButton :wide="true"
+						type="tertiary"
+						native-type="reset"
+						:aria-label="$t('user_status', 'Clear status message')"
+						:disabled="isSavingStatus">
+						{{ $t('user_status', 'Clear status message') }}
+					</NcButton>
+					<NcButton :wide="true"
+						type="primary"
+						native-type="submit"
+						:aria-label="$t('user_status', 'Set status message')"
+						:disabled="isSavingStatus">
+						{{ $t('user_status', 'Set status message') }}
+					</NcButton>
+				</div>
+			</form>
 		</div>
 	</NcModal>
 </template>
@@ -245,12 +246,7 @@ export default {
 			try {
 				this.isSavingStatus = true
 
-				if (this.messageId !== undefined && this.messageId !== null) {
-					await this.$store.dispatch('setPredefinedMessage', {
-						messageId: this.messageId,
-						clearAt: this.clearAt,
-					})
-				} else {
+				if (this.isCustomStatus) {
 					await this.$store.dispatch('setCustomMessage', {
 						message: this.editedMessage,
 						icon: this.icon,

apps/user_status/src/store/predefinedStatuses.js

@@ -35,7 +35,7 @@ const mutations = {
 	 * @param {object} status The status to add
 	 */
 	addPredefinedStatus(state, status) {
-		state.predefinedStatuses.push(status)
+		state.predefinedStatuses = [...state.predefinedStatuses, status]
 	},
 }