From 7df89e80e6b2dbaec31f3f483aceae2cc7007820 Mon Sep 17 00:00:00 2001
From: fenn-cs <fenn25.fn@gmail.com>
Date: Wed, 19 Jul 2023 02:11:27 +0100
Subject: [PATCH] Improve sharing flow

Resolves: https://github.com/nextcloud/server/issues/26691

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
---
 .../src/components/SharingEntry.vue           | 168 ++--
 .../src/components/SharingEntryLink.vue       |  15 +-
 .../SharingEntryQuickShareSelect.vue          | 108 +++
 .../src/components/SharingEntrySimple.vue     |   4 +-
 .../src/components/SharingInput.vue           |   4 +-
 .../src/views/SharingDetailsTab.vue           | 757 ++++++++++++++++++
 apps/files_sharing/src/views/SharingList.vue  |  10 +-
 apps/files_sharing/src/views/SharingTab.vue   |  21 +-
 apps/files_trashbin/tests/js/appSpec.js       |  70 ++
 apps/files_trashbin/tests/js/filelistSpec.js  | 397 +++++++++
 .../src/components/UserList/UserRow.vue       | 689 ++++++++++++++++
 .../src/components/UserList/UserRowSimple.vue | 205 +++++
 12 files changed, 2325 insertions(+), 123 deletions(-)
 create mode 100644 apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
 create mode 100644 apps/files_sharing/src/views/SharingDetailsTab.vue
 create mode 100644 apps/files_trashbin/tests/js/appSpec.js
 create mode 100644 apps/files_trashbin/tests/js/filelistSpec.js
 create mode 100644 apps/settings/src/components/UserList/UserRow.vue
 create mode 100644 apps/settings/src/components/UserList/UserRowSimple.vue

diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index 46b65c695eede..e199acdc3f6df 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -29,120 +29,39 @@
 			:menu-position="'left'"
 			:url="share.shareWithAvatar" />
 
-		<component :is="share.shareWithLink ? 'a' : 'div'"
-			:title="tooltip"
-			:aria-label="tooltip"
-			:href="share.shareWithLink"
-			class="sharing-entry__desc">
-			<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
-			<p v-if="hasStatus">
-				<span>{{ share.status.icon || '' }}</span>
-				<span>{{ share.status.message || '' }}</span>
-			</p>
-		</component>
-		<NcActions menu-align="right"
-			class="sharing-entry__actions"
-			@close="onMenuClose">
-			<template v-if="share.canEdit">
-				<!-- edit permission -->
-				<NcActionCheckbox ref="canEdit"
-					:checked.sync="canEdit"
-					:value="permissionsEdit"
-					:disabled="saving || !canSetEdit">
-					{{ t('files_sharing', 'Allow editing') }}
-				</NcActionCheckbox>
-
-				<!-- create permission -->
-				<NcActionCheckbox v-if="isFolder"
-					ref="canCreate"
-					:checked.sync="canCreate"
-					:value="permissionsCreate"
-					:disabled="saving || !canSetCreate">
-					{{ t('files_sharing', 'Allow creating') }}
-				</NcActionCheckbox>
-
-				<!-- delete permission -->
-				<NcActionCheckbox v-if="isFolder"
-					ref="canDelete"
-					:checked.sync="canDelete"
-					:value="permissionsDelete"
-					:disabled="saving || !canSetDelete">
-					{{ t('files_sharing', 'Allow deleting') }}
-				</NcActionCheckbox>
-
-				<!-- reshare permission -->
-				<NcActionCheckbox v-if="config.isResharingAllowed"
-					ref="canReshare"
-					:checked.sync="canReshare"
-					:value="permissionsShare"
-					:disabled="saving || !canSetReshare">
-					{{ t('files_sharing', 'Allow resharing') }}
-				</NcActionCheckbox>
-
-				<NcActionCheckbox v-if="isSetDownloadButtonVisible"
-					ref="canDownload"
-					:checked.sync="canDownload"
-					:disabled="saving || !canSetDownload">
-					{{ allowDownloadText }}
-				</NcActionCheckbox>
-
-				<!-- expiration date -->
-				<NcActionCheckbox :checked.sync="hasExpirationDate"
-					:disabled="config.isDefaultInternalExpireDateEnforced || saving"
-					@uncheck="onExpirationDisable">
-					{{ config.isDefaultInternalExpireDateEnforced
-						? t('files_sharing', 'Expiration date enforced')
-						: t('files_sharing', 'Set expiration date') }}
-				</NcActionCheckbox>
-				<NcActionInput v-if="hasExpirationDate"
-					ref="expireDate"
-					:is-native-picker="true"
-					:hide-label="true"
-					:class="{ error: errors.expireDate}"
-					:disabled="saving"
-					:value="new Date(share.expireDate)"
-					type="date"
-					:min="dateTomorrow"
-					:max="dateMaxEnforced"
-					@input="onExpirationChange">
-					{{ t('files_sharing', 'Enter a date') }}
-				</NcActionInput>
-
-				<!-- note -->
-				<template v-if="canHaveNote">
-					<NcActionCheckbox :checked.sync="hasNote"
-						:disabled="saving"
-						@uncheck="queueUpdate('note')">
-						{{ t('files_sharing', 'Note to recipient') }}
-					</NcActionCheckbox>
-					<NcActionTextEditable v-if="hasNote"
-						ref="note"
-						:class="{ error: errors.note}"
-						:disabled="saving"
-						:value="share.newNote || share.note"
-						icon="icon-edit"
-						@update:value="onNoteChange"
-						@submit="onNoteSubmit" />
-				</template>
+		<div class="sharing-entry__summary" @click="toggleQuickShareSelect">
+			<component :is="share.shareWithLink ? 'a' : 'div'"
+				:title="tooltip"
+				:aria-label="tooltip"
+				:href="share.shareWithLink"
+				class="sharing-entry__desc">
+				<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{
+					share.shareWithDisplayNameUnique }})</span></span>
+				<p v-if="hasStatus">
+					<span>{{ share.status.icon || '' }}</span>
+					<span>{{ share.status.message || '' }}</span>
+				</p>
+			</component>
+			<QuickShareSelect :options="options" :value.sync="selectedOption" :toggle="showDropdown" />
+		</div>
+		<NcButton class="sharing-entry__action"
+			:aria-label="t('files_sharing', 'Open Sharing Details')"
+			type="tertiary-no-background"
+			@click="openSharingDetails">
+			<template #icon>
+				<DotsHorizontalIcon :size="20" />
 			</template>
-
-			<NcActionButton v-if="share.canDelete"
-				icon="icon-close"
-				:disabled="saving"
-				@click.prevent="onDelete">
-				{{ t('files_sharing', 'Unshare') }}
-			</NcActionButton>
-		</NcActions>
+		</NcButton>
 	</li>
 </template>
 
 <script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+
+import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
 import SharesMixin from '../mixins/SharesMixin.js'
 
