From 025c7a69f1a8b49412067b7a1e551f160194abe9 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 16:47:28 +0200
Subject: [PATCH 1/7] rearrange elements position in
 ConversationAvatarEditor.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationAvatarEditor.vue              | 92 ++++++++++---------
 1 file changed, 50 insertions(+), 42 deletions(-)

diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index 9d0647b5a74..b609432d067 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -23,8 +23,8 @@
 
 <template>
 	<section id="vue-avatar-section">
-		<div v-if="!showCropper" class="avatar__container">
-			<div class="avatar__preview">
+		<div class="avatar__container avatar__container--horizontal">
+			<div v-if="!showCropper" class="avatar__preview">
 				<div v-if="emojiAvatar"
 					class="avatar__preview-emoji"
 					:style="{'background-color': backgroundColor}">
@@ -36,23 +36,32 @@
 					:disable-menu="true" />
 				<div v-else class="icon-loading" />
 			</div>
-			<template v-if="editable">
+			<VueCropper v-show="showCropper"
+				ref="cropper"
+				class="avatar__cropper"
+				v-bind="cropperOptions" />
+			<div v-if="editable" class="avatar__container">
 				<div class="avatar__buttons">
-					<NcEmojiPicker :per-line="5"
-						@select="setEmoji">
+					<!-- Set emoji as avatar -->
+					<template v-if="!showCropper">
+						<NcEmojiPicker :per-line="5"
+							@select="setEmoji">
 						<NcButton :aria-label="t('spreed', 'Set emoji as profile picture')">
-							<template #icon>
-								<EmoticonOutline :size="20" />
-							</template>
-						</NcButton>
-					</NcEmojiPicker>
-					<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
+								<template #icon>
+									<EmoticonOutline :size="20" />
+								</template>
+							</NcButton>
+						</NcEmojiPicker>
+						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
 						<NcButton :aria-label="t('spreed', 'Set background color for profile picture')">
-							<template #icon>
-								<Palette :size="20" />
-							</template>
-						</NcButton>
-					</NcColorPicker>
+								<template #icon>
+									<Palette :size="20" />
+								</template>
+							</NcButton>
+						</NcColorPicker>
+					</template>
+
+					<!-- Set picture as avatar -->
 					<NcButton :aria-label="t('settings', 'Upload profile picture')"
 						@click="activateLocalFilePicker">
 						<template #icon>
@@ -65,6 +74,8 @@
 							<Folder :size="20" />
 						</template>
 					</NcButton>
+
+					<!-- Remove existing avatar -->
 					<NcButton v-if="hasAvatar"
 						:aria-label="t('settings', 'Remove profile picture')"
 						@click="removeAvatar">
@@ -81,23 +92,15 @@
 					type="file"
 					:accept="validMimeTypes.join(',')"
 					@change="onChange">
-			</template>
-		</div>
-
-		<!-- Use v-show to ensure early cropper ref availability -->
-		<div v-if="editable" class="avatar__container">
-			<VueCropper v-show="showCropper"
-				ref="cropper"
-				class="avatar__cropper"
-				v-bind="cropperOptions" />
-			<div v-show="isEdited" class="avatar__buttons">
-				<NcButton @click="cancel">
-					{{ t('spreed', 'Cancel') }}
-				</NcButton>
-				<NcButton type="primary"
-					@click="saveAvatar">
-					{{ t('spreed', 'Set as conversation picture') }}
-				</NcButton>
+				<div v-if="showControls" class="avatar__buttons">
+					<NcButton @click="cancel">
+						{{ t('spreed', 'Cancel') }}
+					</NcButton>
+					<NcButton type="primary"
+						@click="saveAvatar">
+						{{ t('spreed', 'Set picture') }}
+					</NcButton>
+				</div>
 			</div>
 		</div>
 	</section>
