From eb5dd282f745867b1ce1c1d84f535ab869b98b43 Mon Sep 17 00:00:00 2001
From: Liviu Preda <143171366+liviu-preda-tsystems@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:23:37 +0000
Subject: [PATCH] fix linter errors

---
 l10n/de.json                                  |   6 +-
 l10n/de_DE.json                               |   6 +-
 l10n/en.json                                  |   6 +-
 l10n/en_GB.json                               |   6 +-
 src/components/AddAllEmailsButton.vue         |  58 ++++++++
 ...kButton.vue => OpenSharingModalButton.vue} |  12 +-
 src/components/SharingEntryLink.vue           |  38 ++----
 .../SharingEntryQuickShareSelect.vue          |  38 +++++-
 src/components/SharingInput.vue               |  51 ++++++-
 src/files_sharing_tab.js                      |   5 +
 src/views/SharingDetailsTab.vue               |  50 +++----
 src/views/SharingLinkList.vue                 |  71 +++++++---
 src/views/SharingTab.vue                      | 125 +++++++++++++++---
 13 files changed, 363 insertions(+), 109 deletions(-)
 create mode 100644 src/components/AddAllEmailsButton.vue
 rename src/components/{AddLinkButton.vue => OpenSharingModalButton.vue} (90%)

diff --git a/l10n/de.json b/l10n/de.json
index 437e986..719c52e 100644
--- a/l10n/de.json
+++ b/l10n/de.json
@@ -2,6 +2,7 @@
 	"translations": {
 		"Sharing": "Teilen",
 		"Add link": "Link erstellen",
+		"Share": "Teilen",
 		"Read only": "Nur lesen",
 		"Can edit": "Kann bearbeiten",
 		"File drop": "Sammelbox",
@@ -14,6 +15,8 @@
 		"Advanced": "Erweiterte",
 		"Set password": "Passwortschutz",
 		"Your shares": "Ihre Freigaben",
+		"Links sent per E-mail": "Links per E-mail versandt",
+		"Links to Copy": "Links zum Kopieren",
 		"No shares created yet.": "Noch keine Freigaben erstellt.",
 		"Advanced permissions": "Erweiterte Berechtigungen",
 		"Allow resharing": "Weiterteilen erlauben",
@@ -21,7 +24,8 @@
 		"Resharing is allowed": "Weiterteilen ist erlaubt",
 		"You can create links or send shares by mail. If you invite MagentaCLOUD users, you have more opportunities for collaboration.": "Sie können Links erstellen oder Freigaben per Mail versenden. Wenn Sie MagentaCLOUD Nutzer einladen, bieten sich Ihnen mehr Möglichkeiten der Zusammenarbeit.",
 		"Share updated": "Freigabe aktualisiert",
-		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "Diese Freigabe ist auf {limit} Downloads beschränkt. Es sind noch {downloadsLeft} Downloads zugelassen."
+		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "Diese Freigabe ist auf {limit} Downloads beschränkt. Es sind noch {downloadsLeft} Downloads zugelassen.",
+		"Manage Access": "Zugriff verwalten"
 	},
 	"pluralForm": "nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/de_DE.json b/l10n/de_DE.json
index 437e986..719c52e 100644
--- a/l10n/de_DE.json
+++ b/l10n/de_DE.json
@@ -2,6 +2,7 @@
 	"translations": {
 		"Sharing": "Teilen",
 		"Add link": "Link erstellen",
+		"Share": "Teilen",
 		"Read only": "Nur lesen",
 		"Can edit": "Kann bearbeiten",
 		"File drop": "Sammelbox",
@@ -14,6 +15,8 @@
 		"Advanced": "Erweiterte",
 		"Set password": "Passwortschutz",
 		"Your shares": "Ihre Freigaben",
+		"Links sent per E-mail": "Links per E-mail versandt",
+		"Links to Copy": "Links zum Kopieren",
 		"No shares created yet.": "Noch keine Freigaben erstellt.",
 		"Advanced permissions": "Erweiterte Berechtigungen",
 		"Allow resharing": "Weiterteilen erlauben",
@@ -21,7 +24,8 @@
 		"Resharing is allowed": "Weiterteilen ist erlaubt",
 		"You can create links or send shares by mail. If you invite MagentaCLOUD users, you have more opportunities for collaboration.": "Sie können Links erstellen oder Freigaben per Mail versenden. Wenn Sie MagentaCLOUD Nutzer einladen, bieten sich Ihnen mehr Möglichkeiten der Zusammenarbeit.",
 		"Share updated": "Freigabe aktualisiert",
-		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "Diese Freigabe ist auf {limit} Downloads beschränkt. Es sind noch {downloadsLeft} Downloads zugelassen."
+		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "Diese Freigabe ist auf {limit} Downloads beschränkt. Es sind noch {downloadsLeft} Downloads zugelassen.",
+		"Manage Access": "Zugriff verwalten"
 	},
 	"pluralForm": "nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/en.json b/l10n/en.json
