front: Add script name prefix for running website in non-root

Signed-off-by: Stefan Weil <[email protected]>

front/src/api/index.js

@@ -1,6 +1,7 @@
 import axios from "axios";
+import { SCRIPT_NAME } from '../scriptname.js';
 
-axios.defaults.baseURL = "/api";
+axios.defaults.baseURL = SCRIPT_NAME +  '/api'
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 axios.defaults.withCredentials = true;

front/src/documentstasks/api.js

@@ -1,6 +1,7 @@
 import axios from "axios";
+import { SCRIPT_NAME } from '../scriptname.js';
 
-axios.defaults.baseURL = "/api";
+axios.defaults.baseURL = SCRIPT_NAME +  '/api'
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 axios.defaults.withCredentials = true;

front/src/editor/api.js

@@ -1,6 +1,7 @@
 import axios from "axios";
+import { SCRIPT_NAME } from '../scriptname.js';
 
-axios.defaults.baseURL = "/api";
+axios.defaults.baseURL = SCRIPT_NAME + '/api'
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 axios.defaults.withCredentials = true;

front/src/image_cards.js

@@ -7,6 +7,8 @@ Dropzone.autoDiscover = false;
 var g_dragged = null; // Note: chrome doesn't understand dataTransfer very well
 var lastSelected = null;
 