@@ -165,7 +168,7 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-	},
+		},
 
 	data() {
 		return {
@@ -193,11 +196,11 @@ export default {
 		},
 
 		hasAvatar() {
-			return !!this.conversation.avatarVersion
+			return this.conversation.isCustomAvatar
 		},
 
-		isEdited() {
-			return this.showCropper || this.emojiAvatar
+		showControls() {
+			return this.editable && (this.showCropper || this.emojiAvatar)
 		},
 	},
 
@@ -340,10 +343,13 @@ section {
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
 		align-items: center;
-		gap: 16px 0;
-		width: 300px;
+		gap: 16px;
+
+		&--horizontal {
+			flex-direction: row;
+			align-items: flex-start;
+		}
 	}
 
 	&__warning {
@@ -354,8 +360,10 @@ section {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 180px;
+		flex-shrink: 0;
+		width: 300px;
 		height: 180px;
+		padding: 0 60px;
 
 		&-emoji {
 			display: flex;
@@ -373,7 +381,7 @@ section {
 
 	&__buttons {
 		display: flex;
-		gap: 0 10px;
+		gap: 10px;
 	}
 
 	&__cropper {

From 1dae89c37f1ef7af5ed15c44c1d1d6b1b6d709e3 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 16:51:04 +0200
Subject: [PATCH 2/7] update labels (profile => conversation)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationAvatarEditor.vue              | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index b609432d067..9e46ec5236b 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -46,14 +46,16 @@
 					<template v-if="!showCropper">
 						<NcEmojiPicker :per-line="5"
 							@select="setEmoji">
-						<NcButton :aria-label="t('spreed', 'Set emoji as profile picture')">
+							<NcButton :title="t('spreed', 'Set emoji as conversation picture')"
+								:aria-label="t('spreed', 'Set emoji as conversation picture')">
 								<template #icon>
 									<EmoticonOutline :size="20" />
 								</template>
 							</NcButton>
 						</NcEmojiPicker>
 						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
-						<NcButton :aria-label="t('spreed', 'Set background color for profile picture')">
+							<NcButton :title="t('spreed', 'Set background color for conversation picture')"
+								:aria-label="t('spreed', 'Set background color for conversation picture')">
 								<template #icon>
 									<Palette :size="20" />
 								</template>
@@ -62,13 +64,15 @@
 					</template>
 
 					<!-- Set picture as avatar -->
-					<NcButton :aria-label="t('settings', 'Upload profile picture')"
+					<NcButton :title="t('settings', 'Upload conversation picture')"
+						:aria-label="t('settings', 'Upload conversation picture')"
 						@click="activateLocalFilePicker">
 						<template #icon>
 							<Upload :size="20" />
 						</template>
 					</NcButton>
-					<NcButton :aria-label="t('settings', 'Choose profile picture from files')"
+					<NcButton :title="t('settings', 'Choose conversation picture from files')"
+						:aria-label="t('settings', 'Choose conversation picture from files')"
 						@click="openFilePicker">
 						<template #icon>
 							<Folder :size="20" />
@@ -77,7 +81,8 @@
 
 					<!-- Remove existing avatar -->
 					<NcButton v-if="hasAvatar"
-						:aria-label="t('settings', 'Remove profile picture')"
+						:title="t('settings', 'Remove conversation picture')"
+						:aria-label="t('settings', 'Remove conversation picture')"
 						@click="removeAvatar">
 						<template #icon>
 							<Delete :size="20" />
@@ -131,7 +136,7 @@ import 'cropperjs/dist/cropper.css'
 
 const VALID_MIME_TYPES = ['image/png', 'image/jpeg']
 
-const picker = getFilePickerBuilder(t('spreed', 'Choose your profile picture'))
+const picker = getFilePickerBuilder(t('spreed', 'Choose your conversation picture'))
 	.setMultiSelect(false)
 	.setMimeTypeFilter(VALID_MIME_TYPES)
 	.setModal(true)
@@ -244,7 +249,7 @@ export default {
 					this.cancel()
 				}
 			} catch (e) {
-				showError(t('spreed', 'Error setting profile picture'))
+				showError(t('spreed', 'Error setting conversation picture'))
 				this.cancel()
 			}
 		},
@@ -287,7 +292,7 @@ export default {
 			const scaleFactor = canvasData.width > 512 ? 512 / canvasData.width : 1
 			this.$refs.cropper.scale(scaleFactor, scaleFactor).getCroppedCanvas().toBlob(async (blob) => {
 				if (blob === null) {
-					showError(t('spreed', 'Error cropping profile picture'))
+					showError(t('spreed', 'Error cropping conversation picture'))
 					this.cancel()
 					return
 				}
@@ -317,7 +322,7 @@ export default {
 					token: this.conversation.token,
 				})
 			} catch (e) {
-				showError(t('spreed', 'Error removing profile picture'))
+				showError(t('spreed', 'Error removing conversation picture'))
 			} finally {
 				this.loading = false
 			}

From 6293c73fda4243e763fe32b1486307cf80df7a92 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 17:29:18 +0200
Subject: [PATCH 3/7] add description and avatar editor on first page

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationAvatarEditor.vue              |  25 ++-
 .../NewGroupConversation.vue                  | 200 ++++++++++++------
 2 files changed, 163 insertions(+), 62 deletions(-)

diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index 9e46ec5236b..dbeea9666fb 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -101,7 +101,8 @@
 					<NcButton @click="cancel">
 						{{ t('spreed', 'Cancel') }}
 					</NcButton>
-					<NcButton type="primary"
+					<NcButton v-if="!controlled"
+						type="primary"
 						@click="saveAvatar">
 						{{ t('spreed', 'Set picture') }}
 					</NcButton>
@@ -173,7 +174,16 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Force component to emit signals and be used from parent components
+		 */
+		controlled: {
+			type: Boolean,
+			default: false,
 		},
+	},
+
+	emits: ['avatar-edited'],
 
 	data() {
 		return {
@@ -209,6 +219,19 @@ export default {
 		},
 	},
 
+	watch: {
+		showCropper(value) {
+			if (this.controlled) {
+				this.$emit('avatar-edited', value)
+			}
+		},
+		emojiAvatar(value) {
+			if (this.controlled) {
+				this.$emit('avatar-edited', !!value)
+			}
+		},
+	},
+
 	methods: {
 		activateLocalFilePicker() {
 			// Set to null so that selecting the same file will trigger the change event
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index de83c979690..f5bad4ae9b9 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -39,44 +39,59 @@
 			<div class="new-group-conversation talk-modal">
 				<h2>{{ t('spreed', 'Create a new group conversation') }}</h2>
 				<!-- Content -->
-				<div class="new-group-conversation__content">
-					<!-- First page -->
-					<template v-if="page === 0">
-						<SetConversationName v-model="conversationNameInput"
-							@click-enter="handleEnter" />
-						<NcCheckboxRadioSwitch :checked.sync="isPublic"
-							type="switch">
-							{{ t('spreed', 'Allow guests to join via link') }}
+				<div v-show="page === 0" class="new-group-conversation__content">
+					<NcTextField ref="conversationName"
+						v-model="conversationName"
+						:placeholder="t('spreed', 'Enter a name for this conversation')"
+						:label="t('spreed', 'Name')"
+						label-visible
+						@keydown.enter="handleEnter" />
+					<NcTextField v-model="conversationDescription"
+						:placeholder="t('spreed', 'Enter a description for this conversation')"
+						:label="t('spreed', 'Description')"
+						label-visible />
+					<label class="avatar-editor__label">
+						{{ t('spreed', 'Picture') }}
+					</label>
+					<ConversationAvatarEditor ref="conversationAvatar"
+						:conversation="newConversation"
+						controlled
+						editable
+						@avatar-edited="setIsAvatarEdited" />
+					<NcCheckboxRadioSwitch :checked.sync="isPublic"
+						type="switch">
+						{{ t('spreed', 'Allow guests to join via link') }}
+					</NcCheckboxRadioSwitch>
+					<!-- Password protection -->
+					<template v-if="isPublic">
+						<NcCheckboxRadioSwitch :checked.sync="passwordProtect"
+							type="switch"
+							@checked="handleCheckboxInput">
+							{{ t('spreed', 'Password protect') }}
 						</NcCheckboxRadioSwitch>
-						<!-- Password protection -->
-						<template v-if="isPublic">
-							<NcCheckboxRadioSwitch :checked.sync="passwordProtect"
-								type="switch"
-								@checked="handleCheckboxInput">
-								{{ t('spreed', 'Password protect') }}
-							</NcCheckboxRadioSwitch>
-							<NcPasswordField v-if="passwordProtect"
-								autocomplete="new-password"
-								:check-password-strength="true"
-								:label-visible="true"
-								:label="t('spreed', 'Enter password')"
-								:value.sync="password" />
-						</template>
-						<ListableSettings v-model="listable" />
-					</template>
-					<!-- Second page -->
-					<template v-if="page === 1">
-						<SetContacts :conversation-name="conversationName" />
-					</template>
-					<!-- Third page -->
-					<template v-if="page === 2">
-						<Confirmation :token="token"
-							:conversation-name="conversationName"
-							:error="error"
-							:is-loading="isLoading"
-							:success="success"
-							:is-public="isPublic" />
+						<NcPasswordField v-if="passwordProtect"
+							autocomplete="new-password"
+							:check-password-strength="true"
+							:label-visible="true"
+							:label="t('spreed', 'Enter password')"
+							:value.sync="password" />
 					</template>
+					<ListableSettings v-model="listable" />
+				</div>
+
+				<!-- Second page -->
+				<div v-if="page === 1" class="new-group-conversation__content">
+					<SetContacts :conversation-name="conversationNameTrimmed" />
+				</div>
+
+				<!-- Third page -->
+				<div v-else-if="page === 2" class="new-group-conversation__content">
+					<Confirmation :token="newConversation.token"
+						:conversation-name="conversationNameTrimmed"
+						:error="error"
+						:is-loading="isLoading"
+						:success="success"
+						:is-public="isPublic" />
 				</div>
 				<!-- Navigation: different buttons with different actions and
 				placement are rendered depending on the current page -->
@@ -124,16 +139,19 @@
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 
+import { showError } from '@nextcloud/dialogs'
+
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
+import ConversationAvatarEditor from '../../ConversationSettings/ConversationAvatarEditor.vue'
 import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
 import Confirmation from './Confirmation/Confirmation.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
-import SetConversationName from './SetConversationName/SetConversationName.vue'
 
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { CONVERSATION } from '../../../constants.js'
@@ -146,6 +164,15 @@ import {
 import { EventBus } from '../../../services/EventBus.js'
 import { addParticipant } from '../../../services/participantsService.js'
 
+const NEW_CONVERSATION = {
+	token: '',
+	displayName: '',
+	description: '',
+	hasPassword: false,
+	type: CONVERSATION.TYPE.GROUP,
+	readOnly: CONVERSATION.STATE.READ_ONLY,
+}
+
 export default {
 
 	name: 'NewGroupConversation',
@@ -155,15 +182,16 @@ export default {
 	},
 
 	components: {
-		NcModal,
-		NcPasswordField,
-		SetContacts,
-		SetConversationName,
-		NcButton,
-		NcCheckboxRadioSwitch,
+		ConversationAvatarEditor,
 		Confirmation,
 		ListableSettings,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcModal,
+		NcPasswordField,
+		NcTextField,
 		Plus,
+		SetContacts,
 	},
 
 	mixins: [participant],
@@ -175,17 +203,17 @@ export default {
 
 	data() {
 		return {
+			newConversation: Object.assign({}, NEW_CONVERSATION),
 			modal: false,
 			page: 0,
-			conversationNameInput: '',
 			isPublic: false,
 			isLoading: true,
-			token: '',
 			success: false,
 			error: false,
 			password: '',
 			passwordProtect: false,
 			listable: CONVERSATION.LISTABLE.NONE,
+			isAvatarEdited: false,
 		}
 	},
 
@@ -193,13 +221,28 @@ export default {
 		container() {
 			return this.$store.getters.getMainContainerSelector()
 		},
-		// Trims whitespaces from the input string
-		conversationName() {
-			return this.conversationNameInput.trim()
+		conversationName: {
+			get() {
+				return this.newConversation.displayName
+			},
+			set(event) {
+				this.newConversation.displayName = event.target.value
+			},
+		},
+		conversationDescription: {
+			get() {
+				return this.newConversation.description
+			},
+			set(event) {
+				this.newConversation.description = event.target.value
+			},
+		},
+		conversationNameTrimmed() {
+			return this.conversationName.trim()
 		},
 		// Controls the disabled/enabled state of the first page's button.
 		disabled() {
-			return this.conversationName === '' || (this.passwordProtect && this.password === '')
+			return this.conversationNameTrimmed === '' || (this.passwordProtect && this.password === '')
 		},
 		selectedParticipants() {
 			return this.$store.getters.selectedParticipants
@@ -219,10 +262,14 @@ export default {
 			this.modal = true
 		},
 
+		setIsAvatarEdited(value) {
+			this.isAvatarEdited = value
+		},
+
 		showModalForItem(item) {
 			if (item) {
 				// Preload the conversation name from group selection
-				this.conversationNameInput = item.label
+				this.conversation.displayName = item.label
 				this.$store.dispatch('updateSelectedParticipants', item)
 			}
 
@@ -236,10 +283,10 @@ export default {
 		closeModal() {
 			this.modal = false
 			this.page = 0
-			this.conversationNameInput = ''
 			this.isPublic = false
 			this.isLoading = true
-			this.token = ''
+			this.newConversation = Object.assign({}, NEW_CONVERSATION)
+			this.isAvatarEdited = false
 			this.success = false
 			this.error = false
 			this.passwordProtect = false
@@ -268,7 +315,7 @@ export default {
 				try {
 					await this.createPublicConversation()
 					if (this.password && this.passwordProtect) {
-						await setConversationPassword(this.token, this.password)
+						await setConversationPassword(this.newConversation.token, this.password)
 					}
 				} catch (exception) {
 					console.debug(exception)
@@ -291,7 +338,7 @@ export default {
 
 			try {
 				await this.$store.dispatch('setListable', {
-					token: this.token,
+					token: this.newConversation.token,
 					listable: this.listable,
 				})
 			} catch (exception) {
@@ -304,7 +351,7 @@ export default {
 
 			for (const participant of this.selectedParticipants) {
 				try {
-					await addParticipant(this.token, participant.id, participant.source)
+					await addParticipant(this.newConversation.token, participant.id, participant.source)
 				} catch (exception) {
 					console.debug(exception)
 					this.isLoading = false
@@ -331,23 +378,35 @@ export default {
 		 * the local token value to the newly created conversation's token
 		 */
 		async createPrivateConversation() {
-			const response = await createPrivateConversation(this.conversationName)
+			const response = await createPrivateConversation(this.conversationNameTrimmed)
 			const conversation = response.data.ocs.data
 			this.$store.dispatch('addConversation', conversation)
-			this.token = conversation.token
+			this.newConversation.token = conversation.token
+			if (this.isAvatarEdited) {
+				this.$refs.conversationAvatar.saveAvatar()
+			}
+			if (this.newConversation.description) {
+				this.handleUpdateDescription()
+			}
 		},
 		/**
 		 * Creates a new public conversation, adds it to the store and sets
 		 * the local token value to the newly created conversation's token
 		 */
 		async createPublicConversation() {
-			const response = await createPublicConversation(this.conversationName)
+			const response = await createPublicConversation(this.conversationNameTrimmed)
 			const conversation = response.data.ocs.data
 			this.$store.dispatch('addConversation', conversation)
-			this.token = conversation.token
+			this.newConversation.token = conversation.token
+			if (this.isAvatarEdited) {
+				this.$refs.conversationAvatar.saveAvatar()
+			}
+			if (this.newConversation.description) {
+				this.handleUpdateDescription()
+			}
 		},
 		pushNewRoute() {
-			this.$router.push({ name: 'conversation', params: { token: this.token } })
+			this.$router.push({ name: 'conversation', params: { token: this.newConversation.token } })
 				.catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 		},
 		handleCheckboxInput(event) {
@@ -357,6 +416,18 @@ export default {
 				this.password = ''
 			}
 		},
+		async handleUpdateDescription() {
+			try {
+				await this.$store.dispatch('setConversationDescription', {
+					token: this.newConversation.token,
+					description: this.newConversation.description,
+				})
+			} catch (error) {
+				console.error('Error while setting conversation description', error)
+				showError(t('spreed', 'Error while updating conversation description'))
+			}
+		},
+
 		/** Handles the press of the enter key */
 		handleEnter() {
 			if (!this.disabled) {
@@ -409,7 +480,7 @@ export default {
 it back */
 :deep(.modal-container) {
 	border-radius: var(--border-radius-large) !important;
-	height: 700px;
+	height: 900px;
 }
 
 .navigation {
@@ -417,6 +488,7 @@ it back */
 	justify-content: space-between;
 	flex: 0 0 40px;
 	height: 50px;
+	background-color: var(--color-main-background);
 	box-shadow: 0 -10px 5px var(--color-main-background);
 	z-index: 1;
 	width: 100%;
@@ -426,6 +498,12 @@ it back */
 	}
 }
 
+.avatar-editor__label {
+	display: block;
+	margin-top: 10px;
+	padding: 4px 0;
+}
+
 :deep(.app-settings-section__hint) {
 	color: var(--color-text-lighter);
 	padding: 8px 0;

From ec4b999c152b303d6621600dbc9d3547ca78626e Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 17:30:23 +0200
Subject: [PATCH 4/7] switch default conversation icon by guests toggle

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ConversationIcon.vue                    |  5 +++++
 .../NewGroupConversation/NewGroupConversation.vue      | 10 ++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 48845f5dd95..151091ee4bf 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -172,6 +172,11 @@ export default {
 				return 'icon-contacts'
 			}
 
+			if (this.item.type === CONVERSATION.TYPE.PUBLIC) {
+				// Public icon for new conversation dialog
+				return 'icon-public'
+			}
+
 			// Fall-through for other conversation suggestions to user-avatar handling
 			return undefined
 		},
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index f5bad4ae9b9..5339e5c75b2 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -249,6 +249,16 @@ export default {
 		},
 	},
 
+	watch: {
+		isPublic(value) {
+			if (value) {
+				this.newConversation.type = CONVERSATION.TYPE.PUBLIC
+			} else {
+				this.newConversation.type = CONVERSATION.TYPE.GROUP
+			}
+		},
+	},
+
 	mounted() {
 		EventBus.$on('new-group-conversation-dialog', this.showModalForItem)
 	},

From a4654593d84b012d6c5c2310ca4b4433b8d3d561 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 17:41:18 +0200
Subject: [PATCH 5/7] refactor methods, remove tooltip, fix typos

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewGroupConversation.vue                  | 72 +++++++------------
 1 file changed, 25 insertions(+), 47 deletions(-)

diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 5339e5c75b2..38412228c00 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -21,10 +21,10 @@
 
 <template>
 	<div class="wrapper">
-		<NcButton v-tooltip.bottom="t('spreed', 'Create a new group conversation')"
-			type="tertiary"
+		<NcButton type="tertiary"
 			class="toggle"
 			:aria-label="t('spreed', 'Create a new group conversation')"
+			:title="t('spreed', 'Create a new group conversation')"
 			@click="showModal">
 			<template #icon>
 				<Plus :size="20" />
@@ -146,7 +146,6 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import ConversationAvatarEditor from '../../ConversationSettings/ConversationAvatarEditor.vue'
 import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
@@ -154,7 +153,7 @@ import Confirmation from './Confirmation/Confirmation.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
 
 import { useIsInCall } from '../../../composables/useIsInCall.js'
-import { CONVERSATION } from '../../../constants.js'
+import { CONVERSATION, PRIVACY } from '../../../constants.js'
 import participant from '../../../mixins/participant.js'
 import {
 	createPublicConversation,
@@ -177,10 +176,6 @@ export default {
 
 	name: 'NewGroupConversation',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	components: {
 		ConversationAvatarEditor,
 		Confirmation,
@@ -287,7 +282,7 @@ export default {
 		},
 		/**
 		 * Reinitialise the component to it's initial state. This is necessary
-		 * because once the component is mounted it's data would persist even if
+		 * because once the component is mounted its data would persist even if
 		 * the modal closes
 		 */
 		closeModal() {
@@ -313,7 +308,7 @@ export default {
 			this.page = 0
 		},
 		/**
-		 * Handles the creation of the group conversation, adds the seleced
+		 * Handles the creation of the group conversation, adds the selected
 		 * participants to it and routes to it
 		 */
 		async handleCreateConversation() {
@@ -321,29 +316,21 @@ export default {
 
 			// TODO: move all operations to a single store action
 			// and commit + addConversation only once at the very end
-			if (this.isPublic) {
-				try {
-					await this.createPublicConversation()
+			try {
+				if (this.isPublic) {
+					await this.createConversation(PRIVACY.PUBLIC)
 					if (this.password && this.passwordProtect) {
 						await setConversationPassword(this.newConversation.token, this.password)
 					}
-				} catch (exception) {
-					console.debug(exception)
-					this.isLoading = false
-					this.error = true
-					// Stop the execution of the method on exceptions.
-					return
-				}
-			} else {
-				try {
-					await this.createPrivateConversation()
-				} catch (exception) {
-					console.debug(exception)
-					this.isLoading = false
-					this.error = true
-					// Stop the execution of the method on exceptions.
-					return
+				} else {
+					await this.createConversation(PRIVACY.PRIVATE)
 				}
+			} catch (exception) {
+				console.debug(exception)
+				this.isLoading = false
+				this.error = true
+				// Stop the execution of the method on exceptions.
+				return
 			}
 
 			try {
@@ -384,27 +371,18 @@ export default {
 			}
 		},
 		/**
-		 * Creates a new private conversation, adds it to the store and sets
+		 * Creates a new private or public conversation, adds it to the store and sets
 		 * the local token value to the newly created conversation's token
+		 *
+		 * @param {number} flag choose to send a request with private or public flag
 		 */
-		async createPrivateConversation() {
-			const response = await createPrivateConversation(this.conversationNameTrimmed)
-			const conversation = response.data.ocs.data
-			this.$store.dispatch('addConversation', conversation)
-			this.newConversation.token = conversation.token
-			if (this.isAvatarEdited) {
-				this.$refs.conversationAvatar.saveAvatar()
-			}
-			if (this.newConversation.description) {
-				this.handleUpdateDescription()
+		async createConversation(flag) {
+			let response
+			if (flag === PRIVACY.PRIVATE) {
+				response = await createPrivateConversation(this.conversationNameTrimmed)
+			} else if (flag === PRIVACY.PUBLIC) {
+				response = await createPublicConversation(this.conversationNameTrimmed)
 			}
-		},
-		/**
-		 * Creates a new public conversation, adds it to the store and sets
-		 * the local token value to the newly created conversation's token
-		 */
-		async createPublicConversation() {
-			const response = await createPublicConversation(this.conversationNameTrimmed)
 			const conversation = response.data.ocs.data
 			this.$store.dispatch('addConversation', conversation)
 			this.newConversation.token = conversation.token

From 23785d3e24fd4a9a1e00019c088c483aa97f425b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 19:28:36 +0200
Subject: [PATCH 6/7] fix stylesheets mapping for jest

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 jest.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/jest.config.js b/jest.config.js
index fd659970000..3c5803c2fea 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -80,6 +80,7 @@ module.exports = {
 	],
 
 	moduleNameMapper: {
+		'\\.(css|scss)$': 'jest-transform-stub',
 		'vendor/tflite/(.*).wasm$': '<rootDir>/src/utils/media/effects/virtual-background/vendor/tflite/$1.js',
 	},
 

From e445e9d8f7fe0cdc2a3fa225e85299876f2a5a21 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 8 May 2023 16:19:58 +0200
Subject: [PATCH 7/7] add a label for toggles

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewGroupConversation.vue                  | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 38412228c00..edce5646f63 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -50,6 +50,7 @@
 						:placeholder="t('spreed', 'Enter a description for this conversation')"
 						:label="t('spreed', 'Description')"
 						label-visible />
+
 					<label class="avatar-editor__label">
 						{{ t('spreed', 'Picture') }}
 					</label>
@@ -58,24 +59,28 @@
 						controlled
 						editable
 						@avatar-edited="setIsAvatarEdited" />
+
+					<label class="new-group-conversation__label">
+						{{ t('spreed', 'Conversation visibility') }}
+					</label>
 					<NcCheckboxRadioSwitch :checked.sync="isPublic"
 						type="switch">
 						{{ t('spreed', 'Allow guests to join via link') }}
 					</NcCheckboxRadioSwitch>
-					<!-- Password protection -->
-					<template v-if="isPublic">
+					<div class="new-group-conversation__wrapper">
 						<NcCheckboxRadioSwitch :checked.sync="passwordProtect"
 							type="switch"
+							:disabled="!isPublic"
 							@checked="handleCheckboxInput">
 							{{ t('spreed', 'Password protect') }}
 						</NcCheckboxRadioSwitch>
 						<NcPasswordField v-if="passwordProtect"
 							autocomplete="new-password"
-							:check-password-strength="true"
-							:label-visible="true"
-							:label="t('spreed', 'Enter password')"
+							check-password-strength
+							:placeholder="t('spreed', 'Enter password')"
+							:aria-label="t('spreed', 'Enter password')"
 							:value.sync="password" />
-					</template>
+					</div>
 					<ListableSettings v-model="listable" />
 				</div>
 
@@ -250,6 +255,7 @@ export default {
 				this.newConversation.type = CONVERSATION.TYPE.PUBLIC
 			} else {
 				this.newConversation.type = CONVERSATION.TYPE.GROUP
+				this.passwordProtect = false
 			}
 		},
 	},
@@ -451,6 +457,7 @@ export default {
 	flex-direction: column;
 	justify-content: space-between;
 	position: relative;
+
 	&__content {
 		/**
 		 * Top: 30px line height header + 12px margin
@@ -462,6 +469,19 @@ export default {
 		flex-direction: column;
 		gap: 0.5rem;
 	}
+
+	&__wrapper {
+		display: grid;
+		grid-template-columns: 1fr 2fr;
+		gap: var(--default-grid-baseline);
+		align-items: center;
+	}
+
+	&__label {
+		display: block;
+		margin-top: 10px;
+		padding: 4px 0;
+	}
 }
 
 /** Size full in the modal component doesn't have border radius, this adds
@@ -482,16 +502,10 @@ it back */
 	width: 100%;
 
 	&__button-right {
-		margin-left:auto;
+		margin-left: auto;
 	}
 }
 
-.avatar-editor__label {
-	display: block;
-	margin-top: 10px;
-	padding: 4px 0;
-}
-
 :deep(.app-settings-section__hint) {
 	color: var(--color-text-lighter);
 	padding: 8px 0;