1 files changed, 47 insertions, 0 deletions
diff --git a/apps/settings/src/components/AdminDelegating.vue b/apps/settings/src/components/AdminDelegating.vue
new file mode 100644
index 00000000000..521ff8f0155
--- /dev/null
+++ b/apps/settings/src/components/AdminDelegating.vue
@@ -0,0 +1,47 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcSettingsSection :name="t('settings', 'Administration privileges')"
+		:description="t('settings', 'Here you can decide which group can access certain sections of the administration settings.')"
+		:doc-url="authorizedSettingsDocLink">
+		<div class="setting-list">
+			<div v-for="setting in availableSettings" :key="setting.class">
+				<label :for="setting.id">{{ setting.sectionName }}</label>
+				<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
+			</div>
+		</div>
+	</NcSettingsSection>
+</template>
+
+<script>
+import GroupSelect from './AdminDelegation/GroupSelect.vue'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import { loadState } from '@nextcloud/initial-state'
+
+export default {
+	name: 'AdminDelegating',
+	components: {
+		GroupSelect,
+		NcSettingsSection,
+	},
+	data() {
+		return {
+			availableSettings: loadState('settings', 'available-settings'),
+			availableGroups: loadState('settings', 'available-groups'),
+			authorizedGroups: loadState('settings', 'authorized-groups'),
+			authorizedSettingsDocLink: loadState('settings', 'authorized-settings-doc-link'),
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+label {
+	display: block;
+	font-size: 16px;
+	margin: 12px 0;
+	color: var(--color-text-light);
+}
+</style>