Skip to content

Commit 50e3204

Browse files
ewhansonewhanson
committed
pkp/pkp-lib#9771 Move ORCID functionality into core application
1 parent 0034bea commit 50e3204

File tree

10 files changed

+365
-6
lines changed

10 files changed

+365
-6
lines changed

‎public/globals.js

+7
Original file line numberDiff line numberDiff line change
@@ -433,6 +433,13 @@ window.pkp = {
433433
'metadata.property.displayName.doi': 'DOI',
434434
'navigation.backTo': '\u27f5 Back to {$page}',
435435
'publication.contributors': 'Contributors',
436+
'orcid.field.verification.request': 'Request verification',
437+
'orcid.field.verification.requested': 'Verification requested!',
438+
'orcid.field.authorEmailModal.title': 'Request ORCID verification',
439+
'orcid.field.authorEmailModal.message': 'Would you like to send an email to this author requesting they verify their ORCID?',
440+
'orcid.field.deleteOrcidModal.title': 'Delete ORCID',
441+
'orcid.field.deleteOrcidModal.message': 'Are you sure you want to remove this ORCID?',
442+
'orcid.field.unverified.shouldRequest': 'This ORCID has not been verified. Please remove this unverified ORCID and request verification from the user/author directly.',
436443
'publication.jats.autoCreatedMessage':
437444
'This JATS file is generated automatically by the submission metadata',
438445
'publication.jats.confirmDeleteFileButton': 'Delete JATS File',

‎src/components/Form/Form.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ export default {
211211
submitValues() {
212212
let values = {};
213213
this.fields.forEach((field) => {
214-
if (field.component === 'field-html') {
214+
if (field.isInert) {
215215
return;
216216
}
217217
if (!field.isMultilingual) {

‎src/components/Form/FormGroup.vue

+2
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import FieldPubId from './fields/FieldPubId.vue';
6262
import FieldHtml from './fields/FieldHtml.vue';
6363
import FieldMetadataSetting from './fields/FieldMetadataSetting.vue';
6464
import FieldOptions from './fields/FieldOptions.vue';
65+
import FieldOrcid from './fields/FieldOrcid.vue';
6566
import FieldPreparedContent from './fields/FieldPreparedContent.vue';
6667
import FieldRadioInput from './fields/FieldRadioInput.vue';
6768
import FieldRichTextarea from './fields/FieldRichTextarea.vue';
@@ -92,6 +93,7 @@ export default {
9293
FieldHtml,
9394
FieldMetadataSetting,
9495
FieldOptions,
96+
FieldOrcid,
9597
FieldPreparedContent,
9698
FieldRadioInput,
9799
FieldRichTextarea,

‎src/components/Form/fields/FieldBase.vue

+7
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ export default {
3333
groupId: String,
3434
/** The ID of the form this field should appear in. This is passed down from the `Form`. */
3535
formId: String,
36+
/** Whether the field should be ignored when a form is submitted (e.g. purely informational field). */
37+
isInert: {
38+
type: Boolean,
39+
default() {
40+
return false;
41+
},
42+
},
3643
/** Whether or not this field should be presented for each supported language. */
3744
isMultilingual: Boolean,
3845
/** Whether or not a value for this field should be required. */

‎src/components/Form/fields/FieldOrcid.mdx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Primary, Controls, Meta, Stories} from '@storybook/blocks';
2+
3+
import * as FieldOrcidStories from './FieldOrcid.stories.js';
4+
5+
<Meta of={FieldOrcidStories} />{' '}
6+
7+
# FieldOrcid
8+
9+
## Usage
10+
11+
Field used for managing a linked user/author's ORCID
12+
13+
<Primary />
14+
<Controls />
15+
<Stories />

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

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import FieldOrcid from '@/components/Form/fields/FieldOrcid.vue';
2+
import FieldBaseMock from '../mocks/field-base';
3+
import FieldOrcidMock from '../mocks/field-orcid';
4+
import {http, HttpResponse} from 'msw';
5+
6+
export default {
7+
title: 'Forms/FieldOrcid',
8+
component: FieldOrcid,
9+
render: (args) => ({
10+
components: {FieldOrcid},
11+
setup() {
12+
function change(name, prop, newValue, localeKey) {
13+
if (localeKey) {
14+
args[prop][localeKey] = newValue;
15+
} else {
16+
args[prop] = newValue;
17+
}
18+
}
19+
20+
return {args, change};
21+
},
22+
template: `
23+
<FieldOrcid v-bind="args" @change="change" />
24+
`,
25+
}),
26+
parameters: {
27+
msw: {
28+
handlers: [
29+
http.post(
30+
'https://mock/index.php/publicknowledge/api/v1/orcid/requestAuthorVerification/1',
31+
async () => {
32+
return HttpResponse.json();
33+
},
34+
),
35+
http.post(
36+
'https://mock/index.php/publicknowledge/api/v1/orcid/deleteForAuthor/1',
37+
async () => {
38+
return HttpResponse.json();
39+
},
40+
),
41+
],
42+
},
43+
},
44+
};
45+
46+
export const Base = {
47+
args: {...FieldBaseMock, ...FieldOrcidMock},
48+
};
49+
50+
export const WithOrcid = {
51+
args: {
52+
...FieldBaseMock,
53+
...FieldOrcidMock,
54+
orcid: 'https://sandbox.orcid.org/0009-0009-3222-5777',
55+
isVerified: true,
56+
},
57+
};
58+
59+
export const WithUnverifiedOrcid = {
60+
args: {
61+
...FieldBaseMock,
62+
...FieldOrcidMock,
63+
orcid: 'https://sandbox.orcid.org/0009-0009-3222-5777',
64+
},
65+
};

‎src/components/Form/fields/FieldOrcid.vue

+251
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<template>
2+
<div class="pkpFormField pkpFormField--html">
3+
<div class="pkpFormField__heading">
4+
<span class="pkpFormFieldLabel">
5+
{{ label }}
6+
</span>
7+
<tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
8+
<span v-if="tooltip" class="-screenReader" v-html="tooltip" />
9+
<help-button
10+
v-if="helpTopic"
11+
:topic="helpTopic"
12+
:section="helpSection"
13+
:label="t('help.help')"
14+
/>
15+
</div>
16+
<div
17+
v-if="!isVerified && hasOrcid"
18+
class="pkpFormField__description"
19+
v-html="t('orcid.field.unverified.shouldRequest')"
20+
/>
21+
<div>
22+
<!-- When ORCID is present -->
23+
<Icon
24+
v-if="isVerified && hasOrcid"
25+
:class="'mr-2'"
26+
:icon="'orcid'"
27+
:inline="true"
28+
/>
29+
<div
30+
v-if="hasOrcid"
31+
class="pkpFormField__control pkpFormField__control--html"
32+
v-html="orcidDisplayValue"
33+
/>
34+
<pkp-button
35+
v-if="hasOrcid"
36+
class="pkpFormField__control--html__button"
37+
:is-warnable="true"
38+
:is-disabled="isButtonDisabled"
39+
@click="openDeleteDialog"
40+
>
41+
{{ t('common.delete') }}
42+
</pkp-button>
43+
<!-- When ORCID is absent -->
44+
<pkp-button
45+
v-if="!hasOrcid"
46+
:disabled="verificationRequested || isButtonDisabled"
47+
:icon="verificationRequested ? 'Complete' : null"
48+
@click="openSendAuthorEmailDialog"
49+
>
50+
{{
51+
verificationRequested
52+
? t('orcid.field.verification.requested')
53+
: t('orcid.field.verification.request')
54+
}}
55+
</pkp-button>
56+
</div>
57+
</div>
58+
</template>
59+
60+
<script>
61+
import FieldBase from '@/components/Form/fields/FieldBase.vue';
62+
import {useApiUrl} from '@/composables/useApiUrl';
63+
import {useFetch} from '@/composables/useFetch';
64+
import {useModal} from '@/composables/useModal';
65+
66+
export default {
67+
name: 'FieldOrcid',
68+
extends: FieldBase,
69+
props: {
70+
/** ORCID URL that has been verified */
71+
orcid: {
72+
type: String,
73+
required: true,
74+
default: '',
75+
},
76+
/** Author ID used in ORCID related actions */
77+
authorId: {
78+
type: Number,
79+
required: true,
80+
default: 0,
81+
},
82+
/** Whether ORCID ID has been verified and authenticated by the owner */
83+
isVerified: {
84+
type: Boolean,
85+
required: true,
86+
default: false,
87+
},
88+
},
89+
data() {
90+
return {
91+
/** Internal value used for displaying ORCID in component. Takes initial value from `orcid` prop */
92+
orcidValue: '',
93+
/** Whether an email requesting users verify their ORCID has been sent or not */
94+
verificationRequested: false,
95+
/** Whether request verification/delete ORCID button should be disabled or not */
96+
isButtonDisabled: false,
97+
};
98+
},
99+
computed: {
100+
/**
101+
* Helper to see if an ORCID value is present
102+
* @returns {boolean}
103+
*/
104+
hasOrcid: function () {
105+
return this.orcidValue.length !== 0;
106+
},
107+
/**
108+
* Wraps ORCID in <a> tag for HTML display
109+
* @returns {string}
110+
*/
111+
orcidDisplayValue: function () {
112+
if (this.hasOrcid) {
113+
return `<a target="_blank" class="underline" href="${this.orcidValue}">${this.orcidValue}</a>`;
114+
} else {
115+
return this.orcidValue;
116+
}
117+
},
118+
},
119+
created() {
120+
this.orcidValue = this.orcid;
121+
},
122+
methods: {
123+
/**
124+
* Triggers author email request via API
125+
*
126+
* @returns {Promise<void>}
127+
*/
128+
sendAuthorEmail: async function () {
129+
this.isButtonDisabled = true;
130+
131+
const {apiUrl} = useApiUrl(
132+
`orcid/requestAuthorVerification/${this.authorId}`,
133+
);
134+
135+
const {isSuccess, fetch} = useFetch(apiUrl, {
136+
method: 'POST',
137+
expectValidationError: true,
138+
});
139+
await fetch();
140+
141+
if (isSuccess) {
142+
this.verificationRequested = true;
143+
}
144+
145+
this.isButtonDisabled = false;
146+
},
147+
/**
148+
* Open confirmation dialog for requesting author ORCID verification
149+
*/
150+
openSendAuthorEmailDialog: function () {
151+
const {openDialog} = useModal();
152+
openDialog({
153+
name: 'sendAuthorEmail',
154+
title: this.t('orcid.field.authorEmailModal.title'),
155+
message: this.t('orcid.field.authorEmailModal.message'),
156+
actions: [
157+
{
158+
label: this.t('common.yes'),
159+
isPrimary: true,
160+
callback: async (close) => {
161+
await this.sendAuthorEmail();
162+
close();
163+
},
164+
},
165+
{
166+
label: this.t('common.no'),
167+
isWarnable: true,
168+
callback: (close) => {
169+
close();
170+
},
171+
},
172+
],
173+
close: () => {},
174+
});
175+
},
176+
/**
177+
* Trigger API request to remove ORCID and access tokens from author/user
178+
*
179+
* @returns {Promise<void>}
180+
*/
181+
deleteOrcid: async function () {
182+
this.isButtonDisabled = true;
183+
184+
const {apiUrl} = useApiUrl(`orcid/deleteForAuthor/${this.authorId}`);
185+
const {isSuccess, fetch} = useFetch(apiUrl, {
186+
method: 'POST',
187+
expectValidationError: true,
188+
});
189+
190+
await fetch();
191+
192+
if (isSuccess) {
193+
this.orcidValue = '';
194+
}
195+
196+
this.isButtonDisabled = false;
197+
},
198+
/**
199+
* Opens dialog to confirm deletion of ORCID from author/user
200+
*/
201+
openDeleteDialog: function () {
202+
const {openDialog} = useModal();
203+
openDialog({
204+
name: 'deleteOrcid',
205+
title: this.t('orcid.field.deleteOrcidModal.title'),
206+
message: this.t('orcid.field.deleteOrcidModal.message'),
207+
actions: [
208+
{
209+
label: this.t('common.yes'),
210+
isPrimary: true,
211+
callback: async (close) => {
212+
await this.deleteOrcid();
213+
close();
214+
},
215+
},
216+
{
217+
label: this.t('common.no'),
218+
isWarnable: true,
219+
callback: (close) => {
220+
close();
221+
},
222+
},
223+
],
224+
close: () => {},
225+
});
226+
},
227+
},
228+
};
229+
</script>
230+
231+
<style lang="less">
232+
@import '../../../styles/_import';
233+
234+
.pkpFormField__control--html {
235+
font-size: @font-sml;
236+
line-height: 1.8em;
237+
display: inline-block;
238+
239+
p:first-child {
240+
margin-top: 0;
241+
}
242+
243+
p:last-child {
244+
margin-bottom: 0;
245+
}
246+
}
247+
248+
.pkpFormField__control--html__button {
249+
margin-inline-start: 0.25rem;
250+
}
251+
</style>

‎src/components/Form/mocks/field-orcid.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
name: 'orcid',
3+
component: 'field-orcid',
4+
label: 'ORCID',
5+
orcid: '',
6+
authorId: 1,
7+
tooltip:
8+
'ORCID is an independent non-profit organization that provides a persistent identifier – an ORCID iD – that distinguishes you from other researchers and a mechanism for linking your research outputs and activities to your iD. ORCID is integrated into many systems used by publishers, funders, institutions, and other research-related services. Learn more at https://orcid.org.',
9+
};

0 commit comments

Comments
 (0)