From 1582e24550f32d888e4b637a3e78721b9418f561 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 5 Sep 2023 12:19:30 +0200
Subject: [PATCH 1/4] Add a welcome window to set username for guests

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/ChatView.vue           |   9 ++
 src/components/GuestWelcomeWindow.vue | 149 ++++++++++++++++++++++++++
 src/components/LobbyScreen.vue        |   8 ++
 src/components/SetGuestUsername.vue   |  15 ++-
 4 files changed, 178 insertions(+), 3 deletions(-)
 create mode 100644 src/components/GuestWelcomeWindow.vue

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 23274d1c832..6452746c172 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -23,6 +23,7 @@
 		@dragover.prevent="handleDragOver"
 		@dragleave.prevent="handleDragLeave"
 		@drop.prevent="handleDropFiles">
+		<GuestWelcomeWindow v-if="isGuestAndhasNotUserName" />
 		<TransitionWrapper name="slide-up" mode="out-in">
 			<div v-show="isDraggingOver"
 				class="dragover">
@@ -70,6 +71,7 @@ import ChevronDoubleDown from 'vue-material-design-icons/ChevronDoubleDown.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import GuestWelcomeWindow from './GuestWelcomeWindow.vue'
 import MessagesList from './MessagesList/MessagesList.vue'
 import NewMessage from './NewMessage/NewMessage.vue'
 import TransitionWrapper from './TransitionWrapper.vue'
