make webui work with non-root context path (#1290)

bundles/org.openhab.ui.habpanel/web/app/services/oh3storage.service.js

@@ -26,9 +26,9 @@
             } else {
                 $http({
                     method: 'POST',
-                    url: '/rest/auth/token',
-                    data: 'grant_type=refresh_token&client_id=' + window.location.origin +
-                        '&redirect_uri=' + window.location.origin + '&refresh_token=' + refreshToken,
+                    url: document.baseURI + '/rest/auth/token',
+                    data: 'grant_type=refresh_token&client_id=' + document.baseURI +
+                        '&redirect_uri=' + document.baseURI + '&refresh_token=' + refreshToken,
                     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                 })
                 .then(function (data) {

bundles/org.openhab.ui/web/src/components/app.vue

@@ -280,6 +280,12 @@ export default {
       theme = 'aurora'
     }
 
+    let contextRoot = '/'
+    if (window.document.baseURI) {
+      contextRoot = new URL(window.document.baseURI).pathname
+      if (contextRoot.slice(-1) === '/') contextRoot = contextRoot.slice(0, -1)
+    }
+
     return {
       init: false,
       ready: false,
@@ -307,6 +313,7 @@ export default {
           iosSwipeBack: !this.$device.ios || this.$device.cordova,
           auroraSwipeBack: !this.$device.ios || this.$device.cordova,
           pushState: true, // !this.$device.cordova
+          pushStateRoot: contextRoot,
           pushStateSeparator: ''
         },
         // Enable panel left visibility breakpoint
@@ -376,7 +383,7 @@ export default {
       return this.ready && this.user && this.user.roles && this.user.roles.indexOf('administrator') >= 0
     },
     serverDisplayUrl () {
-      return (this.serverUrl || window.location.origin)
+      return (this.serverUrl || window.document.baseURI || window.location.origin)
     }
   },
   methods: {
@@ -510,7 +517,7 @@ export default {
       this.cleanSession().then(() => {
         this.loggedIn = false
         this.$f7.views.main.router.navigate('/', { animate: false, clearPreviousHistory: true })
-        window.location = window.location.origin
+        window.location = window.document.baseURI
         if (this.$device.cordova) {
           this.loginScreenOpened = true
         }

bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js

@@ -87,7 +87,9 @@ export default {
     if (this.context && this.context.component.config && this.context.component.config.stylesheet) {
       this.cssUid = 'scoped-' + this.$f7.utils.id()
 
-      this.$el.classList.add(this.cssUid)
+      var el = this.$el
+      if (!el.classList) el = el.parentElement
+      el.classList.add(this.cssUid)
 
       let style = document.createElement('style')
       style.id = this.cssUid

bundles/org.openhab.ui/web/src/index.html

@@ -26,6 +26,26 @@
   <link rel="icon" href="/res/icons/128x128.png" type="image/png" sizes="128x128" crossorigin="use-credentials">
   <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
   <% } %>
+  <script type="text/javascript">
+      function getCookie(cookieName) {
+        var name = cookieName + "=";
+        var decodedCookies = decodeURIComponent(document.cookie);
+        var cookies = decodedCookies.split(';');
+        for(var i = 0; i < cookies.length; i++) {
+          var cookie = cookies[i].trim();
+          if (cookie.indexOf(name) == 0) {
+            return cookie.substring(name.length, cookie.length);
+          }
+        }
+        return null;
+      }
+      var OPENHAB_CONTEXT_PATH = getCookie('X-OPENHAB-CONTEXT-PATH') || '';
+      var baseURI = document.location.protocol + '//' + document.location.hostname +
+            (document.location.port ? ':' + document.location.port : '') + OPENHAB_CONTEXT_PATH;
+      var base = document.createElement('base');
+      base.href = baseURI;
+      document.getElementsByTagName('head')[0].appendChild(base);
+  </script>
   <!-- built styles file will be auto injected -->
 </head>
 <body>

bundles/org.openhab.ui/web/src/js/openhab/api.js

@@ -9,6 +9,14 @@ function wrapPromise (f7promise) {
   })
 }
 
+function basedURI (uri) {
+  if (uri.charAt(0) === '/') {
+    if (window.document.baseURI.slice(-1) === '/') {
+      return window.document.baseURI.slice(0, -1) + uri
+    } else return window.document.baseURI + uri
+  } else return uri
+}
+
 Framework7.request.setup({
   xhrFields: { withCredentials: true },
   beforeSend (xhr) {
@@ -33,19 +41,19 @@ export default {
   getPlain (uri, data, contentType) {
     return wrapPromise(Framework7.request.promise({
       method: 'GET',
-      url: uri,
+      url: basedURI(uri),
       data,
       processData: false,
       contentType: contentType || 'text/plain'
     }))
   },
   post (uri, data, dataType) {
-    return wrapPromise(Framework7.request.promise.postJSON(uri, data, dataType))
+    return wrapPromise(Framework7.request.promise.postJSON(basedURI(uri), data, dataType))
   },
   postPlain (uri, data, dataType, contentType) {
     return wrapPromise(Framework7.request.promise({
       method: 'POST',
-      url: uri,
+      url: basedURI(uri),
       data,
       processData: false,
       contentType: contentType || 'text/plain',
@@ -55,7 +63,7 @@ export default {
   put (uri, data) {
     return wrapPromise(Framework7.request.promise({
       method: 'PUT',
-      url: uri,
+      url: basedURI(uri),
       data: JSON.stringify(data),
       processData: false,
       // dataType: 'json',
@@ -65,7 +73,7 @@ export default {
   putPlain (uri, data, dataType, contentType) {
     return wrapPromise(Framework7.request.promise({
       method: 'PUT',
-      url: uri,
+      url: basedURI(uri),
       data,
       processData: false,
       // dataType: 'json',
@@ -76,13 +84,13 @@ export default {
   head (uri) {
     return wrapPromise(Framework7.request.promise({
       method: 'HEAD',
-      url: uri
+      url: basedURI(uri)
     }))
   },
   delete (uri, data) {
     return wrapPromise(Framework7.request.promise({
       method: 'DELETE',
-      url: uri,
+      url: basedURI(uri),
       processData: false,
       // dataType: 'json',
       contentType: 'application/json'

bundles/org.openhab.ui/web/src/js/openhab/sse.js

@@ -1,6 +1,14 @@
 import { EventSourcePolyfill, NativeEventSource } from 'event-source-polyfill'
 import { getAccessToken, getTokenInCustomHeader, getBasicCredentials, getRequireToken } from './auth'
 
+function basedURI (uri) {
+  if (uri.charAt(0) === '/') {
+    if (window.document.baseURI.slice(-1) === '/') {
+      return window.document.baseURI.slice(0, -1) + uri
+    } else return window.document.baseURI + uri
+  } else return uri
+}
+
 let openSSEClients = []
 
 function newSSEConnection (path, readyCallback, messageCallback, errorCallback) {
@@ -53,10 +61,10 @@ function newSSEConnection (path, readyCallback, messageCallback, errorCallback)
 
 export default {
   connect (path, topics, messageCallback, errorCallback) {
-    return newSSEConnection(path, null, messageCallback, errorCallback)
+    return newSSEConnection(basedURI(path), null, messageCallback, errorCallback)
   },
   connectStateTracker (path, readyCallback, updateCallback, errorCallback) {
-    return newSSEConnection(path, readyCallback, updateCallback, errorCallback)
+    return newSSEConnection(basedURI(path), readyCallback, updateCallback, errorCallback)
   },
   close (client, callback) {
     if (!client) return

bundles/org.openhab.ui/web/src/pages/profile.vue

@@ -216,7 +216,7 @@ export default {
       this.cleanSession().then(() => {
         this.loggedIn = false
         this.$f7.views.main.router.navigate('/', { animate: false, clearPreviousHistory: true })
-        window.location = window.location.origin
+        window.location = window.document.baseURI
         if (this.$device.cordova) {
           this.loginScreenOpened = true
         }