accept invitation

public/globals.js

@@ -391,7 +391,8 @@ window.pkp = {
   		'invitation.role.masthead' : 'Journal Masthead',
   		'invitation.role.removeRole.button' : 'Remove Role',
 		'invitation.role.addRole.button':'Add Another Role',
-		'invitation.orcid.message':'Add Another Role',
+		'invitation.orcid.message':'On accepting the invite, the user will redirected to ORCID to verify their account, if the wish to',
+		'invitation.orcid.acceptInvitation.message':'Not verified. You can verify your ORCID iD from your profile section in OJS',
 
 	},
 

src/components/Container/PageOJS.vue

@@ -2,11 +2,13 @@
 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/composables/useForm.js

@@ -53,6 +53,7 @@ export function useForm(_form) {
 		watch(
 			errors,
 			(newErrors) => {
+				form.value.errors = {};
 				Object.keys(newErrors).forEach((key) => {
 					if (doesFieldExist(form.value, key)) {
 						form.value.errors[key] = newErrors[key];

src/pages/acceptInvitation/AcceptInvitationCreateUserAccount.vue

@@ -0,0 +1,73 @@
+<template>
+	<div>
+		<div class="userInvitation__reviewPanel__item">
+			<h4 class="userInvitation__reviewPanel__item__header">Email Address</h4>
+			<div class="userInvitation__reviewPanel__item__value">
+				{{ store.invitationPayload.email }}
+			</div>
+		</div>
+	</div>
+	<br />
+	<field-text
+		:label="t('user.username')"
+		:value="fields.username"
+		name="username"
+		size="large"
+		:all-errors="sectionErrors"
+		@change="updateField"
+	/>
+	<br />
+	<field-text
+		:label="t('user.password')"
+		:value="fields.password"
+		name="password"
+		size="large"
+		:all-errors="sectionErrors"
+		@change="updateField"
+	/>
+</template>
+
+<script setup>
+import {defineProps, ref, computed} from 'vue';
+import {useTranslation} from '@/composables/useTranslation';
+import FieldText from '@/components/Form/fields/FieldText.vue';
+import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
+
+const props = defineProps({
+	validateFields: {type: Array, required: true},
+});
+const {t} = useTranslation();
+const fields = ref({username: '', password: ''});
+const store = useAcceptInvitationPageStore();
+
+function updateField(fieldName, b, fieldValue) {
+	fields.value[fieldName] = fieldValue;
+	store.updatePayload(fieldName, fieldValue);
+}
+
+const sectionErrors = computed(() => {
+	return props.validateFields.reduce((obj, key) => {
+		if (store.errors[key]) {
+			obj[key] = store.errors[key];
+		}
+		return obj;
+	}, {});
+});
+</script>
+<style lang="less">
+.userInvitation__reviewPanel__item {
+	&:last-child {
+		border-bottom: none;
+	}
+}
+.userInvitation__reviewPanel__item__header {
+	margin: 0;
+	font-size: 0.875rem;
+	line-height: 1.5rem;
+}
+.userInvitation__reviewPanel__item__value {
+	margin-bottom: 1rem;
+	font-size: 0.875rem;
+	line-height: 1.5rem;
+}
+</style>

src/pages/acceptInvitation/AcceptInvitationCreateUserForms.vue

@@ -0,0 +1,75 @@
+<template>
+	<div>
+		<div class="userInvitation__reviewPanel__item">
+			<h4 class="userInvitation__reviewPanel__item__header">Email Address</h4>
+			<div class="userInvitation__reviewPanel__item__value">
+				{{ store.invitationPayload.email }}
+			</div>
+		</div>
+	</div>
+	<div>
+		<div class="userInvitation__reviewPanel__item">
+			<h4 class="userInvitation__reviewPanel__item__header">ORCID iD</h4>
+			<div class="userInvitation__reviewPanel__item__value">
+				{{
+					store.invitationPayload.orcid
+						? store.invitationPayload.orcid
+						: t('invitation.orcid.acceptInvitation.message')
+				}}
+				<icon
+					v-if="store.invitationPayload.orcid"
+					icon="orcid"
+					:inline="true"
+				/>
+			</div>
+		</div>
+	</div>
+	<pkp-form
+		v-bind="userForm"
+		class="userInvitation__stepForm"
+		@set="updateUserDetailsForm"
+	></pkp-form>
+</template>
+
+<script setup>
+import {defineProps, computed} from 'vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useForm} from '@/composables/useForm';
+import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
+
+const props = defineProps({
+	form: {type: Object, required: true},
+	validateFields: {type: Array, required: true},
+});
+
+const store = useAcceptInvitationPageStore();
+
+function updateUserDetailsForm(a, {fields}, c, d) {
+	if (fields) {
+		fields.forEach((field) => {
+			if (store.invitationPayload[field.name] !== field.value) {
+				store.updatePayload(field.name, field.value);
+			}
+		});
+	}
+}
+
+const {
+	form: userForm,
+	connectWithPayload,
+	connectWithErrors,
+} = useForm(props.form);
+connectWithPayload(store.invitationPayload);
+
+const sectionErrors = computed(() => {
+	return props.validateFields.reduce((obj, key) => {
+		if (store.errors[key]) {
+			obj[key] = store.errors[key];
+		}
+		console.log(obj);
+		return obj;
+	}, {});
+});
+
+connectWithErrors(sectionErrors);
+</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,44 @@
+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');
+				}),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W',
+					async ({request}) => {
+						const postBody = await request.json();
+						let errors = {};
+						Object.keys(postBody).forEach((element) => {
+							if (postBody[element] === '') {
+								errors[element] = ['This field is required'];
+							}
+						});
+						if (Object.keys(errors).length > 0) {
+							return HttpResponse.json(errors, {status: 422});
+						}
+						return HttpResponse.json(postBody, {status: 200});
+					},
+				),
+			],
+		},
+	},
+	args: PageInitConfigMock,
+};