Add ability to set guest name in lobby

src/components/LobbyScreen.vue

@@ -19,20 +19,28 @@
   -->
 
 <template>
-	<div class="lobby emptycontent">
-		<div class="icon icon-lobby" />
-		<h2>{{ currentConversationName }}</h2>
-		<p>{{ message }}</p>
+	<div class="lobby">
+		<div class="lobby emptycontent">
+			<div class="icon icon-lobby" />
+			<h2>{{ currentConversationName }}</h2>
+			<p>{{ message }}</p>
+		</div>
+		<SetGuestUsername v-if="currentUserIsGuest" />
 	</div>
 </template>
 
 <script>
 import moment from '@nextcloud/moment'
+import SetGuestUsername from './SetGuestUsername'
 
 export default {
 
 	name: 'LobbyScreen',
 
+	components: {
+		SetGuestUsername,
+	},
+
 	computed: {
 
 		token() {
@@ -59,8 +67,20 @@ export default {
 
 			return message
 		},
-
+		// Determines whether the current user is a guest user
+		currentUserIsGuest() {
+			return !this.$store.getters.getUserId()
+		},
 	},
 
 }
 </script>
+
+<style lang="scss" scoped>
+
+.lobby {
+	display: flex;
+	flex-direction: column;
+}
+
+</style>

src/components/RightSidebar/RightSidebar.vue

@@ -129,36 +129,7 @@
 				:name="conversation.displayName" />
 		</AppSidebarTab>
 		<!-- Guest username setting form -->
-		<form
-			v-if="!getUserId"
-			class="username-form"
-			@submit.prevent="handleChooseUserName">
-			<h3>
-				{{ t('spreed', 'Display name: ') }} <strong>{{ actorDisplayName ? actorDisplayName : t('spreed', 'Guest') }}</strong>
-				<button
-					class="icon-rename"
-					@click.prevent="handleEditUsername">
-					{{ t('spreed', 'Edit') }}
-				</button>
-			</h3>
-			<div
-				v-if="isEditingUsername"
-				class="username-form__wrapper">
-				<input
-					ref="usernameInput"
-					v-model="guestUserName"
-					:placeholder="t('spreed', 'Guest')"
-					class="username-form__input"
-					type="text"
-					@keydown.enter="handleChooseUserName"
-					@keydown.esc="isEditingUsername = !isEditingUsername">
-				<button
-					class="username-form__button"
-					type="submit">
-					<div class="icon-confirm" />
-				</button>
-			</div>
-		</form>
+		<SetGuestUsername v-if="!getUserId" />
 	</AppSidebar>
 </template>
 
@@ -181,8 +152,8 @@ import {
 	setConversationName,
 } from '../../services/conversationsService'
 import isInLobby from '../../mixins/isInLobby'
-import { setGuestUserName } from '../../services/participantsService'
 import { generateUrl } from '@nextcloud/router'
+import SetGuestUsername from '../SetGuestUsername'
 
 export default {
 	name: 'RightSidebar',
@@ -197,6 +168,7 @@ export default {
 		ChatView,
 		CollectionList,
 		ParticipantsTab,
+		SetGuestUsername,
 	},
 
 	mixins: [
@@ -218,8 +190,6 @@ export default {
 			password: '',
 			// Switch for the password-editing operation
 			isEditingPassword: false,
-			guestUserName: '',
-			isEditingUsername: false,
 			// Changes the conversation title into an input field for renaming
 			isRenamingConversation: false,
 			// The conversation name (while editing)
@@ -255,10 +225,6 @@ export default {
 			return this.$store.getters.getUserId()
 		},
 
-		actorDisplayName() {
-			return this.$store.getters.getDisplayName()
-		},
-
 		isFavorited() {
 			if (!this.getUserId) {
 				return null
@@ -428,35 +394,6 @@ export default {
 			this.password = ''
 			this.isEditingPassword = false
 		},
-		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().substring(6),
-					actorDisplayName: this.guestUserName,
-				})
-				await setGuestUserName(this.token, this.guestUserName)
-				this.isEditingUsername = false
-			} catch (exception) {
-				this.$store.dispatch('setDisplayName', previousName)
-				this.$store.dispatch('forceGuestName', {
-					token: this.token,
-					actorId: this.$store.getters.getActorId().substring(6),
-					actorDisplayName: previousName,
-				})
-				console.debug(exception)
-			}
-		},
-
-		/** For when the currentUser is guest */
-		handleEditUsername() {
-			this.isEditingUsername = !this.isEditingUsername
-			this.$nextTick(() => {
-				this.$refs.usernameInput.focus()
-			})
-		},
 
 		handleRenameConversation() {
 			// Copy the current conversation's title into the renaming title
@@ -511,26 +448,4 @@ export default {
 	padding: 0;
 }
 
-/** Username form for guest users */
-.username-form {
-	padding: 0 12px;
-	& .icon-rename {
-		margin-left: 8px;
-		padding-left: 36px;
-		background-position: 12px;
-	}
-	&__wrapper {
-		display: flex;
-	}
-	&__input {
-		padding-right: var(--clickable-area);
-		width: 300px;
-	}
-	&__button {
-		margin-left: -44px;
-		background-color: transparent;
-		border: none;
-	}
-}
-
 </style>

src/components/SetGuestUsername.vue

@@ -0,0 +1,138 @@
+<!--
+  - @copyright Copyright (c) 2020 Marco Ambrosini <[email protected]>
+  -
+  - @author Marco Ambrosini <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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>
+	<!-- Guest username setting form -->
+	<form
+		class="username-form"
+		@submit.prevent="handleChooseUserName">
+		<h3>
+			{{ t('spreed', 'Display name: ') }} <strong>{{ actorDisplayName ? actorDisplayName : t('spreed', 'Guest') }}</strong>
+			<button
+				class="icon-rename"
+				@click.prevent="handleEditUsername">
+				{{ t('spreed', 'Edit') }}
+			</button>
+		</h3>
+		<div
+			v-if="isEditingUsername"
+			class="username-form__wrapper">
+			<input
+				ref="usernameInput"
+				v-model="guestUserName"
+				:placeholder="t('spreed', 'Guest')"
+				class="username-form__input"
+				type="text"
+				@keydown.enter="handleChooseUserName"
+				@keydown.esc="isEditingUsername = !isEditingUsername">
+			<button
+				class="username-form__button"
+				type="submit">
+				<div class="icon-confirm" />
+			</button>
+		</div>
+	</form>
+</template>
+
+<script>
+import { setGuestUserName } from '../services/participantsService'
+
+export default {
+	name: 'SetGuestUsername',
+
+	data() {
+		return {
+			guestUserName: '',
+			isEditingUsername: false,
+		}
+	},
+
+	computed: {
+		actorDisplayName() {
+			return this.$store.getters.getDisplayName()
+		},
+		token() {
+			return this.$store.getters.getToken()
+		},
+	},
+
+	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().substring(6),
+					actorDisplayName: this.guestUserName,
+				})
+				await setGuestUserName(this.token, this.guestUserName)
+				this.isEditingUsername = false
+			} catch (exception) {
+				this.$store.dispatch('setDisplayName', previousName)
+				this.$store.dispatch('forceGuestName', {
+					token: this.token,
+					actorId: this.$store.getters.getActorId().substring(6),
+					actorDisplayName: previousName,
+				})
+				console.debug(exception)
+			}
+		},
+
+		handleEditUsername() {
+			this.isEditingUsername = !this.isEditingUsername
+			if (this.isEditingUsername) {
+				this.$nextTick(() => {
+					this.$refs.usernameInput.focus()
+				})
+			}
+		},
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+/** Username form for guest users */
+.username-form {
+	padding: 0 12px;
+	margin:auto;
+	& .icon-rename {
+		margin-left: 8px;
+		padding-left: 36px;
+		background-position: 12px;
+	}
+	&__wrapper {
+		display: flex;
+	}
+	&__input {
+		padding-right: var(--clickable-area);
+		width: 230px;
+	}
+	&__button {
+		margin-left: -44px;
+		background-color: transparent;
+		border: none;
+	}
+}
+
+</style>