create user

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 CreateUserPage from '@/pages/createUser/CreateUserPage.vue';
 
 export default {
 	components: {
 		SubmissionsPage,
 		UserInvitationPage,
+		CreateUserPage,
 	},
 	extends: Page,
 };

src/pages/createUser/CreateUserAccount.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/createUser/CreateUserForms.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/createUser/CreateUserHeader.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/createUser/CreateUserInvitedRoles.vue

@@ -0,0 +1,34 @@
+<template>
+	<PkpTable>
+		<template #caption>
+			<PkpHeader>
+				<h2>Roles</h2>
+			</PkpHeader>
+		</template>
+		<template #head>
+			<TableHeader>Title</TableHeader>
+			<TableHeader>Start Date</TableHeader>
+			<TableHeader>End Date</TableHeader>
+			<TableHeader>Journal Masthead</TableHeader>
+		</template>
+		<tr v-for="(row, index) in section.rows" :key="index">
+			<TableCell :is-row-header="true">
+				{{ row.setting_value }}
+			</TableCell>
+			<TableCell>{{ row.date_start }}</TableCell>
+			<TableCell>{{ row.date_end }}</TableCell>
+			<TableCell>testing</TableCell>
+		</tr>
+	</PkpTable>
+</template>
+
+<script setup>
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import {defineProps} from 'vue';
+
+defineProps({
+	section: {type: Object, required: true},
+});
+</script>