1 files changed, 104 insertions, 0 deletions
diff --git a/apps/settings/src/views/UserManagement.vue b/apps/settings/src/views/UserManagement.vue
new file mode 100644
index 00000000000..9ab76f921a0
--- /dev/null
+++ b/apps/settings/src/views/UserManagement.vue
@@ -0,0 +1,104 @@
+<!--
+  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcAppContent :page-heading="pageHeading">
+		<UserList :selected-group="selectedGroupDecoded"
+			:external-actions="externalActions" />
+	</NcAppContent>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { emit } from '@nextcloud/event-bus'
+import { defineComponent } from 'vue'
+
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import UserList from '../components/UserList.vue'
+
+export default defineComponent({
+	name: 'UserManagement',
+
+	components: {
+		NcAppContent,
+		UserList,
+	},
+
+	data() {
+		return {
+			// temporary value used for multiselect change
+			externalActions: [],
+		}
+	},
+
+	computed: {
+		pageHeading() {
+			if (this.selectedGroupDecoded === null) {
+				return t('settings', 'All accounts')
+			}
+			const matchHeading = {
+				admin: t('settings', 'Admins'),
+				disabled: t('settings', 'Disabled accounts'),
+			}
+			return matchHeading[this.selectedGroupDecoded] ?? t('settings', 'Account group: {group}', { group: this.selectedGroupDecoded })
+		},
+
+		selectedGroup() {
+			return this.$route.params.selectedGroup
+		},
+
+		selectedGroupDecoded() {
+			return this.selectedGroup ? decodeURIComponent(this.selectedGroup) : null
+		},
+	},
+
+	beforeMount() {
+		this.$store.dispatch('getPasswordPolicyMinLength')
+	},
+
+	created() {
+		// init the OCA.Settings.UserList object
+		window.OCA = window.OCA ?? {}
+		window.OCA.Settings = window.OCA.Settings ?? {}
+		window.OCA.Settings.UserList = window.OCA.Settings.UserList ?? {}
+		// and add the registerAction method
+		window.OCA.Settings.UserList.registerAction = this.registerAction
+		emit('settings:user-management:loaded')
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * Register a new action for the user menu
+		 *
+		 * @param {string} icon the icon class
+		 * @param {string} text the text to display
+		 * @param {Function} action the function to run
+		 * @param {(user: Record<string, unknown>) => boolean} enabled return true if the action is enabled for the user
+		 * @return {Array}
+		 */
+		registerAction(icon, text, action, enabled) {
+			this.externalActions.push({
+				icon,
+				text,
+				action,
+				enabled,
+			})
+			return this.externalActions
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.app-content {
+	// Virtual list needs to be full height and is scrollable
+	display: flex;
+	overflow: hidden;
+	flex-direction: column;
+	max-height: 100%;
+}
+</style>