diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index 8167172ceeae3..a940748aa0dd0 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -39,10 +39,11 @@
 				<span>{{ share.status.message || '' }}</span>
 			</p>
 		</component>
-		<Actions
+		<Actions v-if="open === false"
 			menu-align="right"
 			class="sharing-entry__actions"
 			@close="onMenuClose">
+<<<<<<< HEAD
 			<template v-if="share.canEdit">
 				<!-- edit permission -->
 				<ActionCheckbox
@@ -135,6 +136,22 @@
 				</template>
 			</template>
 
+=======
+			<ActionButton v-if="share.canEdit"
+				icon="icon-settings"
+				:disabled="saving"
+				:share="share"
+				@click.prevent="editPermissions">
+				{{ t('files_sharing', 'Advanced permission') }}
+			</ActionButton>
+			<ActionButton v-if="share.canEdit"
+				icon="icon-mail"
+				:disabled="saving"
+				:share="share"
+				@click.prevent="editNotes">
+				{{ t('files_sharing', 'Send new mail') }}
+			</ActionButton>
+>>>>>>> e994a1f60d... NMC-434 - changed the process of file sharing for internal and external sharee
 			<ActionButton v-if="share.canDelete"
 				icon="icon-close"
 				:disabled="saving"
@@ -181,10 +198,33 @@ export default {
 			permissionsDelete: OC.PERMISSION_DELETE,
 			permissionsRead: OC.PERMISSION_READ,
 			permissionsShare: OC.PERMISSION_SHARE,
+
+			publicUploadRWValue: OC.PERMISSION_UPDATE | OC.PERMISSION_CREATE | OC.PERMISSION_READ | OC.PERMISSION_DELETE,
+			publicUploadRValue: OC.PERMISSION_READ,
+			publicUploadWValue: OC.PERMISSION_CREATE,
+			publicUploadEValue: OC.PERMISSION_UPDATE | OC.PERMISSION_READ,
 		}
 	},
 
 	computed: {
+		/**
+		 * Return the current share permissions
+		 * We always ignore the SHARE permission as this is used for the
+		 * federated sharing.
+		 * @returns {number}
+		 */
+		sharePermissions() {
+			return this.share.permissions & ~OC.PERMISSION_SHARE
+		},
+
+		/**
+		 * Generate a unique random id for this SharingEntry only
+		 * @returns {string}
+		 */
+		randomId() {
+			return Math.random().toString(27).substr(2)
+		},
+
 		title() {
 			let title = this.share.shareWithDisplayName
 			if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
@@ -348,28 +388,28 @@ export default {
 		 * Does the current share have an expiration date
 		 * @returns {boolean}
 		 */
-		hasExpirationDate: {
-			get() {
-				return this.config.isDefaultInternalExpireDateEnforced || !!this.share.expireDate
-			},
-			set(enabled) {
-				this.share.expireDate = enabled
-					? this.config.defaultInternalExpirationDateString !== ''
-						? this.config.defaultInternalExpirationDateString
-						: moment().format('YYYY-MM-DD')
-					: ''
-			},
-		},
-
-		dateMaxEnforced() {
-			if (!this.isRemote) {
-				return this.config.isDefaultInternalExpireDateEnforced
-					&& moment().add(1 + this.config.defaultInternalExpireDate, 'days')
-			} else {
-				return this.config.isDefaultRemoteExpireDateEnforced
-					&& moment().add(1 + this.config.defaultRemoteExpireDate, 'days')
-			}
-		},
+		// hasExpirationDate: {
+		// 	get() {
+		// 		return this.config.isDefaultInternalExpireDateEnforced || !!this.share.expireDate
+		// 	},
+		// 	set(enabled) {
+		// 		this.share.expireDate = enabled
+		// 			? this.config.defaultInternalExpirationDateString !== ''
+		// 				? this.config.defaultInternalExpirationDateString
+		// 				: moment().format('YYYY-MM-DD')
+		// 			: ''
+		// 	},
+		// },
+
+		// dateMaxEnforced() {
+		// 	if (!this.isRemote) {
+		// 		return this.config.isDefaultInternalExpireDateEnforced
+		// 			&& moment().add(1 + this.config.defaultInternalExpireDate, 'days')
+		// 	} else {
+		// 		return this.config.isDefaultRemoteExpireDateEnforced
+		// 			&& moment().add(1 + this.config.defaultRemoteExpireDate, 'days')
+		// 	}
+		// },
 
 		/**
 		 * @returns {bool}
@@ -404,6 +444,18 @@ export default {
 		onMenuClose() {
 			this.onNoteSubmit()
 		},
+
+		editPermissions() {
+			this.$store.commit('addFromInput', false)
+			this.$store.commit('addShare', this.share)
+			this.$store.commit('addCurrentTab', 'permissions')
+		},
+
+		editNotes() {
+			this.$store.commit('addFromInput', false)
+			this.$store.commit('addShare', this.share)
+			this.$store.commit('addCurrentTab', 'notes')
+		},
 	},
 }
 </script>
@@ -412,7 +464,7 @@ export default {
 .sharing-entry {
 	display: flex;
 	align-items: center;
-	height: 44px;
+	min-height: 44px;
 	&__desc {
 		display: flex;
 		flex-direction: column;
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 37e5285075444..36cc28ca6d826 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -131,160 +131,6 @@
 			:open.sync="open"
 			@close="onMenuClose">
 			<template v-if="share">
-				<template v-if="share.canEdit && canReshare">
-					<!-- Custom Label -->
-					<ActionInput
-						ref="label"
-						v-tooltip.auto="{
-							content: errors.label,
-							show: errors.label,
-							trigger: 'manual',
-							defaultContainer: '.app-sidebar'
-						}"
-						:class="{ error: errors.label }"
-						:disabled="saving"
-						:aria-label="t('files_sharing', 'Share label')"
-						:value="share.newLabel !== undefined ? share.newLabel : share.label"
-						icon="icon-edit"
-						maxlength="255"
-						@update:value="onLabelChange"
-						@submit="onLabelSubmit">
-						{{ t('files_sharing', 'Share label') }}
-					</ActionInput>
-					<!-- folder -->
-					<template v-if="isFolder && fileHasCreatePermission && config.isPublicUploadEnabled">
-						<ActionRadio :checked="sharePermissions === publicUploadRValue"
-							:value="publicUploadRValue"
-							:name="randomId"
-							:disabled="saving"
-							@change="togglePermissions">
-							{{ t('files_sharing', 'Read only') }}
-						</ActionRadio>
-						<ActionRadio :checked="sharePermissions === publicUploadRWValue"
-							:value="publicUploadRWValue"
-							:disabled="saving"
-							:name="randomId"
-							@change="togglePermissions">
-							{{ t('files_sharing', 'Allow upload and editing') }}
-						</ActionRadio>
-						<ActionRadio :checked="sharePermissions === publicUploadWValue"
-							:value="publicUploadWValue"
-							:disabled="saving"
-							:name="randomId"
-							class="sharing-entry__action--public-upload"
-							@change="togglePermissions">
-							{{ t('files_sharing', 'File drop (upload only)') }}
-						</ActionRadio>
-					</template>
-
-					<!-- file -->
-					<ActionCheckbox v-else
-						:checked.sync="canUpdate"
-						:disabled="saving"
-						@change="queueUpdate('permissions')">
-						{{ t('files_sharing', 'Allow editing') }}
-					</ActionCheckbox>
-
-					<ActionCheckbox
-						:checked.sync="share.hideDownload"
-						:disabled="saving"
-						@change="queueUpdate('hideDownload')">
-						{{ t('files_sharing', 'Hide download') }}
-					</ActionCheckbox>
-
-					<!-- password -->
-					<ActionCheckbox :checked.sync="isPasswordProtected"
-						:disabled="config.enforcePasswordForPublicLink || saving"
-						class="share-link-password-checkbox"
-						@uncheck="onPasswordDisable">
-						{{ config.enforcePasswordForPublicLink
-							? t('files_sharing', 'Password protection (enforced)')
-							: t('files_sharing', 'Password protect') }}
-					</ActionCheckbox>
-					<ActionInput v-if="isPasswordProtected"
-						ref="password"
-						v-tooltip.auto="{
-							content: errors.password,
-							show: errors.password,
-							trigger: 'manual',
-							defaultContainer: '#app-sidebar'
-						}"
-						class="share-link-password"
-						:class="{ error: errors.password}"
-						:disabled="saving"
-						:required="config.enforcePasswordForPublicLink"
-						:value="hasUnsavedPassword ? share.newPassword : '***************'"
-						icon="icon-password"
-						autocomplete="new-password"
-						:type="hasUnsavedPassword ? 'text': 'password'"
-						@update:value="onPasswordChange"
-						@submit="onPasswordSubmit">
-						{{ t('files_sharing', 'Enter a password') }}
-					</ActionInput>
-
-					<!-- password protected by Talk -->
-					<ActionCheckbox v-if="isPasswordProtectedByTalkAvailable"
-						:checked.sync="isPasswordProtectedByTalk"
-						:disabled="!canTogglePasswordProtectedByTalkAvailable || saving"
-						class="share-link-password-talk-checkbox"
-						@change="onPasswordProtectedByTalkChange">
-						{{ t('files_sharing', 'Video verification') }}
-					</ActionCheckbox>
-
-					<!-- expiration date -->
-					<ActionCheckbox :checked.sync="hasExpirationDate"
-						:disabled="config.isDefaultExpireDateEnforced || saving"
-						class="share-link-expire-date-checkbox"
-						@uncheck="onExpirationDisable">
-						{{ config.isDefaultExpireDateEnforced
-							? t('files_sharing', 'Expiration date (enforced)')
-							: t('files_sharing', 'Set expiration date') }}
-					</ActionCheckbox>
-					<ActionInput v-if="hasExpirationDate"
-						ref="expireDate"
-						v-tooltip.auto="{
-							content: errors.expireDate,
-							show: errors.expireDate,
-							trigger: 'manual',
-							defaultContainer: '#app-sidebar'
-						}"
-						class="share-link-expire-date"
-						:class="{ error: errors.expireDate}"
-						:disabled="saving"
-						:first-day-of-week="firstDay"
-						:lang="lang"
-						:value="share.expireDate"
-						value-type="format"
-						icon="icon-calendar-dark"
-						type="date"
-						:disabled-date="disabledDate"
-						@update:value="onExpirationChange">
-						{{ t('files_sharing', 'Enter a date') }}
-					</ActionInput>
-
-					<!-- note -->
-					<ActionCheckbox :checked.sync="hasNote"
-						:disabled="saving"
-						@uncheck="queueUpdate('note')">
-						{{ t('files_sharing', 'Note to recipient') }}
-					</ActionCheckbox>
-					<ActionTextEditable v-if="hasNote"
-						ref="note"
-						v-tooltip.auto="{
-							content: errors.note,
-							show: errors.note,
-							trigger: 'manual',
-							defaultContainer: '#app-sidebar'
-						}"
-						:class="{ error: errors.note}"
-						:disabled="saving"
-						:placeholder="t('files_sharing', 'Enter a note for the share recipient')"
-						:value="share.newNote || share.note"
-						icon="icon-edit"
-						@update:value="onNoteChange"
-						@submit="onNoteSubmit" />
-				</template>
-
 				<!-- external sharing via url (social...) -->
 				<ActionLink v-for="({icon, url, name}, index) in externalActions"
 					:key="index"
@@ -293,6 +139,18 @@
 					target="_blank">
 					{{ name }}
 				</ActionLink>
+				<ActionButton v-if="share.canEdit"
+					icon="icon-settings"
+					:disabled="saving"
+					@click.prevent="editPermissions">
+					{{ t('files_sharing', 'Advanced permission') }}
+				</ActionButton>
+				<ActionButton v-if="share.canEdit"
+					icon="icon-mail"
+					:disabled="saving"
+					@click.prevent="editNotes">
+					{{ t('files_sharing', 'Send new mail') }}
+				</ActionButton>
 
 				<ActionButton v-if="share.canDelete"
 					icon="icon-close"
@@ -328,10 +186,8 @@ import Vue from 'vue'
 
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionRadio from '@nextcloud/vue/dist/Components/ActionRadio'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-import ActionTextEditable from '@nextcloud/vue/dist/Components/ActionTextEditable'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
@@ -348,11 +204,9 @@ export default {
 		Actions,
 		ActionButton,
 		ActionCheckbox,
-		ActionRadio,
 		ActionInput,
 		ActionLink,
 		ActionText,
-		ActionTextEditable,
 		Avatar,
 	},
 
@@ -397,8 +251,6 @@ export default {
 		},
 		/**
 		 * Generate a unique random id for this SharingEntryLink only
-		 * This allows ActionRadios to have the same name prop
-		 * but not to impact others SharingEntryLink
 		 * @returns {string}
 		 */
 		randomId() {
@@ -898,8 +750,19 @@ export default {
 			// YET. We can safely delete the share :)
 			this.$emit('remove:share', this.share)
 		},
-	},
 
+		editPermissions() {
+			this.$store.commit('addFromInput', false)
+			this.$store.commit('addShare', this.share)
+			this.$store.commit('addCurrentTab', 'permissions')
+		},
+
+		editNotes() {
+			this.$store.commit('addFromInput', false)
+			this.$store.commit('addShare', this.share)
+			this.$store.commit('addCurrentTab', 'notes')
+		},
+	},
 }
 </script>
 
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
index 9bc4e04e722c3..1651da6860f42 100644
--- a/apps/files_sharing/src/components/SharingInput.vue
+++ b/apps/files_sharing/src/components/SharingInput.vue
@@ -38,7 +38,7 @@
 		label="displayName"
 		track-by="id"
 		@search-change="asyncFind"
-		@select="addShare">
+		@select="showPermissions">
 		<template #noOptions>
 			{{ t('files_sharing', 'No recommendations. Start typing.') }}
 		</template>
@@ -56,7 +56,6 @@ import debounce from 'debounce'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 
 import Config from '../services/ConfigService'
-import GeneratePassword from '../utils/GeneratePassword'
 import Share from '../models/Share'
 import ShareRequests from '../mixins/ShareRequests'
 import ShareTypes from '../mixins/ShareTypes'
@@ -154,6 +153,10 @@ export default {
 
 	mounted() {
 		this.getRecommendations()
+
+		this.$root.$on('getRecommendations', data => {
+			this.getRecommendations()
+		})
 	},
 
 	methods: {
@@ -270,7 +273,6 @@ export default {
 			})
 
 			this.loading = false
-			console.info('suggestions', this.suggestions)
 		},
 
 		/**
@@ -314,7 +316,6 @@ export default {
 				.concat(externalResults)
 
 			this.loading = false
-			console.info('recommendations', this.recommendations)
 		},
 
 		/**
@@ -436,81 +437,14 @@ export default {
 			}
 		},
 
-		/**
-		 * Process the new share request
-		 * @param {Object} value the multiselect option
-		 */
-		async addShare(value) {
-			if (value.lookup) {
-				await this.getSuggestions(this.query, true)
-
-				// focus the input again
-				this.$nextTick(() => {
-					this.$refs.multiselect.$el.querySelector('.multiselect__input').focus()
-				})
-				return true
-			}
-
-			// 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
-			console.debug('Adding a new share from the input for', value)
-			try {
-				let password = null
-
-				if (this.config.enforcePasswordForPublicLink
-					&& value.shareType === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
-					password = await GeneratePassword()
-				}
-
-				const path = (this.fileInfo.path + '/' + this.fileInfo.name).replace('//', '/')
-				const share = await this.createShare({
-					path,
-					shareType: value.shareType,
-					shareWith: value.shareWith,
-					password,
-					permissions: this.fileInfo.sharePermissions & OC.getCapabilities().files_sharing.default_permissions,
-				})
-
-				// If we had a password, we need to show it to the user as it was generated
-				if (password) {
-					share.newPassword = password
-					// Wait for the newly added share
-					const component = await new Promise(resolve => {
-						this.$emit('add:share', share, resolve)
-					})
-
-					// open the menu on the
-					// freshly created share component
-					component.open = true
-				} else {
-					// Else we just add it normally
-					this.$emit('add:share', share)
-				}
-
-				// reset the search string when done
-				// FIXME: https://github.com/shentao/vue-multiselect/issues/633
-				if (this.$refs.multiselect?.$refs?.VueMultiselect?.search) {
-					this.$refs.multiselect.$refs.VueMultiselect.search = ''
-				}
-
-				await this.getRecommendations()
-			} catch (error) {
-				// focus back if any error
-				const input = this.$refs.multiselect.$el.querySelector('input')
-				if (input) {
-					input.focus()
-				}
-				this.query = value.shareWith
-				console.error('Error while adding new share', error)
-			} finally {
-				this.loading = false
-			}
+		async showPermissions(value) {
+			// this.$root.$emit('optionValues', value)
+			this.$store.commit('addOption', value)
+			this.$store.commit('addFromInput', true)
+			const newShare = new Share({})
+			newShare.permissions = OC.PERMISSION_READ
+			this.$store.commit('addShare', newShare)
+			this.$store.commit('addCurrentTab', 'permissions')
 		},
 	},
 }
