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" />
@@ -129,8 +127,6 @@ export default {
 		}
 	},
 
-	expose: ['handleChooseUserName'],
-
 	methods: {
 		async handleChooseUserName() {
 			const previousName = this.$store.getters.getDisplayName()