pkp · taslangraham · Jan 17, 2025
diff --git a/src/components/Form/fields/FieldOrcid.stories.js b/src/components/Form/fields/FieldOrcid.stories.js
@@ -52,6 +52,7 @@ export const WithOrcid = {
 		...FieldBaseMock,
 		...FieldOrcidMock,
 		orcid: 'https://sandbox.orcid.org/0009-0009-3222-5777',
+		orcidDisplayValue: 'https://sandbox.orcid.org/0009-0009-3222-5777',
 		isVerified: true,
 	},
 };
@@ -61,5 +62,7 @@ export const WithUnverifiedOrcid = {
 		...FieldBaseMock,
 		...FieldOrcidMock,
 		orcid: 'https://sandbox.orcid.org/0009-0009-3222-5777',
+		orcidDisplayValue:
+			'https://sandbox.orcid.org/0009-0009-3222-5777 (unauthenticated)',
 	},
 };
diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
@@ -27,10 +27,18 @@
 				class="h-6 w-6"
 				:inline="true"
 			/>
+
+			<Icon
+				v-if="!isVerified && hasOrcid"
+				:class="'mr-2'"
+				icon="OrcidUnauthenticated"
+				class="w-6"
+				:inline="true"
+			/>
 			<div
 				v-if="hasOrcid"
 				class="pkpFormField__control pkpFormField__control--html"
-				v-html="orcidDisplayValue"
+				v-html="orcidDisplayText"
 			/>
 			<PkpButton
 				v-if="hasOrcid"
@@ -107,6 +115,11 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		orcidDisplayValue: {
+			type: String,
+			required: true,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -129,9 +142,9 @@ export default {
 		 * Wraps ORCID in <a> tag for HTML display
 		 * @returns {string}
 		 */
-		orcidDisplayValue: function () {
+		orcidDisplayText: function () {
 			if (this.hasOrcid) {
-				return `<a target="_blank" class="underline" href="${this.orcidValue}">${this.orcidValue}</a>`;
+				return `<a target="_blank" class="underline" href="${this.orcidValue}">${this.orcidDisplayValue}</a>`;
 			} else {
 				return this.orcidValue;
 			}

diff --git a/src/components/Form/mocks/field-orcid.js b/src/components/Form/mocks/field-orcid.js
@@ -3,6 +3,7 @@ export default {
 	component: 'field-orcid',
 	label: 'ORCID',
 	orcid: '',
+	orcidDisplayValue: '',
 	authorId: 1,
 	tooltip:
 		'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.',

diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -137,6 +137,7 @@ export const IconGallery = {
 			'NotVisible',
 			'OpenReview',
 			'Orcid',
+			'OrcidUnauthenticated',
 			'Overdue',
 			'Paste',
 			'Payment',

diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
@@ -85,6 +85,7 @@ import Notifications from './icons/Notifications.vue';
 import NotVisible from './icons/NotVisible.vue';
 import OpenReview from './icons/OpenReview.vue';
 import Orcid from './icons/Orcid.vue';
+import OrcidUnauthenticated from './icons/OrcidUnauthenticated.vue';
 import Overdue from './icons/Overdue.vue';
 import Paste from './icons/Paste.vue';
 import Payment from './icons/Payment.vue';
@@ -228,6 +229,7 @@ const svgIcons = {
 	User,
 	View,
 	Workflow,
+	OrcidUnauthenticated,
 };
 
 const props = defineProps({

diff --git a/src/components/Icon/icons/OrcidUnauthenticated.vue b/src/components/Icon/icons/OrcidUnauthenticated.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		class="mr-2 inline-block w-6 align-middle"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M29.474 16c0 7.442-6.032 13.474-13.474 13.474S2.526 23.442 2.526 16 8.558 2.526 16 2.526 29.474 8.558 29.474 16Z"
+			fill="#fff"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16ZM16 29.474c7.442 0 13.474-6.032 13.474-13.474S23.442 2.526 16 2.526 2.526 8.558 2.526 16 8.558 29.474 16 29.474Z"
+			fill="#7FAA26"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M18.22 10.973h-4.547v11.6h4.569c3.8 0 6.133-2.82 6.133-5.8 0-1.365-.469-2.815-1.478-3.925-1.013-1.115-2.557-1.875-4.676-1.875Zm-.177 9.732h-2.347v-7.864h2.264c1.521 0 2.603.46 3.304 1.167.703.709 1.046 1.688 1.046 2.765 0 .654-.2 1.641-.83 2.46-.621.808-1.677 1.473-3.437 1.473Zm-.083-8.073c3.13 0 4.558 1.898 4.558 4.141 0-2.243-1.429-4.141-4.558-4.141h-2.472 2.472Zm6.205 4.017.001.124c0 2.869-2.242 5.591-5.924 5.591h-4.36V11.182v11.182h4.36c3.682 0 5.924-2.722 5.924-5.591l-.001-.124ZM9.5 11.005v11.588h2.024V11.005H9.5Zm1.815.208v11.172-11.172H9.71h1.606ZM10.512 10.15c.7 0 1.262-.575 1.262-1.263 0-.687-.561-1.262-1.262-1.262-.7 0-1.262.563-1.262 1.262 0 .688.561 1.262 1.262 1.262Zm.614-.408a1.044 1.044 0 0 0 0 0Z"
+			fill="#7FAA26"
+		/>
+	</svg>
+</template>
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -392,6 +392,7 @@ export default {
 						if (field.name === 'orcid') {
 							field.orcid = author['orcid'] ?? '';
 							field.authorId = author['id'];
+							field.orcidDisplayValue = author['orcidDisplayValue'];
 							field.isVerified = author['orcidIsVerified'] ?? false;
 							field.orcidVerificationRequested =
 								author['orcidVerificationRequested'];

diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -45,8 +45,12 @@
 							class="listPanel__item--reviewer__orcid"
 							target="_blank"
 						>
-							<Icon icon="Orcid" :inline="true" class="me-1 h-5 w-5" />
-							{{ item.orcid }}
+							<Icon
+								:icon="item.orcidIsVerified ? 'Orcid' : 'OrcidUnauthenticated'"
+								:inline="true"
+								class="me-1 w-6"
+							/>
+							{{ item.orcidDisplayValue }}
 						</a>
 					</div>
 				</div>

diff --git a/src/components/ListPanel/users/SelectReviewerListPanel.stories.js b/src/components/ListPanel/users/SelectReviewerListPanel.stories.js
@@ -34,6 +34,7 @@ const items = [
 		dateLastReviewAssignment: '2022-12-31 11:22:42',
 		reviewerRating: 5,
 		orcid: 'http://orcid.org/0000-0002-1825-0097',
+		orcidDisplayValue: 'http://orcid.org/0000-0002-1825-0097',
 		biography: {
 			en: '<p>Professor Aisla McCrae is a senior research fellow in the Publishing Studies Department in the School of Publishing at the University of Manitoba. She is the deputy chair of the Manitoba Publishing Institute and the author of <em>Publishing Now and Forever: Recent Developments in Archival Permanence</em>.</p>',
 		},

diff --git a/src/mocks/authors.js b/src/mocks/authors.js
@@ -47,6 +47,7 @@ export const lipsum = {
 	id: 21,
 	includeInBrowse: true,
 	orcid: 'https://orcid.org/0000-0001-5756-5406',
+	orcidDisplayValue: 'https://orcid.org/0000-0001-5756-5406',
 	preferredPublicName: {
 		en: 'Dr. L. P. Ipsum',
 		fr_CA: 'Dr F. L. P. Ipsum',