diff --git a/apps/files_sharing/src/components/SharingNotes.vue b/apps/files_sharing/src/components/SharingNotes.vue
new file mode 100644
index 0000000000000..8bc43b2e87064
--- /dev/null
+++ b/apps/files_sharing/src/components/SharingNotes.vue
@@ -0,0 +1,192 @@
+<!--
+  - @copyright Copyright (c) 2021 Yogesh Shejwadkar <yogesh.shejwadkar@t-systems.com>
+  -
+  - @author Yogesh Shejwadkar <yogesh.shejwadkar@t-systems.com>
+  -
+  - @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>
+	<div :class="{ 'icon-loading': loading }">
+		<div class="sharing-notes">
+			<!-- note -->
+			<template>
+				<label>
+					{{ t('files_sharing', 'Note to recipient') }}
+				</label>
+				<div>
+					<textarea
+						v-model="shareNote"
+						ref="note"
+						class="sharing-note"
+						:disabled="saving" />
+				</div>
+				<div>
+					<button class="status-buttons__select"
+						:name="randomId"
+						:disabled="saving"
+						@click="cancelSharing">
+						{{ t('files_sharing', 'Cancel') }}
+					</button>
+					<template v-if="share.id > 0">
+						<button class="status-buttons__primary primary"
+							:name="randomId"
+							:disabled="saving"
+							@click="sendEmail">
+							{{ t('files_sharing', 'Send email') }}
+						</button>
+					</template>
+					<template v-else>
+						<button class="status-buttons__primary primary"
+							:name="randomId"
+							:disabled="saving"
+							@click="addShare">
+							{{ t('files_sharing', 'Send share') }}
+						</button>
+					</template>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+import Config from '../services/ConfigService'
+import SharesMixin from '../mixins/SharesMixin'
+import Share from '../models/Share'
+import ShareRequests from '../mixins/ShareRequests'
+import ShareTypes from '../mixins/ShareTypes'
+import { mapGetters } from 'vuex'
+
+export default {
+	name: 'SharingNotes',
+
+	components: {
+	},
+
+	mounted() {
+		// this.$root.$on('optionValues', data => {
+		// 	optionValues = data
+		// })
+	},
+
+	directives: {
+	},
+
+	mixins: [SharesMixin, ShareRequests, ShareTypes],
+
+	data() {
+		return {
+			config: new Config(),
+			loading: false,
+			query: '',
+			recommendations: [],
+			ShareSearch: OCA.Sharing.ShareSearch.state,
+			suggestions: [],
+			shareNote: this.share.newNote || this.share.note,
+		}
+	},
+
+	computed: {
+		...mapGetters({
+			optionValues: 'getOption',
+			// share: 'getShare',
+		}),
+
+		/**
+		 * Generate a unique random id for this SharingPermissions only
+		 * This allows ActionRadios to have the same name prop
+		 * but not to impact others SharingPermissions
+		 * @returns {string}
+		 */
+		randomId() {
+			return Math.random().toString(27).substr(2)
+		},
+	},
+
+	methods: {
+		cancelSharing() {
+			this.$store.commit('addCurrentTab', 'default')
+		},
+
+		sendEmail() {
+			this.loading = true
+			this.share.newNote = this.shareNote
+			this.onNoteSubmit()
+			this.loading = false
+			this.$store.commit('addCurrentTab', 'default')
+			// console.info('this is send email')
+		},
+
+		/**
+		 * Process the new share request
+		 * @param {Object} optionValues the multiselect option
+		 */
+		async addShare() {
+			// handle externalResults from OCA.Sharing.ShareSearch
+			if (this.share.handler) {
+				console.debug('addShare this.share handler ', this.share)
+				const share = await this.share.handler(this)
+				this.$emit('add:share', new Share(share))
+				return true
+			}
+
+			this.loading = true
+			console.debug('Adding a new share from the input for', this.share)
+			try {
+				const path = (this.fileInfo.path + '/' + this.fileInfo.name).replace('//', '/')
+				const share = await this.createShare({
+					path,
+					shareType: this.optionValues.shareType,
+					shareWith: this.optionValues.shareWith,
+					password: this.share.password,
+					password_by_talk: this.share.sendPasswordByTalk,
+					expiration: this.share.expireDate,
+					permissions: this.fileInfo.sharePermissions & OC.getCapabilities().files_sharing.default_permissions & this.share.permissions,
+				})
+
+				// add notes to share if any
+				this.share = share
+				this.share.note = this.shareNote
+				this.queueUpdate('note')
+
+				// reset the search string when done
+				// FIXME: https://github.com/shentao/vue-multiselect/issues/633
+				if (this.$refs.multiselect?.$refs?.VueMultiselect?.search) {
+					this.$refs.multiselect.$refs.VueMultiselect.search = ''
+				}
+
+				this.$root.$emit('update', this.fileInfo)
+				await this.$root.$emit('getRecommendations')
+				this.cancelSharing()
+			} catch (error) {
+				this.query = this.share.shareWith
+				console.error('Error while adding new share', error)
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.sharing-note {
+	width: 100%;
+	height: 200px;
+}
+</style>
diff --git a/apps/files_sharing/src/components/SharingPermissions.vue b/apps/files_sharing/src/components/SharingPermissions.vue
new file mode 100644
index 0000000000000..e8dfdd17ac093
--- /dev/null
+++ b/apps/files_sharing/src/components/SharingPermissions.vue
@@ -0,0 +1,556 @@
+<!--
+  - @copyright Copyright (c) 2021 Yogesh Shejwadkar <yogesh.shejwadkar@t-systems.com>
+  -
+  - @author Yogesh Shejwadkar <yogesh.shejwadkar@t-systems.com>
+  -
+  - @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>
+	<ul class="sharing-permissions">
+		<!-- for email and link share -->
+		<template v-if="isExteranlShare">
+			<!-- folder -->
+			<template v-if="isFolder && fileHasCreatePermission && config.isPublicUploadEnabled">
+				<ActionRadio :checked="sharePermissions === publicUploadRValue"
+					:value="publicUploadRValue"
+					:name="randomId"
+					:disabled="saving"
+					@change="addPermissions">
+					{{ t('files_sharing', 'Read only') }}
+				</ActionRadio>
+				<ActionRadio :checked="sharePermissions === publicUploadRWValue"
+					:value="publicUploadRWValue"
+					:disabled="saving"
+					:name="randomId"
+					@change="addPermissions">
+					{{ t('files_sharing', 'Allow upload and editing') }}
+				</ActionRadio>
+				<ActionRadio :checked="sharePermissions === publicUploadWValue"
+					:value="publicUploadWValue"
+					:disabled="saving"
+					:name="randomId"
+					class="sharing-entry__action--public-upload"
+					@change="addPermissions">
+					{{ t('files_sharing', 'File drop (upload only)') }}
+				</ActionRadio>
+			</template>
+
+			<!-- file -->
+			<template v-else>
+				<ActionRadio :checked="sharePermissions === publicUploadRValue"
+					:value="publicUploadRValue"
+					:name="randomId"
+					:disabled="saving"
+					@change="addPermissions">
+					{{ t('files_sharing', 'Read only') }}
+				</ActionRadio>
+
+				<ActionRadio :checked="sharePermissions === publicUploadEValue"
+					:value="publicUploadEValue"
+					:disabled="saving"
+					:name="randomId"
+					@change="addPermissions">
+					{{ t('files_sharing', 'Editing') }}
+				</ActionRadio>
+			</template>
+
+			<label>
+				{{ t('files_sharing', 'Advanced settings') }}
+			</label>
+			<ActionCheckbox :checked.sync="share.hideDownload"
+				:disabled="saving"
+				@change="addHideDownload">
+				{{ t('files_sharing', 'Hide download') }}
+			</ActionCheckbox>
+
+			<!-- password -->
+			<ActionCheckbox :checked.sync="isPasswordProtected"
+				:disabled="config.enforcePasswordForPublicLink || saving"
+				class="share-link-password-checkbox">
+				{{ config.enforcePasswordForPublicLink
+					? t('files_sharing', 'Password protection (enforced)')
+					: t('files_sharing', 'Password protect') }}
+			</ActionCheckbox>
+			<ActionInput v-if="isPasswordProtected"
+				ref="password"
+				v-tooltip.auto="{
+					content: errors.password,
+					show: errors.password,
+					trigger: 'manual',
+					defaultContainer: '#app-sidebar'
+				}"
+				class="share-link-password"
+				:class="{ error: errors.password}"
+				:disabled="saving"
+				:required="config.enforcePasswordForPublicLink"
+				:value="hasUnsavedPassword ? share.newPassword : '***************'"
+				autocomplete="new-password"
+				:type="hasUnsavedPassword ? 'text': 'password'">
+				{{ t('files_sharing', 'Enter a password') }}
+			</ActionInput>
+
+			<!-- password protected by Talk -->
+			<ActionCheckbox :checked.sync="share.sendPasswordByTalk"
+				:disabled="!canTogglePasswordProtectedByTalkAvailable || saving"
+				class="share-link-password-talk-checkbox"
+				@change="addPasswordProtectedByTalkChange">
+				{{ t('files_sharing', 'Video verification') }}
+			</ActionCheckbox>
+
+			<!-- expiration date -->
+			<ActionCheckbox
+				v-if="canHaveExpirationDate"
+				:checked.sync="hasExpirationDate"
+				:disabled="config.isDefaultInternalExpireDateEnforced || saving"
+				@uncheck="onExpirationDisable">
+				{{ config.isDefaultInternalExpireDateEnforced
+					? t('files_sharing', 'Expiration date enforced')
+					: t('files_sharing', 'Set expiration date') }}
+			</ActionCheckbox>
+			<ActionInput v-if="canHaveExpirationDate && hasExpirationDate"
+				ref="expireDate"
+				v-tooltip.auto="{
+					content: errors.expireDate,
+					show: errors.expireDate,
+					trigger: 'manual'
+				}"
+				:class="{ error: errors.expireDate}"
+				:disabled="saving"
+				:first-day-of-week="firstDay"
+				:lang="lang"
+				:value="share.expireDate"
+				value-type="format"
+				icon="icon-calendar-dark"
+				type="date"
+				@change:value="addExpirationDate">
+				{{ t('files_sharing', 'Enter a date') }}
+			</ActionInput>
+		</template>
+		<template v-else>
+			<!-- folder -->
+			<template v-if="isFolder && config.isPublicUploadEnabled">
+				<ActionRadio :checked="sharePermissions === publicUploadRValue"
+					:value="publicUploadRValue"
+					:name="randomId"
+					@change="addPermissions"
+					:disabled="saving">
+					{{ t('files_sharing', 'Read only') }}
+				</ActionRadio>
+
+				<ActionRadio :checked="sharePermissions === publicUploadRWValue"
+					:value="publicUploadRWValue"
+					:disabled="saving"
+					@change="addPermissions"
+					:name="randomId">
+					{{ t('files_sharing', 'Allow upload and editing') }}
+				</ActionRadio>
+			</template>
+			<!-- file -->
+			<template v-else>
+				<ActionRadio :checked="sharePermissions === publicUploadRValue"
+					:value="publicUploadRValue"
+					:name="randomId"
+					@change="addPermissions"
+					:disabled="saving">
+					{{ t('files_sharing', 'Read only') }}
+				</ActionRadio>
+
+				<ActionRadio :checked="sharePermissions === publicUploadEValue"
+					:value="publicUploadEValue"
+					:disabled="saving"
+					@change="addPermissions"
+					:name="randomId">
+					{{ t('files_sharing', 'Editing') }}
+				</ActionRadio>
+			</template>
+
+			<label>
+				{{ t('files_sharing', 'Advanced settings') }}
+			</label>
+			<!-- reshare permission -->
+			<ActionCheckbox
+				v-if="config.isResharingAllowed"
+				ref="canReshare"
+				:checked.sync="canReshare"
+				@change="updatePermissions"
+				:disabled="saving || !canSetReshare">
+				{{ t('files_sharing', 'Allow resharing') }}
+			</ActionCheckbox>
+			<!-- expiration date -->
+			<ActionCheckbox
+				v-if="canHaveExpirationDate"
+				:checked.sync="hasExpirationDate"
+				:disabled="config.isDefaultInternalExpireDateEnforced || saving"
+				@uncheck="onExpirationDisable">
+				{{ config.isDefaultInternalExpireDateEnforced
+					? t('files_sharing', 'Expiration date enforced')
+					: t('files_sharing', 'Set expiration date') }}
+			</ActionCheckbox>
+			<ActionInput v-if="canHaveExpirationDate && hasExpirationDate"
+				ref="expireDate"
+				v-tooltip.auto="{
+					content: errors.expireDate,
+					show: errors.expireDate,
+					trigger: 'manual'
+				}"
+				:class="{ error: errors.expireDate}"
+				:disabled="saving"
+				:first-day-of-week="firstDay"
+				:lang="lang"
+				:value="share.expireDate"
+				value-type="format"
+				icon="icon-calendar-dark"
+				type="date"
+				@change:value="addExpirationDate">
+				{{ t('files_sharing', 'Enter a date') }}
+			</ActionInput>
+		</template>
+
+		<button class="status-buttons__select"
+			:name="randomId"
+			:disabled="saving"
+			@click="cancelSharing">
+			{{ t('files_sharing', 'Cancel') }}
+		</button>
+		<template v-if="share.id > 0">
+			<button class="status-buttons__primary primary"
+				:name="randomId"
+				:disabled="saving"
+				@click="confirmSharing">
+				{{ t('files_sharing', 'Confirm') }}
+			</button>
+		</template>
+		<template v-else>
+			<button class="status-buttons__primary primary"
+				:name="randomId"
+				:disabled="saving"
+				@click="nextSharing">
+				{{ t('files_sharing', 'Next') }}
+			</button>
+		</template>
+	</ul>
+</template>
+
+<script>
+import ActionRadio from '@nextcloud/vue/dist/Components/ActionRadio'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+
+import SharesMixin from '../mixins/SharesMixin'
+import ShareTypes from '../mixins/ShareTypes'
+import GeneratePassword from '../utils/GeneratePassword'
+import Vue from 'vue'
+import { mapGetters } from 'vuex'
+import ShareRequests from '../mixins/ShareRequests'
+
+export default {
+	name: 'SharingPermissions',
+
+	components: {
+		ActionRadio,
+		ActionCheckbox,
+		ActionInput,
+	},
+
+	mounted() {
+		// this.$root.$on('optionValues', data => {
+		// 	this.optionValues = data
+		// })
+	},
+
+	directives: {
+		Tooltip,
+	},
+
+	mixins: [SharesMixin, ShareTypes, ShareRequests],
+
+	data() {
+		return {
+			permissionsEdit: OC.PERMISSION_UPDATE,
+			permissionsCreate: OC.PERMISSION_CREATE,
+			permissionsDelete: OC.PERMISSION_DELETE,
+			permissionsRead: OC.PERMISSION_READ,
+			permissionsShare: OC.PERMISSION_SHARE,
+
+			publicUploadRWValue: OC.PERMISSION_UPDATE | OC.PERMISSION_CREATE | OC.PERMISSION_READ | OC.PERMISSION_DELETE,
+			publicUploadRValue: OC.PERMISSION_READ,
+			publicUploadWValue: OC.PERMISSION_CREATE,
+			publicUploadEValue: OC.PERMISSION_UPDATE | OC.PERMISSION_READ,
+		}
+	},
+
+	computed: {
+		...mapGetters({
+			fromInput: 'getFromInput',
+			optionValues: 'getOption'
+		}),
+		/**
+		 * Return the current share permissions
+		 * We always ignore the SHARE permission as this is used for the
+		 * federated sharing.
+		 * @returns {number}
+		 */
+		sharePermissions() {
+			if (this.isExteranlShare) {
+				return this.share.permissions
+			} else {
+				return ~OC.PERMISSION_SHARE & this.share.permissions
+			}
+		},
+		/**
+		 * Generate a unique random id for this SharingPermissions only
+		 * This allows ActionRadios to have the same name prop
+		 * but not to impact others SharingPermissions
+		 * @returns {string}
+		 */
+		randomId() {
+			return Math.random().toString(27).substr(2)
+		},
+
+		canHaveNote() {
+			return !this.isRemote
+		},
+
+		canHaveExpirationDate() {
+			return !this.isRemoteShare
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can edit the file ?
+		 *
+		 * @returns {boolean}
+		 */
+		canSetEdit() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_UPDATE) || this.canEdit
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can create the file ?
+		 *
+		 * @returns {boolean}
+		 */
+		canSetCreate() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_CREATE) || this.canCreate
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can delete the file ?
+		 *
+		 * @returns {boolean}
+		 */
+		canSetDelete() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_DELETE) || this.canDelete
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can reshare the file ?
+		 *
+		 * @returns {boolean}
+		 */
+		canSetReshare() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_SHARE) || this.canReshare
+		},
+
+		/**
+		 * Can the sharee reshare the file ?
+		 */
+		canReshare: {
+			get() {
+				return this.share.hasSharePermission
+			},
+			set(checked) {
+				this.updatePermissions({ isReshareChecked: checked })
+			},
+		},
+
+		// if newPassword exists, but is empty, it means
+		// the user deleted the original password
+		hasUnsavedPassword() {
+			return this.share.newPassword !== undefined
+		},
+
+		/**
+		 * Is the current share a folder ?
+		 * @returns {boolean}
+		 */
+		isFolder() {
+			return this.fileInfo.type === 'dir'
+		},
+
+		/**
+		 * Does the current share have an expiration date
+		 * @returns {boolean}
+		 */
+		hasExpirationDate: {
+			get() {
+				return this.config.isDefaultInternalExpireDateEnforced || !!this.share.expireDate
+			},
+			set(enabled) {
+				this.share.expireDate = enabled
+					? this.config.defaultInternalExpirationDateString !== ''
+						? this.config.defaultInternalExpirationDateString
+						: moment().format('YYYY-MM-DD')
+					: ''
+			},
+		},
+
+		/**
+		 * Is the current share password protected ?
+		 * @returns {boolean}
+		 */
+		isPasswordProtected: {
+			get() {
+				return this.config.enforcePasswordForPublicLink || !!this.share.password
+			},
+			async set(enabled) {
+				// TODO: directly save after generation to make sure the share is always protected
+				Vue.set(this.share, 'password', enabled ? await GeneratePassword() : '')
+				Vue.set(this.share, 'newPassword', this.share.password)
+			},
+		},
+
+		/**
+		 * Does the current file/folder have create permissions
+		 * TODO: move to a proper FileInfo model?
+		 * @returns {boolean}
+		 */
+		fileHasCreatePermission() {
+			return !!(this.fileInfo.permissions & OC.PERMISSION_CREATE)
+		},
+
+		dateMaxEnforced() {
+			if (!this.isRemote) {
+				return this.config.isDefaultInternalExpireDateEnforced
+					&& moment().add(1 + this.config.defaultInternalExpireDate, 'days')
+			} else {
+				return this.config.isDefaultRemoteExpireDateEnforced
+					&& moment().add(1 + this.config.defaultRemoteExpireDate, 'days')
+			}
+		},
+
+		isExteranlShare() {
+			if (this.fromInput) {
+				return Boolean(this.SHARE_TYPES.SHARE_TYPE_EMAIL === this.optionValues.shareType
+				|| this.SHARE_TYPES.SHARE_TYPE_LINK === this.optionValues.shareType)
+			} else {
+				return Boolean(this.SHARE_TYPES.SHARE_TYPE_EMAIL === this.share.type
+				|| this.SHARE_TYPES.SHARE_TYPE_LINK === this.share.type)
+			}
+		},
+
+	},
+
+	methods: {
+		addPasswordProtectedByTalkChange(event) {
+			this.share.sendPasswordByTalk = event.target.checked
+		},
+
+		addHideDownload(event) {
+			this.share.hideDownload = event.target.checked
+		},
+
+		addExpirationDate(date) {
+			// format to YYYY-MM-DD
+			const value = moment(date).format('YYYY-MM-DD')
+			this.share.expireDate = value
+			// this.queueUpdate('expireDate')
+		},
+
+		/**
+		 * On permissions change
+		 * @param {Event} event js event
+		 */
+		updatePermissions() {
+			console.debug('can reshare ', this.canReshare)
+			console.debug('share permissions ', this.permissionsShare)
+			const permissions = this.share.permissions
+			| (this.canReshare ? this.permissionsShare : 0)
+			this.share.permissions = permissions
+			console.debug('update permissions ', this.share.permissions)
+		},
+
+		addPermissions(event) {
+			if (this.isExteranlShare) {
+				const permissions = parseInt(event.target.value, 10)
+				this.share.permissions = permissions
+			} else {
+				const permissions = parseInt(event.target.value, 10)
+				| (this.canReshare ? this.permissionsShare : 0)
+				this.share.permissions = permissions
+			}
+		},
+
+		cancelSharing() {
+			this.$store.commit('addCurrentTab', 'default')
+		},
+
+		nextSharing() {
+			this.$store.commit('addShare', this.share)
+			this.$store.commit('addCurrentTab', 'notes')
+		},
+
+		confirmSharing() {
+			this.loading = true
+			this.updateShare(this.share.id, {
+				permissions: this.share.permissions,
+				hide_download: this.share.hideDownload,
+				password: this.share.password,
+				expiration: this.share.expireDate,
+				password_by_talk: this.share.sendPasswordByTalk,
+			})
+			this.loading = true
+			this.$store.commit('addCurrentTab', 'default')
+		},
+
+		/**
+		 * Is it possible to protect the password by Talk?
+		 * @returns {boolean}
+		 */
+		isPasswordProtectedByTalkAvailable() {
+			return this.isPasswordProtected && this.isTalkEnabled
+		},
+
+		canTogglePasswordProtectedByTalkAvailable() {
+			if (!this.isPasswordProtected) {
+				// Makes no sense
+				return false
+			} else if (this.isEmailShareType && !this.hasUnsavedPassword) {
+				// For email shares we need a new password in order to enable or
+				// disable
+				return false
+			}
+
+			// Anything else should be fine
+			return true
+		},
+	},
+}
+</script>
diff --git a/apps/files_sharing/src/files_sharing_tab.js b/apps/files_sharing/src/files_sharing_tab.js
index 2c12703ab83f2..ecc51a061c9a2 100644
--- a/apps/files_sharing/src/files_sharing_tab.js
+++ b/apps/files_sharing/src/files_sharing_tab.js
@@ -29,6 +29,7 @@ import SharingTab from './views/SharingTab'
 import ShareSearch from './services/ShareSearch'
 import ExternalLinkActions from './services/ExternalLinkActions'
 import TabSections from './services/TabSections'
