send and accept invitation

public/globals.js

@@ -350,6 +350,13 @@ window.pkp = {
 		'submission.upload.percentComplete': 'Uploading {$percent}% complete',
 		'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',
+		'user.password': 'Password',
 	},
 
 	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,24 @@
+<template>
+	<field-text v-bind="store.emailField" @change="store.emailChange" />
+	<br />
+	<field-text v-bind="store.usernameField" @change="store.usernameChange" />
+	<br />
+	<field-text v-bind="store.passwordField" @change="store.passwordChange" />
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+import FieldText from '@/components/Form/fields/FieldText.vue';
+import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
+
+defineProps({
+	section: {
+		type: Object,
+		default() {
+			return null;
+		},
+	},
+});
+
+const store = useAcceptInvitationPageStore();
+</script>

src/pages/acceptInvitation/AcceptInvitationCreateUserForms.vue

@@ -0,0 +1,20 @@
+<template>
+	<pkp-form
+		v-if="section.type === 'form'"
+		v-bind="section.form"
+		ref="autosaveForms"
+		class="userInvitation__stepForm"
+		@set="store.updateAutosaveForm"
+	></pkp-form>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
+
+defineProps({
+	section: {type: Object, required: true},
+});
+const store = useAcceptInvitationPageStore();
+</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>

src/pages/acceptInvitation/AcceptInvitationPage.mdx

@@ -0,0 +1,9 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as AcceptInvitationPage from './AcceptInvitationPage.stories.js';
+
+<Meta of={AcceptInvitationPage} />
+
+# User Invitation page
+
+<ArgTypes />

src/pages/acceptInvitation/AcceptInvitationPage.stories.js

@@ -0,0 +1,28 @@
+import AcceptInvitationPage from './AcceptInvitationPage.vue';
+import {http, HttpResponse} from 'msw';
+import PageInitConfigMock from './mocks/pageInitConfig';
+
+export default {
+	title: 'Pages/AcceptInvitation',
+	component: AcceptInvitationPage,
+};
+
+export const Init = {
+	render: (args) => ({
+		components: {AcceptInvitationPage},
+		setup() {
+			return {args};
+		},
+		template: '<AcceptInvitationPage v-bind="args" />',
+	}),
+	parameters: {
+		msw: {
+			handlers: [
+				http.post('https://mock/index.php/publicknowledge/api/v1/users', () => {
+					return HttpResponse.json('accept invitation successfully');
+				}),
+			],
+		},
+	},
+	args: PageInitConfigMock,
+};