+import { SCRIPT_NAME } from './scriptname.js';
+
 function openWizard(proc) {
     var selected_num = partCard.getSelectedPks().length;
 
@@ -115,7 +117,7 @@ class partCard {
         this.progressBar.css("width", this.progress + "%");
         this.progressBar.text(this.progress + "%");
         this.updateWorkflowIcons();
-        var url = "/document/" + DOCUMENT_ID + "/part/" + this.pk + "/edit/";
+        var url = SCRIPT_NAME + "/document/" + DOCUMENT_ID + "/part/" + this.pk + "/edit/";
 
         // show avg confidence on the card
         var avgConfidenceElement = this.progressBar;
@@ -486,9 +488,9 @@ export function bootImageCards(
 ) {
     DOCUMENT_ID = documentId;
     API = {
-        document: "/api/documents/" + DOCUMENT_ID,
-        parts: "/api/documents/" + DOCUMENT_ID + "/parts/",
-        part: "/api/documents/" + DOCUMENT_ID + "/parts/{part_pk}/",
+        document: SCRIPT_NAME + "/api/documents/" + DOCUMENT_ID,
+        parts: SCRIPT_NAME + "/api/documents/" + DOCUMENT_ID + "/parts/",
+        part: SCRIPT_NAME + "/api/documents/" + DOCUMENT_ID + "/parts/{part_pk}/",
     };
     //************* Card ordering *************
     $("#cards-container").on("dragover", ".js-drop", function (ev) {

front/src/messages.js

@@ -1,5 +1,7 @@
 export var msgSocket;
 
+import { SCRIPT_NAME } from './scriptname.js';
+
 var alerts = {};
 export class Alert {
     constructor(id, message, level, links) {
@@ -61,7 +63,7 @@ export class Alert {
 export function bootWebsocket() {
     let scheme = location.protocol === "https:" ? "wss:" : "ws:";
     msgSocket = new ReconnectingWebSocket(
-        scheme + "//" + window.location.host + "/ws/notif/",
+        scheme + "//" + window.location.host + SCRIPT_NAME + "/ws/notif/",
     );
     msgSocket.maxReconnectAttempts = 3;
 

front/src/ontology_form.js

@@ -1,9 +1,11 @@
 "use strict";
 
+import { SCRIPT_NAME } from './scriptname.js';
+
 export function bootOntologyForm() {
     /*** Region/Line types ***/
     function pushType(type, name) {
-        let uri = "/api/types/" + type + "/";
+        let uri = SCRIPT_NAME + "/api/types/" + type + "/";
         return fetch(uri, {
             method: "post",
             credentials: "same-origin",

front/src/scriptname.js

@@ -0,0 +1,7 @@
+function scriptName() {
+    let prefix = document.currentScript.src.split('/').slice(3, -2).join('/');
+    return (prefix.length > 0 ? "/" + prefix : "");
+}
+
+//export const SCRIPT_NAME = scriptName();
+export const SCRIPT_NAME = '/escriptorium2';

front/src/stories/DocumentDashboard.stories.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { Server } from "mock-socket";
+import { SCRIPT_NAME } from '../scriptname.js';
 import DocumentDashboard from "../../vue/pages/Document/Document.vue";
 import GlobalNavigation from "../../vue/components/GlobalNavigation/GlobalNavigation.vue";
 import {
@@ -30,7 +31,7 @@ export default {
         // mock dropzone image upload api endpoint
         mockData: [
             {
-                url: "/api/documents/1/parts",
+                url: SCRIPT_NAME + "/api/documents/1/parts",
                 method: "POST",
                 status: 201,
             },
@@ -146,7 +147,7 @@ const Template = (args, { argTypes }) => ({
     setup() {
         // setup websocket mocks for tasks
         const scheme = location.protocol === "https:" ? "wss:" : "ws:";
-        const mockSocketURL = `${scheme}//${window.location.host}/ws/notif/`;
+        const mockSocketURL = `${scheme}//${window.location.host}${SCRIPT_NAME}/ws/notif/`;
         // wrap in try/catch in case reloaded with mock socket still open
         try {
             const mockServer = new Server(mockSocketURL);

front/vue/components/GlobalNavigation/GlobalNavigation.vue

@@ -2,7 +2,7 @@
     <nav class="escr-global-nav">
         <div class="escr-upper-navgroup">
             <a
-                href="/"
+                :href="baseUrl + '/'"
                 aria-label="eScriptorium"
             >
                 <EscrLogo />
@@ -15,7 +15,7 @@
             >
                 <button
                     v-if="isAuthenticated && !searchDisabled"
-                    href="/search/"
+                    :href="baseUrl + '/search/'"
                     aria-label="global search"
                     class="escr-global-search"
                     :class="{
@@ -32,12 +32,12 @@
                 <template #popper>
                     <ul class="escr-vertical-menu escr-tasks-menu">
                         <li>
-                            <a href="/search/">
+                            <a :href="baseUrl + '/search/'">
                                 <span>Search</span>
                             </a>
                         </li>
                         <li>
-                            <a href="/find-replace/">
+                            <a :href="baseUrl + '/find-replace/'">
                                 <span>Find and Replace</span>
                             </a>
                         </li>
@@ -46,7 +46,7 @@
             </VMenu>
             <a
                 v-if="isAuthenticated"
-                href="/projects/"
+                :href="baseUrl + '/projects/'"
                 aria-label="projects list"
                 :class="{
                     'escr-globalnav-icon': true,
@@ -58,7 +58,7 @@
             </a>
             <a
                 v-if="isAuthenticated"
-                href="/models/"
+                :href="baseUrl + '/models/'"
                 aria-label="models list"
                 :class="{
                     'escr-globalnav-icon': true,
@@ -90,12 +90,12 @@
                 <template #popper>
                     <ul class="escr-vertical-menu escr-tasks-menu">
                         <li>
-                            <a href="/documents/tasks/">
+                            <a :href="baseUrl + '/documents/tasks/'">
                                 <span>Task Monitoring</span>
                             </a>
                         </li>
                         <li>
-                            <a href="/quotas/">
+                            <a :href="baseUrl + '/quotas/'">
                                 <span>Task Usage</span>
                             </a>
                         </li>
@@ -126,35 +126,35 @@
                 <template #popper>
                     <ul class="escr-vertical-menu">
                         <li>
-                            <a href="/profile/">
+                            <a :href="baseUrl + '/profile/'">
                                 <span>Profile Settings</span>
                             </a>
                         </li>
                         <li>
-                            <a href="/password_change/">
+                            <a :href="baseUrl + '/password_change/'">
                                 <span>Change Password</span>
                             </a>
                         </li>
                         <li v-if="canInvite">
-                            <a href="/invite/">
+                            <a :href="baseUrl + '/invite/'">
                                 <span>Invite Users</span>
                             </a>
                         </li>
                         <li
                             v-if="isStaff"
                             class="new-section"
                         >
-                            <a href="/quotas/instance/">
+                            <a :href="baseUrl + '/quotas/instance/'">
                                 <span>Leaderboard</span>
                             </a>
                         </li>
                         <li v-if="isStaff">
-                            <a href="/admin/">
+                            <a :href="baseUrl + '/admin/'">
                                 <span>Site Administration</span>
                             </a>
                         </li>
                         <li class="new-section">
-                            <a href="/logout/">
+                            <a :href="baseUrl + '/logout/'">
                                 <span>Logout</span>
                             </a>
                         </li>
@@ -163,7 +163,7 @@
             </VMenu>
             <a
                 v-else
-                href="/login"
+                :href="baseUrl + '/login'"
                 aria-label="sign in"
                 class="escr-globalnav-icon"
             >
@@ -199,6 +199,7 @@ import TasksIcon from "../Icons/TasksIcon/TasksIcon.vue";
 import "../VerticalMenu/VerticalMenu.css";
 import "./GlobalNavigation.css";
 import { mapActions, mapState } from "vuex";
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 
 export default {
     name: "EscrGlobalNavigation",
@@ -233,6 +234,9 @@ export default {
             canInvite: (state) => state.user.canInvite,
             isStaff: (state) => state.user.isStaff,
         }),
+        baseUrl() {
+            return SCRIPT_NAME || '/';
+        },
         location() {
             // helper to access window object from within template
             return window.location;

front/vue/components/ImportModal/ImportImagesForm.vue

@@ -31,6 +31,7 @@ import { mapActions, mapState } from "vuex";
 import UploadIcon from "../Icons/UploadIcon/UploadIcon.vue";
 import ImageDropzone from "vue2-dropzone";
 import "vue2-dropzone/dist/vue2Dropzone.min.css";
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 
 export default {
     name: "EscrImportImagesForm",
@@ -62,7 +63,7 @@ export default {
          * Use the document ID from vuex store state to get the parts upload URL.
          */
         imageUploadURL() {
-            return `/api/documents/${this.documentId}/parts/`;
+            return SCRIPT_NAME + `/api/documents/${this.documentId}/parts/`;
         },
         getCsrfToken() {
             return document.cookie.match("(^|;)\\s*" + "csrftoken" + "\\s*=\\s*([^;]+)")?.pop()

front/vue/components/ModelsPanel/ModelsPanel.vue

@@ -36,7 +36,7 @@
                 <dd>{{ model.rights }}</dd>
                 <dt>Sharing</dt>
                 <dd v-if="model.can_share">
-                    <a :href="`/model/${model.pk}/rights/`">Share</a>
+                    <a :href="SCRIPT_NAME + `/model/${model.pk}/rights/`">Share</a>
                 </dd>
                 <dd v-else>
                     -

front/vue/pages/Document/Document.vue

@@ -345,6 +345,7 @@ import OntologyCard from "../../components/OntologyCard/OntologyCard.vue";
 import PencilIcon from "../../components/Icons/PencilIcon/PencilIcon.vue";
 import PeopleIcon from "../../components/Icons/PeopleIcon/PeopleIcon.vue";
 import QuickActionsPanel from "../../components/QuickActionsPanel/QuickActionsPanel.vue";
+import { SCRIPT_NAME } from "../../../src/scriptname.js";
 import SearchIcon from "../../components/Icons/SearchIcon/SearchIcon.vue";
 import SearchPanel from "../../components/SearchPanel/SearchPanel.vue";
 import SegmentModal from "../../components/SegmentModal/SegmentModal.vue";
@@ -484,13 +485,13 @@ export default {
                 docBreadcrumbs = [
                     {
                         title: this.projectName,
-                        href: `/project/${this.projectSlug}`
+                        href: SCRIPT_NAME + `/project/${this.projectSlug}`
                     },
                     { title: this.documentName }
                 ];
             }
             return [
-                { title: "My Projects", href: "/projects" },
+                { title: "My Projects", href: SCRIPT_NAME + "/projects" },
                 ...docBreadcrumbs,
             ];
         },
@@ -606,7 +607,7 @@ export default {
         // join document websocket room
         const msg = `{"type": "join-room", "object_cls": "document", "object_pk": ${this.id}}`;
         const scheme = location.protocol === "https:" ? "wss:" : "ws:";
-        const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}/ws/notif/`);
+	    const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}${SCRIPT_NAME}/ws/notif/`);
         msgSocket.maxReconnectAttempts = 3;
         msgSocket.addEventListener("open", function() {
             msgSocket.send(msg);
@@ -663,13 +664,13 @@ export default {
         }),
         navigateToImages() {
             if (this.id) {
-                window.location = `/document/${this.id}/images`;
+                window.location = SCRIPT_NAME + `/document/${this.id}/images`;
             } else {
                 this.addError({ message: "Error navigating to the images page." });
             }
         },
         navigateToTasks() {
-            window.location = "/quotas/";
+            window.location = SCRIPT_NAME + "/quotas/";
         },
         selectTranscription(e) {
             this.changeSelectedTranscription(parseInt(e.target.value, 10));

front/vue/pages/Page/Page.vue

@@ -21,6 +21,7 @@ import { mapActions } from "vuex";
 import Alerts from "../../components/Toast/ToastGroup.vue";
 import EscrBreadcrumbs from "../../components/Breadcrumbs/Breadcrumbs.vue";
 import EscrSidebar from "../../components/Sidebar/Sidebar.vue";
+import { SCRIPT_NAME } from "../../../src/scriptname.js";
 
 export default {
     name: "EscrPage",
@@ -62,7 +63,7 @@ export default {
     created() {
         // intercept all websocket messages
         const scheme = location.protocol === "https:" ? "wss:" : "ws:";
-        const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}/ws/notif/`);
+	    const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}${SCRIPT_NAME}/ws/notif/`);
         msgSocket.maxReconnectAttempts = 3;
         msgSocket.addEventListener("message", this.websocketListener);
     },

front/vue/pages/Project/Project.vue

@@ -178,6 +178,7 @@ import ImagesIcon from "../../components/Icons/ImagesIcon/ImagesIcon.vue";
 import PencilIcon from "../../components/Icons/PencilIcon/PencilIcon.vue";
 import PeopleIcon from "../../components/Icons/PeopleIcon/PeopleIcon.vue";
 import PlusIcon from "../../components/Icons/PlusIcon/PlusIcon.vue";
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 import SearchIcon from "../../components/Icons/SearchIcon/SearchIcon.vue";
 import SearchPanel from "../../components/SearchPanel/SearchPanel.vue";
 import ShareModal from "../../components/SharePanel/ShareModal.vue";
@@ -257,7 +258,7 @@ export default {
          */
         breadcrumbs() {
             return [
-                { title: "My Projects", href: "/projects" },
+                { title: "My Projects", href: SCRIPT_NAME + "/projects" },
                 { title: this.projectName || "Loading..." }
             ];
         },
@@ -395,7 +396,7 @@ export default {
         },
         navigateToImages(item) {
             if (item?.pk) {
-                window.location = `/document/${item.pk}/images`;
+                window.location = SCRIPT_NAME + `/document/${item.pk}/images`;
             } else {
                 this.addError({ message: "Error navigating to the images page." });
             }