+import store from './store'
 
 // Init Sharing Tab Service
 if (!window.OCA.Sharing) {
@@ -60,6 +61,7 @@ window.addEventListener('DOMContentLoaded', function() {
 				TabInstance = new View({
 					// Better integration with vue parent component
 					parent: context,
+					store,
 				})
 				// Only mount after we have all the info we need
 				await TabInstance.update(fileInfo)
@@ -67,6 +69,7 @@ window.addEventListener('DOMContentLoaded', function() {
 			},
 			update(fileInfo) {
 				TabInstance.update(fileInfo)
+				store.commit('addCurrentTab', 'default')
 			},
 			destroy() {
 				TabInstance.$destroy()
diff --git a/apps/files_sharing/src/mixins/SharesMixin.js b/apps/files_sharing/src/mixins/SharesMixin.js
index b4da09c1b1c06..9170a35bc8d5b 100644
--- a/apps/files_sharing/src/mixins/SharesMixin.js
+++ b/apps/files_sharing/src/mixins/SharesMixin.js
@@ -188,7 +188,7 @@ export default {
 		 */
 		onExpirationDisable() {
 			this.share.expireDate = ''
-			this.queueUpdate('expireDate')
+			// this.queueUpdate('expireDate')
 		},
 
 		/**
diff --git a/apps/files_sharing/src/store.js b/apps/files_sharing/src/store.js
new file mode 100644
index 0000000000000..cc6d643c2b2cd
--- /dev/null
+++ b/apps/files_sharing/src/store.js
@@ -0,0 +1,78 @@
+/**
+ * @copyright Copyright (c) 2021 Yogesh Shejwadkar <yogesh.shejwadkar@t-systems.com>
+ *
+ * @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/>.
+ *
+ */
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+import Share from './models/Share'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+	state: {
+		share: {
+			type: Share,
+			default: null,
+		},
+		option: {},
+		fromInput: Boolean,
+		currentTab: 'default',
+	},
+	mutations: {
+		addShare(state, share) {
+			state.share = share
+			console.debug('this is addShare mutation', share)
+		},
+		addOption(state, option) {
+			state.option = option
+			console.debug('this is addOptions mutation', option)
+		},
+		addFromInput(state, fromInput) {
+			state.fromInput = fromInput
+			console.debug('this is addFromInput mutation', fromInput)
+		},
+		addCurrentTab(state, currentTab) {
+			state.currentTab = currentTab
+			console.debug('this is addCurrentTab mutation', currentTab)
+		},
+	},
+	actions: {
+
+	},
+	getters: {
+		getShare(state) {
+			console.debug('this is getter getShare', state.share)
+			return state.share
+		},
+		getOption(state) {
+			console.debug('this is getter getOption', state.option)
+			return state.option
+		},
+		getFromInput(state) {
+			console.debug('this is getter getFromInput', state.fromInput)
+			return state.fromInput
+		},
+		getCurrentTab(state) {
+			console.debug('this is getter getCurrentTab', state.currentTab)
+			return state.currentTab
+		},
+	},
+})
+
+export default store
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index e08ce261522e1..f1e3f43ef9505 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -30,57 +30,71 @@
 
 		<!-- shares content -->
 		<template v-else>
-			<!-- shared with me information -->
-			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
-				<template #avatar>
-					<Avatar
-						:user="sharedWithMe.user"
-						:display-name="sharedWithMe.displayName"
-						class="sharing-entry__avatar"
-						tooltip-message="" />
-				</template>
-			</SharingEntrySimple>
-
-			<!-- add new share input -->
-			<SharingInput v-if="!loading"
-				:can-reshare="canReshare"
-				:file-info="fileInfo"
-				:link-shares="linkShares"
-				:reshare="reshare"
-				:shares="shares"
-				@add:share="addShare" />
-
-			<!-- link shares list -->
-			<SharingLinkList v-if="!loading"
-				ref="linkShareList"
-				:can-reshare="canReshare"
-				:file-info="fileInfo"
-				:shares="linkShares" />
-
-			<!-- other shares list -->
-			<SharingList v-if="!loading"
-				ref="shareList"
-				:shares="shares"
-				:file-info="fileInfo" />
-
-			<!-- inherited shares -->
-			<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
-
-			<!-- internal link copy -->
-			<SharingEntryInternal :file-info="fileInfo" />
-
-			<!-- projects -->
-			<CollectionList v-if="fileInfo"
-				:id="`${fileInfo.id}`"
-				type="file"
-				:name="fileInfo.name" />
-
-			<!-- additionnal entries, use it with cautious -->
-			<div v-for="(section, index) in sections"
-				:ref="'section-' + index"
-				:key="index"
-				class="sharingTab__additionalContent">
-				<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
+			<div v-if="currentTab == 'default'">
+				<!-- shared with me information -->
+				<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
+					<template #avatar>
+						<Avatar
+							:user="sharedWithMe.user"
+							:display-name="sharedWithMe.displayName"
+							class="sharing-entry__avatar"
+							tooltip-message="" />
+					</template>
+				</SharingEntrySimple>
+
+				<!-- add new share input -->
+				<SharingInput v-if="!loading"
+					:can-reshare="canReshare"
+					:file-info="fileInfo"
+					:link-shares="linkShares"
+					:reshare="reshare"
+					:shares="shares"
+					@add:share="addShare" />
+
+				<!-- link shares list -->
+				<SharingLinkList v-if="!loading"
+					ref="linkShareList"
+					:can-reshare="canReshare"
+					:file-info="fileInfo"
+					:shares="linkShares" />
+
+				<!-- other shares list -->
+				<SharingList v-if="!loading"
+					ref="shareList"
+					:shares="shares"
+					:file-info="fileInfo" />
+
+				<!-- inherited shares -->
+				<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
+
+				<!-- internal link copy -->
+				<SharingEntryInternal :file-info="fileInfo" />
+
+				<!-- projects -->
+				<CollectionList v-if="fileInfo"
+					:id="`${fileInfo.id}`"
+					type="file"
+					:name="fileInfo.name" />
+
+				<!-- additionnal entries, use it with cautious -->
+				<div v-for="(section, index) in sections"
+					:ref="'section-' + index"
+					:key="index"
+					class="sharingTab__additionalContent">
+					<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
+				</div>
+			</div>
+			<div v-if="currentTab == 'permissions'">
+				<!-- sharing permissions -->
+				<SharingPermissions
+					:share="share"
+					:file-info="fileInfo" />
+			</div>
+			<div v-if="currentTab == 'notes'">
+				<!-- sharing notes -->
+				<SharingNotes
+					:share="share"
+					:file-info="fileInfo" />
 			</div>
 		</template>
 	</div>
@@ -99,10 +113,14 @@ import ShareTypes from '../mixins/ShareTypes'
 import SharingEntryInternal from '../components/SharingEntryInternal'
 import SharingEntrySimple from '../components/SharingEntrySimple'
 import SharingInput from '../components/SharingInput'
+import SharingPermissions from '../components/SharingPermissions'
+import SharingNotes from '../components/SharingNotes'
 
 import SharingInherited from './SharingInherited'
 import SharingLinkList from './SharingLinkList'
 import SharingList from './SharingList'
+// import store from '../store'
+import { mapGetters } from 'vuex'
 
 export default {
 	name: 'SharingTab',
@@ -116,6 +134,8 @@ export default {
 		SharingInput,
 		SharingLinkList,
 		SharingList,
+		SharingPermissions,
+		SharingNotes,
 	},
 
 	mixins: [ShareTypes],
@@ -141,6 +161,11 @@ export default {
 	},
 
 	computed: {
+		...mapGetters({
+			currentTab: 'getCurrentTab',
+			share: 'getShare',
+		}),
+
 		/**
 		 * Is this share shared with me?
 		 *
@@ -156,7 +181,22 @@ export default {
 		},
 	},
 
+	mounted() {
+		this.$root.$on('update', data => {
+			this.update(data)
+		})
+	},
+
 	methods: {
+
+		isLinkShare() {
+			return this.SHARE_TYPES.SHARE_TYPE_LINK === this.shareType
+		},
+
+		isEmailShare() {
+			return this.SHARE_TYPES.SHARE_TYPE_EMAIL === this.shareType
+		},
+
 		/**
 		 * Update current fileInfo and fetch new data
 		 * @param {Object} fileInfo the current file FileInfo