From ac7b0aa8f83892fd9f3673ee9de133d1c29a3975 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Thu, 28 Nov 2024 12:24:23 +0100
Subject: [PATCH] fix: fix wording and resolve ts issues. Added a subsection in
 lobby settings

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../ConversationSettings/LobbySettings.vue    | 51 +++++++++----------
 src/components/ImportEmailsDialog.vue         | 44 +++++++++++-----
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue
index 775414a1ba4..9ca17fa695d 100644
--- a/src/components/ConversationSettings/LobbySettings.vue
+++ b/src/components/ConversationSettings/LobbySettings.vue
@@ -9,26 +9,12 @@
 			<NcNoteCard v-if="hasCall && !hasLobbyEnabled"
 				type="warning"
 				:text="t('spreed', 'Enabling the lobby will remove non-moderators from the ongoing call.')" />
-			<div class="lobby-general">
-				<NcCheckboxRadioSwitch :checked="hasLobbyEnabled"
-					type="switch"
-					:disabled="isLobbyStateLoading"
-					@update:checked="toggleLobby">
-					{{ t('spreed', 'Enable lobby, restricting the conversation to moderators') }}
-				</NcCheckboxRadioSwitch>
-
-				<NcButton v-if="supportImportEmails" @click="isImportEmailsDialogOpen = true">
-					<template #icon>
-						<IconFileUpload :size="20" />
-					</template>
-					{{ t('spreed', 'Import e-mail participants') }}
-				</NcButton>
-
-				<ImportEmailsDialog v-if="isImportEmailsDialogOpen"
-					:token="token"
-					container=".lobby-general"
-					@close="isImportEmailsDialogOpen = false" />
-			</div>
+			<NcCheckboxRadioSwitch :checked="hasLobbyEnabled"
+				type="switch"
+				:disabled="isLobbyStateLoading"
+				@update:checked="toggleLobby">
+				{{ t('spreed', 'Enable lobby, restricting the conversation to moderators') }}
+			</NcCheckboxRadioSwitch>
 		</div>
 		<div v-if="hasLobbyEnabled" class="app-settings-subsection">
 			<form :disabled="lobbyTimerFieldDisabled"
@@ -55,6 +41,25 @@
 				</div>
 			</form>
 		</div>
+		<div v-if="supportImportEmails" class="import-email-participants">
+			<h4 class="app-settings-section__subtitle">
+				{{ t('spreed', 'Import email participants') }}
+			</h4>
+			<div class="app-settings-section__hint">
+				{{ t('spreed', 'You can import a list of email participants from a CSV file.') }}
+			</div>
+			<NcButton @click="isImportEmailsDialogOpen = true">
+				<template #icon>
+					<IconFileUpload :size="20" />
+				</template>
+				{{ t('spreed', 'Import e-mail participants') }}
+			</NcButton>
+
+			<ImportEmailsDialog v-if="isImportEmailsDialogOpen"
+				:token="token"
+				container=".import-email-participants"
+				@close="isImportEmailsDialogOpen = false" />
+		</div>
 	</div>
 </template>
 
