1 files changed, 106 insertions, 0 deletions
diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue
new file mode 100644
index 00000000000..fb129281430
--- /dev/null
+++ b/apps/user_status/src/components/CustomMessageInput.vue
@@ -0,0 +1,106 @@
+<!--
+  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="custom-input" role="group">
+		<NcEmojiPicker container=".custom-input" @select="setIcon">
+			<NcButton type="tertiary"
+				:aria-label="t('user_status', 'Emoji for your status message')">
+				<template #icon>
+					{{ visibleIcon }}
+				</template>
+			</NcButton>
+		</NcEmojiPicker>
+		<div class="custom-input__container">
+			<NcTextField ref="input"
+				maxlength="80"
+				:disabled="disabled"
+				:placeholder="t('user_status', 'What is your status?')"
+				:value="message"
+				type="text"
+				:label="t('user_status', 'What is your status?')"
+				@input="onChange" />
+		</div>
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcEmojiPicker from '@nextcloud/vue/components/NcEmojiPicker'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+
+export default {
+	name: 'CustomMessageInput',
+
+	components: {
+		NcTextField,
+		NcButton,
+		NcEmojiPicker,
+	},
+
+	props: {
+		icon: {
+			type: String,
+			default: '😀',
+		},
+		message: {
+			type: String,
+			required: true,
+			default: () => '',
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: [
+		'change',
+		'select-icon',
+	],
+
+	computed: {
+		/**
+		 * Returns the user-set icon or a smiley in case no icon is set
+		 *
+		 * @return {string}
+		 */
+		visibleIcon() {
+			return this.icon || '😀'
+		},
+	},
+
+	methods: {
+		focus() {
+			this.$refs.input.focus()
+		},
+
+		/**
+		 * Notifies the parent component about a changed input
+		 *
+		 * @param {Event} event The Change Event
+		 */
+		onChange(event) {
+			this.$emit('change', event.target.value)
+		},
+
+		setIcon(icon) {
+			this.$emit('select-icon', icon)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-input {
+	display: flex;
+	align-items: flex-end;
+	gap: var(--default-grid-baseline);
+	width: 100%;
+
+	&__container {
+		width: 100%;
+	}
+}
+</style>