index d914374..8b0302c 100644
--- a/l10n/en.json
+++ b/l10n/en.json
@@ -2,6 +2,7 @@
 	"translations": {
 		"Sharing": "Sharing",
 		"Add link": "Add link",
+		"Share": "Share",
 		"Read only": "Read only",
 		"Can edit": "Can edit",
 		"File drop": "File drop",
@@ -14,6 +15,8 @@
 		"Advanced": "Advanced",
 		"Set password": "Set password",
 		"Your shares": "Your shares",
+		"Links sent per E-mail": "Links sent per E-mail",
+		"Links to Copy": "Links to Copy",
 		"No shares created yet.": "No shares created yet.",
 		"Advanced permissions": "Advanced permissions",
 		"Allow resharing": "Allow resharing",
@@ -21,7 +24,8 @@
 		"Resharing is allowed": "Resharing is allowed",
 		"You can create links or send shares by mail. If you invite MagentaCLOUD users, you have more opportunities for collaboration.": "You can create links or send shares by mail. If you invite MagentaCLOUD users, you have more opportunities for collaboration.",
 		"Share updated": "Share updated",
-		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed."
+		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.",
+		"Manage Access": "Manage Access"
 	},
 	"pluralForm": "nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/en_GB.json b/l10n/en_GB.json
index d914374..8b0302c 100644
--- a/l10n/en_GB.json
+++ b/l10n/en_GB.json
@@ -2,6 +2,7 @@
 	"translations": {
 		"Sharing": "Sharing",
 		"Add link": "Add link",
+		"Share": "Share",
 		"Read only": "Read only",
 		"Can edit": "Can edit",
 		"File drop": "File drop",
@@ -14,6 +15,8 @@
 		"Advanced": "Advanced",
 		"Set password": "Set password",
 		"Your shares": "Your shares",
+		"Links sent per E-mail": "Links sent per E-mail",
+		"Links to Copy": "Links to Copy",
 		"No shares created yet.": "No shares created yet.",
 		"Advanced permissions": "Advanced permissions",
 		"Allow resharing": "Allow resharing",
@@ -21,7 +24,8 @@
 		"Resharing is allowed": "Resharing is allowed",
 		"You can create links or send shares by mail. If you invite MagentaCLOUD users, you have more opportunities for collaboration.": "You can create links or send shares by mail. If you invite MagentaCLOUD users, you have more opportunities for collaboration.",
 		"Share updated": "Share updated",
-		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed."
+		"This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.": "This share was limited to {limit} downloads. There is still {downloadsLeft} left allowed.",
+		"Manage Access": "Manage Access"
 	},
 	"pluralForm": "nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/src/components/AddAllEmailsButton.vue b/src/components/AddAllEmailsButton.vue
new file mode 100644
index 0000000..ca95af6
--- /dev/null
+++ b/src/components/AddAllEmailsButton.vue
@@ -0,0 +1,58 @@
+e``<template>
+	<div>
+		<NcButton id="addlink_button" type="secondary" @click.prevent.stop="addMultipleEmailShares">
+			{{ t('nmcsharing', 'Add All Emails') }}
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import SharesMixin from '../mixins/SharesMixin.js'
+
+export default {
+	name: 'AddAllEmailsButton',
+	components: {
+		NcButton,
+	},
+	mixins: [SharesMixin],
+	props: {
+		isLoading: {
+			type: Boolean,
+			default: false,
+			required: true,
+		},
+		fileInfo: {
+			type: Object,
+			default: () => { },
+			required: true,
+		},
+		filteredEmailArr: {
+			type: Array,
+			default: () => [],
+			required: true,
+		},
+		// On button click, we will submit the multiple email shares defined by user
+		// passing callback function as a prop for async $emit
+		onSubmit: {
+			type: Function,
+			required: true,
+		},
+	},
+	methods: {
+		async addMultipleEmailShares() {
+			for (const emailObj of this.filteredEmailArr) {
+				await this.onSubmit(emailObj)
+				this.$emit('add-share', emailObj)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+button#addlink_button {
+	font-size: 1rem;
+	margin-bottom: 24px;
+}
+</style>
diff --git a/src/components/AddLinkButton.vue b/src/components/OpenSharingModalButton.vue
similarity index 90%
rename from src/components/AddLinkButton.vue
rename to src/components/OpenSharingModalButton.vue
index 2e23562..c6dde1e 100644
--- a/src/components/AddLinkButton.vue
+++ b/src/components/OpenSharingModalButton.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<NcButton id="addlink_button" type="secondary" @click.prevent.stop="onNewLinkShare">
-			{{ t('nmcsharing', 'Add link') }}
+			{{ t('nmcsharing', 'Share') }}
 		</NcButton>
 	</div>
 </template>
@@ -13,7 +13,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import SharesMixin from '../mixins/SharesMixin.js'
 
 export default {
-	name: 'AddLinkButton',
+	name: 'OpenSharingModalButton',
 	components: {
 		NcButton,
 	},
@@ -21,7 +21,11 @@ export default {
 	props: {
 		fileInfo: {
 			type: Object,
-			default: () => {},
+			default: () => { },
+			required: true,
+		},
+		isLoading: {
+			type: Boolean,
 			required: true,
 		},
 	},
@@ -62,7 +66,7 @@ export default {
 				this.onSyncError('pending', message)
 				throw data
 			} finally {
-				this.loading = false
+				// this.loading = false
 			}
 		},
 	},
diff --git a/src/components/SharingEntryLink.vue b/src/components/SharingEntryLink.vue
index 798e020..cf7d5ce 100755
--- a/src/components/SharingEntryLink.vue
+++ b/src/components/SharingEntryLink.vue
@@ -21,17 +21,7 @@
   -->
 
 <template>
-	<li :class="{'sharing-entry--share': share}" class="sharing-entry sharing-entry__link">
-		<NcAvatar :is-no-user="true"
-			class="sharing-entry__avatar">
-			<template #icon>
-				<span class="icon"
-					:class="{
-						'icon-default': !share,
-						'icon-user': isEmailShareType,
-						'icon-link': isLinkShareType}" />
-			</template>
-		</NcAvatar>
+	<li :class="{ 'sharing-entry--share': share }" class="sharing-entry sharing-entry__link">
 		<div class="sharing-entry__desc" @click.prevent="toggleQuickShareSelect">
 			<span class="sharing-entry__title" :title="title">
 				{{ title }}
@@ -47,9 +37,7 @@
 		</div>
 
 		<!-- clipboard -->
-		<NcActions v-if="share && !isEmailShareType && share.token"
-			ref="copyButton"
-			class="sharing-entry__copy">
+		<NcActions v-if="share && !isEmailShareType && share.token" ref="copyButton" class="sharing-entry__copy">
 			<NcActionLink :href="shareLink"
 				target="_blank"
 				:title="copyLinkTooltip"
@@ -74,9 +62,7 @@
 			:force-menu="true"
 			@close="onNewLinkShare">
 			<!-- pending data menu -->
-			<NcActionText v-if="errors.pending"
-				icon="icon-error"
-				:class="{ error: errors.pending}">
+			<NcActionText v-if="errors.pending" icon="icon-error" :class="{ error: errors.pending }">
 				{{ errors.pending }}
 			</NcActionText>
 			<NcActionText v-else icon="icon-info">
@@ -143,9 +129,7 @@
 			@close="onMenuClose">
 			<template v-if="share">
 				<template v-if="share.canEdit && canReshare">
-					<NcActionButton icon="icon-edit"
-						:disabled="saving"
-						@click.prevent="openSharingDetails">
+					<NcActionButton icon="icon-edit" :disabled="saving" @click.prevent="openSharingDetails">
 						{{ t('nmcsharing', 'Advanced permissions') }}
 					</NcActionButton>
 				</template>
@@ -159,7 +143,7 @@
 					:share="share" /> -->
 
 				<!-- external legacy sharing via url (social...) -->
-				<NcActionLink v-for="({icon, url, name}, index) in externalLegacyLinkActions"
+				<NcActionLink v-for="({ icon, url, name }, index) in externalLegacyLinkActions"
 					:key="index"
 					:href="url(shareLink)"
 					:icon="icon"
@@ -192,7 +176,6 @@ import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
@@ -210,7 +193,6 @@ export default {
 		NcActionInput,
 		NcActionLink,
 		NcActionText,
-		NcAvatar,
 		QuickShareSelect,
 	},
 
@@ -267,7 +249,7 @@ export default {
 							label: this.share.label.trim(),
 						})
 					}
