add user invitation

app/src/modules/settings/routes/roles/item/item.vue

@@ -39,6 +39,10 @@
 				</v-card>
 			</v-dialog>
 
+			<v-button rounded icon @click="userInviteModalActive = true" v-tooltip.bottom="$t('invite_users')">
+				<v-icon name="person_add" />
+			</v-button>
+
 			<v-button
 				rounded
 				icon
@@ -55,6 +59,8 @@
 			<settings-navigation />
 		</template>
 
+		<users-invite v-model="userInviteModalActive" :role="primaryKey" />
+
 		<div class="roles">
 			<v-notice v-if="adminEnabled" type="info">
 				{{ $t('admins_have_all_permissions') }}
@@ -88,6 +94,7 @@ import useItem from '@/composables/use-item';
 import { useUserStore } from '@/stores/';
 import RoleInfoSidebarDetail from './components/role-info-sidebar-detail.vue';
 import PermissionsOverview from './components/permissions-overview.vue';
+import UsersInvite from '@/views/private/components/users-invite';
 
 type Values = {
 	[field: string]: any;
@@ -95,7 +102,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'roles-item',
-	components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoSidebarDetail, PermissionsOverview },
+	components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoSidebarDetail, PermissionsOverview, UsersInvite },
 	props: {
 		primaryKey: {
 			type: String,
@@ -108,7 +115,7 @@ export default defineComponent({
 	},
 	setup(props) {
 		const userStore = useUserStore();
-
+		const userInviteModalActive = ref(false);
 		const { primaryKey } = toRefs(props);
 
 		const { edits, item, saving, loading, error, save, remove, deleting, isBatch } = useItem(
@@ -142,6 +149,7 @@ export default defineComponent({
 			deleting,
 			isBatch,
 			adminEnabled,
+			userInviteModalActive,
 		};
 
 		/**

app/src/modules/users/routes/collection.vue

@@ -49,6 +49,10 @@
 				<v-icon name="edit" outline />
 			</v-button>
 
+			<v-button rounded icon @click="userInviteModalActive = true" v-tooltip.bottom="$t('invite_users')">
+				<v-icon name="person_add" />
+			</v-button>
+
 			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('create_user')">
 				<v-icon name="add" />
 			</v-button>
@@ -58,6 +62,8 @@
 			<users-navigation :current-role="queryFilters && queryFilters.role" />
 		</template>
 
+		<users-invite v-model="userInviteModalActive" />
+
 		<component
 			class="layout"
 			ref="layoutRef"
@@ -104,6 +110,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref, PropType } from '@vue/composition-api';
 import UsersNavigation from '../components/navigation.vue';
+import UsersInvite from '@/views/private/components/users-invite';
 
 import { i18n } from '@/lang';
 import api from '@/api';
@@ -120,7 +127,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'users-collection',
-	components: { UsersNavigation, LayoutSidebarDetail, SearchInput },
+	components: { UsersNavigation, LayoutSidebarDetail, SearchInput, UsersInvite },
 	props: {
 		queryFilters: {
 			type: Object as PropType<Record<string, string>>,
@@ -130,6 +137,7 @@ export default defineComponent({
 	setup(props) {
 		const { roles } = useNavigation();
 		const layoutRef = ref<LayoutComponent | null>(null);
+		const userInviteModalActive = ref(false);
 
 		const selection = ref<Item[]>([]);
 
@@ -175,6 +183,7 @@ export default defineComponent({
 			searchQuery,
 			marked,
 			clearFilters,
+			userInviteModalActive,
 		};
 
 		function useBatchDelete() {