@@ -228,12 +233,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.lobby-general {
-	display: flex;
-	flex-direction: column;
-	gap: var(--default-grid-baseline);
-}
-
 .lobby_timer {
 	&--relative {
 		color: var(--color-text-maxcontrast);
diff --git a/src/components/ImportEmailsDialog.vue b/src/components/ImportEmailsDialog.vue
index fc4c27f5b6e..b8820b728fe 100644
--- a/src/components/ImportEmailsDialog.vue
+++ b/src/components/ImportEmailsDialog.vue
@@ -19,7 +19,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import { importEmails } from '../services/participantsService.js'
 
 const loading = ref(false)
-const listImport = ref(null)
+const listImport = ref<HTMLInputElement | null>(null)
 
 const props = defineProps<{
 	token: string,
@@ -29,18 +29,28 @@ const emit = defineEmits<{
 	(event: 'close'): void,
 }>()
 
-const importedFile = ref<File>(null)
-const uploadResult = ref(null)
+const importedFile = ref<File | null>(null)
+const uploadResult = ref<{ error?: boolean, invalid?: number, message?: string, duplicates?: number, invites?: number } | null>(null)
 const uploadResultCaption = computed(() => {
 	return uploadResult.value?.error
 		? { class: 'import-list__caption--error', label: t('spreed', 'Error while verifying uploaded file') }
 		: { class: 'import-list__caption--success', label: t('spreed', 'Uploaded file is verified') }
 })
 
+const importListDescription = t('spreed', 'Content format is Comma Separated Values (CSV):<br/>- Header line is required and must match <samp>"email","name"</samp> or just <samp>"email"</samp><br/>- One entry per line (e.g. <samp>"John Doe","john@example.tld"</samp>)',
+	undefined,
+	undefined, {
+		escape: true,
+		sanitize: true
+	})
+
 /**
  * Call native input[type='file'] to import a file
  */
 function triggerImport() {
+	if (!listImport.value) {
+		return
+	}
 	listImport.value.value = ''
 	listImport.value.click()
 }
@@ -51,8 +61,11 @@ function triggerImport() {
  */
 function importList(event: Event) {
 	const file = (event.target as HTMLInputElement).files?.[0]
-	importedFile.value = file ?? null
+	if (!file) {
+		return
+	}
 
+	importedFile.value = file
 	testList(importedFile.value)
 }
 
@@ -77,7 +90,7 @@ async function testList(file: File) {
  * Verify imported file and add participants
  * @param file file to upload
  */
-async function submitList(file: File) {
+async function submitList(file: File | null) {
 	if (!file) {
 		return
 	}
@@ -95,8 +108,8 @@ async function submitList(file: File) {
 
 <template>
 	<NcDialog class="import-list"
-		:name="t('spreed', 'Import e-mail participants')"
-		size="small"
+		:name="t('spreed', 'Import email participants')"
+		size="normal"
 		close-on-click-outside
 		:container="container"
 		@update:open="emit('close')">
@@ -106,7 +119,8 @@ async function submitList(file: File) {
 			type="file"
 			class="hidden-visually"
 			@change="importList">
-
+		<!-- eslint-disable-next-line vue/no-v-html -->
+		<div class="import-list__hint" v-html="importListDescription" />
 		<div class="import-list__wrapper">
 			<NcTextField class="import-list__input"
 				:model-value="importedFile?.name ?? ''"
@@ -117,7 +131,7 @@ async function submitList(file: File) {
 					<NcLoadingIcon v-if="loading" :size="20" />
 					<IconFileUpload v-else :size="20" />
 				</template>
-				{{ t('spreed', 'Browse …') }}
+				{{ t('spreed', 'Browse') }}
 			</NcButton>
 		</div>
 
@@ -136,13 +150,13 @@ async function submitList(file: File) {
 					{{ uploadResultCaption.label }}
 				</p>
 				<p v-if="uploadResult?.invalid" class="import-list__description">
-					{{ n('spreed', '%n invalid e-mail', '%n invalid e-mails', uploadResult.invalid) }}
+					{{ n('spreed', '%n invalid email', '%n invalid emails', uploadResult.invalid) }}
 				</p>
 				<p v-if="uploadResult?.message" class="import-list__description">
 					{{ uploadResult.message }}
 				</p>
 				<p v-if="uploadResult?.duplicates" class="import-list__description">
-					{{ n('spreed', '%n e-mail is already imported or a duplicate', '%n e-mails are already imported or duplicates', uploadResult.duplicates) }}
+					{{ n('spreed', '%n email is already imported or a duplicate', '%n emails are already imported or duplicates', uploadResult.duplicates) }}
 				</p>
 				<p v-if="uploadResult?.invites" class="import-list__description import-list__description--separated">
 					{{ n('spreed', '%n invitation can be sent', '%n invitations can be sent', uploadResult.invites) }}
@@ -165,7 +179,7 @@ async function submitList(file: File) {
 	&__wrapper {
 		display: flex;
 		gap: var(--default-grid-baseline);
-    margin-bottom: calc(var(--default-grid-baseline) * 3);
+		margin-bottom: calc(var(--default-grid-baseline) * 3);
 	}
 
 	&__input {
@@ -201,10 +215,14 @@ async function submitList(file: File) {
   &__description {
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
     &--separated {
       border-top: 1px solid var(--color-border-dark);
     }
   }
+
+  &__hint {
+	color: var(--color-text-maxcontrast);
+	padding: calc(var(--default-grid-baseline) * 2);
+  }
 }
 </style>