-					return t('files_sharing', 'Share link ({label})', {
+					return t('files_sharing', 'Link {label}', {
 						label: this.share.label.trim(),
 					})
 				}
@@ -563,7 +545,7 @@ export default {
 				this.pending = false
 				component.open = true
 
-			// Nothing is enforced, creating share directly
+				// Nothing is enforced, creating share directly
 			} else {
 				const share = new Share(shareDefaults)
 				await this.pushNewLinkShare(share)
@@ -783,6 +765,7 @@ export default {
 			color: var(--color-text-maxcontrast);
 		}
 	}
+
 	&__title {
 		text-overflow: ellipsis;
 		overflow: hidden;
@@ -815,8 +798,9 @@ export default {
 	// but only the first one
 	.action-item {
 		margin-left: auto;
-		~ .action-item,
-		~ .sharing-entry__loading {
+
+		~.action-item,
+		~.sharing-entry__loading {
 			margin-left: 0;
 		}
 	}
diff --git a/src/components/SharingEntryQuickShareSelect.vue b/src/components/SharingEntryQuickShareSelect.vue
index 0378766..d07d8bb 100755
--- a/src/components/SharingEntryQuickShareSelect.vue
+++ b/src/components/SharingEntryQuickShareSelect.vue
@@ -7,8 +7,11 @@
 			:aria-haspopup="true"
 			aria-label="Quick share options dropdown"
 			@click="toggleDropdown">
+			<!-- <DropdownIcon :size="15" /> -->
+			<UploadIcon v-if="dropPermission" :size="15" />
+			<PencilIcon v-if="editPermission" :size="15" />
+			<EyeIcon v-if="readPermission" :size="15" />
 			{{ selectedOption }}
-			<DropdownIcon :size="15" />
 		</span>
 		<div v-if="showDropdown"
 			ref="quickShareDropdown"
@@ -30,7 +33,9 @@
 </template>
 
 <script>
-import DropdownIcon from 'vue-material-design-icons/TriangleSmallDown.vue'
+import EyeIcon from 'vue-material-design-icons/EyeCircleOutline.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
 import SharesMixin from '../mixins/SharesMixin.js'
 import ShareDetails from '../mixins/ShareDetails.js'
 import ShareTypes from '../mixins/ShareTypes.js'
@@ -45,7 +50,9 @@ import { createFocusTrap } from 'focus-trap'
 
 export default {
 	components: {
-		DropdownIcon,
+		EyeIcon,
+		PencilIcon,
+		UploadIcon,
 	},
 	mixins: [SharesMixin, ShareDetails, ShareTypes],
 	props: {
@@ -66,6 +73,9 @@ export default {
 	data() {
 		return {
 			selectedOption: '',
+			dropPermission: false,
+			editPermission: false,
+			readPermission: false,
 			showDropdown: this.toggle,
 			focusTrap: null,
 		}
@@ -83,6 +93,7 @@ export default {
 		customPermissionsText() {
 			return t('files_sharing', 'Custom permissions')
 		},
+		/* eslint-disable */
 		preSelectedOption() {
 			let permissions = this.share.permissions
 			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.SHARE)) {
@@ -90,16 +101,19 @@ export default {
 				permissions = this.share.permissions & ~ATOMIC_PERMISSIONS.SHARE
 			}
 			if (permissions === BUNDLED_PERMISSIONS.READ_ONLY) {
+				this.readPermission = true
 				return this.canViewText
 			} else if (permissions === BUNDLED_PERMISSIONS.ALL || permissions === BUNDLED_PERMISSIONS.ALL_FILE) {
+				this.editPermission = true
 				return this.canEditText
 			} else if (permissions === BUNDLED_PERMISSIONS.FILE_DROP) {
+				this.dropPermission = true
 				return this.fileDropText
 			}
 
 			return this.customPermissionsText
-
 		},
+		/* eslint-enable */
 		options() {
 			const options = [this.canViewText, this.canEditText]
 			if (this.supportsFileDrop) {
@@ -116,19 +130,31 @@ export default {
 			}
 			return false
 		},
+		/* eslint-disable */
 		dropDownPermissionValue() {
 			switch (this.selectedOption) {
 			case this.canEditText:
+				this.editPermission = true
+				this.readPermission = false
+				this.dropPermission = false
 				return this.isFolder ? BUNDLED_PERMISSIONS.ALL : BUNDLED_PERMISSIONS.ALL_FILE
 			case this.fileDropText:
+				this.dropPermission = true
+				this.editPermission = false
+				this.readPermission = false
 				return BUNDLED_PERMISSIONS.FILE_DROP
-			// case this.customPermissionsText:
-			// return 'custom'
+				// case this.customPermissionsText:
+				// return 'custom'
 			case this.canViewText:
+				this.readPermission = true
+				this.editPermission = false
+				this.dropPermission = false
+				break
 			default:
 				return BUNDLED_PERMISSIONS.READ_ONLY
 			}
 		},
+		/* eslint-enable */
 		dropdownId() {
 			// Generate a unique ID for ARIA attributes
 			return `dropdown-${Math.random().toString(36).substr(2, 9)}`
diff --git a/src/components/SharingInput.vue b/src/components/SharingInput.vue
index 7b75b62..b2b2c61 100755
--- a/src/components/SharingInput.vue
+++ b/src/components/SharingInput.vue
@@ -29,6 +29,15 @@
 		<label v-else>
 			{{ t('files_sharing', 'Resharing is not allowed') }}
 		</label>
+		<ul v-if="filteredEmailArr.length > 0" :style="{ display: 'flex', flexWrap: 'wrap' }">
+			<li v-for="(emailShare, index) in filteredEmailArr"
+				v-show="isShownArr[index].isVisible === true"
+				:key="index"
+				class="email--listItem__display"
+				@click="toggleDisplay(index)">
+				{{ index }} : {{ emailShare?.shareWith }}
+			</li>
+		</ul>
 		<NcSelect v-if="canReshare"
 			ref="select"
 			v-model="value"
@@ -86,7 +95,7 @@ export default {
 		},
 		fileInfo: {
 			type: Object,
-			default: () => {},
+			default: () => { },
 			required: true,
 		},
 		reshare: {
@@ -101,10 +110,16 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		filteredEmailArr: {
+			type: Array,
+			default: () => [],
+			required: true,
+		},
 	},
 
 	data() {
 		return {
+			isShownArr: [...Array(this.filteredEmailArr.length).keys()].map(i => ({ id: i, isVisible: true })),
 			config: new Config(),
 			loading: false,
 			query: '',
@@ -177,6 +192,16 @@ export default {
 			}
 		},
 
+		// toggle display for individual email item in multiple email share list
+		toggleDisplay(index) {
+			if (this.isShownArr[index].isVisible) {
+				this.isShownArr[index].isVisible = !this.isShownArr[index].isVisible
+			} else {
+				this.isShownArr.push(index)
+			}
+			this.$emit('remove-email-arr-element', index)
+		},
+
 		/**
 		 * Get suggestions
 		 *
@@ -445,7 +470,7 @@ export default {
 			if (result.value.shareType === this.SHARE_TYPES.SHARE_TYPE_USER && this.config.shouldAlwaysShowUnique) {
 				subtitle = result.shareWithDisplayNameUnique ?? ''
 			} else if ((result.value.shareType === this.SHARE_TYPES.SHARE_TYPE_REMOTE
-					|| result.value.shareType === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP
+				|| result.value.shareType === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP
 			) && result.value.server) {
 				subtitle = t('files_sharing', 'on {server}', { server: result.value.server })
 			} else if (result.value.shareType === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
@@ -545,6 +570,15 @@ export default {
 </script>
 
 <style lang="scss">
+.email--listItem__display {
+	display: inline-block;
+	padding: 0.5em 1em;
+	border-radius: 20px;
+	background-color: magenta;
+	border: 1px solid #ccc;
+	margin: 0.5em;
+}
+
 .sharing-search {
 	display: flex;
 	flex-direction: column;
@@ -558,6 +592,7 @@ export default {
 		min-width: auto;
 		width: 100%;
 		margin: 16px 0 12px;
+
 		input {
 			opacity: 1;
 		}
@@ -566,32 +601,40 @@ export default {
 			opacity: 1;
 		}
 	}
-};
+}
+
+;
 
 ul.vs__dropdown-menu {
 	--vs-border-width: 1px;
 	--vs-dropdown-option-padding: 16px 16px 16px 8px;
 	padding: 0px !important;
+
 	.vs__dropdown-option {
 		border-radius: 0px !important;
+
 		// remove user avatar
 		.avatardiv {
 			display: none;
 		}
+
 		// set dropdown option height
 		span.option {
 			--height: 16px !important;
 		}
+
 		// add a new icon definition
 		.icon {
 			background-size: 24px;
 			background-position: right;
+
 			.icon-upload-to-cloud {
 				background-image: var(--icon-upload-to-cloud-dark);
 			}
 		}
 
 	}
+
 	// No elements found
 	.vs__no-options {
 		padding: 1rem 0.5rem;
@@ -600,6 +643,7 @@ ul.vs__dropdown-menu {
 }
 
 .vs__dropdown-menu {
+
 	// properly style the lookup entry
 	span[lookup] {
 		.avatardiv {
@@ -607,6 +651,7 @@ ul.vs__dropdown-menu {
 			background-repeat: no-repeat;
 			background-position: center;
 			background-color: var(--color-text-maxcontrast) !important;
+
 			div {
 				display: none;
 			}
diff --git a/src/files_sharing_tab.js b/src/files_sharing_tab.js
index 7f44c22..5ce7703 100755
--- a/src/files_sharing_tab.js
+++ b/src/files_sharing_tab.js
@@ -37,6 +37,10 @@ Vue.prototype.n = n
 let TabInstance = null
 
 // Remove all unused
+/**
+ *
+ * @param id
+ */
 function checkTabs(id) {
 	return id !== 'sharing' && id !== 'photos' && id !== 'comments' && id !== 'version_vue'
 }
@@ -54,6 +58,7 @@ window.addEventListener('DOMContentLoaded', function() {
 
 			async mount(el, fileInfo, context) {
 				const SharingTab = (await import('./views/SharingTab.vue')).default
+
 				const View = Vue.extend(SharingTab)
 
 				if (TabInstance) {
diff --git a/src/views/SharingDetailsTab.vue b/src/views/SharingDetailsTab.vue
index cf539e0..35c7d04 100755
--- a/src/views/SharingDetailsTab.vue
+++ b/src/views/SharingDetailsTab.vue
@@ -31,6 +31,7 @@
 				</NcCheckboxRadioSwitch>
 				<p v-if="allowsFileDrop" class="sharing_permission-desc">
 					{{ t('nmcsharing', 'With File drop, only uploading is allowed. Only you can see files and folders that have been uploaded.') }}
+					that have been uploaded.') }}
 				</p>
 			</div>
 		</div>
@@ -63,7 +64,8 @@
 
 					<!-- Migrate icons and remote -> icon="icon-info"-->
 					<span v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
-						{{ t('files_sharing', 'Password expires {passwordExpirationTime}', { passwordExpirationTime }) }}
+						{{ t('files_sharing', 'Password expires {passwordExpirationTime}', { passwordExpirationTime })
+						}}
 					</span>
 					<span v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
 						{{ t('files_sharing', 'Password expired') }}
@@ -120,9 +122,7 @@ import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePic
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import EmailIcon from 'vue-material-design-icons/Email.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
-
 import GeneratePassword from '../utils/GeneratePassword.js'
-import Share from '../models/Share.js'
 import ShareRequests from '../mixins/ShareRequests.js'
 import ShareTypes from '../mixins/ShareTypes.js'
 import SharesMixin from '../mixins/SharesMixin.js'
@@ -179,6 +179,8 @@ export default {
 				password: this.share.password,
 				label: this.share.label,
 			},
+			// Multiple Email shares are saved in an Array of Objects
+			emailSharesArray: [],
 		}
 	},
 
@@ -593,6 +595,14 @@ export default {
 				}
 			}
 		},
+		pushEmailShare(email, subject, message) {
+			const newShare = {
+				email,
+				subject,
+				message,
+			}
+			this.emailSharesArray.push(newShare)
+		},
 		async saveShare() {
 			const permissionsAndAttributes = ['permissions', 'attributes', 'note', 'expireDate']
 			const publicShareAttributes = ['label', 'password', 'hideDownload']
@@ -613,7 +623,7 @@ export default {
 			// add SHARE permission if share doesn't have it, 'Allow resharing' is checked and Resharing is enabled globally
 			if (this.allowResharingIsChecked && !this.canReshare && this.resharingAllowedGlobal) {
 				this.share.permissions |= ATOMIC_PERMISSIONS.SHARE
-			// remove SHARE permission if internal share, 'Allow resharing' is unchecked and it initially had SHARE permission
+				// remove SHARE permission if internal share, 'Allow resharing' is unchecked and it initially had SHARE permission
 			} else if (!this.isPublicShare && this.canReshare && !this.allowResharingIsChecked) {
 				this.share.permissions = this.share.permissions & ~ATOMIC_PERMISSIONS.SHARE
 			}
@@ -653,9 +663,9 @@ export default {
 					incomingShare.password = this.mutableShare.password
 				}
 
-				const share = await this.addShare(incomingShare, this.fileInfo, this.config)
-				this.share = share
-				this.$emit('add:share', this.share)
+				const share = this.addShare(incomingShare, this.fileInfo, this.config)
+				// this.share = share
+				this.$emit('update:share', share)
 			} else {
 				this.queueUpdate(...permissionsAndAttributes)
 			}
@@ -669,22 +679,10 @@ export default {
 		 * @param {object} fileInfo file data
 		 * @param {Config} config instance configs
 		 */
-		async addShare(value, fileInfo, config) {
-			// Clear the displayed selection
-			this.value = null
-
-			// handle externalResults from OCA.Sharing.ShareSearch
-			if (value.handler) {
-				const share = await value.handler(this)
-				this.$emit('add:share', new Share(share))
-				return true
-			}
-
-			// this.loading = true // Are we adding loaders the new share flow?
-			console.debug('Adding a new share from the input for', value)
+		addShare(value, fileInfo, config) {
 			try {
 				const path = (fileInfo.path + '/' + fileInfo.name).replace('//', '/')
-				const share = await this.createShare({
+				const emailShare = {
 					path,
 					shareType: value.shareType,
 					shareWith: value.shareWith,
@@ -694,8 +692,8 @@ export default {
 					...(value.password ? { password: value.password } : {}),
 					...(value.expireDate ? { expireDate: value.expireDate } : {}),
 					...(value.label ? { label: value.label } : {}),
-				})
-				return share
+				}
+				return emailShare
 			} catch (error) {
 				console.error('Error while adding new share', error)
 			} finally {
@@ -793,6 +791,7 @@ export default {
 				height: 80px;
 				border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard);
 				border-radius: var(--telekom-radius-small);
+
 				&:hover {
 					cursor: text;
 				}
@@ -811,6 +810,7 @@ export default {
 				.checkbox-radio-switch__label {
 					padding-left: 0px;
 				}
+
 				::v-deep label {
 					padding-left: 0 !important;
 					background-color: initial !important;
@@ -863,14 +863,17 @@ export default {
 		all: unset;
 		position: relative;
 		font: var(--telekom-text-style-ui-bold);
+
 		&:hover {
 			color: var(--telekom-color-primary-hovered);
 			background-color: initial;
 			cursor: pointer;
+
 			&::after {
 				border-bottom-color: var(--color-primary);
 			}
 		}
+
 		&::after {
 			content: '';
 			border-left: 5px solid transparent;
@@ -880,6 +883,7 @@ export default {
 			top: calc(50% - 2px);
 			margin-left: 4px;
 		}
+
 		// rotate arrow when opened
 		&.open::after {
 			transform: rotate(0.5turn);
diff --git a/src/views/SharingLinkList.vue b/src/views/SharingLinkList.vue
index f546372..2da4b25 100755
--- a/src/views/SharingLinkList.vue
+++ b/src/views/SharingLinkList.vue
@@ -21,17 +21,17 @@
   -->
 
 <template>
-	<div>
-		<AddLinkButton :file-info="fileInfo" @add:share="addShare" />
+	<ul v-if="canLinkShare && canReshare" class="sharing-link-list">
+		<OpenSharingModalButton :file-info="fileInfo" @add:share="addShare" />
 
-		<ul v-if="canLinkShare && canReshare" class="sharing-link-list">
+		<template v-if="hasMailShares">
+			<h1>
+				<strong>{{ t('nmcsharing', 'Links sent per E-mail') }}</strong>
+			</h1>
 
-			<li class="sharing-link-list-caption">
-				<strong>{{ t('nmcsharing', 'Your shares') }}</strong>
-			</li>
-			<template v-if="hasShares">
+			<template v-for="(share, index) in shares">
 				<!-- using shares[index] to work with .sync -->
-				<SharingEntryLink v-for="(share, index) in shares"
+				<SharingEntryLink v-if="share.type === shareTypeMail"
 					:key="share.id"
 					:index="shares.length > 1 ? index + 1 : null"
 					:can-reshare="canReshare"
@@ -42,24 +42,43 @@
 					@remove:share="removeShare"
 					@open-sharing-details="openSharingDetails(share)" />
 			</template>
-		</ul>
-	</div>
+		</template>
+
+		<template v-if="hasLinkShares">
+			<h1>
+				<strong>{{ t('nmcsharing', 'Links to Copy') }}</strong>
+			</h1>
+
+			<template v-for="(share, index) in shares">
+				<SharingEntryLink v-if="share.type === shareTypeLink"
+					:key="share.id"
+					:index="shares.length > 1 ? index + 1 : null"
+					:can-reshare="canReshare"
+					:share.sync="shares[index]"
+					:file-info="fileInfo"
+					@add:share="addShare(...arguments)"
+					@update:share="awaitForShare(...arguments)"
+					@remove:share="removeShare"
+					@open-sharing-details="openSharingDetails(share)" />
+			</template>
+		</template>
+	</ul>
 </template>
 
 <script>
 // eslint-disable-next-line no-unused-vars
 import Share from '../models/Share.js'
-import ShareTypes from '../mixins/ShareTypes.js'
+import OpenSharingModalButton from '../components/OpenSharingModalButton.vue'
 import SharingEntryLink from '../components/SharingEntryLink.vue'
 import ShareDetails from '../mixins/ShareDetails.js'
-import AddLinkButton from '../components/AddLinkButton.vue'
+import ShareTypes from '../mixins/ShareTypes.js'
 
 export default {
 	name: 'SharingLinkList',
 
 	components: {
 		SharingEntryLink,
-		AddLinkButton,
+		OpenSharingModalButton,
 	},
 
 	mixins: [ShareTypes, ShareDetails],
@@ -90,22 +109,34 @@ export default {
 	computed: {
 		/**
 		 * Do we have link shares?
-		 * Using this to still show the `new link share`
-		 * button regardless of mail shares
 		 *
-		 * @return {Array}
+		 * @return {boolean}
 		 */
 		hasLinkShares() {
-			return this.shares.filter(share => share.type === this.SHARE_TYPES.SHARE_TYPE_LINK).length > 0
+			return this.shares.filter(share => share.type === this.shareTypeLink).length > 0
 		},
 
 		/**
-		 * Do we have any link or email shares?
+		 * @return {int}
+		 */
+		shareTypeLink() {
+			return this.SHARE_TYPES.SHARE_TYPE_LINK
+		},
+
+		/**
+		 * Do we have mail shares?
 		 *
 		 * @return {boolean}
 		 */
-		hasShares() {
-			return this.shares.length > 0
+		hasMailShares() {
+			return this.shares.filter(share => share.type === this.shareTypeMail).length > 0
+		},
+
+		/**
+		 * @return {int}
+		 */
+		shareTypeMail() {
+			return this.SHARE_TYPES.SHARE_TYPE_EMAIL
 		},
 	},
 
diff --git a/src/views/SharingTab.vue b/src/views/SharingTab.vue
index 80267b1..c576cf3 100755
--- a/src/views/SharingTab.vue
+++ b/src/views/SharingTab.vue
@@ -30,33 +30,48 @@
 		<!-- shares content -->
 		<div v-if="!showSharingDetailsView" class="sharingTab__content">
 			<h2 class="sharingTab__header">
-				{{ t('nmcsharing', 'Sharing') }}
+				{{ t('nmcsharing', 'Manage Access') }}
 			</h2>
+			<!-- <label v-if="canReshare" for="sharing-search-input"> -->
+			<p v-if="canReshare" class="sharingTab__info">
+				{{ t('nmcsharing', 'You did not share this file/ folder yet. You can share the file/ folder to others')
+				}}
+				{{ isSharedWithMe ? `${t('nmcsharing', 'Resharing is allowed')}. ` : '' }}
+			</p>
+
 			<!-- shared with me information -->
 			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare" />
 
+			<template v-if="!loading">
+				<!-- display multiple email share recipients -->
+				<SharingInput :can-reshare="canReshare"
+					:file-info="fileInfo"
+					:link-shares="linkShares"
+					:reshare="reshare"
+					:shares="shares"
+					:filtered-email-arr="filteredEmailArr"
+					:is-shared-with-me="isSharedWithMe"
+					@open-sharing-details="toggleShareDetailsView"
+					@remove-email-arr-element="filteredEmailArrRemove" />
+
+				<AddAllEmailsButton :is-loading="loading"
+					:file-info="fileInfo"
+					:filtered-email-arr="filteredEmailArr"
+					:on-submit="addEmailShare"
+					@add-share="addShare"
+					@force-update="forceUpdate" />
+			</template>
 			<!-- add new share input -->
-			<SharingInput v-if="!loading"
-				:can-reshare="canReshare"
-				:file-info="fileInfo"
-				:link-shares="linkShares"
-				:reshare="reshare"
-				:shares="shares"
-				:is-shared-with-me="isSharedWithMe"
-				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- link shares list -->
 			<SharingLinkList v-if="!loading"
 				ref="linkShareList"
 				:can-reshare="canReshare"
+				:can-edit="canEdit"
 				:file-info="fileInfo"
 				:shares="linkShares"
 				@open-sharing-details="toggleShareDetailsView" />
 
-			<p v-if="!loading && shares.length === 0 && linkShares.length === 0 && canReshare">
-				{{ t('nmcsharing', 'No shares created yet.') }}
-			</p>
-
 			<!-- other shares list -->
 			<SharingList v-if="!loading && canReshare"
 				ref="shareList"
@@ -71,8 +86,8 @@
 				:share="shareDetailsData.share"
 				:resharing-allowed-global="config.isResharingAllowed"
 				@close-sharing-details="toggleShareDetailsView"
-				@add:share="addShare"
-				@remove:share="removeShare" />
+				@remove:share="deleteShare"
+				@update:share="updateEmailShares" />
 		</div>
 
 		<!-- additional entries, use it with cautious -->
@@ -80,40 +95,41 @@
 			:ref="'section-' + index"
 			:key="index"
 			class="sharingTab__additionalContent">
-			<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
+			<component :is="section($refs['section-' + index], fileInfo)" :file-info="fileInfo" />
 		</div>
 	</div>
 </template>
 <!-- eslint-disable @nextcloud/no-deprecations -->
 <script>
 import { generateOcsUrl } from '@nextcloud/router'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import axios from '@nextcloud/axios'
 
 import Config from '../services/ConfigService.js'
 import { shareWithTitle } from '../utils/SharedWithMe.js'
 import Share from '../models/Share.js'
 import ShareTypes from '../mixins/ShareTypes.js'
+import ShareRequests from '../mixins/ShareRequests.js'
+import SharesMixin from '../mixins/SharesMixin.js'
 import SharingEntrySimple from '../components/SharingEntrySimple.vue'
 import SharingInput from '../components/SharingInput.vue'
-
 import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
 import SharingDetailsTab from './SharingDetailsTab.vue'
+import AddAllEmailsButton from '../components/AddAllEmailsButton.vue'
 
 export default {
 	name: 'SharingTab',
 
 	components: {
-		NcAvatar,
 		SharingEntrySimple,
 		SharingInput,
 		SharingLinkList,
 		SharingList,
 		SharingDetailsTab,
+		AddAllEmailsButton,
 	},
 
-	mixins: [ShareTypes],
+	mixins: [ShareTypes, ShareRequests, SharesMixin],
 
 	data() {
 		return {
@@ -127,6 +143,7 @@ export default {
 
 			// reshare Share object
 			reshare: null,
+			edit: null,
 			sharedWithMe: {},
 			shares: [],
 			linkShares: [],
@@ -135,10 +152,13 @@ export default {
 			// projectsEnabled: loadState('core', 'projects_enabled', false),
 			showSharingDetailsView: false,
 			shareDetailsData: {},
+			emailSharesArray: [],
 		}
 	},
 
 	computed: {
+		console: () => console,
+		window: () => window,
 		/**
 		 * Is this share shared with me?
 		 *
@@ -152,6 +172,18 @@ export default {
 			return !!(this.fileInfo.permissions & OC.PERMISSION_SHARE)
 				|| !!(this.reshare && this.reshare.hasSharePermission && this.config.isResharingAllowed)
 		},
+
+		// Check if file is Read Only or can be Updated / Edited
+		canEdit() {
+			return !!(this.fileInfo.permissions & OC.PERMISSION_UPDATE)
+				|| !!(this.edit && this.edit.hasUpdatePermission)
+		},
+		// remove duplicate email addresses
+		filteredEmailArr() {
+			return this.emailSharesArray.filter((value, index, self) =>
+				self.findIndex(v => v.shareWith === value.shareWith) === index,
+			)
+		},
 	},
 
 	methods: {
@@ -165,6 +197,44 @@ export default {
 			this.resetState()
 			this.getShares()
 		},
+		/**
+		 * Process single new Email share request
+		 *
+		 * @param {object} value the multiselect option
+		 * @param emailObj
+		 */
+		async addEmailShare(emailObj) {
+			try {
+				if (emailObj) {
+					const options = {
+						path: emailObj?.path,
+						shareType: emailObj.shareType,
+						shareWith: emailObj.shareWith,
+						permissions: emailObj.permissions,
+						attributes: emailObj.attributes,
+						password: emailObj.password ? emailObj.password : null,
+						expireDate: emailObj.expireDate ? emailObj.expireDate : null,
+						label: emailObj.label ? emailObj.label : null,
+					}
+					console.debug('Creating email link share with options', options)
+					const share = await this.createShare(options)
+					this.$forceUpdate()
+					return share
+				}
+			} catch (error) {
+				console.error('Error while adding new share', error)
+			} finally {
+				// this.loading = false // No loader here yet
+			}
+		},
+		async removeShare() {
+			await this.onDelete()
+			this.$emit('close-sharing-details')
+		},
+
+		async updateEmailShares(emailSharesElement) {
+			this.emailSharesArray.push(emailSharesElement)
+		},
 
 		/**
 		 * Get the existing shares infos
@@ -225,6 +295,7 @@ export default {
 			this.linkShares = []
 			this.showSharingDetailsView = false
 			this.shareDetailsData = {}
+			this.emailSharesArray = []
 		},
 
 		/**
@@ -327,7 +398,8 @@ export default {
 		addShare(share, resolve = () => { }) {
 			// only catching share type MAIL as link shares are added differently
 			// meaning: not from the ShareInput
-			if (share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
+			// For email addresses in emailSharesArray
+			if (share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL || share.shareType === this.SHARE_TYPES.SHARE_TYPE_EMAIL || share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
 				this.linkShares.unshift(share)
 			} else {
 				this.shares.unshift(share)
@@ -339,7 +411,7 @@ export default {
 		 *
 		 * @param {Share} share the share to remove
 		 */
-		removeShare(share) {
+		deleteShare(share) {
 			const index = this.shares.findIndex(item => item.id === share.id)
 			// eslint-disable-next-line vue/no-mutating-props
 			this.shares.splice(index, 1)
@@ -374,6 +446,10 @@ export default {
 			}
 			this.showSharingDetailsView = !this.showSharingDetailsView
 		},
+		filteredEmailArrRemove(index) {
+			// this.filteredEmailArr.splice(index, 1);
+			this.filteredEmailArr[index] = null
+		},
 	},
 }
 </script>
@@ -392,6 +468,11 @@ export default {
 		padding: 0px;
 	}
 
+	&__info {
+		display: block;
+		margin-bottom: 1rem
+	}
+
 	&__additionalContent {
 		margin: 44px 0;
 	}