fix issue in GDPR invitations

public/globals.js

@@ -869,8 +869,9 @@ window.pkp = {
 		'user.password': 'Password',
 		'user.phone': 'Phone',
 		'user.removeRole.message':
-			'Are you sure want remove this role permanently?',
-		'user.role.reviewer': 'Reviewer',
+			'Are you sure you want to permanently remove this role? This action will revoke the user\'s access to all information and permissions associated with this role.',
+		'user.removeRole.roleRemainMessage' :'You cannot remove the role. At least one role must be assigned to the user.',
+			'user.role.reviewer': 'Reviewer',
 		'user.role.reviewers': 'Reviewers',
 		'user.roles': 'Roles',
 		'user.signature': 'Signature',
@@ -889,7 +890,7 @@ window.pkp = {
 		'userInvitation.edit.title': 'Edit Invitation',
 		'userInvitation.modal.button': 'View All Users',
 		'userInvitation.modal.message':
-			"{$email} has been invited to new role in OJS. You can be updated about the user's decision on the User and Role page, your OJS notification and/or your email",
+			'{$email} has been invited to new role in OJS. You can be updated about the user\'s decision on the User & Role page, your OJS notification and/or your email.',
 		'userInvitation.modal.title': 'Invitation Sent',
 		'userInvitation.roleTable.endDate': 'End Date',
 		'userInvitation.roleTable.journalMasthead': 'Journal Masthead',
@@ -920,6 +921,10 @@ window.pkp = {
 		'workflow.submissionNextReviewRoundInFutureStage':
 			'The submission advanced to the next review round, was accepted, and is currently in the {$stage} stage.',
 		'workflow.uploadRevisions': 'Upload revisions',
+		'grid.user.grid.user.enableReasonDescription':
+			"Once the user is enabled, they will regain access to OJS, and you'll be able to invite them to roles as needed.",
+		'grid.user.grid.user.disableReasonDescription':
+			"Please note that once a user is disabled, you won't be able to add them to any roles until they are enabled again.",
 	},
 	tinyMCE: {
 		skinUrl: '/styles/tinymce',

src/managers/UserAccessManager/UserAccessManager.vue

@@ -2,7 +2,7 @@
 	<PkpTable class="mt-2">
 		<template #label>
 			<h3 class="text-3xl-bold">
-				{{ t('grid.user.currentUsers') }}({{
+				{{ t('grid.user.currentUsers') }} ({{
 					store.userAccessPagination.itemCount
 				}})
 			</h3>

src/managers/UserInvitationManager/UserInvitationManager.vue

@@ -2,7 +2,7 @@
 	<PkpTable>
 		<template #label>
 			<h3 class="text-3xl-bold">
-				{{ t('invitation.header') }}({{
+				{{ t('invitation.header') }} ({{
 					store.invitationsPagination.itemCount
 				}})
 			</h3>

src/managers/UserInvitationManager/UserInvitationManagerCancelInvitationDialogBody.vue

@@ -1,11 +1,25 @@
 <template>
 	<p>{{ message }}</p>
-	<div>
-		<ul role="list">
-			<li>{{ t('user.email') }}: {{ email }}</li>
-			<li>{{ t('userInvitation.roleTable.role') }}: {{ roles }}</li>
-			<li>{{ t('common.status') }}: {{ status }}</li>
-			<li>{{ t('user.affiliation') }}: {{ affiliation }}</li>
+	<div class="px-8">
+		<ul role="list" class="list-disc">
+			<li>
+				<span class="text-xl-bold">{{ t('user.email') }}:</span>
+				{{ email }}
+			</li>
+			<li>
+				<span class="text-xl-bold">
+					{{ t('userInvitation.roleTable.role') }}:
+				</span>
+				{{ roles }}
+			</li>
+			<li>
+				<span class="text-xl-bold">{{ t('common.status') }}:</span>
+				{{ status }}
+			</li>
+			<li>
+				<span class="text-xl-bold">{{ t('user.affiliation') }}:</span>
+				{{ affiliation }}
+			</li>
 		</ul>
 	</div>
 </template>

src/managers/UserInvitationManager/UserInvitationManagerStore.js

@@ -67,10 +67,7 @@ export const useUserInvitationManagerStore = defineComponentStore(
 		function getAllInvitedRoles(userGroups) {
 			let roles = '';
 			userGroups.forEach((element) => {
-				roles =
-					roles +
-					localize(element.userGroupName) +
-					t('common.commaListSeparator');
+				roles = roles + element.userGroupName + t('common.commaListSeparator');
 			});
 
 			return roles.substring(0, roles.length - 1);
@@ -136,7 +133,7 @@ export const useUserInvitationManagerStore = defineComponentStore(
 				actions: [
 					{
 						label: t('invitation.cancelInvite.title'),
-						isWarnable: true,
+						isPrimary: true,
 						callback: async (close) => {
 							const {apiUrl: cancelApiUrl} = useUrl(
 								`invitations/${invitationObj.id}/cancel`,
@@ -155,6 +152,7 @@ export const useUserInvitationManagerStore = defineComponentStore(
 					},
 					{
 						label: t('common.cancel'),
+						isWarnable: true,
 						callback: (close) => {
 							close();
 						},

src/pages/userInvitation/UserInvitationPageStore.js

@@ -349,7 +349,7 @@ export const useUserInvitationPageStore = defineComponentStore(
 								},
 							},
 						],
-						modalStyle: 'primary',
+						modalStyle: 'success',
 					});
 				} else {
 					isSubmitting.value = false;

src/pages/userInvitation/UserInvitationUserGroupsTable.vue

@@ -14,6 +14,7 @@
 				v-for="(currentUserGroup, index) in store.invitationPayload
 					.currentUserGroups"
 				:key="index"
+				class="h-[3.25rem]"
 			>
 				<TableCell>
 					{{ currentUserGroup.name }}
@@ -118,7 +119,10 @@
 					</TableCell>
 					<TableCell>
 						<PkpButton
-							v-if="index > 0"
+							v-if="
+								store.invitationPayload.userGroupsToAdd.length > 1 ||
+								isUserGroupsToAddPopulated()
+							"
 							:is-warnable="true"
 							@click="removeInvitedUserGroup(index)"
 						>
@@ -177,19 +181,32 @@ updateWithSelectedUserGroups(props.userGroups);
  * @param newValue String
  */
 function updateUserGroup(index, fieldName, newValue) {
+	delete store.errors['userGroupsToAdd.' + index + `.${fieldName}`];
 	const userGroupsUpdate = [...store.invitationPayload.userGroupsToAdd];
 	userGroupsUpdate[index][fieldName] = newValue;
 	store.updatePayload('userGroupsToAdd', userGroupsUpdate, false);
+	updateWithSelectedUserGroups(props.userGroups);
 }
 
 const availableUserGroups = computed(() => {
 	return props.userGroups.filter((element) => {
 		return !store.invitationPayload.currentUserGroups.find(
-			(data) => data.id === element.value,
+			(data) => data.id === element.value && !data.dateEnd,
 		);
 	});
 });
 
+/**
+ * check any values filled with userGroupsToAdd
+ */
+function isUserGroupsToAddPopulated() {
+	return store.invitationPayload.userGroupsToAdd[0]
+		? Object.values(store.invitationPayload.userGroupsToAdd[0]).some(
+				(value) => value !== null,
+			)
+		: false;
+}
+
 /**
  * add user groups to the invitation payload
  */
@@ -210,31 +227,49 @@ const {openDialog} = useModal();
  * @param index Number
  */
 function removeUserGroup(userGroup, index) {
-	openDialog({
-		name: 'removeRole',
-		title: t('invitation.role.removeRole.button'),
-		message: t('user.removeRole.message'),
-		actions: [
-			{
-				label: t('common.yes'),
-				isWarnable: true,
-				callback: (close) => {
-					store.invitationPayload.currentUserGroups.find(
-						(data, i) => i === index,
-					).dateEnd = new Date();
-					removeRole(store.invitationPayload.userId, userGroup.id);
-					close();
+	if (numberOfActiveRoles.value <= 1) {
+		// user must have atleast one role
+		openDialog({
+			name: 'oneRoleRemain',
+			title: t('invitation.role.removeRole.button'),
+			message: t('user.removeRole.roleRemainMessage'),
+			actions: [
+				{
+					label: t('common.close'),
+					callback: (close) => {
+						close();
+					},
 				},
-			},
-			{
-				label: t('common.no'),
-				callback: (close) => {
-					close();
+			],
+			modalStyle: 'negative',
+		});
+	} else {
+		openDialog({
+			name: 'removeRole',
+			title: t('invitation.role.removeRole.button'),
+			message: t('user.removeRole.message'),
+			actions: [
+				{
+					label: t('common.yes'),
+					isWarnable: true,
+					callback: (close) => {
+						store.invitationPayload.currentUserGroups.find(
+							(data, i) => i === index,
+						).dateEnd = new Date();
+						removeRole(store.invitationPayload.userId, userGroup.id);
+						close();
+					},
 				},
-			},
-		],
-		modalStyle: 'negative',
-	});
+				{
+					label: t('common.no'),
+					callback: (close) => {
+						close();
+					},
+				},
+			],
+			modalStyle: 'negative',
+		});
+	}
 }
 
 /**
@@ -243,8 +278,16 @@ function removeUserGroup(userGroup, index) {
  */
 function removeInvitedUserGroup(index) {
 	const userGroupsUpdate = [...store.invitationPayload.userGroupsToAdd];
+	if (isUserGroupsToAddPopulated && userGroupsUpdate.length === 1) {
+		userGroupsUpdate.push({
+			userGroupId: null,
+			dateStart: null,
+			masthead: null,
+		});
+	}
 	userGroupsUpdate.splice(index, 1);
 	store.updatePayload('userGroupsToAdd', userGroupsUpdate, false);
+	updateWithSelectedUserGroups(props.userGroups);
 }
 
 const userGroupErrors = computed(() => {
@@ -268,6 +311,15 @@ function updateWithSelectedUserGroups(userGroups) {
 	});
 }
 
+/**
+ * count number of active roles
+ */
+const numberOfActiveRoles = computed(() => {
+	return store.invitationPayload.currentUserGroups.filter(
+		(userGroup) => userGroup.dateEnd === null,
+	).length;
+});
+
 /**
  * remove user roles
  * @param userId Number