From b355c9d72df717255ab4474f859f4bf96e6d1f5e Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Wed, 6 Sep 2023 15:42:47 +0200
Subject: [PATCH] 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           |  6 +--
 src/components/GuestWelcomeWindow.vue | 59 ++++++++++++++-------------
 src/components/LobbyScreen.vue        |  6 +--
 src/components/SetGuestUsername.vue   | 10 ++---
 4 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 6452746c172..96b17399d54 100644
--- a/src/components/ChatView.vue
+++ b/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
 		},
 
diff --git a/src/components/GuestWelcomeWindow.vue b/src/components/GuestWelcomeWindow.vue
index dcf617d0c7c..4ccdfd6678e 100644
--- a/src/components/GuestWelcomeWindow.vue
+++ b/src/components/GuestWelcomeWindow.vue
@@ -21,8 +21,7 @@
   -->
 
 <template>
-	<NcModal v-if="showModal"
-		:container="container"
+	<NcModal :container="container"
 		:can-close="false"
 		:close-on-click-outside="false"
 		size="small">
@@ -30,19 +29,21 @@
 			<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 {
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index 8203ed0dd80..395e95804cf 100644
--- a/src/components/LobbyScreen.vue
+++ b/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
 		},
 	},
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index c66cdeb294b..ff21b31347f 100644
--- a/src/components/SetGuestUsername.vue
+++ b/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()