Move the method to the guestNameStore and don't use setGuestUsername …

…in the welcome window and other refactoring

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/ChatView.vue

@@ -23,7 +23,7 @@
 		@dragover.prevent="handleDragOver"
 		@dragleave.prevent="handleDragLeave"
 		@drop.prevent="handleDropFiles">
-		<GuestWelcomeWindow v-if="isGuestAndhasNotUserName" />
+		<GuestWelcomeWindow v-if="isGuestAndhasNotUsername" :token="token" />
 		<TransitionWrapper name="slide-up" mode="out-in">
 			<div v-show="isDraggingOver"
 				class="dragover">
@@ -113,8 +113,8 @@ export default {
 			return this.$store.getters.getActorType() === 'guests'
 		},
 
-		isGuestAndhasNotUserName() {
-			const userName = localStorage.getItem('nick')
+		isGuestAndhasNotUsername() {
+			const userName = this.$store.getters.getDisplayName()
 			return !userName && this.isGuest
 		},
 

src/components/GuestWelcomeWindow.vue

@@ -21,28 +21,29 @@
   -->
 
 <template>
-	<NcModal v-if="showModal"
-		:container="container"
+	<NcModal :container="container"
 		:can-close="false"
 		:close-on-click-outside="false"
 		size="small">
 		<div class="modal__content">
 			<div class="conversation-information">
 				<ConversationIcon :item="conversation"
 					:show-user-status="false"
-					:disable-menu="true" />
+					disable-menu />
 				<h2>{{ conversationDisplayName }}</h2>
 			</div>
-			<h3 class="description">
+			<p class="description">
 				{{ conversationDescription }}
-			</h3>
+			</p>
 
-			<h3 class="input-label">
+			<p class="input-label">
 				{{ t('spreed', 'Enter your name') }}
-			</h3>
-			<SetGuestUsername ref="setGuestUsername"
-				class="guest-user-form"
-				first-welcome
+			</p>
+
+			<NcTextField :value.sync="guestUserName"
+				:placeholder="t('spreed', 'Guest')"
+				class="username-form__input"
+				:show-trailing-button="false"
 				@keydown.enter="handleChooseUserName" />
 
 			<NcButton class="submit-button"
@@ -62,24 +63,31 @@ import Check from 'vue-material-design-icons/CheckBold.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ConversationIcon from './ConversationIcon.vue'
-import SetGuestUsername from './SetGuestUsername.vue'
 
 export default {
 	name: 'GuestWelcomeWindow',
 
 	components: {
 		NcModal,
-		SetGuestUsername,
+		NcTextField,
 		ConversationIcon,
 		NcButton,
 		Check,
 	},
 
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
-			showModal: true,
+			guestUserName: '',
 		}
 	},
 