@@ -87,6 +89,7 @@ export default {
 		MessagesList,
 		NewMessage,
 		TransitionWrapper,
+		GuestWelcomeWindow,
 	},
 
 	props: {
@@ -109,6 +112,12 @@ export default {
 		isGuest() {
 			return this.$store.getters.getActorType() === 'guests'
 		},
+
+		isGuestAndhasNotUserName() {
+			const userName = localStorage.getItem('nick')
+			return !userName && this.isGuest
+		},
+
 		dropHintText() {
 			if (this.isGuest) {
 				return t('spreed', 'You need to be logged in to upload files')
diff --git a/src/components/GuestWelcomeWindow.vue b/src/components/GuestWelcomeWindow.vue
new file mode 100644
index 00000000000..dcf617d0c7c
--- /dev/null
+++ b/src/components/GuestWelcomeWindow.vue
@@ -0,0 +1,149 @@
+<!--
+  - @copyright Copyright (c) 2022, Dorra Jaouad <dorra.jaoued1@gmail.com>
+  -
+  - @author Dorra Jaouad <dorra.jaoued1@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<NcModal v-if="showModal"
+		: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" />
+				<h2>{{ conversationDisplayName }}</h2>
+			</div>
+			<h3 class="description">
+				{{ conversationDescription }}
+			</h3>
+
+			<h3 class="input-label">
+				{{ t('spreed', 'Enter your name') }}
+			</h3>
+			<SetGuestUsername ref="setGuestUsername"
+				class="guest-user-form"
+				first-welcome
+				@keydown.enter="handleChooseUserName" />
+
+			<NcButton class="submit-button"
+				type="primary"
+				@click="handleChooseUserName">
+				{{ submitMessage }}
+				<template #icon>
+					<Check :size="20" />
+				</template>
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+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 ConversationIcon from './ConversationIcon.vue'
+import SetGuestUsername from './SetGuestUsername.vue'
+
+export default {
+	name: 'GuestWelcomeWindow',
+
+	components: {
+		NcModal,
+		SetGuestUsername,
+		ConversationIcon,
+		NcButton,
+		Check,
+	},
+
+	data() {
+		return {
+			showModal: true,
+		}
+	},
+
+	computed: {
+		container() {
+			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
+		},
+
+		conversationDescription() {
+			return this.conversation && this.conversation.description
+		},
+
+		submitMessage() {
+			return t('spreed', 'Submit name and join')
+		},
+	},
+
+	methods: {
+		handleChooseUserName() {
+			this.$refs.setGuestUsername.handleChooseUserName()
+			this.showModal = false
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.modal__content {
+	padding: calc(var(--default-grid-baseline) * 4);
+	background-color: var(--color-main-background);
+
+	:deep(.username-form__input) {
+		width: auto !important;
+	}
+}
+
+.conversation-information {
+	margin-top: 5px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.description {
+	margin: 0px 12px 12px 12px;
+}
+
+.input-label {
+	margin: 0px 12px;
+}
+
+.submit-button {
+	margin: 0 auto;
+}
+</style>
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index d7c79ff5895..8203ed0dd80 100644
--- a/src/components/LobbyScreen.vue
+++ b/src/components/LobbyScreen.vue
@@ -20,6 +20,7 @@
 
 <template>
 	<div class="lobby">
+		<GuestWelcomeWindow v-if="isGuestAndhasNotUserName" />
 		<div class="lobby emptycontent">
 			<Lobby :size="64" />
 			<h2>{{ currentConversationName }}</h2>
@@ -52,6 +53,7 @@ import moment from '@nextcloud/moment'
 
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 
+import GuestWelcomeWindow from './GuestWelcomeWindow.vue'
 import Lobby from './missingMaterialDesignIcons/Lobby.vue'
 import SetGuestUsername from './SetGuestUsername.vue'
 
@@ -63,6 +65,7 @@ export default {
 		SetGuestUsername,
 		NcRichText,
 		Lobby,
+		GuestWelcomeWindow,
 	},
 
 	computed: {
@@ -107,6 +110,11 @@ export default {
 		currentUserIsGuest() {
 			return !this.$store.getters.getUserId()
 		},
+
+		isGuestAndhasNotUserName() {
+			const userName = localStorage.getItem('nick')
+			return !userName && this.currentUserIsGuest
+		},
 	},
 
 }
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index d4e780d5555..c66cdeb294b 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-html="displayNameLabel" />
+		<h3 v-if="!firstWelcome" class="display-name__label" v-html="displayNameLabel" />
 
-		<NcButton v-if="!isEditingUsername"
+		<NcButton v-if="!isEditingUsername && !firstWelcome"
 			@click="handleEditUsername">
 			{{ t('spreed', 'Edit') }}
 			<template #icon>
@@ -37,9 +37,11 @@
 			:value.sync="guestUserName"
 			:placeholder="t('spreed', 'Guest')"
 			class="username-form__input"
-			:show-trailing-button="!!guestUserName"
+			v-bind="$attrs"
+			:show-trailing-button="!!guestUserName && !firstWelcome"
 			trailing-button-icon="arrowRight"
 			:trailing-button-label="t('spreed', 'Save name')"
+			v-on="$listeners"
 			@trailing-button-click="handleChooseUserName"
 			@keydown.enter="handleChooseUserName"
 			@keydown.esc="handleEditUsername" />
@@ -104,6 +106,11 @@ export default {
 				this.delayHandleUserNameFromBrowserStorage = false
 			}
 		},
+		// Update the input field text
+		actorDisplayName(newName) {
+			this.guestUserName = newName
+		},
+
 	},
 
 	mounted() {
@@ -122,6 +129,8 @@ export default {
 		}
 	},
 
+	expose: ['handleChooseUserName'],
+
 	methods: {
 		async handleChooseUserName() {
 			const previousName = this.$store.getters.getDisplayName()

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 2/4] 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()

From 7e7172857ac0a3f230e9452ff27734104e7def2f Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 11 Sep 2023 14:50:48 +0200
Subject: [PATCH 3/4] Move the submitGuestUsername to the store

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/GuestWelcomeWindow.vue | 14 ++++++----
 src/components/SetGuestUsername.vue   | 29 ++-----------------
 src/stores/guestName.js               | 40 +++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/components/GuestWelcomeWindow.vue b/src/components/GuestWelcomeWindow.vue
index 4ccdfd6678e..4f6bf72bc68 100644
--- a/src/components/GuestWelcomeWindow.vue
+++ b/src/components/GuestWelcomeWindow.vue
@@ -1,5 +1,5 @@
 <!--
-  - @copyright Copyright (c) 2022, Dorra Jaouad <dorra.jaoued1@gmail.com>
+  - @copyright Copyright (c) 2023, Dorra Jaouad <dorra.jaoued1@gmail.com>
   -
   - @author Dorra Jaouad <dorra.jaoued1@gmail.com>
   -
@@ -67,6 +67,8 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ConversationIcon from './ConversationIcon.vue'
 
+import { useGuestNameStore } from '../stores/guestName.js'
+
 export default {
 	name: 'GuestWelcomeWindow',
 
@@ -85,6 +87,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	data() {
 		return {
 			guestUserName: '',
@@ -115,10 +122,7 @@ export default {
 
 	methods: {
 		handleChooseUserName() {
-			this.$store.dispatch('SubmitUserName', {
-				token: this.token,
-				name: this.guestUserName,
-			})
+			this.guestNameStore.submitUserName(this.token, this.guestUserName)
 		},
 	},
 }
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index ff21b31347f..be6c03c2bca 100644
--- a/src/components/SetGuestUsername.vue
+++ b/src/components/SetGuestUsername.vue
@@ -54,7 +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'
 import { useGuestNameStore } from '../stores/guestName.js'
 
 export default {
@@ -128,31 +127,9 @@ export default {
 	},
 
 	methods: {
-		async handleChooseUserName() {
-			const previousName = this.$store.getters.getDisplayName()
-			try {
-				this.$store.dispatch('setDisplayName', this.guestUserName)
-				this.guestNameStore.addGuestName({
-					token: this.token,
-					actorId: this.$store.getters.getActorId(),
-					actorDisplayName: this.guestUserName,
-				}, { noUpdate: false })
-				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.guestNameStore.addGuestName({
-					token: this.token,
-					actorId: this.$store.getters.getActorId(),
-					actorDisplayName: previousName,
-				}, { noUpdate: false })
-				console.debug(exception)
-			}
+		handleChooseUserName() {
+			this.guestNameStore.submitUserName(this.token, this.guestUserName)
+			this.isEditingUsername = false
 		},
 
 		handleEditUsername() {
diff --git a/src/stores/guestName.js b/src/stores/guestName.js
index 8c986136e3c..f9778c20a01 100644
--- a/src/stores/guestName.js
+++ b/src/stores/guestName.js
@@ -23,6 +23,9 @@
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 
+import { setGuestUserName } from '../services/participantsService.js'
+import store from '../store/index.js'
+
 export const useGuestNameStore = defineStore('guestName', {
 	state: () => ({
 		guestNames: {},
@@ -83,5 +86,42 @@ export const useGuestNameStore = defineStore('guestName', {
 				Vue.set(this.guestNames[token], actorId, actorDisplayName)
 			}
 		},
+
+		/**
+		 * Add the submitted guest name to the store
+		 *
+		 * @param {string} token the token of the conversation
+		 * @param {string} name the new guest name
+		 */
+		async submitUserName(token, name) {
+			const actorId = store.getters.getActorId()
+			const previousName = this.getGuestName(token, actorId)
+
+			try {
+				store.dispatch('setDisplayName', name)
+				this.addGuestName({
+					token,
+					actorId,
+					actorDisplayName: name,
+				}, { noUpdate: false })
+
+				await setGuestUserName(token, name)
+
+				if (name !== '') {
+					localStorage.setItem('nick', name)
+				} else {
+					localStorage.removeItem('nick')
+				}
+
+			} catch (error) {
+				store.dispatch('setDisplayName', previousName)
+				this.addGuestName({
+					token,
+					actorId,
+					actorDisplayName: previousName,
+				}, { noUpdate: false })
+				console.debug(error)
+			}
+		},
 	},
 })

From 168bb5d5c04a9d7149f9fab47bb023d92b834d96 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 12 Sep 2023 14:32:07 +0200
Subject: [PATCH 4/4] Add tests and renaming

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/ChatView.vue            |  4 +-
 src/components/GuestWelcomeWindow.vue  | 18 +++---
 src/components/LobbyScreen.vue         |  4 +-
 src/components/SetGuestUsername.vue    |  4 +-
 src/stores/__tests__/guestName.spec.js | 78 ++++++++++++++++++++++++++
 src/stores/guestName.js                |  2 +-
 6 files changed, 94 insertions(+), 16 deletions(-)

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 96b17399d54..7d338ba9944 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" :token="token" />
+		<GuestWelcomeWindow v-if="isGuestWithoutDisplayName" :token="token" />
 		<TransitionWrapper name="slide-up" mode="out-in">
 			<div v-show="isDraggingOver"
 				class="dragover">
@@ -113,7 +113,7 @@ export default {
 			return this.$store.getters.getActorType() === 'guests'
 		},
 
-		isGuestAndhasNotUsername() {
+		isGuestWithoutDisplayName() {
 			const userName = this.$store.getters.getDisplayName()
 			return !userName && this.isGuest
 		},
diff --git a/src/components/GuestWelcomeWindow.vue b/src/components/GuestWelcomeWindow.vue
index 4f6bf72bc68..6d489b78694 100644
--- a/src/components/GuestWelcomeWindow.vue
+++ b/src/components/GuestWelcomeWindow.vue
@@ -36,20 +36,20 @@
 				{{ conversationDescription }}
 			</p>
 
-			<p class="input-label">
-				{{ t('spreed', 'Enter your name') }}
-			</p>
-
-			<NcTextField :value.sync="guestUserName"
+			<label for="textField">{{ t('spreed', 'Enter your name') }}</label>
+			<NcTextField id="textField"
+				:value.sync="guestUserName"
 				:placeholder="t('spreed', 'Guest')"
 				class="username-form__input"
 				:show-trailing-button="false"
+				label-outside
 				@keydown.enter="handleChooseUserName" />
 
 			<NcButton class="submit-button"
 				type="primary"
+				:disabled="invalidGuestUsername"
 				@click="handleChooseUserName">
-				{{ submitMessage }}
+				{{ t('spreed', 'Submit name and join') }}
 				<template #icon>
 					<Check :size="20" />
 				</template>
@@ -115,14 +115,14 @@ export default {
 			return this.conversation?.description
 		},
 
-		submitMessage() {
-			return t('spreed', 'Submit name and join')
+		invalidGuestUsername() {
+			return this.guestUserName.trim() === ''
 		},
 	},
 
 	methods: {
 		handleChooseUserName() {
-			this.guestNameStore.submitUserName(this.token, this.guestUserName)
+			this.guestNameStore.submitGuestUsername(this.token, this.guestUserName)
 		},
 	},
 }
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index 395e95804cf..d07b956d954 100644
--- a/src/components/LobbyScreen.vue
+++ b/src/components/LobbyScreen.vue
@@ -20,7 +20,7 @@
 
 <template>
 	<div class="lobby">
-		<GuestWelcomeWindow v-if="isGuestAndhasNotUsername" :token="token" />
+		<GuestWelcomeWindow v-if="isGuestWithoutDisplayName" :token="token" />
 		<div class="lobby emptycontent">
 			<Lobby :size="64" />
 			<h2>{{ currentConversationName }}</h2>
@@ -111,7 +111,7 @@ export default {
 			return !this.$store.getters.getUserId()
 		},
 
-		isGuestAndhasNotUsername() {
+		isGuestWithoutDisplayName() {
 			const userName = this.$store.getters.getDisplayName()
 			return !userName && this.currentUserIsGuest
 		},
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index be6c03c2bca..0f02450ce38 100644
--- a/src/components/SetGuestUsername.vue
+++ b/src/components/SetGuestUsername.vue
@@ -22,7 +22,7 @@
 <template>
 	<div class="username-form">
 		<!-- eslint-disable-next-line vue/no-v-html -->
-		<h3 class="display-name__label" v-html="displayNameLabel" />
+		<h3 v-html="displayNameLabel" />
 
 		<NcButton v-if="!isEditingUsername"
 			@click="handleEditUsername">
@@ -128,7 +128,7 @@ export default {
 
 	methods: {
 		handleChooseUserName() {
-			this.guestNameStore.submitUserName(this.token, this.guestUserName)
+			this.guestNameStore.submitGuestUsername(this.token, this.guestUserName)
 			this.isEditingUsername = false
 		},
 
diff --git a/src/stores/__tests__/guestName.spec.js b/src/stores/__tests__/guestName.spec.js
index 48a7625ab79..e797deec17a 100644
--- a/src/stores/__tests__/guestName.spec.js
+++ b/src/stores/__tests__/guestName.spec.js
@@ -1,7 +1,14 @@
 import { createPinia, setActivePinia } from 'pinia'
 
+import { setGuestUserName } from '../../services/participantsService.js'
+import vuexStore from '../../store/index.js'
+import { generateOCSErrorResponse } from '../../test-helpers.js'
 import { useGuestNameStore } from '../guestName.js'
 
+jest.mock('../../services/participantsService', () => ({
+	setGuestUserName: jest.fn(),
+}))
+
 describe('guestNameStore', () => {
 	let store
 
@@ -135,4 +142,75 @@ describe('guestNameStore', () => {
 		expect(global.t).toHaveBeenCalledWith('spreed', 'Guest')
 	})
 
+	test('stores the display name when guest submits it', async () => {
+		// Arrange
+		const actor1 = {
+			token: 'token-1',
+			actorId: 'actor-id1',
+			actorDisplayName: t('spreed', 'Guest'),
+		}
+
+		vuexStore.dispatch('setCurrentUser', { uid: 'actor-id1' })
+
+		const newName = 'actor 1'
+
+		// Mock implementation of setGuestUserName
+		setGuestUserName.mockResolvedValue()
+
+		// Act
+		await store.submitGuestUsername(actor1.token, newName)
+
+		// Assert
+		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
+		expect(localStorage.setItem).toHaveBeenCalledWith('nick', newName)
+		expect(store.getGuestName('token-1', 'actor-id1')).toBe('actor 1')
+		expect(vuexStore.getters.getDisplayName()).toBe('actor 1')
+	})
+
+	test('removes display name from local storage when user sumbits an empty new name', async () => {
+		// Arrange
+		const actor1 = {
+			token: 'token-1',
+			actorId: 'actor-id1',
+			actorDisplayName: 'actor 1',
+		}
+		const newName = ''
+
+		vuexStore.dispatch('setCurrentUser', { uid: 'actor-id1' })
+
+		// Mock implementation of setGuestUserName
+		setGuestUserName.mockResolvedValue()
+
+		// Act
+		await store.submitGuestUsername(actor1.token, newName)
+
+		// Assert
+		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
+		expect(localStorage.removeItem).toHaveBeenCalledWith('nick')
+	})
+
+	test('resets to previous display name if there is an error in setting the new one', async () => {
+		// Arrange
+		const actor1 = {
+			token: 'token-1',
+			actorId: 'actor-id1',
+			actorDisplayName: 'old actor 1',
+		}
+
+		vuexStore.dispatch('setCurrentUser', { uid: 'actor-id1' })
+		store.addGuestName(actor1, { noUpdate: false })
+
+		const newName = 'actor 1'
+
+		// Mock implementation of setGuestUserName
+		const error = generateOCSErrorResponse({ payload: {}, status: 400 })
+		setGuestUserName.mockRejectedValue(error)
+
+		// Act
+		await store.submitGuestUsername(actor1.token, newName)
+
+		// Assert
+		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
+		expect(vuexStore.getters.getDisplayName()).toBe(actor1.actorDisplayName)
+	})
 })
diff --git a/src/stores/guestName.js b/src/stores/guestName.js
index f9778c20a01..bb489dca6d9 100644
--- a/src/stores/guestName.js
+++ b/src/stores/guestName.js
@@ -93,7 +93,7 @@ export const useGuestNameStore = defineStore('guestName', {
 		 * @param {string} token the token of the conversation
 		 * @param {string} name the new guest name
 		 */
-		async submitUserName(token, name) {
+		async submitGuestUsername(token, name) {
 			const actorId = store.getters.getActorId()
 			const previousName = this.getGuestName(token, actorId)