@@ -150,18 +69,20 @@ export default {
 	name: 'SharingEntry',
 
 	components: {
-		NcActions,
-		NcActionButton,
-		NcActionCheckbox,
-		NcActionInput,
-		NcActionTextEditable,
+		NcButton,
 		NcAvatar,
+		DotsHorizontalIcon,
+		NcSelect,
+		QuickShareSelect,
 	},
 
 	mixins: [SharesMixin],
 
 	data() {
 		return {
+			showDropdown: false,
+			selectedOption: 'Can view',
+			options: ['Can view', 'Can edit', 'File drop'],
 			permissionsEdit: OC.PERMISSION_UPDATE,
 			permissionsCreate: OC.PERMISSION_CREATE,
 			permissionsDelete: OC.PERMISSION_DELETE,
@@ -456,6 +377,12 @@ export default {
 		onMenuClose() {
 			this.onNoteSubmit()
 		},
+		openSharingDetails() {
+			this.$emit('open-sharing-details')
+		},
+		toggleQuickShareSelect() {
+			this.showDropdown = !this.showDropdown
+		},
 	},
 }
 </script>
@@ -465,21 +392,34 @@ export default {
 	display: flex;
 	align-items: center;
 	height: 44px;
+
 	&__desc {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-		padding: 8px;
+		padding-bottom: 0;
 		line-height: 1.2em;
+
 		p {
 			color: var(--color-text-maxcontrast);
 		}
+
 		&-unique {
 			color: var(--color-text-maxcontrast);
 		}
 	}
+
 	&__actions {
 		margin-left: auto;
 	}
+
+	&__summary {
+		padding: 8px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		width: 100%;
+	}
+
 }
 </style>
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 06c9cb708510f..3572a2560fb5a 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -32,6 +32,7 @@
 			<p v-if="subtitle">
 				{{ subtitle }}
 			</p>
+			<QuickShareSelect :options="options" :value.sync="selectedOption" :toggle="showDropdown" />
 		</div>
 
 		<!-- clipboard -->
@@ -292,6 +293,8 @@ import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEdi
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
+import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
+
 import ExternalShareAction from './ExternalShareAction.vue'
 import SharePermissionsEditor from './SharePermissionsEditor.vue'
 import GeneratePassword from '../utils/GeneratePassword.js'
@@ -313,6 +316,7 @@ export default {
 		NcAvatar,
 		ExternalShareAction,
 		SharePermissionsEditor,
+		QuickShareSelect,
 	},
 
 	mixins: [SharesMixin],
@@ -330,6 +334,9 @@ export default {
 
 	data() {
 		return {
+			showDropdown: false,
+			selectedOption: 'Can edit',
+			options: ['Can view', 'Can edit', 'File drop'],
 			copySuccess: true,
 			copied: false,
 
@@ -671,7 +678,7 @@ export default {
 		 * accordingly
 		 *
 		 * @param {Share} share the new share
-		 * @param {boolean} [update=false] do we update the current share ?
+		 * @param {boolean} [update] do we update the current share ?
 		 */
 		async pushNewLinkShare(share, update) {
 			try {
@@ -879,6 +886,12 @@ export default {
 	display: flex;
 	align-items: center;
 	min-height: 44px;
+
+	// ::v-deep &__avatar {
+	// 	--size: 40px !important;
+	// 	line-height: 40px !important;
+	// }
+
 	&__desc {
 		display: flex;
 		flex-direction: column;
diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
new file mode 100644
index 0000000000000..4c1a636bc603e
--- /dev/null
+++ b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
@@ -0,0 +1,108 @@
+<template>
+	<div :class="{ 'active': showDropdown, 'share-select': true }">
+		<span class="trigger-text" @click="toggleDropdown">
+			{{ selectedOption }}
+			<DropdownIcon :size="15" />
+		</span>
+		<div v-if="showDropdown" class="share-select-dropdown-container">
+			<div v-for="option in options"
+				:key="option"
+				class="dropdown-item"
+				@click="selectOption(option)">
+				{{ option }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import DropdownIcon from 'vue-material-design-icons/TriangleSmallDown.vue'
+
+export default {
+	components: {
+		DropdownIcon,
+	},
+	props: {
+		options: {
+			type: Array,
+			required: true,
+		},
+		value: {
+			type: String,
+			required: true,
+		},
+		toggle: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			showDropdown: this.toggle,
+		}
+	},
+	computed: {
+		selectedOption() {
+			return this.value
+		},
+	},
+	methods: {
+		toggleDropdown() {
+			this.showDropdown = !this.showDropdown
+		},
+		selectOption(option) {
+			this.$emit('update:value', option)
+			this.showDropdown = false
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.share-select {
+    position: relative;
+    cursor: pointer;
+
+    .trigger-text {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 12.5px;
+        gap: 2px;
+        color: var(--color-primary-element);
+    }
+
+    .share-select-dropdown-container {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        // width: 100%;
+        background-color: #ffffff;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        padding: 4px 0;
+        z-index: 1;
+
+        .dropdown-item {
+            padding: 8px;
+            font-size: 12px;
+
+            &:hover {
+                background-color: #f2f2f2;
+            }
+        }
+    }
+
+    /* Optional: Add a transition effect for smoother dropdown animation */
+    .share-select-dropdown-container {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+
+    &.active .share-select-dropdown-container {
+        max-height: 200px;
+        /* Adjust the value to your desired height */
+    }
+}
+</style>
diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue
index daff947fe803b..5e858de990b44 100644
--- a/apps/files_sharing/src/components/SharingEntrySimple.vue
+++ b/apps/files_sharing/src/components/SharingEntrySimple.vue
@@ -29,8 +29,8 @@
 				{{ subtitle }}
 			</p>
 		</div>
-		<NcActions ref="actionsComponent"
-			v-if="$slots['default']"
+		<NcActions v-if="$slots['default']"
+			ref="actionsComponent"
 			class="sharing-entry__actions"
 			menu-align="right"
 			:aria-expanded="ariaExpandedValue">
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
index 8b740c1bac3b4..ee95f0ad746f2 100644
--- a/apps/files_sharing/src/components/SharingInput.vue
+++ b/apps/files_sharing/src/components/SharingInput.vue
@@ -24,6 +24,7 @@
 	<div class="sharing-search">
 		<label for="sharing-search-input">{{ t('files_sharing', 'Search for share recipients') }}</label>
 		<NcSelect ref="select"
+			v-model="value"
 			input-id="sharing-search-input"
 			class="sharing-search__input"
 			:disabled="!canReshare"
@@ -33,7 +34,6 @@
 			:clear-search-on-blur="() => false"
 			:user-select="true"
 			:options="options"
-			v-model="value"
 			@open="handleOpen"
 			@search="asyncFind"
 			@option:selected="addShare">
@@ -176,7 +176,7 @@ export default {
 		 * Get suggestions
 		 *
 		 * @param {string} search the search query
-		 * @param {boolean} [lookup=false] search on lookup server
+		 * @param {boolean} [lookup] search on lookup server
 		 */
 		async getSuggestions(search, lookup = false) {
 			this.loading = true
diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue
new file mode 100644
index 0000000000000..75176c0410749
--- /dev/null
+++ b/apps/files_sharing/src/views/SharingDetailsTab.vue
@@ -0,0 +1,757 @@
+<template>
+	<div class="sharingTabDetailsView">
+		<div class="sharingTabDetailsView__header">
+			<span>
+				<ShareIcon :size="40" />
+			</span>
+			<span>
+				<h1>{{ title }}</h1>
+				<small>{{ fileInfo.name }}</small>
+			</span>
+		</div>
+		<div class="sharingTabDetailsView__quick-permissions">
+			<div>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					value="r"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical">
+					{{ t('files_sharing', 'View only (default)') }}
+					<template #icon>
+						<ViewIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					value="rw"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical">
+					{{ t('files_sharing', 'Edit') }}
+					<template #icon>
+						<EditIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					value="rw+"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical">
+					{{ t('files_sharing', 'File drop') }}
+					<small>{{ t('files_sharing', 'Upload only') }}</small>
+					<template #icon>
+						<UploadIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					value="custom"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical"
+					@click="switchToCustomPermissions">
+					{{ t('files_sharing', 'Custom permissions') }}
+					<small>{{ t('files_sharing', 'Create, read & update') }}</small>
+					<template #icon>
+						<DotsHorizontalIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+			</div>
+		</div>
+		<div class="sharingTabDetailsView__advanced-control">
+			<NcButton type="tetiary"
+				alignment="end-reverse"
+				@click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
+				Advanced settings
+				<template #icon>
+					<MenuDownIcon />
+				</template>
+			</NcButton>
+		</div>
+		<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
+			<section>
+				<template v-if="canHaveNote">
+					<label>{{ t('file_sharing', 'Note to recipient') }}</label>
+					<textarea :model="noteToRecipient" :value="share.note" />
+				</template>
+				<NcCheckboxRadioSwitch :checked.sync="setPassword">
+					{{ t('file_sharing', 'Set password') }}
+				</NcCheckboxRadioSwitch>
+				<NcInputField v-if="setPassword" :value="''" :label="t('file_sharing', 'Password')" />
+
+				<NcCheckboxRadioSwitch :checked.sync="hasExpirationDate">
+					{{ t('file_sharing', 'Set expiration date') }}
+				</NcCheckboxRadioSwitch>
+				<NcInputField v-if="hasExpirationDate"
+					:value.sync="expirationDate"
+					type="date"
+					:min="dateTomorrow"
+					:max="dateMaxEnforced"
+					:label="t('file_sharing', 'Expiration date')"
+					@input="onExpirationChange" />
+				<NcCheckboxRadioSwitch :checked.sync="hideDownload">
+					{{ t('file_sharing', 'Hide download') }}
+				</NcCheckboxRadioSwitch>
+				<NcInputField :value.sync="shareLabel" :label-visible="true" :label="t('file_sharing', 'Share label')" />
+				<span style="display: none;"><label /></span>
+
+				<NcCheckboxRadioSwitch :checked.sync="setCustomPermissions">
+					{{ t('file_sharing', 'Custom permisions') }}
+				</NcCheckboxRadioSwitch>
+				<section v-if="setCustomPermissions" class="custom-permissions-group">
+					<NcCheckboxRadioSwitch v-if="isFolder" :checked.sync="canCreate" :value="permissionsCreate">
+						{{ t('file_sharing', 'Create') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :checked.sync="permissionsRead" :value="permissionsRead">
+						{{ t('file_sharing', 'Read') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :checked.sync="canEdit" :value="permissionsEdit">
+						{{ t('file_sharing', 'Update') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="config.isResharingAllowed"
+						:checked.sync="canReshare"
+						:value="permissionsShare">
+						{{ t('file_sharing', 'Share') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="isFolder" :checked.sync="canDelete" :value="permissionsDelete">
+						{{ t('file_sharing', 'Delete') }}
+					</NcCheckboxRadioSwitch>
+				</section>
+			</section>
+
+			<hr v-if="false">
+			<h2 v-if="false">
+				Old stuff to be transferred up
+			</h2>
+
+			<NcActions v-if="false"
+				menu-align="right"
+				class="sharing-entry__actions"
+				@close="onMenuClose">
+				<template v-if="share.canEdit">
+					<!-- edit permission -->
+					<NcActionCheckbox ref="canEdit"
+						:checked.sync="canEdit"
+						:value="permissionsEdit"
+						:disabled="saving || !canSetEdit">
+						{{ t('files_sharing', 'Allow editing') }}
+					</NcActionCheckbox>
+
+					<!-- create permission -->
+					<NcActionCheckbox v-if="isFolder"
+						ref="canCreate"
+						:checked.sync="canCreate"
+						:value="permissionsCreate"
+						:disabled="saving || !canSetCreate">
+						{{ t('files_sharing', 'Allow creating') }}
+					</NcActionCheckbox>
+
+					<!-- delete permission -->
+					<NcActionCheckbox v-if="isFolder"
+						ref="canDelete"
+						:checked.sync="canDelete"
+						:value="permissionsDelete"
+						:disabled="saving || !canSetDelete">
+						{{ t('files_sharing', 'Allow deleting') }}
+					</NcActionCheckbox>
+
+					<!-- reshare permission -->
+					<NcActionCheckbox v-if="config.isResharingAllowed"
+						ref="canReshare"
+						:checked.sync="canReshare"
+						:value="permissionsShare"
+						:disabled="saving || !canSetReshare">
+						{{ t('files_sharing', 'Allow resharing') }}
+					</NcActionCheckbox>
+
+					<NcActionCheckbox v-if="isSetDownloadButtonVisible"
+						ref="canDownload"
+						:checked.sync="canDownload"
+						:disabled="saving || !canSetDownload">
+						{{ allowDownloadText }}
+					</NcActionCheckbox>
+
+					<!-- expiration date -->
+					<NcActionCheckbox :checked.sync="hasExpirationDate"
+						:disabled="config.isDefaultInternalExpireDateEnforced || saving"
+						@uncheck="onExpirationDisable">
+						{{ config.isDefaultInternalExpireDateEnforced
+							? t('files_sharing', 'Expiration date enforced')
+							: t('files_sharing', 'Set expiration date') }}
+					</NcActionCheckbox>
+					<NcActionInput v-if="hasExpirationDate"
+						ref="expireDate"
+						:is-native-picker="true"
+						:hide-label="true"
+						:class="{ error: errors.expireDate }"
+						:disabled="saving"
+						:value="new Date(share.expireDate)"
+						type="date"
+						:min="dateTomorrow"
+						:max="dateMaxEnforced"
+						@input="onExpirationChange">
+						{{ t('files_sharing', 'Enter a date') }}
+					</NcActionInput>
+
+					<!-- note -->
+					<template v-if="canHaveNote">
+						<NcActionCheckbox :checked.sync="hasNote" :disabled="saving" @uncheck="queueUpdate('note')">
+							{{ t('files_sharing', 'Note to recipient') }}
+						</NcActionCheckbox>
+						<NcActionTextEditable v-if="hasNote"
+							ref="note"
+							:class="{ error: errors.note }"
+							:disabled="saving"
+							:value="share.newNote || share.note"
+							icon="icon-edit"
+							@update:value="onNoteChange"
+							@submit="onNoteSubmit" />
+					</template>
+				</template>
+				<NcActionButton v-if="share.canDelete"
+					icon="icon-close"
+					:disabled="saving"
+					@click.prevent="onDelete">
+					{{ t('files_sharing', 'Unshare') }}
+				</NcActionButton>
+			</NcActions>
+		</div>
+
+		<div class="sharingTabDetailsView__footer">
+			<NcButton aria-label="Delete link"
+				:disabled="disabled"
+				:readonly="readonly"
+				@click.prevent="onDelete"
+				v-if="share.canDelete"
+				type="tertiary-no-background">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+				{{ t('files_sharing', 'Delete link') }}
+			</NcButton>
+			<div class="button-group">
+				<NcButton @click="$emit('close-sharing-details')">
+					{{ t('file_sharing', 'Cancel') }}
+				</NcButton>
+				<NcButton type="primary" @click="shareAndCopyLink">
+					{{ t('file_sharing', 'Share & copy link') }}
+				</NcButton>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import ShareIcon from 'vue-material-design-icons/ShareVariant.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import EditIcon from 'vue-material-design-icons/Pencil.vue'
+import ViewIcon from 'vue-material-design-icons/Eye.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import MenuDownIcon from 'vue-material-design-icons/MenuDown.vue'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+
+/// Temp
+
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
+
+/// End temp
+
+import SharesMixin from '../mixins/SharesMixin.js'
+
+export default {
+	name: 'SharingDetailsTab',
+	components: {
+		NcButton,
+		NcInputField,
+		NcCheckboxRadioSwitch,
+		ShareIcon,
+		CloseIcon,
+		EditIcon,
+		ViewIcon,
+		UploadIcon,
+		MenuDownIcon,
+		DotsHorizontalIcon,
+		NcActions, // To be removed
+		NcActionButton, // To be removed
+		NcActionCheckbox, // To be removed
+		NcActionInput, // To be removed
+		NcActionTextEditable, // To be removed
+	},
+	mixins: [SharesMixin],
+	data() {
+		return {
+			setPassword: false,
+			password: '',
+			noteToRecipient: '',
+			sharingPermission: 'r',
+			expirationDate: new Date(this.share.expireDate),
+			hideDownload: false,
+			shareLabel: '',
+			setCustomPermissions: false,
+			advancedSectionAccordionExpanded: false,
+			permissionsEdit: OC.PERMISSION_UPDATE, /// These variables would probably replace the ones above
+			permissionsCreate: OC.PERMISSION_CREATE, /// These variables would probably replace the ones above
+			permissionsDelete: OC.PERMISSION_DELETE, /// These variables would probably replace the ones above
+			permissionsRead: OC.PERMISSION_READ,
+			permissionsShare: OC.PERMISSION_SHARE,
+		}
+	},
+
+	computed: {
+		title() {
+			let title = 'Share with ' + this.share.shareWithDisplayName
+			if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
+				title += ` (${t('files_sharing', 'group')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) {
+				title += ` (${t('files_sharing', 'conversation')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE) {
+				title += ` (${t('files_sharing', 'remote')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP) {
+				title += ` (${t('files_sharing', 'remote group')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GUEST) {
+				title += ` (${t('files_sharing', 'guest')})`
+			}
+			return title
+		},
+
+		tooltip() {
+			if (this.share.owner !== this.share.uidFileOwner) {
+				const data = {
+					// todo: strong or italic?
+					// but the t function escape any html from the data :/
+					user: this.share.shareWithDisplayName,
+					owner: this.share.ownerDisplayName,
+				}
+				if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
+					return t('files_sharing', 'Shared with the group {user} by {owner}', data)
+				} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) {
+					return t('files_sharing', 'Shared with the conversation {user} by {owner}', data)
+				}
+
+				return t('files_sharing', 'Shared with {user} by {owner}', data)
+			}
+			return null
+		},
+
+		canHaveNote() {
+			return !this.isRemote
+		},
+
+		isRemote() {
+			return this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE
+				|| this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can edit the file ?
+		 *
+		 * @return {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 ?
+		 *
+		 * @return {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 ?
+		 *
+		 * @return {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 ?
+		 *
+		 * @return {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 sharer set whether the sharee can download the file ?
+		 *
+		 * @return {boolean}
+		 */
+		canSetDownload() {
+			// 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.canDownload() || this.canDownload)
+		},
+
+		/**
+		 * Can the sharee edit the shared file ?
+		 */
+		canEdit: {
+			get() {
+				return this.share.hasUpdatePermission
+			},
+			set(checked) {
+				this.updatePermissions({ isEditChecked: checked })
+			},
+		},
+
+		/**
+		 * Can the sharee create the shared file ?
+		 */
+		canCreate: {
+			get() {
+				return this.share.hasCreatePermission
+			},
+			set(checked) {
+				this.updatePermissions({ isCreateChecked: checked })
+			},
+		},
+
+		/**
+		 * Can the sharee delete the shared file ?
+		 */
+		canDelete: {
+			get() {
+				return this.share.hasDeletePermission
+			},
+			set(checked) {
+				this.updatePermissions({ isDeleteChecked: checked })
+			},
+		},
+
+		/**
+		 * Can the sharee reshare the file ?
+		 */
+		canReshare: {
+			get() {
+				return this.share.hasSharePermission
+			},
+			set(checked) {
+				this.updatePermissions({ isReshareChecked: checked })
+			},
+		},
+
+		/**
+		 * Can the sharee download files or only view them ?
+		 */
+		canDownload: {
+			get() {
+				return this.share.hasDownloadPermission
+			},
+			set(checked) {
+				this.updatePermissions({ isDownloadChecked: checked })
+			},
+		},
+
+		/**
+		 * Is this share readable
+		 * Needed for some federated shares that might have been added from file drop links
+		 */
+		hasRead: {
+			get() {
+				return this.share.hasReadPermission
+			},
+		},
+
+		/**
+		 * Is the current share a folder ?
+		 *
+		 * @return {boolean}
+		 */
+		isFolder() {
+			return this.fileInfo.type === 'dir'
+		},
+
+		/**
+		 * Does the current share have an expiration date
+		 *
+		 * @return {boolean}
+		 */
+		hasExpirationDate: {
+			get() {
+				return this.config.isDefaultInternalExpireDateEnforced || !!this.share.expireDate
+			},
+			set(enabled) {
+				const defaultExpirationDate = this.config.defaultInternalExpirationDate
+					|| new Date(new Date().setDate(new Date().getDate() + 1))
+				this.share.expireDate = enabled
+					? this.formatDateToString(defaultExpirationDate)
+					: ''
+				console.debug('Expiration date status', enabled, this.share.expireDate)
+			},
+		},
+		dateMaxEnforced() {
+			if (!this.isRemote && this.config.isDefaultInternalExpireDateEnforced) {
+				return new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultInternalExpireDate))
+			} else if (this.config.isDefaultRemoteExpireDateEnforced) {
+				return new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultRemoteExpireDate))
+			}
+			return null
+		},
+
+		/**
+		 * @return {boolean}
+		 */
+		hasStatus() {
+			if (this.share.type !== this.SHARE_TYPES.SHARE_TYPE_USER) {
+				return false
+			}
+
+			return (typeof this.share.status === 'object' && !Array.isArray(this.share.status))
+		},
+
+		/**
+		 * @return {string}
+		 */
+		allowDownloadText() {
+			return t('files_sharing', 'Allow download')
+		},
+
+		/**
+		 * @return {boolean}
+		 */
+		isSetDownloadButtonVisible() {
+			// TODO: Implement download permission for circle shares instead of hiding the option.
+			//       https://github.com/nextcloud/server/issues/39161
+			if (this.share && this.share.type === this.SHARE_TYPES.SHARE_TYPE_CIRCLE) {
+				return false
+			}
+
+			const allowedMimetypes = [
+				// Office documents
+				'application/msword',
+				'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+				'application/vnd.ms-powerpoint',
+				'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+				'application/vnd.ms-excel',
+				'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+				'application/vnd.oasis.opendocument.text',
+				'application/vnd.oasis.opendocument.spreadsheet',
+				'application/vnd.oasis.opendocument.presentation',
+			]
+
+			return this.isFolder || allowedMimetypes.includes(this.fileInfo.mimetype)
+		},
+	},
+	mounted() {
+	},
+
+	methods: {
+		updatePermissions({
+			isEditChecked = this.canEdit,
+			isCreateChecked = this.canCreate,
+			isDeleteChecked = this.canDelete,
+			isReshareChecked = this.canReshare,
+			isDownloadChecked = this.canDownload,
+		} = {}) {
+			// calc permissions if checked
+			const permissions = 0
+				| (this.hasRead ? this.permissionsRead : 0)
+				| (isCreateChecked ? this.permissionsCreate : 0)
+				| (isDeleteChecked ? this.permissionsDelete : 0)
+				| (isEditChecked ? this.permissionsEdit : 0)
+				| (isReshareChecked ? this.permissionsShare : 0)
+
+			this.share.permissions = permissions
+			if (this.share.hasDownloadPermission !== isDownloadChecked) {
+				this.share.hasDownloadPermission = isDownloadChecked
+			}
+		},
+		/**
+		 * Save potential changed data on menu close
+		 */
+		onMenuClose() {
+			this.onNoteSubmit()
+		},
+		shareAndCopyLink() {
+
+			this.updatePermissions()
+			this.queueUpdate('permissions', 'attributes')
+		},
+		switchToCustomPermissions() {
+			if (this.sharingPermission === 'custom') {
+				this.advancedSectionAccordionExpanded = true
+				// this.setCustomPermissions = true;
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.sharingTabDetailsView {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 96%;
+	margin: 0 auto;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: left;
+		width: 100%;
+		margin-bottom: 0.2em;
+		box-sizing: border-box;
+
+		span:nth-child(1) {
+			align-items: center;
+			justify-content: center;
+			color: var(--color-primary-element);
+			padding: 0.1em;
+		}
+
+		span:nth-child(2) {
+			display: flex;
+			flex-direction: column;
+			justify-content: left;
+			align-items: flex-start;
+			text-align: left;
+
+			h1 {
+				margin: 0;
+				font-size: 16px;
+			}
+
+			small {
+				font-size: 12px;
+				margin-top: 0;
+				color: rgb(65, 62, 62);
+			}
+		}
+	}
+
+	&__quick-permissions {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 0.2em;
+		width: 100%;
+		margin: 0 auto;
+		border-radius: 0;
+
+		div {
+			width: 100%;
+
+			span {
+				width: 100%;
+
+				span:nth-child(1) {
+					align-items: center;
+					justify-content: center;
+					color: var(--color-primary-element);
+					padding: 0.1em;
+				}
+
+				::v-deep label {
+
+					span {
+						display: flex;
+						flex-direction: column;
+					}
+				}
+			}
+
+		}
+	}
+
+	&__advanced-control {
+		width: 100%;
+
+		button {
+			margin-top: 0.5em;
+		}
+
+	}
+
+	&__advanced {
+		width: 100%;
+		margin-bottom: 0.5em;
+		text-align: left;
+		padding-left: 0;
+
+		section {
+
+			textarea {
+				width: 100%;
+			}
+
+			/*
+              The following style is applied out of the component's scope
+              to remove padding from the label.checkbox-radio-switch__label,
+              which is used to group radio checkbox items. The use of ::v-deep
+              ensures that the padding is modified without being affected by
+              the component's scoping.
+              Without this achieving left alignment for the checkboxes would not
+              be possible.
+            */
+			span {
+				::v-deep label {
+					padding-left: 0 !important;
+					background-color: initial !important;
+					border: none !important;
+				}
+			}
+
+			section.custom-permissions-group {
+				padding-left: 1.5em;
+			}
+		}
+	}
+
+	&__footer {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-start;
+
+		>button:first-child {
+			color: rgb(223, 7, 7);
+		}
+
+		.button-group {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			margin-top: 16px;
+
+			button {
+				flex: 1;
+				margin-left: 16px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/apps/files_sharing/src/views/SharingList.vue b/apps/files_sharing/src/views/SharingList.vue
index 05dc87d9b0760..f832d7ed3e081 100644
--- a/apps/files_sharing/src/views/SharingList.vue
+++ b/apps/files_sharing/src/views/SharingList.vue
@@ -27,7 +27,8 @@
 			:file-info="fileInfo"
 			:share="share"
 			:is-unique="isUnique(share)"
-			@remove:share="removeShare" />
+			@remove:share="removeShare"
+			@open-sharing-details="onOpenSharingDetails(share)" />
 	</ul>
 </template>
 
@@ -83,6 +84,13 @@ export default {
 			// eslint-disable-next-line vue/no-mutating-props
 			this.shares.splice(index, 1)
 		},
+		onOpenSharingDetails(share) {
+            const openShareDetailsEventData = {
+				fileInfo: this.fileInfo,
+				share: share
+			};
+            this.$emit('open-sharing-details', openShareDetailsEventData);
+		},
 	},
 }
 </script>
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index bfaf8a766eed4..abf23c65ae3f7 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -29,7 +29,7 @@
 		</div>
 
 		<!-- shares content -->
-		<div v-else class="sharingTab__content">
+		<div v-if="!showSharingDetailsView" class="sharingTab__content">
 			<!-- shared with me information -->
 			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
 				<template #avatar>
@@ -59,7 +59,8 @@
 			<SharingList v-if="!loading"
 				ref="shareList"
 				:shares="shares"
-				:file-info="fileInfo" />
+				:file-info="fileInfo"
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- inherited shares -->
 			<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
@@ -74,6 +75,11 @@
 				:name="fileInfo.name" />
 		</div>
 
+		<!-- share details -->
+		<div v-else>
+			<SharingDetailsTab 	:file-info="shareDetailsData.fileInfo" :share="shareDetailsData.share" @close-sharing-details="toggleShareDetailsView" />
+		</div>
+
 		<!-- additional entries, use it with cautious -->
 		<div v-for="(section, index) in sections"
 			:ref="'section-' + index"
@@ -102,6 +108,7 @@ import SharingInput from '../components/SharingInput.vue'
 import SharingInherited from './SharingInherited.vue'
 import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
+import SharingDetailsTab from './SharingDetailsTab.vue'
 
 export default {
 	name: 'SharingTab',
@@ -115,6 +122,7 @@ export default {
 		SharingInput,
 		SharingLinkList,
 		SharingList,
+		SharingDetailsTab,
 	},
 
 	mixins: [ShareTypes],
@@ -137,6 +145,8 @@ export default {
 
 			sections: OCA.Sharing.ShareTabSections.getSections(),
 			projectsEnabled: loadState('core', 'projects_enabled', false),
+			showSharingDetailsView: false,
+			shareDetailsData: {},
 		}
 	},
 
@@ -307,7 +317,7 @@ export default {
 						'Shared with you by {owner}',
 						{ owner: this.fileInfo.shareOwner },
 						undefined,
-						{ escape: false }
+						{ escape: false },
 					),
 					user: this.fileInfo.shareOwnerId,
 				}
@@ -355,6 +365,11 @@ export default {
 				}
 			})
 		},
+
+		toggleShareDetailsView(eventData) {
+            this.shareDetailsData = eventData;
+			this.showSharingDetailsView = !this.showSharingDetailsView
+		},
 	},
 }
 </script>
diff --git a/apps/files_trashbin/tests/js/appSpec.js b/apps/files_trashbin/tests/js/appSpec.js
new file mode 100644
index 0000000000000..281e7bbc2ba4a
--- /dev/null
+++ b/apps/files_trashbin/tests/js/appSpec.js
@@ -0,0 +1,70 @@
+/**
+* @copyright 2014 Vincent Petry <pvince81@owncloud.com>
+ *
+ * @author Vincent Petry <vincent@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+describe('OCA.Trashbin.App tests', function() {
+	var App = OCA.Trashbin.App;
+
+	beforeEach(function() {
+		$('#testArea').append(
+			'<div id="app-navigation">' +
+			'<ul><li data-id="files"><a>Files</a></li>' +
+			'<li data-id="trashbin"><a>Trashbin</a></li>' +
+			'</div>' +
+			'<div id="app-content">' +
+			'<div id="app-content-files" class="hidden">' +
+			'</div>' +
+			'<div id="app-content-trashbin" class="hidden">' +
+			'</div>' +
+			'</div>' +
+			'</div>'
+		);
+		App.initialize($('#app-content-trashbin'));
+	});
+	afterEach(function() {
+		App._initialized = false;
+		App.fileList = null;
+	});
+
+	describe('initialization', function() {
+		it('creates a custom filelist instance', function() {
+			App.initialize();
+			expect(App.fileList).toBeDefined();
+			expect(App.fileList.$el.is('#app-content-trashbin')).toEqual(true);
+		});
+
+		it('registers custom file actions', function() {
+			var fileActions;
+			App.initialize();
+
+			fileActions = App.fileList.fileActions;
+
+			expect(fileActions.actions.all).toBeDefined();
+			expect(fileActions.actions.all.Restore).toBeDefined();
+			expect(fileActions.actions.all.Delete).toBeDefined();
+
+			expect(fileActions.actions.all.Rename).not.toBeDefined();
+			expect(fileActions.actions.all.Download).not.toBeDefined();
+
+			expect(fileActions.defaults.dir).toEqual('Open');
+		});
+	});
+});
diff --git a/apps/files_trashbin/tests/js/filelistSpec.js b/apps/files_trashbin/tests/js/filelistSpec.js
new file mode 100644
index 0000000000000..9e27188efb8b6
--- /dev/null
+++ b/apps/files_trashbin/tests/js/filelistSpec.js
@@ -0,0 +1,397 @@
+/**
+ * @copyright 2014 Vincent Petry <pvince81@owncloud.com>
+ *
+ * @author Abijeet <abijeetpatro@gmail.com>
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ * @author Jan C. Borchardt <hey@jancborchardt.net>
+ * @author Jan-Christoph Borchardt <hey@jancborchardt.net>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Robin Appelman <robin@icewind.nl>
+ * @author Vincent Petry <vincent@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+describe('OCA.Trashbin.FileList tests', function () {
+	var testFiles, alertStub, notificationStub, fileList, client;
+
+	beforeEach(function () {
+		alertStub = sinon.stub(OC.dialogs, 'alert');
+		notificationStub = sinon.stub(OC.Notification, 'show');
+
+		client = new OC.Files.Client({
+			host: 'localhost',
+			port: 80,
+			root: '/remote.php/dav/trashbin/user',
+			useHTTPS: OC.getProtocol() === 'https'
+		});
+
+		// init parameters and test table elements
+		$('#testArea').append(
+			'<div id="app-content">' +
+			// set this but it shouldn't be used (could be the one from the
+			// files app)
+			'<input type="hidden" id="permissions" value="31"></input>' +
+			// dummy controls
+			'<div class="files-controls">' +
+			'   <div class="actions creatable"></div>' +
+			'   <div class="notCreatable"></div>' +
+			'</div>' +
+			// dummy table
+			// TODO: at some point this will be rendered by the fileList class itself!
+			'<table class="files-filestable list-container view-grid">' +
+			'<thead><tr><th class="hidden column-name">' +
+			'<input type="checkbox" id="select_all_trash" class="select-all">' +
+			'<span class="name">Name</span>' +
+			'<span class="selectedActions hidden">' +
+			'<a href="" class="actions-selected"><span class="icon icon-more"></span><span>Actions</span>' +
+			'</span>' +
+			'</th></tr></thead>' +
+			'<tbody class="files-fileList"></tbody>' +
+			'<tfoot></tfoot>' +
+			'</table>' +
+			'<div class="emptyfilelist emptycontent">Empty content message</div>' +
+			'</div>'
+		);
+
+		testFiles = [{
+			id: 1,
+			type: 'file',
+			name: 'One.txt.d11111',
+			displayName: 'One.txt',
+			mtime: 11111000,
+			mimetype: 'text/plain',
+			etag: 'abc'
+		}, {
+			id: 2,
+			type: 'file',
+			name: 'Two.jpg.d22222',
+			displayName: 'Two.jpg',
+			mtime: 22222000,
+			mimetype: 'image/jpeg',
+			etag: 'def',
+		}, {
+			id: 3,
+			type: 'file',
+			name: 'Three.pdf.d33333',
+			displayName: 'Three.pdf',
+			mtime: 33333000,
+			mimetype: 'application/pdf',
+			etag: '123',
+		}, {
+			id: 4,
+			type: 'dir',
+			mtime: 99999000,
+			name: 'somedir.d99999',
+			displayName: 'somedir',
+			mimetype: 'httpd/unix-directory',
+			etag: '456'
+		}];
+
+		// register file actions like the trashbin App does
+		var fileActions = OCA.Trashbin.App._createFileActions(fileList);
+		fileList = new OCA.Trashbin.FileList(
+			$('#app-content'), {
+				fileActions: fileActions,
+				multiSelectMenu: [{
+					name: 'restore',
+					displayName: t('files', 'Restore'),
+					iconClass: 'icon-history',
+				},
+					{
+						name: 'delete',
+						displayName: t('files', 'Delete'),
+						iconClass: 'icon-delete',
+					}
+				],
+				client: client
+			}
+		);
+	});
+	afterEach(function () {
+		testFiles = undefined;
+		fileList.destroy();
+		fileList = undefined;
+
+		notificationStub.restore();
+		alertStub.restore();
+	});
+	describe('Initialization', function () {
+		it('Sorts by mtime by default', function () {
+			expect(fileList._sort).toEqual('mtime');
+			expect(fileList._sortDirection).toEqual('desc');
+		});
+		it('Always returns read and delete permission', function () {
+			expect(fileList.getDirectoryPermissions()).toEqual(OC.PERMISSION_READ | OC.PERMISSION_DELETE);
+		});
+	});
+	describe('Breadcrumbs', function () {
+		beforeEach(function () {
+			var data = {
+				status: 'success',
+				data: {
+					files: testFiles,
+					permissions: 1
+				}
+			};
+			fakeServer.respondWith(/\/index\.php\/apps\/files_trashbin\/ajax\/list.php\?dir=%2Fsubdir/, [
+				200, {
+					"Content-Type": "application/json"
+				},
+				JSON.stringify(data)
+			]);
+		});
+		it('links the breadcrumb to the trashbin view', function () {
+			fileList.changeDirectory('/subdir', false, true);
+			fakeServer.respond();
+			var $crumbs = fileList.$el.find('.files-controls .crumb');
+			expect($crumbs.length).toEqual(3);
+			expect($crumbs.eq(1).find('a').text()).toEqual('Home');
+			expect($crumbs.eq(1).find('a').attr('href'))
+				.toEqual(OC.getRootPath() + '/index.php/apps/files?view=trashbin&dir=/');
+			expect($crumbs.eq(2).find('a').text()).toEqual('subdir');
+			expect($crumbs.eq(2).find('a').attr('href'))
+				.toEqual(OC.getRootPath() + '/index.php/apps/files?view=trashbin&dir=/subdir');
+		});
+	});
+	describe('Rendering rows', function () {
+		it('renders rows with the correct data when in root', function () {
+			// dir listing is false when in root
+			fileList.setFiles(testFiles);
+			var $rows = fileList.$el.find('tbody tr');
+			var $tr = $rows.eq(0);
+			expect($rows.length).toEqual(4);
+			expect($tr.attr('data-id')).toEqual('1');
+			expect($tr.attr('data-type')).toEqual('file');
+			expect($tr.attr('data-file')).toEqual('One.txt.d11111');
+			expect($tr.attr('data-size')).not.toBeDefined();
+			expect($tr.attr('data-etag')).toEqual('abc');
+			expect($tr.attr('data-permissions')).toEqual('9'); // read and delete
+			expect($tr.attr('data-mime')).toEqual('text/plain');
+			expect($tr.attr('data-mtime')).toEqual('11111000');
+			expect($tr.find('a.name').attr('href')).toEqual('#');
+
+			expect($tr.find('.nametext').text().trim()).toEqual('One.txt');
+
+			expect(fileList.findFileEl('One.txt.d11111')[0]).toEqual($tr[0]);
+		});
+		it('renders rows with the correct data when in root after calling setFiles with the same data set', function () {
+			// dir listing is false when in root
+			fileList.setFiles(testFiles);
+			fileList.setFiles(fileList.files);
+			var $rows = fileList.$el.find('tbody tr');
+			var $tr = $rows.eq(0);
+			expect($rows.length).toEqual(4);
+			expect($tr.attr('data-id')).toEqual('1');
+			expect($tr.attr('data-type')).toEqual('file');
+			expect($tr.attr('data-file')).toEqual('One.txt.d11111');
+			expect($tr.attr('data-size')).not.toBeDefined();
+			expect($tr.attr('data-etag')).toEqual('abc');
+			expect($tr.attr('data-permissions')).toEqual('9'); // read and delete
+			expect($tr.attr('data-mime')).toEqual('text/plain');
+			expect($tr.attr('data-mtime')).toEqual('11111000');
+			expect($tr.find('a.name').attr('href')).toEqual('#');
+
+			expect($tr.find('.nametext').text().trim()).toEqual('One.txt');
+
+			expect(fileList.findFileEl('One.txt.d11111')[0]).toEqual($tr[0]);
+		});
+		it('renders rows with the correct data when in subdirectory', function () {
+			fileList.setFiles(testFiles.map(function (file) {
+				file.name = file.displayName;
+				return file;
+			}));
+			var $rows = fileList.$el.find('tbody tr');
+			var $tr = $rows.eq(0);
+			expect($rows.length).toEqual(4);
+			expect($tr.attr('data-id')).toEqual('1');
+			expect($tr.attr('data-type')).toEqual('file');
+			expect($tr.attr('data-file')).toEqual('One.txt');
+			expect($tr.attr('data-size')).not.toBeDefined();
+			expect($tr.attr('data-etag')).toEqual('abc');
+			expect($tr.attr('data-permissions')).toEqual('9'); // read and delete
+			expect($tr.attr('data-mime')).toEqual('text/plain');
+			expect($tr.attr('data-mtime')).toEqual('11111000');
+			expect($tr.find('a.name').attr('href')).toEqual('#');
+
+			expect($tr.find('.nametext').text().trim()).toEqual('One.txt');
+
+			expect(fileList.findFileEl('One.txt')[0]).toEqual($tr[0]);
+		});
+		it('does not render a size column', function () {
+			expect(fileList.$el.find('tbody tr .filesize').length).toEqual(0);
+		});
+	});
+	describe('File actions', function () {
+		describe('Deleting single files', function () {
+			// TODO: checks ajax call
+			// TODO: checks spinner
+			// TODO: remove item after delete
+			// TODO: bring back item if delete failed
+		});
+		describe('Restoring single files', function () {
+			// TODO: checks ajax call
+			// TODO: checks spinner
+			// TODO: remove item after restore
+			// TODO: bring back item if restore failed
+		});
+	});
+	describe('file previews', function () {
+		// TODO: check that preview URL is going through files_trashbin
+	});
+	describe('loading file list', function () {
+		// TODO: check that ajax URL is going through files_trashbin
+	});
+	describe('breadcrumbs', function () {
+		// TODO: test label + URL
+	});
+	describe('elementToFile', function () {
+		var $tr;
+
+		beforeEach(function () {
+			fileList.setFiles(testFiles);
+			$tr = fileList.findFileEl('One.txt.d11111');
+		});
+
+		it('converts data attributes to file info structure', function () {
+			var fileInfo = fileList.elementToFile($tr);
+			expect(fileInfo.id).toEqual(1);
+			expect(fileInfo.name).toEqual('One.txt.d11111');
+			expect(fileInfo.displayName).toEqual('One.txt');
+			expect(fileInfo.mtime).toEqual(11111000);
+			expect(fileInfo.etag).toEqual('abc');
+			expect(fileInfo.permissions).toEqual(OC.PERMISSION_READ | OC.PERMISSION_DELETE);
+			expect(fileInfo.mimetype).toEqual('text/plain');
+			expect(fileInfo.type).toEqual('file');
+		});
+	});
+	describe('Global Actions', function () {
+		beforeEach(function () {
+			fileList.setFiles(testFiles);
+			fileList.findFileEl('One.txt.d11111').find('input:checkbox').click();
+			fileList.findFileEl('Three.pdf.d33333').find('input:checkbox').click();
+			fileList.findFileEl('somedir.d99999').find('input:checkbox').click();
+			fileList.$el.find('.actions-selected').click();
+		});
+
+		afterEach(function () {
+			fileList.$el.find('.actions-selected').click();
+		});
+
+		describe('Delete', function () {
+			it('Shows trashbin actions', function () {
+				// visible because a few files were selected
+				expect($('.selectedActions').is(':visible')).toEqual(true);
+				expect($('.selectedActions .item-delete').is(':visible')).toEqual(true);
+				expect($('.selectedActions .item-restore').is(':visible')).toEqual(true);
+
+				// check
+				fileList.$el.find('.select-all').click();
+
+				// stays visible
+				expect($('.selectedActions').is(':visible')).toEqual(true);
+				expect($('.selectedActions .item-delete').is(':visible')).toEqual(true);
+				expect($('.selectedActions .item-restore').is(':visible')).toEqual(true);
+
+				// uncheck
+				fileList.$el.find('.select-all').click();
+
+				// becomes hidden now
+				expect($('.selectedActions').is(':visible')).toEqual(false);
+				expect($('.selectedActions .item-delete').is(':visible')).toEqual(false);
+				expect($('.selectedActions .item-restore').is(':visible')).toEqual(false);
+			});
+			it('Deletes selected files when "Delete" clicked', function (done) {
+				var request;
+				var promise = fileList._onClickDeleteSelected({
+					preventDefault: function () {
+					}
+				});
+				var files = ["One.txt.d11111", "Three.pdf.d33333", "somedir.d99999"];
+				expect(fakeServer.requests.length).toEqual(files.length);
+				for (var i = 0; i < files.length; i++) {
+					request = fakeServer.requests[i];
+					expect(request.url).toEqual(OC.getRootPath() + '/remote.php/dav/trashbin/user/trash/' + files[i]);
+					request.respond(200);
+				}
+				return promise.then(function () {
+					expect(fileList.findFileEl('One.txt.d11111').length).toEqual(0);
+					expect(fileList.findFileEl('Three.pdf.d33333').length).toEqual(0);
+					expect(fileList.findFileEl('somedir.d99999').length).toEqual(0);
+					expect(fileList.findFileEl('Two.jpg.d22222').length).toEqual(1);
+				}).then(done, done);
+			});
+			it('Deletes all files when all selected when "Delete" clicked', function (done) {
+				var request;
+				$('.select-all').click();
+				var promise = fileList._onClickDeleteSelected({
+					preventDefault: function () {
+					}
+				});
+				expect(fakeServer.requests.length).toEqual(1);
+				request = fakeServer.requests[0];
+				expect(request.url).toEqual(OC.getRootPath() + '/remote.php/dav/trashbin/user/trash');
+				request.respond(200);
+				return promise.then(function () {
+					expect(fileList.isEmpty).toEqual(true);
+				}).then(done, done);
+			});
+		});
+		describe('Restore', function () {
+			it('Restores selected files when "Restore" clicked', function (done) {
+				var request;
+				var promise = fileList._onClickRestoreSelected({
+					preventDefault: function () {
+					}
+				});
+				var files = ["One.txt.d11111", "Three.pdf.d33333", "somedir.d99999"];
+				expect(fakeServer.requests.length).toEqual(files.length);
+				for (var i = 0; i < files.length; i++) {
+					request = fakeServer.requests[i];
+					expect(request.url).toEqual(OC.getRootPath() + '/remote.php/dav/trashbin/user/trash/' + files[i]);
+					expect(request.requestHeaders.Destination).toEqual(OC.getRootPath() + '/remote.php/dav/trashbin/user/restore/' + files[i]);
+					request.respond(200);
+				}
+				return promise.then(function() {
+					expect(fileList.findFileEl('One.txt.d11111').length).toEqual(0);
+					expect(fileList.findFileEl('Three.pdf.d33333').length).toEqual(0);
+					expect(fileList.findFileEl('somedir.d99999').length).toEqual(0);
+					expect(fileList.findFileEl('Two.jpg.d22222').length).toEqual(1);
+				}).then(done, done);
+			});
+			it('Restores all files when all selected when "Restore" clicked', function (done) {
+				var request;
+				$('.select-all').click();
+				var promise = fileList._onClickRestoreSelected({
+					preventDefault: function () {
+					}
+				});
+				var files = ["One.txt.d11111", "Two.jpg.d22222", "Three.pdf.d33333", "somedir.d99999"];
+				expect(fakeServer.requests.length).toEqual(files.length);
+				for (var i = 0; i < files.length; i++) {
+					request = fakeServer.requests[i];
+					expect(request.url).toEqual(OC.getRootPath() + '/remote.php/dav/trashbin/user/trash/' + files[i]);
+					expect(request.requestHeaders.Destination).toEqual(OC.getRootPath() + '/remote.php/dav/trashbin/user/restore/' + files[i]);
+					request.respond(200);
+				}
+				return promise.then(function() {
+					expect(fileList.isEmpty).toEqual(true);
+				}).then(done, done);
+			});
+		});
+	});
+});
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
new file mode 100644
index 0000000000000..797156f18822a
--- /dev/null
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -0,0 +1,689 @@
+<!--
+  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Gary Kim <gary@garykim.dev>
+  -
+  - @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>
+	<!-- Obfuscated user: Logged in user does not have permissions to see all of the data -->
+	<div v-if="Object.keys(user).length ===1" :data-id="user.id" class="row">
+		<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
+			class="avatar">
+			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
+				:src="generateAvatar(user.id, isDarkTheme)"
+				alt=""
+				height="32"
+				width="32">
+		</div>
+		<div class="name">
+			{{ user.id }}
+		</div>
+		<div class="obfuscated">
+			{{ t('settings','You do not have permissions to see the details of this user') }}
+		</div>
+	</div>
+
+	<!-- User full data -->
+	<UserRowSimple v-else-if="!editing"
+		:editing.sync="editing"
+		:feedback-message="feedbackMessage"
+		:groups="groups"
+		:languages="languages"
+		:loading="loading"
+		:opened-menu.sync="openedMenu"
+		:settings="settings"
+		:show-config="showConfig"
+		:sub-admins-groups="subAdminsGroups"
+		:user-actions="userActions"
+		:user="user"
+		:is-dark-theme="isDarkTheme"
+		:class="{'row--menu-opened': openedMenu}" />
+	<div v-else
+		:class="{
+			'disabled': loading.delete || loading.disable,
+			'row--menu-opened': openedMenu
+		}"
+		:data-id="user.id"
+		class="row row--editable">
+		<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
+			class="avatar">
+			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
+				:src="generateAvatar(user.id, isDarkTheme)"
+				alt=""
+				height="32"
+				width="32">
+		</div>
+		<!-- dirty hack to ellipsis on two lines -->
+		<div v-if="user.backendCapabilities.setDisplayName" class="displayName">
+			<form :class="{'icon-loading-small': loading.displayName}"
+				class="displayName"
+				@submit.prevent="updateDisplayName">
+				<input :id="'displayName'+user.id+rand"
+					ref="displayName"
+					:disabled="loading.displayName||loading.all"
+					:value="user.displayname"
+					autocapitalize="off"
+					autocomplete="off"
+					autocorrect="off"
+					spellcheck="false"
+					type="text">
+				<input class="icon-confirm"
+					type="submit"
+					value="">
+			</form>
+		</div>
+		<div v-else class="name">
+			{{ user.id }}
+			<div class="displayName subtitle">
+				<div :title="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+					{{ user.displayname }}
+				</div>
+			</div>
+		</div>
+		<form v-if="settings.canChangePassword && user.backendCapabilities.setPassword"
+			:class="{'icon-loading-small': loading.password}"
+			class="password"
+			@submit.prevent="updatePassword">
+			<input :id="'password'+user.id+rand"
+				ref="password"
+				:disabled="loading.password || loading.all"
+				:minlength="minPasswordLength"
+				maxlength="469"
+				:placeholder="t('settings', 'Add new password')"
+				autocapitalize="off"
+				autocomplete="new-password"
+				autocorrect="off"
+				required
+				spellcheck="false"
+				type="password"
+				value="">
+			<input class="icon-confirm" type="submit" value="">
+		</form>
+		<div v-else />
+		<form :class="{'icon-loading-small': loading.mailAddress}"
+			class="mailAddress"
+			@submit.prevent="updateEmail">
+			<input :id="'mailAddress'+user.id+rand"
+				ref="mailAddress"
+				:disabled="loading.mailAddress||loading.all"
+				:placeholder="t('settings', 'Add new email address')"
+				:value="user.email"
+				autocapitalize="off"
+				autocomplete="new-password"
+				autocorrect="off"
+				spellcheck="false"
+				type="email">
+			<input class="icon-confirm" type="submit" value="">
+		</form>
+		<div :class="{'icon-loading-small': loading.groups}" class="groups">
+			<NcMultiselect :close-on-select="false"
+				:disabled="loading.groups||loading.all"
+				:limit="2"
+				:multiple="true"
+				:options="availableGroups"
+				:placeholder="t('settings', 'Add user to group')"
+				:tag-width="60"
+				:taggable="settings.isAdmin"
+				:value="userGroups"
+				class="multiselect-vue"
+				label="name"
+				tag-placeholder="create"
+				track-by="id"
+				@remove="removeUserGroup"
+				@select="addUserGroup"
+				@tag="createGroup">
+				<span slot="noResult">{{ t('settings', 'No results') }}</span>
+			</NcMultiselect>
+		</div>
+		<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
+			:class="{'icon-loading-small': loading.subadmins}"
+			class="subadmins">
+			<NcMultiselect :close-on-select="false"
+				:disabled="loading.subadmins||loading.all"
+				:limit="2"
+				:multiple="true"
+				:options="subAdminsGroups"
+				:placeholder="t('settings', 'Set user as admin for')"
+				:tag-width="60"
+				:value="userSubAdminsGroups"
+				class="multiselect-vue"
+				label="name"
+				track-by="id"
+				@remove="removeUserSubAdmin"
+				@select="addUserSubAdmin">
+				<span slot="noResult">{{ t('settings', 'No results') }}</span>
+			</NcMultiselect>
+		</div>
+		<div :title="usedSpace"
+			:class="{'icon-loading-small': loading.quota}"
+			class="quota">
+			<NcMultiselect :allow-empty="false"
+				:disabled="loading.quota||loading.all"
+				:options="quotaOptions"
+				:placeholder="t('settings', 'Select user quota')"
+				:taggable="true"
+				:value="userQuota"
+				class="multiselect-vue"
+				label="label"
+				tag-placeholder="create"
+				track-by="id"
+				@input="setUserQuota"
+				@tag="validateQuota" />
+		</div>
+		<div v-if="showConfig.showLanguages"
+			:class="{'icon-loading-small': loading.languages}"
+			class="languages">
+			<NcMultiselect :allow-empty="false"
+				:disabled="loading.languages||loading.all"
+				:options="languages"
+				:placeholder="t('settings', 'No language set')"
+				:value="userLanguage"
+				class="multiselect-vue"
+				group-label="label"
+				group-values="languages"
+				label="name"
+				track-by="code"
+				@input="setUserLanguage" />
+		</div>
+
+		<!-- don't show this on edit mode -->
+		<div v-if="showConfig.showStoragePath || showConfig.showUserBackend"
+			class="storageLocation" />
+		<div v-if="showConfig.showLastLogin" />
+
+		<div class="userActions">
+			<div v-if="!loading.all"
+				class="toggleUserActions">
+				<NcActions>
+					<NcActionButton icon="icon-checkmark"
+						:title="t('settings', 'Done')"
+						:aria-label="t('settings', 'Done')"
+						@click="editing = false" />
+				</NcActions>
+				<div v-click-outside="hideMenu" class="userPopoverMenuWrapper">
+					<button class="icon-more"
+						@click.prevent="toggleMenu" />
+					<div :class="{ 'open': openedMenu }" class="popovermenu">
+						<NcPopoverMenu :menu="userActions" />
+					</div>
+				</div>
+			</div>
+			<div :style="{opacity: feedbackMessage !== '' ? 1 : 0}"
+				class="feedback">
+				<div class="icon-checkmark" />
+				{{ feedbackMessage }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+
+import {
+	NcPopoverMenu,
+	NcMultiselect,
+	NcActions,
+	NcActionButton,
+} from '@nextcloud/vue'
+import UserRowSimple from './UserRowSimple'
+import UserRowMixin from '../../mixins/UserRowMixin'
+
+export default {
+	name: 'UserRow',
+	components: {
+		UserRowSimple,
+		NcPopoverMenu,
+		NcActions,
+		NcActionButton,
+		NcMultiselect,
+	},
+	directives: {
+		ClickOutside,
+	},
+	mixins: [UserRowMixin],
+	props: {
+		user: {
+			type: Object,
+			required: true,
+		},
+		settings: {
+			type: Object,
+			default: () => ({}),
+		},
+		groups: {
+			type: Array,
+			default: () => [],
+		},
+		subAdminsGroups: {
+			type: Array,
+			default: () => [],
+		},
+		quotaOptions: {
+			type: Array,
+			default: () => [],
+		},
+		showConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		languages: {
+			type: Array,
+			required: true,
+		},
+		externalActions: {
+			type: Array,
+			default: () => [],
+		},
+		isDarkTheme: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			rand: parseInt(Math.random() * 1000),
+			openedMenu: false,
+			feedbackMessage: '',
+			editing: false,
+			loading: {
+				all: false,
+				displayName: false,
+				password: false,
+				mailAddress: false,
+				groups: false,
+				subadmins: false,
+				quota: false,
+				delete: false,
+				disable: false,
+				languages: false,
+				wipe: false,
+			},
+		}
+	},
+	computed: {
+		/* USER POPOVERMENU ACTIONS */
+		userActions() {
+			const actions = [
+				{
+					icon: 'icon-delete',
+					text: t('settings', 'Delete user'),
+					action: this.deleteUser,
+				},
+				{
+					icon: 'icon-delete',
+					text: t('settings', 'Wipe all devices'),
+					action: this.wipeUserDevices,
+				},
+				{
+					icon: this.user.enabled ? 'icon-close' : 'icon-add',
+					text: this.user.enabled ? t('settings', 'Disable user') : t('settings', 'Enable user'),
+					action: this.enableDisableUser,
+				},
+			]
+			if (this.user.email !== null && this.user.email !== '') {
+				actions.push({
+					icon: 'icon-mail',
+					text: t('settings', 'Resend welcome email'),
+					action: this.sendWelcomeMail,
+				})
+			}
+			return actions.concat(this.externalActions)
+		},
+	},
+
+	methods: {
+		/* MENU HANDLING */
+		toggleMenu() {
+			this.openedMenu = !this.openedMenu
+		},
+		hideMenu() {
+			this.openedMenu = false
+		},
+
+		wipeUserDevices() {
+			const userid = this.user.id
+			OC.dialogs.confirmDestructive(
+				t('settings', 'In case of lost device or exiting the organization, this can remotely wipe the Nextcloud data from all devices associated with {userid}. Only works if the devices are connected to the internet.', { userid }),
+				t('settings', 'Remote wipe of devices'),
+				{
+					type: OC.dialogs.YES_NO_BUTTONS,
+					confirm: t('settings', 'Wipe {userid}\'s devices', { userid }),
+					confirmClasses: 'error',
+					cancel: t('settings', 'Cancel'),
+				},
+				(result) => {
+					if (result) {
+						this.loading.wipe = true
+						this.loading.all = true
+						this.$store.dispatch('wipeUserDevices', userid)
+							.then(() => {
+								this.loading.wipe = false
+								this.loading.all = false
+							})
+					}
+				},
+				true
+			)
+		},
+
+		deleteUser() {
+			const userid = this.user.id
+			OC.dialogs.confirmDestructive(
+				t('settings', 'Fully delete {userid}\'s account including all their personal files, app data, etc.', { userid }),
+				t('settings', 'Account deletion'),
+				{
+					type: OC.dialogs.YES_NO_BUTTONS,
+					confirm: t('settings', 'Delete {userid}\'s account', { userid }),
+					confirmClasses: 'error',
+					cancel: t('settings', 'Cancel'),
+				},
+				(result) => {
+					if (result) {
+						this.loading.delete = true
+						this.loading.all = true
+						return this.$store.dispatch('deleteUser', userid)
+							.then(() => {
+								this.loading.delete = false
+								this.loading.all = false
+							})
+					}
+				},
+				true
+			)
+		},
+
+		enableDisableUser() {
+			this.loading.delete = true
+			this.loading.all = true
+			const userid = this.user.id
+			const enabled = !this.user.enabled
+			return this.$store.dispatch('enableDisableUser', {
+				userid,
+				enabled,
+			})
+				.then(() => {
+					this.loading.delete = false
+					this.loading.all = false
+				})
+		},
+
+		/**
+		 * Set user displayName
+		 *
+		 * @param {string} displayName The display name
+		 */
+		updateDisplayName() {
+			const displayName = this.$refs.displayName.value
+			this.loading.displayName = true
+			this.$store.dispatch('setUserData', {
+				userid: this.user.id,
+				key: 'displayname',
+				value: displayName,
+			}).then(() => {
+				this.loading.displayName = false
+				this.$refs.displayName.value = displayName
+			})
+		},
+
+		/**
+		 * Set user password
+		 *
+		 * @param {string} password The email address
+		 */
+		updatePassword() {
+			const password = this.$refs.password.value
+			this.loading.password = true
+			this.$store.dispatch('setUserData', {
+				userid: this.user.id,
+				key: 'password',
+				value: password,
+			}).then(() => {
+				this.loading.password = false
+				this.$refs.password.value = '' // empty & show placeholder
+			})
+		},
+
+		/**
+		 * Set user mailAddress
+		 *
+		 * @param {string} mailAddress The email address
+		 */
+		updateEmail() {
+			const mailAddress = this.$refs.mailAddress.value
+			this.loading.mailAddress = true
+			this.$store.dispatch('setUserData', {
+				userid: this.user.id,
+				key: 'email',
+				value: mailAddress,
+			}).then(() => {
+				this.loading.mailAddress = false
+				this.$refs.mailAddress.value = mailAddress
+			})
+		},
+
+		/**
+		 * Create a new group and add user to it
+		 *
+		 * @param {string} gid Group id
+		 */
+		async createGroup(gid) {
+			this.loading = { groups: true, subadmins: true }
+			try {
+				await this.$store.dispatch('addGroup', gid)
+				const userid = this.user.id
+				await this.$store.dispatch('addUserGroup', { userid, gid })
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading = { groups: false, subadmins: false }
+			}
+			return this.$store.getters.getGroups[this.groups.length]
+		},
+
+		/**
+		 * Add user to group
+		 *
+		 * @param {object} group Group object
+		 */
+		async addUserGroup(group) {
+			if (group.canAdd === false) {
+				return false
+			}
+			this.loading.groups = true
+			const userid = this.user.id
+			const gid = group.id
+			try {
+				await this.$store.dispatch('addUserGroup', { userid, gid })
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.groups = false
+			}
+		},
+
+		/**
+		 * Remove user from group
+		 *
+		 * @param {object} group Group object
+		 */
+		async removeUserGroup(group) {
+			if (group.canRemove === false) {
+				return false
+			}
+
+			this.loading.groups = true
+			const userid = this.user.id
+			const gid = group.id
+
+			try {
+				await this.$store.dispatch('removeUserGroup', {
+					userid,
+					gid,
+				})
+				this.loading.groups = false
+				// remove user from current list if current list is the removed group
+				if (this.$route.params.selectedGroup === gid) {
+					this.$store.commit('deleteUser', userid)
+				}
+			} catch {
+				this.loading.groups = false
+			}
+		},
+
+		/**
+		 * Add user to group
+		 *
+		 * @param {object} group Group object
+		 */
+		async addUserSubAdmin(group) {
+			this.loading.subadmins = true
+			const userid = this.user.id
+			const gid = group.id
+
+			try {
+				await this.$store.dispatch('addUserSubAdmin', {
+					userid,
+					gid,
+				})
+				this.loading.subadmins = false
+			} catch (error) {
+				console.error(error)
+			}
+		},
+
+		/**
+		 * Remove user from group
+		 *
+		 * @param {object} group Group object
+		 */
+		async removeUserSubAdmin(group) {
+			this.loading.subadmins = true
+			const userid = this.user.id
+			const gid = group.id
+
+			try {
+				await this.$store.dispatch('removeUserSubAdmin', {
+					userid,
+					gid,
+				})
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.subadmins = false
+			}
+		},
+
+		/**
+		 * Dispatch quota set request
+		 *
+		 * @param {string | object} quota Quota in readable format '5 GB' or Object {id: '5 GB', label: '5GB'}
+		 * @return {string}
+		 */
+		async setUserQuota(quota = 'none') {
+			this.loading.quota = true
+			// ensure we only send the preset id
+			quota = quota.id ? quota.id : quota
+
+			try {
+				await this.$store.dispatch('setUserData', {
+					userid: this.user.id,
+					key: 'quota',
+					value: quota,
+				})
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.quota = false
+			}
+			return quota
+		},
+
+		/**
+		 * Validate quota string to make sure it's a valid human file size
+		 *
+		 * @param {string} quota Quota in readable format '5 GB'
+		 * @return {Promise|boolean}
+		 */
+		validateQuota(quota) {
+			// only used for new presets sent through @Tag
+			const validQuota = OC.Util.computerFileSize(quota)
+			if (validQuota !== null && validQuota >= 0) {
+				// unify format output
+				return this.setUserQuota(OC.Util.humanFileSize(OC.Util.computerFileSize(quota)))
+			}
+			// if no valid do not change
+			return false
+		},
+
+		/**
+		 * Dispatch language set request
+		 *
+		 * @param {object} lang language object {code:'en', name:'English'}
+		 * @return {object}
+		 */
+		async setUserLanguage(lang) {
+			this.loading.languages = true
+			// ensure we only send the preset id
+			try {
+				await this.$store.dispatch('setUserData', {
+					userid: this.user.id,
+					key: 'language',
+					value: lang.code,
+				})
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.languages = false
+			}
+			return lang
+		},
+
+		/**
+		 * Dispatch new welcome mail request
+		 */
+		sendWelcomeMail() {
+			this.loading.all = true
+			this.$store.dispatch('sendWelcomeMail', this.user.id)
+				.then(success => {
+					if (success) {
+						// Show feedback to indicate the success
+						this.feedbackMessage = t('setting', 'Welcome mail sent!')
+						setTimeout(() => {
+							this.feedbackMessage = ''
+						}, 2000)
+					}
+					this.loading.all = false
+				})
+		},
+
+	},
+}
+</script>
+<style scoped lang="scss">
+	// Force menu to be above other rows
+	.row--menu-opened {
+		z-index: 1 !important;
+	}
+	.row::v-deep .multiselect__single {
+		z-index: auto !important;
+	}
+</style>
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
new file mode 100644
index 0000000000000..eddc16a64a5cd
--- /dev/null
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -0,0 +1,205 @@
+<template>
+	<div class="row"
+		:class="{'disabled': loading.delete || loading.disable}"
+		:data-id="user.id">
+		<div class="avatar" :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}">
+			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
+				alt=""
+				width="32"
+				height="32"
+				:src="generateAvatar(user.id, isDarkTheme)">
+		</div>
+		<!-- dirty hack to ellipsis on two lines -->
+		<div class="name">
+			<div class="displayName subtitle">
+				<div :title="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+					<strong>
+						{{ user.displayname }}
+					</strong>
+				</div>
+			</div>
+			{{ user.id }}
+		</div>
+		<div />
+		<div class="mailAddress">
+			<div :title="user.email !== null && user.email.length > 20 ? user.email : ''" class="cellText">
+				{{ user.email }}
+			</div>
+		</div>
+		<div class="groups">
+			{{ userGroupsLabels }}
+		</div>
+		<div v-if="subAdminsGroups.length > 0 && settings.isAdmin" class="subAdminsGroups">
+			{{ userSubAdminsGroupsLabels }}
+		</div>
+		<div class="userQuota">
+			<div class="quota">
+				{{ userQuota }} ({{ usedSpace }})
+				<progress class="quota-user-progress"
+					:class="{'warn': usedQuota > 80}"
+					:value="usedQuota"
+					max="100" />
+			</div>
+		</div>
+		<div v-if="showConfig.showLanguages" class="languages">
+			{{ userLanguage.name }}
+		</div>
+		<div v-if="showConfig.showUserBackend || showConfig.showStoragePath" class="userBackend">
+			<div v-if="showConfig.showUserBackend" class="userBackend">
+				{{ user.backend }}
+			</div>
+			<div v-if="showConfig.showStoragePath" :title="user.storageLocation" class="storageLocation subtitle">
+				{{ user.storageLocation }}
+			</div>
+		</div>
+		<div v-if="showConfig.showLastLogin" :title="userLastLoginTooltip" class="lastLogin">
+			{{ userLastLogin }}
+		</div>
+
+		<div class="userActions">
+			<div v-if="canEdit && !loading.all" class="toggleUserActions">
+				<NcActions>
+					<NcActionButton icon="icon-rename"
+						:title="t('settings', 'Edit User')"
+						:aria-label="t('settings', 'Edit User')"
+						@click="toggleEdit" />
+				</NcActions>
+				<div class="userPopoverMenuWrapper">
+					<button v-click-outside="hideMenu"
+						class="icon-more"
+						:aria-label="t('settings', 'Toggle user actions menu')"
+						@click.prevent="toggleMenu" />
+					<div class="popovermenu" :class="{ 'open': openedMenu }" :aria-expanded="openedMenu">
+						<NcPopoverMenu :menu="userActions" />
+					</div>
+				</div>
+			</div>
+			<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">
+				<div class="icon-checkmark" />
+				{{ feedbackMessage }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ClickOutside from 'vue-click-outside'
+import { getCurrentUser } from '@nextcloud/auth'
+import UserRowMixin from '../../mixins/UserRowMixin'
+export default {
+	name: 'UserRowSimple',
+	components: {
+		NcPopoverMenu,
+		NcActionButton,
+		NcActions,
+	},
+	directives: {
+		ClickOutside,
+	},
+	mixins: [UserRowMixin],
+	props: {
+		user: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Object,
+			required: true,
+		},
+		showConfig: {
+			type: Object,
+			required: true,
+		},
+		userActions: {
+			type: Array,
+			required: true,
+		},
+		openedMenu: {
+			type: Boolean,
+			required: true,
+		},
+		feedbackMessage: {
+			type: String,
+			required: true,
+		},
+		subAdminsGroups: {
+			type: Array,
+			required: true,
+		},
+		settings: {
+			type: Object,
+			required: true,
+		},
+		isDarkTheme: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		userGroupsLabels() {
+			return this.userGroups
+				.map(group => group.name)
+				.join(', ')
+		},
+		userSubAdminsGroupsLabels() {
+			return this.userSubAdminsGroups
+				.map(group => group.name)
+				.join(', ')
+		},
+		usedSpace() {
+			if (this.user.quota.used) {
+				return t('settings', '{size} used', { size: OC.Util.humanFileSize(this.user.quota.used) })
+			}
+			return t('settings', '{size} used', { size: OC.Util.humanFileSize(0) })
+		},
+		canEdit() {
+			return getCurrentUser().uid !== this.user.id || this.settings.isAdmin
+		},
+		userQuota() {
+			let quota = this.user.quota.quota
+
+			if (quota === 'default') {
+				quota = this.settings.defaultQuota
+				if (quota !== 'none') {
+					// convert to numeric value to match what the server would usually return
+					quota = OC.Util.computerFileSize(quota)
+				}
+			}
+
+			// when the default quota is unlimited, the server returns -3 here, map it to "none"
+			if (quota === 'none' || quota === -3) {
+				return t('settings', 'Unlimited')
+			} else if (quota >= 0) {
+				return OC.Util.humanFileSize(quota)
+			}
+			return OC.Util.humanFileSize(0)
+		},
+	},
+	methods: {
+		toggleMenu() {
+			this.$emit('update:openedMenu', !this.openedMenu)
+		},
+		hideMenu() {
+			this.$emit('update:openedMenu', false)
+		},
+		toggleEdit() {
+			this.$emit('update:editing', true)
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+	.cellText {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+}
+	.icon-more {
+		background-color: var(--color-main-background);
+		border: 0;
+	}
+</style>