pkp/pkp-lib#9771 Move ORCID functionality into core application

public/globals.js

@@ -262,6 +262,12 @@ window.pkp = {
 		'manager.dois.update.success': 'DOI(s) successfully updated',
 		'navigation.backTo': '\u27f5 Back to {$page}',
 		'navigation.submissions': 'Submissions',
+		'orcid.field.verification.request': 'Request verification',
+		'orcid.field.verification.requested': 'Verification requested!',
+		'orcid.field.authorEmailModal.title': 'Request ORCID verification',
+		'orcid.field.authorEmailModal.message': 'Would you like to send an email to this author requesting they verify their ORCID?',
+		'orcid.field.deleteOrcidModal.title': 'Delete ORCID',
+		'orcid.field.deleteOrcidModal.message': 'Are you sure you want to remove this ORCID?',
 		'publication.jats.autoCreatedMessage':
 			'This JATS file is generated automatically by the submission metadata',
 		'publication.jats.confirmDeleteFileButton': 'Delete JATS File',

src/components/Container/AccessPage.vue

@@ -1,11 +1,13 @@
 <script type="text/javascript">
 import Page from './Page.vue';
 import NotifyUsersForm from '@/components/Form/context/NotifyUsersForm.vue';
+import OrcidSettingsForm from '@/components/Form/context/OrcidSettingsForm.vue';
 
 export default {
 	name: 'AccessPage',
 	components: {
 		NotifyUsersForm,
+		OrcidSettingsForm,
 	},
 	extends: Page,
 	data() {

src/components/Container/AdminPage.vue

@@ -4,6 +4,7 @@ import HighlightsListPanel from '../ListPanel/highlights/HighlightsListPanel.vue
 import ThemeForm from '@/components/Form/context/ThemeForm.vue';
 import ActionPanel from '../ActionPanel/ActionPanel.vue';
 import AnnouncementsListPanel from '../ListPanel/announcements/AnnouncementsListPanel.vue';
+import OrcidSettingsForm from '@/components/Form/context/OrcidSettingsForm.vue';
 
 export default {
 	name: 'AdminPage',
@@ -12,6 +13,7 @@ export default {
 		HighlightsListPanel,
 		AnnouncementsListPanel,
 		ThemeForm,
+		OrcidSettingsForm,
 	},
 	extends: Page,
 	data() {

src/components/Form/Form.vue

@@ -210,7 +210,7 @@ export default {
 		submitValues() {
 			let values = {};
 			this.fields.forEach((field) => {
-				if (field.component === 'field-html') {
+				if (field.isInert) {
 					return;
 				}
 				if (!field.isMultilingual) {

src/components/Form/FormGroup.vue

@@ -62,6 +62,7 @@ import FieldPubId from './fields/FieldPubId.vue';
 import FieldHtml from './fields/FieldHtml.vue';
 import FieldMetadataSetting from './fields/FieldMetadataSetting.vue';
 import FieldOptions from './fields/FieldOptions.vue';
+import FieldOrcid from './fields/FieldOrcid.vue';
 import FieldPreparedContent from './fields/FieldPreparedContent.vue';
 import FieldRadioInput from './fields/FieldRadioInput.vue';
 import FieldRichTextarea from './fields/FieldRichTextarea.vue';
@@ -90,6 +91,7 @@ export default {
 		FieldHtml,
 		FieldMetadataSetting,
 		FieldOptions,
+		FieldOrcid,
 		FieldPreparedContent,
 		FieldRadioInput,
 		FieldRichTextarea,

src/components/Form/context/OrcidSettingsForm.vue

@@ -0,0 +1,28 @@
+<script>
+import Form from '../Form.vue';
+
+export default {
+	name: 'OrcidSettingsForm',
+	extends: Form,
+	props: {},
+	methods: {
+		/**
+		 * Update values when a field has changed
+		 *
+		 * @param {String} name Name of the field to modify
+		 * @param {String} prop Name of the prop to modify
+		 * @param {mixed} value The new value for the prop
+		 * @param {String} localeKey Optional locale key for multilingual props
+		 */
+		fieldChanged: function (name, prop, value, localeKey) {
+			// TODO: This isn't actually working as the fields are properly required.
+			if (name === 'orcidEnabled') {
+				this.removeError('orcidApiType', localeKey);
+				this.removeError('orcidClientId', localeKey);
+				this.removeError('orcidClientSecret', localeKey);
+			}
+			Form.methods.fieldChanged.apply(this, [name, prop, value, localeKey]);
+		},
+	},
+};
+</script>

src/components/Form/fields/FieldBase.vue

@@ -33,6 +33,13 @@ export default {
 		groupId: String,
 		/** The ID of the form this field should appear in. This is passed down from the `Form`.  */
 		formId: String,
+		/** Whether the field should be ignored when a form is submitted (e.g. purely informational field). */
+		isInert: {
+			type: Boolean,
+			default() {
+				return false;
+			},
+		},
 		/** Whether or not this field should be presented for each supported language. */
 		isMultilingual: Boolean,
 		/**  Whether or not a value for this field should be required. */

src/components/Form/fields/FieldOrcid.mdx

@@ -0,0 +1,14 @@
+import {Primary, Controls, Meta} from '@storybook/blocks';
+
+import * as FieldOrcidStories from './FieldOrcid.stories.js';
+
+<Meta of={FieldOrcidStories} />{' '}
+
+# FieldOrcid
+
+## Usage
+
+Field used for managing a linked user/author's ORCID
+
+<Primary />
+<Controls />

src/components/Form/fields/FieldOrcid.stories.js

@@ -0,0 +1,48 @@
+import FieldOrcid from '@/components/Form/fields/FieldOrcid.vue';
+import FieldBaseMock from '../mocks/field-base';
+import FieldOrcidMock from '../mocks/field-orcid';
+import {http, HttpResponse} from 'msw';
+
+export default {
+	title: 'Forms/FieldOrcid',
+	component: FieldOrcid,
+	render: (args) => ({
+		components: {FieldOrcid},
+		setup() {
+			function change(name, prop, newValue, localeKey) {
+				if (localeKey) {
+					args[prop][localeKey] = newValue;
+				} else {
+					args[prop] = newValue;
+				}
+			}
+
+			return {args, change};
+		},
+		template: `
+			<FieldOrcid v-bind="args" @change="change" />
+		`,
+	}),
+	parameters: {
+		msw: {
+			handlers: [
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/orcid/requestAuthorVerification/1',
+					async () => {
+						return HttpResponse.json();
+					},
+				),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/orcid/deleteForAuthor/1',
+					async () => {
+						return HttpResponse.json();
+					},
+				),
+			],
+		},
+	},
+};
+
+export const Base = {
+	args: {...FieldBaseMock, ...FieldOrcidMock},
+};