Add storybook proxy to connect directly to real API

.storybook/middleware.js

@@ -0,0 +1,11 @@
+const {createProxyMiddleware} = require('http-proxy-middleware');
+
+module.exports = function expressMiddleware(router) {
+	router.use(
+		'/index.php', // This is the API prefix that you want to proxy
+		createProxyMiddleware({
+			target: 'http://localhost:7003', // The backend server you want to proxy to
+			changeOrigin: true,
+		}),
+	);
+};

package.json

@@ -58,6 +58,7 @@
     "eslint": "^8.48.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.17.0",
+    "http-proxy-middleware": "^3.0.0",
     "husky": "^8.0.3",
     "less": "^4.2.0",
     "lint-staged": "^14.0.1",

public/globals.js

@@ -25,7 +25,7 @@ window.pkp = {
 	 *
 	 */
 	context: {
-		apiBaseUrl: 'https://mock/index.php/publicknowledge/api/v1/',
+		apiBaseUrl: '/index.php/publicknowledge/api/v1/',
 		pageBaseUrl: 'https://mock/index.php/publicknowledge/',
 	},
 	/**
@@ -436,10 +436,13 @@ window.pkp = {
 		'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.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?',
-		'orcid.field.unverified.shouldRequest': 'This ORCID has not been verified. Please remove this unverified ORCID and request verification from the user/author directly.',
+		'orcid.field.deleteOrcidModal.message':
+			'Are you sure you want to remove this ORCID?',
+		'orcid.field.unverified.shouldRequest':
+			'This ORCID has not been verified. Please remove this unverified ORCID and request verification from the user/author directly.',
 		'publication.jats.autoCreatedMessage':
 			'This JATS file is generated automatically by the submission metadata',
 		'publication.jats.confirmDeleteFileButton': 'Delete JATS File',

src/pages/userInvitation/UserInvitationSearchFormStep.vue

@@ -70,7 +70,7 @@ const searchPhrase = computed(() => {
 
 async function searchUser() {
 	if (searchPhrase.value !== '') {
-		const {apiUrl} = useUrl('_user');
+		const {apiUrl} = useUrl('users');
 
 		const {data: userData, fetch} = useFetch(apiUrl, {
 			query: {searchPhrase: searchPhrase.value, status: 'all'},