@@ -88,20 +96,16 @@ export default {
 			return this.$store.getters.getMainContainerSelector()
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},
 
 		conversationDisplayName() {
-			return this.conversation && this.conversation.displayName
+			return this.conversation?.displayName
 		},
 
 		conversationDescription() {
-			return this.conversation && this.conversation.description
+			return this.conversation?.description
 		},
 
 		submitMessage() {
@@ -111,8 +115,10 @@ export default {
 
 	methods: {
 		handleChooseUserName() {
-			this.$refs.setGuestUsername.handleChooseUserName()
-			this.showModal = false
+			this.$store.dispatch('SubmitUserName', {
+				token: this.token,
+				name: this.guestUserName,
+			})
 		},
 	},
 }
@@ -122,10 +128,7 @@ export default {
 .modal__content {
 	padding: calc(var(--default-grid-baseline) * 4);
 	background-color: var(--color-main-background);
-
-	:deep(.username-form__input) {
-		width: auto !important;
-	}
+	margin: 0px 12px;
 }
 
 .conversation-information {
@@ -136,11 +139,11 @@ export default {
 }
 
 .description {
-	margin: 0px 12px 12px 12px;
+	margin-bottom: 12px;
 }
 
-.input-label {
-	margin: 0px 12px;
+.username-form__input {
+	margin-bottom: 20px;
 }
 
 .submit-button {

src/components/LobbyScreen.vue

@@ -20,7 +20,7 @@
 
 <template>
 	<div class="lobby">
-		<GuestWelcomeWindow v-if="isGuestAndhasNotUserName" />
+		<GuestWelcomeWindow v-if="isGuestAndhasNotUsername" :token="token" />
 		<div class="lobby emptycontent">
 			<Lobby :size="64" />
 			<h2>{{ currentConversationName }}</h2>
@@ -111,8 +111,8 @@ export default {
 			return !this.$store.getters.getUserId()
 		},
 
-		isGuestAndhasNotUserName() {
-			const userName = localStorage.getItem('nick')
+		isGuestAndhasNotUsername() {
+			const userName = this.$store.getters.getDisplayName()
 			return !userName && this.currentUserIsGuest
 		},
 	},

src/components/SetGuestUsername.vue

@@ -22,9 +22,9 @@
 <template>
 	<div class="username-form">
 		<!-- eslint-disable-next-line vue/no-v-html -->
-		<h3 v-if="!firstWelcome" class="display-name__label" v-html="displayNameLabel" />
+		<h3 class="display-name__label" v-html="displayNameLabel" />
 
-		<NcButton v-if="!isEditingUsername && !firstWelcome"
+		<NcButton v-if="!isEditingUsername"
 			@click="handleEditUsername">
 			{{ t('spreed', 'Edit') }}
 			<template #icon>
@@ -37,11 +37,9 @@
 			:value.sync="guestUserName"
 			:placeholder="t('spreed', 'Guest')"
 			class="username-form__input"
-			v-bind="$attrs"
-			:show-trailing-button="!!guestUserName && !firstWelcome"
+			:show-trailing-button="!!guestUserName"
 			trailing-button-icon="arrowRight"
 			:trailing-button-label="t('spreed', 'Save name')"
-			v-on="$listeners"
 			@trailing-button-click="handleChooseUserName"
 			@keydown.enter="handleChooseUserName"
 			@keydown.esc="handleEditUsername" />
@@ -56,8 +54,6 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
-import { setGuestUserName } from '../services/participantsService.js'
-
 export default {
 	name: 'SetGuestUsername',
 
@@ -67,15 +63,6 @@ export default {
 		Pencil,
 	},
 
-	inheritAttrs: false,
-
-	props: {
-		firstWelcome: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
 	data() {
 		return {
 			guestUserName: '',
@@ -132,34 +119,13 @@ export default {
 		}
 	},
 
-	expose: ['handleChooseUserName'],
-
 	methods: {
-		async handleChooseUserName() {
-			const previousName = this.$store.getters.getDisplayName()
-			try {
-				this.$store.dispatch('setDisplayName', this.guestUserName)
-				this.$store.dispatch('forceGuestName', {
-					token: this.token,
-					actorId: this.$store.getters.getActorId(),
-					actorDisplayName: this.guestUserName,
-				})
-				await setGuestUserName(this.token, this.guestUserName)
-				if (this.guestUserName !== '') {
-					localStorage.setItem('nick', this.guestUserName)
-				} else {
-					localStorage.removeItem('nick')
-				}
-				this.isEditingUsername = false
-			} catch (exception) {
-				this.$store.dispatch('setDisplayName', previousName)
-				this.$store.dispatch('forceGuestName', {
-					token: this.token,
-					actorId: this.$store.getters.getActorId(),
-					actorDisplayName: previousName,
-				})
-				console.debug(exception)
-			}
+		handleChooseUserName() {
+			this.$store.dispatch('SubmitUserName', {
+				token: this.token,
+				name: this.guestUserName,
+			})
+			this.isEditingUsername = false
 		},
 
 		handleEditUsername() {

src/store/guestNameStore.js

@@ -21,6 +21,8 @@
  */
 import Vue from 'vue'
 
+import { setGuestUserName } from '../services/participantsService.js'
+
 const state = {
 	guestNames: {
 	},
@@ -69,7 +71,7 @@ const mutations = {
 		} else if (noUpdate) {
 			return
 		}
-		state.guestNames[token][actorId] = actorDisplayName
+		Vue.set(state.guestNames[token], actorId, actorDisplayName)
 	},
 }
 
@@ -100,6 +102,45 @@ const actions = {
 	forceGuestName(context, { token, actorId, actorDisplayName }) {
 		context.commit('addGuestName', { noUpdate: false, token, actorId, actorDisplayName })
 	},
+
+	/**
+	 * Add the submitted guest name by the user to the store
+	 *
+	 * @param {object} context default store context
+	 * @param {object} data the wrapping object;
+	 * @param {string} data.token the token of the conversation
+	 * @param {string} data.name the new guest name
+	 */
+	async SubmitUserName(context, { token, name }) {
+		const actorId = context.getters.getActorId()
+		const previousName = getters.getGuestName(token, actorId)
+
+		try {
+			context.dispatch('setDisplayName', name)
+			context.dispatch('forceGuestName', {
+				token,
+				actorId: context.getters.getActorId(),
+				actorDisplayName: name,
+			})
+
+			await setGuestUserName(token, name)
+
+			if (name !== '') {
+				localStorage.setItem('nick', name)
+			} else {
+				localStorage.removeItem('nick')
+			}
+
+		} catch (error) {
+			context.dispatch('setDisplayName', previousName)
+			context.dispatch('forceGuestName', {
+				token,
+				actorId: context.getters.getActorId(),
+				actorDisplayName: previousName,
+			})
+			console.debug(error)
+		}
+	  },
 }
 
 export default { state, mutations, getters, actions }