send and accpet invitation

Author: ipula

public/globals.js

@@ -268,6 +268,12 @@ window.pkp = {
 		'submission.submit.newSubmissionSingle': 'New Submission',
 		'submissions.incomplete': 'Incomplete',
 		'validator.required': 'This field is required.',
+		'invitation.notification.title': 'Invitation sent',
+		'invitation.wizard.success': "{$email} has been invited to a 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",
+		'user.email': 'Email',
+		'user.username': 'Username',
+		'user.orcid': 'ORCID iD',
+		'invitation.notification.closeBtn':'View all users'
 	},
 	tinyMCE: {
 		skinUrl: '/styles/tinymce',

src/components/Container/PageOJS.vue

@@ -1,10 +1,14 @@
 <script>
 import Page from '@/components/Container/Page.vue';
 import SubmissionsPage from '@/pages/submissions/SubmissionsPage.vue';
+import UserInvitationPage from '@/pages/userInvitation/UserInvitationPage.vue';
+import AcceptInvitationPage from '@/pages/acceptInvitation/AcceptInvitationPage.vue';
 
 export default {
 	components: {
 		SubmissionsPage,
+		UserInvitationPage,
+		AcceptInvitationPage,
 	},
 	extends: Page,
 };

src/pages/acceptInvitation/AcceptInvitationCreateUserAccount.vue

@@ -0,0 +1,17 @@
+<template>
+	<field-text v-bind="usernameField" @change="usernameChange" />
+	<br />
+	<field-text v-bind="passwordField" @change="passwordChange" />
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+import FieldText from '@/components/Form/fields/FieldText.vue';
+
+defineProps({
+	passwordField: {type: Object, required: true},
+	usernameField: {type: Object, required: true},
+	usernameChange: {type: Function, required: true},
+	passwordChange: {type: Function, required: true},
+});
+</script>

src/pages/acceptInvitation/AcceptInvitationCreateUserForms.vue

@@ -0,0 +1,19 @@
+<template>
+	<pkp-form
+		v-if="section.type === 'form'"
+		v-bind="section.form"
+		ref="autosaveForms"
+		class="userInvitation__stepForm"
+		@set="updateAutosaveForm"
+	></pkp-form>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	section: {type: Object, required: true},
+	updateAutosaveForm: {type: Function, required: true},
+});
+</script>

src/pages/acceptInvitation/AcceptInvitationHeader.vue

@@ -0,0 +1,17 @@
+<template>
+	<h1 ref="wrapper" class="app__pageHeading">
+		{{ pageTitle }}
+	</h1>
+	<p>
+		{{ pageTitleDescription }}
+	</p>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+
+defineProps({
+	pageTitle: {type: String, required: true},
+	pageTitleDescription: {type: String, required: true},
+});
+</script>